Merge pull request #871 from CSCfi/bugfix/fixes-for-data-table

Bugfix/fixes for data table

Author: hannyle

CHANGELOG.md

@@ -55,6 +55,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Made modal's scroll position to be always on top when opening a modal
   - Add tooltip for Copy Share ID button
   - Fine-tuned modals' font sizes and gaps between elements
+- (GH #871) Fixed for data table's folders' Options, sorting functionality, and modals' widths
 - (GH #858) Fixed for multiple bugs related to modals and background page's scrolling effect
 - (GH #853) Fix Node 18 needing python for npm install
 - (GH #827) Fixed for updating folder's items count and size when deleting objects inside it

swift_browser_ui_frontend/src/common/conv.js

@@ -279,7 +279,8 @@ export function tokenize(text, ignoreSmallerThan = 2) {
 export const DEV = process.env.NODE_ENV === "development";
 
 export function sortObjects(objects, sortBy, sortDirection) {
-  sortBy = sortBy === "size" ? "bytes" : sortBy;
+  sortBy = sortBy === "size" ? "bytes"
+    : sortBy === "items" ? "count" : sortBy;
 
   objects.sort((a, b) => {
     let valueA = a[sortBy];
@@ -292,18 +293,18 @@ export function sortObjects(objects, sortBy, sortDirection) {
     }
 
     if (typeof valueA === "string") {
+      valueA = valueA.toLowerCase();
+      valueB = valueB.toLowerCase();
       if (sortDirection === "asc") {
-        return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
       }
-
-      return valueB.toLowerCase().localeCompare(valueA.toLowerCase());
+      return valueB < valueA ? -1 : valueB > valueA ? 1 : 0;
     }
 
     if (typeof valueA === "number") {
       if (sortDirection === "asc") {
         return valueA - valueB;
       }
-
       return valueB - valueA;
     }
   });

swift_browser_ui_frontend/src/common/globalFunctions.js

@@ -53,5 +53,18 @@ export async function getSharedContainers (projectId) {
     : [];
 }
 
+export async function getAccessDetails (
+  projectId,
+  folderName,
+  sourceProjectId)
+{
+  return store.state.client
+    ? await store.state.client.getAccessDetails(
+      projectId,
+      folderName,
+      sourceProjectId)
+    : [];
+}
+
 
 

swift_browser_ui_frontend/src/components/ContainerTable.vue

@@ -27,6 +27,7 @@ import {
   toggleCreateFolderModal,
   getSharingContainers,
   getSharedContainers,
+  getAccessDetails,
   toggleCopyFolderModal,
 } from "@/common/globalFunctions";
 import {swiftDeleteContainer} from "@/common/api";
@@ -139,7 +140,18 @@ export default {
         return "";
       };
 
-      this.containers = this.conts.slice(offset, offset + limit).reduce((
+      // Map the 'accessRights' to the container if it's a shared container
+      const mappedContainers = await Promise.all(this.conts.map(async(cont) => {
+        const sharedDetails = cont.owner ? await getAccessDetails(
+          this.$route.params.project,
+          cont.container,
+          cont.owner) : null;
+        const accessRights = sharedDetails ? sharedDetails.access : null;
+        return sharedDetails && accessRights ?
+          {...cont, accessRights} : {...cont};
+      }));
+
+      this.containers = mappedContainers.slice(offset, offset + limit).reduce((
         items,
         item,
       ) => {
@@ -230,35 +242,24 @@ export default {
                 },
               },
               // Share button is disabled for Shared (with you) Folders
-              item.owner ?
-                {
-                  value: null,
-                  component: {
-                    tag: "c-button",
-                    params: {
-                      text: true,
-                      size: "small",
-                      disabled: true,
-                    },
-                  },
-                } :
-                {
-                  value: this.$t("message.share.share"),
-                  component: {
-                    tag: "c-button",
-                    params: {
-                      text: true,
-                      size: "small",
-                      title: this.$t("message.share.share"),
-                      path: mdiShareVariantOutline,
-                      onClick: (item) => {
-                        this.$store.commit("toggleShareModal", true);
-                        this.$store.commit(
-                          "setFolderName", item.data.name.value);
-                      },
+              {
+                value: this.$t("message.share.share"),
+                component: {
+                  tag: "c-button",
+                  params: {
+                    text: true,
+                    size: "small",
+                    title: this.$t("message.share.share"),
+                    path: mdiShareVariantOutline,
+                    onClick: (item) => {
+                      this.$store.commit("toggleShareModal", true);
+                      this.$store.commit(
+                        "setFolderName", item.data.name.value);
                     },
+                    disabled: item.owner,
                   },
                 },
+              },
               {
                 value: null,
                 component: {
@@ -267,7 +268,7 @@ export default {
                     items: [
                       {
                         name: this.$t("message.copy"),
-                        action: item.owner 
+                        action: item.owner
                           ? () => toggleCopyFolderModal(item.name, item.owner)
                           : () => toggleCopyFolderModal(item.name),
                         disabled: !item.bytes ? true : false,
@@ -281,22 +282,24 @@ export default {
                         action: () => this.confirmDelete(
                           item.name, item.count,
                         ),
+                        disabled: item.owner && item.accessRights.length > 1,
                       },
                     ],
                     customTrigger: {
                       value: this.$t("message.options"),
+                      disabled: true,
                       component: {
                         tag: "c-button",
                         params: {
                           text: true,
                           path: mdiDotsHorizontal,
                           title: "Menu with custom trigger",
                           size: "small",
+                          disabled: item.owner
+                            && item.accessRights.length === 1,
                         },
                       },
                     },
-                    path: mdiDotsHorizontal,
-
                   },
                 },
               },

swift_browser_ui_frontend/src/components/Containers.vue

@@ -94,9 +94,8 @@ export default {
           });
       }
       else if (this.$route.name === "SharedTo") {
-        this.renderingContainers = this.containers.filter(cont =>
-          cont.owner,
-        );
+        this.renderingContainers = this.containers ?
+          this.containers.filter(cont => cont.owner) : [];
       } else {
         this.renderingContainers = this.containers;
       }

swift_browser_ui_frontend/src/components/ObjectTable.vue

@@ -114,7 +114,10 @@
 <script>
 import { swiftDeleteObjects } from "@/common/api";
 import { getHumanReadableSize, truncate } from "@/common/conv";
-import { getSharedContainers } from "@/common/globalFunctions";
+import {
+  getSharedContainers,
+  getAccessDetails,
+} from "@/common/globalFunctions";
 import { liveQuery } from "dexie";
 import { useObservable } from "@vueuse/rxjs";
 import CObjectTable from "@/components/CObjectTable";
@@ -296,7 +299,7 @@ export default {
                 cont => cont.container === this.container) > -1) {
                 this.isSharedFolder = true;
                 const sharedDetails
-                  = await this.client.getAccessDetails(
+                  = await getAccessDetails(
                     this.project,
                     this.container,
                     this.$route.params.owner,

swift_browser_ui_frontend/src/pages/BrowserPage.vue

@@ -10,6 +10,7 @@
       <c-modal
         v-control
         v-csc-model="openCreateFolderModal"
+        width="64vw"
       >
         <CreateFolderModal />
       </c-modal>
@@ -34,7 +35,7 @@
       <c-modal
         v-control
         v-csc-model="openShareModal"
-        width="50vw"
+        width="64vw"
       >
         <ShareModal />
       </c-modal>