package.json

 {
   "name": "ui",
-  "version": "1.27.1",
+  "version": "1.28.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/banner/Maintenance.vue

@@ -6,15 +6,18 @@
     variant="warning"
     @dismissed="saveVisibility"
   >
-    <i18n :path="messagePath" tag="p">
-      <template #link>
-        <a
-          :href="maintenance.url ? maintenance.url : undefined"
-          target="_blank"
-          >{{ $t("banner.maintenance.moreInformation") }}</a
-        >
-      </template>
-    </i18n>
+    <p>
+      <span class="font-weight-bold">
+        {{ `${messageType}${$t("banner.separator")}`}}
+      </span>
+      {{ messageBody }}
+      <span v-if="maintenance.url">
+        {{ $t("banner.maintenance.linkText") }}
+        <a :href="maintenance.url" target="_blank"
+          >{{ $t("banner.maintenance.moreInformation") }}
+        </a>
+      </span>
+    </p>
   </b-alert>
 </template>
 
@@ -30,12 +33,6 @@ export default defineComponent({
     return { mainStore };
   },
 
-  data() {
-    return {
-      messagePath: "",
-    };
-  },
-
   computed: {
     maintenance(): MaintenanceReturnObject {
       return this.mainStore.coscine.banner.maintenance;
@@ -48,41 +45,69 @@ export default defineComponent({
       );
     },
     show(): boolean {
-      return this.visibility && this.maintenance.type ? true : false;
+      return this.visibility && this.maintenance.type && this.maintenance.body
+        ? true
+        : false;
     },
+    locale(): string {
+      return this.$root.$i18n.locale;
     },
+    messageBody(): string | undefined {
+      const notificationText = this.createNotificationText()?.trim();
+      // empty texts
+      if (!notificationText) {
+        return this.$t("banner.maintenance.notificationDefaultText").toString();
+      }
 
-  watch: {
-    maintenance() {
-      this.messagePath = this.createNotificationText();
-    },
-  },
+      const languageSpecificNotificationTexts = notificationText.split("//");
+      if (languageSpecificNotificationTexts?.length === 1) {
+        return languageSpecificNotificationTexts[0];
+      }
 
-  methods: {
-    saveVisibility() {
-      this.mainStore.coscine.banner.maintenanceVisibility =
-        this.mainStore.coscine.banner.dateString;
+      return this.$root.$i18n.locale === "de"
+        ? languageSpecificNotificationTexts[1]
+        : languageSpecificNotificationTexts[0];
     },
-    createNotificationText(): string {
-      if (this.maintenance && this.maintenance.type) {
+    messageType(): string {
+      if (this.maintenance.type) {
         switch (this.maintenance.type) {
           case "Eingriff":
-            return "banner.maintenance.notificationDeployment";
+            return this.$t("banner.maintenance.type.intervention").toString();
           case "Störung":
-            return "banner.maintenance.notificationMaintenance";
+            return this.$t("banner.maintenance.type.disturbance").toString();
           case "Teilstörung":
-            return "banner.maintenance.notificationPartiaMulfunction";
+            return this.$t(
+              "banner.maintenance.type.partialDisturbance"
+            ).toString();
           case "Unterbrechung":
-            return "banner.maintenance.notificationInteruption";
+            return this.$t("banner.maintenance.type.interruption").toString();
           case "eingeschränkt betriebsfähig":
-            return "banner.maintenance.notificationLimitedOperability";
+            return this.$t(
+              "banner.maintenance.type.limitedOperation"
+            ).toString();
           case "Wartung":
-            return "banner.maintenance.notificationMaintenance";
+            return this.$t("banner.maintenance.type.maintenance").toString();
           case "Teilwartung":
-            return "banner.maintenance.notificationPartialMaintenance";
+            return this.$t(
+              "banner.maintenance.type.partialMaintenance"
+            ).toString();
           default:
-            return "banner.maintenance.notificationDefaultText";
+            return this.$t("banner.maintenance.type.maintenance").toString();
+        }
+      } else {
+        return this.$t("banner.maintenance.type.maintenance").toString();
       }
+    },
+  },
+
+  methods: {
+    saveVisibility() {
+      this.mainStore.coscine.banner.maintenanceVisibility =
+        this.mainStore.coscine.banner.dateString;
+    },
+    createNotificationText(): string | undefined {
+      if (this.maintenance && this.maintenance.body) {
+        return this.maintenance.body;
       } else {
         return "";
       }

src/components/elements/SidebarMenu.vue

@@ -51,7 +51,7 @@ import type {
 
 Vue.use(VueSidebarMenu);
 
-// TODO: Waiting for role implementation (is owner for showing e.g. settings)
+// TODO: Waiting for role implementation (is owner for showing e.g. configuration & metadata)
 
 export default defineComponent({
   setup() {
@@ -208,15 +208,15 @@ export default defineComponent({
             icon: "bi bi-gear",
             child: [
               {
-                title: this.$t("sidebar.projectSettings").toString(),
+                title: this.$t("sidebar.configurationMetadata").toString(),
                 href: {
-                  name: "project-settings",
+                  name: "project-config-metadata",
                   params: { slug: this.project.slug },
                 },
                 icon: "bi bi-pencil",
               },
               {
-                title: this.$t("sidebar.manageUsers").toString(),
+                title: this.$t("sidebar.users").toString(),
                 href: {
                   name: "project-members",
                   params: { slug: this.project.slug },
@@ -224,7 +224,7 @@ export default defineComponent({
                 icon: "bi bi-people",
               },
               {
-                title: this.$t("sidebar.manageQuota").toString(),
+                title: this.$t("sidebar.quota").toString(),
                 href: {
                   name: "project-quota",
                   params: { slug: this.project.slug },

src/data/mockup/testResource.ts

@@ -64,13 +64,13 @@ export const getTestResource: () => Promise<VisitedResourceObject> =
       rawApplicationProfile: ap,
       resourceName: "TestResource",
       resourceTypeOption: { id: "5234" },
-      storedColumns: "",
+      storedColumns: null,
       type: {
         displayName: testResourceType.displayName,
         id: testResourceType.id,
       },
       usageRights: "",
-      usedQuota: null,
+      quota: null,
       visibility: { id: "1234", displayName: "Project Members" },
     };
     return resourceObject;
@@ -82,6 +82,7 @@ export const getTestResourceState: () => Promise<ResourceState> = async () => {
     allResources: [testResource],
     classes: {},
     currentId: "eeb8d803-46a1-49ba-a47c-81cd4f49cd65",
+    enabledResourceTypes: [testResourceType],
     resourceTypes: [testResourceType],
     visitedResources: {
       "eeb8d803-46a1-49ba-a47c-81cd4f49cd65": testResource,

src/i18n/de.ts

@@ -39,9 +39,9 @@ export default {
 
     archived: "Archiviert",
 
-    projectSettings: "Projekteinstellungen",
-    manageUsers: "Benutzerverwaltung",
-    manageQuota: "Quota verwalten",
+    configurationMetadata: "Konfiguration & Metadaten",
+    users: "Mitglieder",
+    quota: "Quota",
   } as VueI18n.LocaleMessageObject,
 
   buttons: {
@@ -153,9 +153,9 @@ export default {
     project: {
       page: "{projectName}",
       create: "Projekt erstellen",
-      settings: "Projekt bearbeiten",
-      quota: "Quota Management",
-      members: "Benutzerverwaltung",
+      configMetadata: "Projektkonfiguration & -metadaten",
+      quota: "Projektquota",
+      members: "Projektmitglieder",
     },
     resource: {
       page: "{resourceName}",
@@ -252,24 +252,21 @@ export default {
               Verbesserungsvorschläge können Sie gerne an [{link}] senden.`,
     },
     maintenance: {
+      type: {
+        intervention: "Eingriff",
+        disturbance: "Störung",
+        partialDisturbance: "Teilstörung",
+        interruption: "Unterbrechung",
+        limitedOperation: "Eingeschränkt betriebsfähig",
+        maintenance: "Wartung",
+        partialMaintenance: "Teilwartung",
+      },
       notificationDefaultText:
-        "Derzeit kann es unter Umständen zu Einschränkungen bei der Nutzung von Coscine kommen. Details finden Sie unter [{link}].",
-      notificationDeployment:
         "Derzeit kann es unter Umständen zu Einschränkungen bei der Nutzung von Coscine kommen. ",
-      notificationMalfunction:
-        "Durch eine Störung ist Coscine derzeit nicht verfügbar. Details finden Sie unter [{link}].",
-      notificationPartiaMulfunction:
-        "Durch eine Teilstörung ist Coscine derzeit nicht verfügbar. Details finden Sie unter [{link}].",
-      notificationInteruption:
-        "Durch die Unterbrechung eines Dienstes ist Coscine derzeit nicht verfügbar. Details finden Sie unter [{link}].",
-      notificationLimitedOperability:
-        "Coscine ist derzeit nur eingeschränkt verfügbar.  Details finden Sie unter [{link}].",
-      notificationMaintenance:
-        "Coscine wird derzeit gewartet. Es können Einschränkungen bei der Nutzung auftreten. Details finden Sie unter [{link}].",
-      notificationPartialMaintenance:
-        "Coscine wird derzeit gewartet. Es können Einschränkungen bei der Nutzung auftreten. Details finden Sie unter [{link}].",
-      moreInformation: "weitere Informationen",
+      linkText: "Details finden Sie ",
+      moreInformation: "hier",
     },
+    separator: ": ",
   },
 
   email: {

src/i18n/en.ts

@@ -37,9 +37,9 @@ export default {
     subProject: "Sub-Project | Sub-Projects",
     settings: "Settings",
 
-    projectSettings: "Project Settings",
-    manageUsers: "Manage Users",
-    manageQuota: "Manage Quota",
+    configurationMetadata: "Configuration & Metadata",
+    users: "Members",
+    quota: "Quota",
   } as VueI18n.LocaleMessageObject,
 
   buttons: {
@@ -151,9 +151,9 @@ export default {
     project: {
       page: "{projectName}",
       create: "Create Project",
-      settings: "Project Settings",
-      quota: "Quota Management",
-      members: "User Management",
+      configMetadata: "Project Configuration & Metadata",
+      quota: "Project Quota",
+      members: "Project Members",
     },
     resource: {
       page: "{resourceName}",
@@ -249,24 +249,21 @@ export default {
                pilot program. If you have feedback you are welcome to send it to [{link}].`,
     },
     maintenance: {
+      type: {
+        intervention: "Intervention",
+        disturbance: "Disturbance",
+        partialDisturbance: "Partial disturbance",
+        interruption: "Interruption",
+        limitedOperation: "Limited operation",
+        maintenance: "Maintenance",
+        partialMaintenance: "Partial maintenance",
+      },
       notificationDefaultText:
-        "Currently, you may experience restrictions when using Coscine. Details can be found at [{link}].",
-      notificationDeployment:
         "Currently, you may experience restrictions when using Coscine. ",
-      notificationMalfunction:
-        "Due to a malfunction Coscine is currently unavailable. Details can be found at [{link}].",
-      notificationPartiaMulfunction:
-        "Due to a partial malfunction Coscine is currently unavailable. Details can be found at [{link}].",
-      notificationInteruption:
-        "Due to a interuption of a service Coscine is currently unavailable. Details can be found at [{link}].",
-      notificationLimitedOperability:
-        "Coscine is currently offering limited operability. Details can be found at [{link}].",
-      notificationMaintenance:
-        "Coscine is currently undergoing maintenance. You may experience restrictions in its use. Details can be found at [{link}].",
-      notificationPartialMaintenance:
-        "Coscine is currently undergoing maintenance. You may experience restrictions in its use. Details can be found at [{link}].",
-      moreInformation: "more information",
+      linkText: "Details can be found ",
+      moreInformation: "here",
     },
+    separator: ": ",
   },
 
   email: {

src/modules/project/i18n/de.ts

@@ -27,7 +27,7 @@ export default {
 
     // Members.vue
     members: {
-      title: "Benutzerverwaltung",
+      title: "Projektmitglieder",
       membersTabTitle: "Projektmitglieder",
       externalUsersTabTitle: "Eingeladene Benutzer",
       pendingStatus: "Wartet",
@@ -115,7 +115,7 @@ export default {
 
     // Quota.vue
     quota: {
-      headline: "Quota Management",
+      headline: "Projektquota",
       resources: "Ressourcen",
       rangeText: "{allocated} GB zugeteilt",
       gb: "{number} GB",
@@ -170,9 +170,9 @@ export default {
         "Beim Ändern der Quota ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut. Wenn der Fehler weiter auftritt, wenden Sie sich bitte an Ihre Organization.",
     },
 
-    // Settings.vue
-    settings: {
-      // page title is fetched from `sidebar.projectSettings`
+    // ConfigurationMetadata.vue
+    configMetadata: {
+      headline: "Projektkonfiguration & -metadaten",
 
       modal: {
         deleteModalHeadline: "Projekt wirklich entfernen?",
@@ -210,9 +210,6 @@ export default {
       projectSlugLabel:
         "@:(form.project.projectSlug)@:(form.project.labelSymbol)",
 
-      projectId: "Projekt Id",
-      projectIdLabel: "@:(form.project.projectId)@:(form.project.labelSymbol)",
-
       projectPersistentId: "Persistent Identifier (PID)",
       projectPersistentIdLabel:
         "@:(form.project.projectPersistentId)@:(form.project.labelSymbol)",

src/modules/project/i18n/en.ts

@@ -25,7 +25,7 @@ export default {
 
     // Members.vue
     members: {
-      title: "User Management",
+      title: "Project Members",
       membersTabTitle: "Project Members",
       externalUsersTabTitle: "Invited Users",
       pendingStatus: "Pending",
@@ -110,7 +110,7 @@ export default {
 
     // Quota.vue
     quota: {
-      headline: "Quota Management",
+      headline: "Project Quota",
       resources: "Resources",
       rangeText: "{allocated} GB allocated",
       gb: "{number} GB",
@@ -166,9 +166,9 @@ export default {
         "An error occurred while extending the quota. Please try again. If the error persists, contact your organization.",
     },
 
-    // Settings.vue
-    settings: {
-      // page title is fetched from `sidebar.projectSettings`
+    // ConfigurationMetadata.vue
+    configMetadata: {
+      headline: "Project Configuration & Metadata",
 
       modal: {
         deleteModalHeadline: "Do you really want to delete this project?",
@@ -205,9 +205,6 @@ export default {
       projectSlugLabel:
         "@:(form.project.projectSlug)@:(form.project.labelSymbol)",
 
-      projectId: "Project Id",
-      projectIdLabel: "@:(form.project.projectId)@:(form.project.labelSymbol)",
-
       projectPersistentId: "Persistent Identifier (PID)",
       projectPersistentIdLabel:
         "@:(form.project.projectPersistentId)@:(form.project.labelSymbol)",

src/modules/project/pages/Settings.spec.ts → src/modules/project/pages/ConfigurationMetadata.spec.ts

@@ -16,7 +16,7 @@ import { PiniaVuePlugin } from "pinia";
 /* Additional Dependencies */
 
 /* Tested Component */
-import Settings from "./Settings.vue";
+import ConfigurationMetadata from "./ConfigurationMetadata.vue";
 import type Vue from "vue";
 
 /* Import of relevant mockup data */
@@ -27,7 +27,7 @@ import { testUserState } from "@/data/mockup/testUser";
 const localVue = createLocalVue();
 localVue.use(PiniaVuePlugin);
 
-describe("Settings.vue", () => {
+describe("ConfigurationMetadata.vue", () => {
   /* Describe Pre-initialization steps */
 
   /* Description of the test */
@@ -35,7 +35,7 @@ describe("Settings.vue", () => {
     /* Test Pre-initialization steps */
 
     /* Mount the Component */
-    const wrapper = mount(Settings as unknown as typeof Vue, {
+    const wrapper = mount(ConfigurationMetadata as unknown as typeof Vue, {
       pinia: createTestingPinia({
         createSpy: vitest.fn,
         initialState: {

src/modules/project/pages/Settings.vue → src/modules/project/pages/ConfigurationMetadata.vue

 <template>
   <div id="project">
-    <CoscineHeadline :headline="$t('sidebar.projectSettings')" />
+    <CoscineHeadline :headline="$t('page.configMetadata.headline')" />
     <b-row>
       <div class="col-sm-2" />
       <div class="col-sm-8">
@@ -18,8 +18,6 @@
             :is-loading="isLoading"
           />
 
-          <div class="h-divider" />
-
           <FormMetadata
             v-model="projectForm"
             :disabled="!isOwner"

src/modules/project/pages/CreateProject.vue

@@ -23,8 +23,6 @@
             @validation="formValidations.naming = $event"
           /><!-- TODO: Fix @validation assignment and typing -->
 
-          <div class="h-divider" />
-
           <FormMetadata
             v-model="projectForm"
             :is-loading="isLoading"

src/modules/project/pages/components/FormMetadata.vue

 <template>
   <div>
-    <!-- Project Metadata Section -->
-    <CoscineHeadline :headline="$t('form.project.activatedImportFromParent')" />
-
     <!-- Copy Metadata -->
     <CoscineFormGroup
       v-if="parentProject"

src/modules/project/pages/components/FormReadonlyData.vue

@@ -15,21 +15,6 @@
       />
     </CoscineFormGroup>
 
-    <!-- Project Id -->
-    <CoscineFormGroup
-      label-for="Id"
-      :label="$t('form.project.projectIdLabel')"
-      :is-loading="isLoading"
-      type="input"
-    >
-      <b-form-input
-        id="ProjectId"
-        v-model="projectForm.id"
-        :readonly="readonly"
-        required
-      />
-    </CoscineFormGroup>
-
     <!-- Project Persistent Identifier -->
     <CoscineFormGroup
       label-for="ProjectPersistentId"

src/modules/project/pages/components/modals/DeleteProjectModal.vue

@@ -32,7 +32,7 @@
         @keyup.enter.prevent="clickDelete"
       ></b-form-input>
       <div class="invalid-tooltip">
-        {{ $t("page.settings.modal.deleteModalHelp") }}
+        {{ $t("page.configMetadata.modal.deleteModalHelp") }}
       </div>
     </b-form-group>
 
@@ -55,11 +55,11 @@ import { defineComponent, type PropType } from "vue";
 export default defineComponent({
   props: {
     descriptionKey: {
-      default: "page.settings.modal.deleteModalDescription",
+      default: "page.configMetadata.modal.deleteModalDescription",
       type: String,
     },
     titleKey: {
-      default: "page.settings.modal.deleteModalHeadline",
+      default: "page.configMetadata.modal.deleteModalHeadline",
       type: String,
     },
     open: {

src/modules/project/routes.ts

@@ -7,7 +7,7 @@ const ListProjects = () => import("./pages/ListProjects.vue");
 const ProjectPage = () => import("./pages/ProjectPage.vue");
 const Quota = () => import("./pages/Quota.vue");
 const Members = () => import("./pages/Members.vue");
-const Settings = () => import("./pages/Settings.vue");
+const ConfigurationMetadata = () => import("./pages/ConfigurationMetadata.vue");
 
 import { ResourceRoutes } from "@/modules/resource/routes";
 import { ProjectI18nMessages } from "@/modules/project/i18n/index";
@@ -68,12 +68,12 @@ export const ProjectRoutes: RouteConfig[] = [
         },
       },
       {
-        path: "settings",
-        name: "project-settings",
-        component: Settings,
+        path: "config-metadata",
+        name: "project-config-metadata",
+        component: ConfigurationMetadata,
         meta: {
           requiresAuth: true,
-          breadCrumb: "project.settings",
+          breadCrumb: "project.configMetadata",
         },
       },
       {

src/modules/project/store.ts

@@ -482,7 +482,17 @@ export const useProjectStore = defineStore({
       const notificationStore = useNotificationStore();
       try {
         const apiResponse = await LicenseApi.licenseIndex();
-        this.licenses = apiResponse.data;
+        const sortedLicenses = apiResponse.data;
+        sortedLicenses.sort((a, b) => {
+          if (a.displayName && b.displayName) {
+            const valueA = a.displayName.toUpperCase();
+            const valueB = b.displayName.toUpperCase();
+            return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+          } else {
+            return 0;
+          }
+        });
+        this.licenses = sortedLicenses;
       } catch (error) {
         // Handle other Status Codes
         notificationStore.postApiErrorNotification(error as AxiosError);

src/modules/resource/components/create-resource/resource-type/GitLab.vue

@@ -146,8 +146,7 @@
       <template #hint>
         <span
           v-if="
-            gitlabInformation.reference &&
-            !gitlabInformation.reference.can_push
+            gitlabInformation.reference && !gitlabInformation.reference.can_push
           "
           class="text-danger"
         >

src/modules/resource/components/resource-page/FilesView.spec.ts

+/* Testing imports */
+import { createLocalVue, mount } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+
+/* Vue i18n */
+import i18n, { def } from "@/plugins/vue-i18n";
+import { ResourceI18nMessages } from "@/modules/resource/i18n/index";
+i18n.availableLocales.forEach((locale) => {
+  i18n.setLocaleMessage(locale, def[locale]); // default locale messages
+  i18n.mergeLocaleMessage(locale, ResourceI18nMessages[locale]); // append the locale messages for the component
+});
+
+/* Pinia */
+import { PiniaVuePlugin } from "pinia";
+
+/* Tested Component */
+import FilesView from "./FilesView.vue";
+
+import type Vue from "vue";
+
+import { testUserState } from "@/data/mockup/testUser";
+import { getTestResourceState } from "@/data/mockup/testResource";
+import { testProjectState } from "@/data/mockup/testProject";
+import useResourceStore from "../../store";
+import { getMetadataResponse } from "@/data/mockup/responses/getMetadata";
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* Create a local Vue instance */
+const localVue = createLocalVue();
+localVue.use(PiniaVuePlugin);
+
+describe("FilesView.vue", () => {
+  /* Checks for local storage setting of columns */
+  test("testLocalStorageSetting", async () => {
+    const testingPinia = createTestingPinia({
+      createSpy: vitest.fn,
+      initialState: {
+        project: testProjectState,
+        resource: await getTestResourceState(),
+        user: testUserState,
+      },
+    });
+
+    const resourceStore = useResourceStore(testingPinia);
+    vi.mocked(resourceStore.getMetadata).mockReturnValue(
+      Promise.resolve(getMetadataResponse)
+    );
+    vi.mocked(resourceStore.getClass).mockReturnValue(
+      Promise.resolve({ en: [], de: [] })
+    );
+
+    const wrapper = mount(FilesView as unknown as typeof Vue, {
+      pinia: testingPinia,
+      i18n,
+      localVue,
+    });
+
+    await wrapper.vm.$nextTick();
+
+    // Wait for 1 second until everything is set up
+    await sleep(1000);
+
+    expect(resourceStore.setStoredColumns).toBeCalledTimes(1);
+
+    const selectButton = wrapper.find("#addColumnDropDown__BV_toggle_");
+    await selectButton.trigger("click");
+
+    const checkBox = wrapper.find("#addColumnDropDown .custom-control-input");
+    await checkBox.trigger("click");
+
+    // The previous clicks should have done that, workaround for now
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (wrapper.vm as any).columns[0].active = true;
+
+    await wrapper.vm.$nextTick();
+
+    // Wait for 1 second until everything is set up
+    await sleep(1000);
+
+    const additionalColumnHeader = wrapper.find(".additionalColumnHeader");
+    expect(additionalColumnHeader.exists()).toBeTruthy();
+
+    expect(resourceStore.setStoredColumns).toBeCalledTimes(2);
+  });
+});

src/modules/resource/components/resource-page/FilesView.vue

@@ -15,6 +15,8 @@
         :locale="$i18n.locale"
         :filter="filter"
         :filter-included-fields="filterFields"
+        :sort-by.sync="sortBy"
+        :sort-desc.sync="sortDesc"
         selectable
         striped
         bordered
@@ -151,8 +153,8 @@ import MetadataManagerUtil from "../../utils/MetadataManagerUtil";
 import fileSaver from "file-saver";
 
 import type { ResourceTypeInformation } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
-import type { VisitedResourceObject } from "../../types";
-import type { BFormRow, BTable, BvTableField } from "bootstrap-vue";
+import type { CustomTableField, VisitedResourceObject } from "../../types";
+import type { BFormRow, BTable } from "bootstrap-vue";
 import { FileUtil } from "../../utils/FileUtil";
 
 import { v4 as uuidv4 } from "uuid";
@@ -161,18 +163,13 @@ import factory from "rdf-ext";
 import type { Dataset, Literal } from "@rdfjs/types";
 import type { BilingualLabels } from "@coscine/api-client/dist/types/Coscine.Api.Metadata";
 
-interface CustomTableField extends BvTableField {
-  key: string;
-  active: boolean;
-}
-
 export default defineComponent({
   components: {
     FilesViewHeader,
   },
   props: {
     folderContents: {
-      default() {
+      default: () => {
         return [];
       },
       type: Array as PropType<FolderContent[]>,
@@ -182,12 +179,15 @@ export default defineComponent({
       type: String,
     },
     fileListEdit: {
-      default() {
+      default: () => {
         return [];
       },
       type: Array as PropType<FolderContent[]>,
     },
-    isUploading: Boolean,
+    isUploading: {
+      default: false,
+      type: Boolean,
+    },
   },
   setup() {
     const resourceStore = useResourceStore();
@@ -203,6 +203,8 @@ export default defineComponent({
       filter: "",
       folderPath: [] as string[],
       selectableFiles: [] as FolderContent[],
+      sortBy: "",
+      sortDesc: false,
     };
   },
 
@@ -321,14 +323,23 @@ export default defineComponent({
     applicationProfile() {
       this.getColumns();
     },
+    filter() {
+      this.saveInLocalStorage();
+    },
     headers() {
       this.saveInLocalStorage();
     },
+    locale() {
+      this.getColumns();
+    },
     resource() {
       this.getData();
     },
-    locale() {
-      this.getColumns();
+    sortBy() {
+      this.saveInLocalStorage();
+    },
+    sortDesc() {
+      this.saveInLocalStorage();
     },
   },
   created() {
@@ -477,21 +488,27 @@ export default defineComponent({
         metadata: factory.dataset() as unknown as Dataset,
       });
     },
-    saveInLocalStorage() {
-      if (this.columns.length > 0 && this.resource) {
-        this.resource.storedColumns = JSON.stringify(this.columns);
-      }
+    async saveInLocalStorage() {
+      await this.resourceStore.setStoredColumns({
+        columns: this.columns,
+        filter: this.filter,
+        sortBy: this.sortBy,
+        sortDesc: this.sortDesc,
+      });
     },
-    loadFromLocalStorage() {
-      let element = null;
-      if (this.resource && this.resource.storedColumns) {
-        element = this.resource.storedColumns;
+    loadFromLocalStorage(): Array<CustomTableField> {
+      let element: Array<CustomTableField> = [];
+      if (this.resourceStore.currentStoredColumns) {
+        // Deal with old values
+        if (Array.isArray(this.resourceStore.currentStoredColumns)) {
+          return this.resourceStore.currentStoredColumns;
         }
-      let json: Array<CustomTableField> = [];
-      if (element !== null) {
-        json = JSON.parse(element);
+        element = this.resourceStore.currentStoredColumns.columns;
+        this.filter = this.resourceStore.currentStoredColumns.filter;
+        this.sortBy = this.resourceStore.currentStoredColumns.sortBy;
+        this.sortDesc = this.resourceStore.currentStoredColumns.sortDesc;
       }
-      return json;
+      return element;
     },
     removeColumn(row: BFormRow) {
       for (const column of this.columns) {

src/modules/resource/components/resource-page/FilesViewHeader.vue

@@ -190,7 +190,10 @@ export default defineComponent({
     GitLab: () => import("./resource-type/GitLab.vue"),
   },
   props: {
-    isUploading: Boolean,
+    isUploading: {
+      default: false,
+      type: Boolean,
+    },
     value: {
       default: "",
       type: String,