Fix for selecting and deleting subfolders and files

.github/config/.finnishwords.txt

@@ -370,6 +370,7 @@ poistettiin
 poistettu
 poistut
 polku
+polkuina
 postamista
 poudan
 profiili

CHANGELOG.md

@@ -56,6 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GH #944) Create new Taginput component to replace Buefy's taginput component
 - (GL #944) Replace buefy upload button with a new component: `CUploadButton`
 - (GL #940) Added TokenModal to replace token page
+- (GL #936) Add missing icon for subfolders
 
 ### Changed
 
@@ -119,6 +120,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix hiding the pagination of data tables
 - Fix shared objects functionality: visibility, deleting, editing tags
 - URL does not strip the path, when that is present. Also small fixes to make it deployable under the same URL.
+- (GL #933) Fix for selecting and mass deleting subfolders and files
 
 ### Removed
 

swift_browser_ui_frontend/src/common/globalFunctions.js

@@ -88,3 +88,16 @@ export function deleteTag (event, tag, currentTags) {
   event.preventDefault();
   return currentTags.filter(el => el !== tag);
 }
+
+export function getPrefix(route) {
+  // Get current pseudofolder prefix
+  if (route.query.prefix == undefined) {
+    return "";
+  }
+  return `${route.query.prefix}/`;
+}
+
+export function isFile(path, route) {
+  // Return true if path represents a file in the active prefix context
+  return path.replace(getPrefix(route), "").match("/") ? false : true;
+}

swift_browser_ui_frontend/src/common/lang.js

@@ -107,7 +107,7 @@ let default_translations = {
       tableOptions: {
         displayOptions: "Display options",
         render: "Show as folders",
-        text: "Show as objects",
+        text: "Show as paths",
         hideTags: "Hide tags",
         showTags: "Display tags",
         hidePagination: "Hide pagination",
@@ -469,7 +469,7 @@ let default_translations = {
       tableOptions: {
         displayOptions: "Asetukset",
         render: "Näytä kansioina",
-        text: "Näytä tekstinä",
+        text: "Näytä polkuina",
         hideTags: "Piilota asiasanat",
         showTags: "Näytä asiasanat",
         hidePagination: "Piilota sivutus",

swift_browser_ui_frontend/src/components/CObjectTable.vue

@@ -34,9 +34,16 @@ import {
 
 import {
   toggleEditTagsModal,
+  isFile,
+  getPrefix,
 } from "@/common/globalFunctions";
 
-import { mdiTrayArrowDown, mdiPencilOutline, mdiDeleteOutline } from "@mdi/js";
+import {
+  mdiTrayArrowDown,
+  mdiPencilOutline,
+  mdiDeleteOutline,
+  mdiFolder ,
+} from "@mdi/js";
 
 export default {
   name: "CObjectTable",
@@ -57,9 +64,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    checkedRows: {
-      default: [],
-    },
   },
   data() {
     return {
@@ -125,21 +129,18 @@ export default {
     this.setHeaders();
   },
   methods: {
-    isFile: function (path) {
-      // Return true if path represents a file in the active prefix context
-      return path.replace(this.getPrefix(), "").match("/") ? false : true;
-    },
     changeFolder: function (folder) {
       this.$router.push(
-        `${window.location.pathname}?prefix=${this.getPrefix()}${folder}`,
+        `${window.location.pathname}?prefix=${getPrefix(this.$route)}${folder}`,
       );
       this.componentKey += 1;
       this.getPage();
     },
     getFolderName: function (path) {
       // Get the name of the currently displayed pseudofolder
       let endregex = new RegExp("/.*$");
-      return path.replace(this.getPrefix(), "").replace(endregex, "");
+      return path.replace(getPrefix(this.$route), "")
+        .replace(endregex, "");
     },
     getPage: function () {
       let offset = 0;
@@ -158,10 +159,10 @@ export default {
       this.objects = this
         .objs
         .filter((obj) => {
-          return obj.name.startsWith(this.getPrefix());
+          return obj.name.startsWith(getPrefix(this.$route));
         })
         .reduce((items, item) => {
-          if (this.isFile(item.name) || !this.renderFolders) {
+          if (isFile(item.name, this.$route) || !this.renderFolders) {
             items.push(item);
           } else {
             if (items.find(el => {
@@ -188,12 +189,17 @@ export default {
           items.push({
             name: {
               value: value,
-              ...(this.renderFolders && !this.isFile(item.name) ? {
+              ...(this.renderFolders && !isFile(item.name, this.$route) ? {
                 component: {
                   tag: "c-link",
                   params: {
                     href: "javascript:void(0)",
                     color: "dark-grey",
+                    path: mdiFolder,
+                    iconFill: "primary",
+                    iconStyle: {
+                      marginRight: "1rem",
+                    },
                     onClick: () => this.changeFolder(value),
                   },
                 },
@@ -321,7 +327,13 @@ export default {
       };
     },
     handleSelection(event) {
-      this.$emit("selected-rows", event.detail);
+      if (event.detail.length > 0) {
+        const prefix = getPrefix(this.$route);
+        const selectedRows = event.detail.map(item => prefix.concat(item));
+        this.$emit("selected-rows", selectedRows);
+      } else {
+        this.$emit("selected-rows", event.detail);
+      }
     },
     beginDownload(object) {
       this.currentDownload = new DecryptedDownloadSession(
@@ -337,13 +349,6 @@ export default {
     navDownload(url) {
       window.open(url, "_blank");
     },
-    getPrefix() {
-      // Get current pseudofolder prefix
-      if (this.$route.query.prefix == undefined) {
-        return "";
-      }
-      return `${this.$route.query.prefix}/`;
-    },
     setHeaders() {
       this.headers = [
         {

swift_browser_ui_frontend/src/components/ContainerTable.vue

@@ -389,11 +389,6 @@ export default {
             message: this.$t("message.container_ops.deleteNote"),
           },
         );
-        this.$router.push(
-          this.$route.params.project
-            + "/"
-            + container,
-        );
       } else {
         toggleDeleteModal(null, container);
       }

swift_browser_ui_frontend/src/components/DeleteModal.vue

@@ -33,6 +33,8 @@ import {
 } from "@/common/api";
 import { getDB } from "@/common/db";
 
+import { isFile } from "@/common/globalFunctions";
+
 export default {
   name: "DeleteModal",
   data: function () {
@@ -105,18 +107,17 @@ export default {
       });
     },
     deleteObjects: function () {
-      document.querySelector("#objects-toasts").addToast(
-        { progress: false,
-          type: "success",
-          message: this.$t("message.objects.deleteSuccess")},
-      );
-
       let to_remove = new Array;
       for (let object of this.selectedObjects) {
-        to_remove.push(object.name);
+        // Only files are able to delete
+        if (isFile(object.name, this.$route)) {
+          to_remove.push(object.name);
+        }
       }
+
       if(this.$route.name !== "SharedObjects") {
-        const objIDs = this.selectedObjects.reduce(
+        const objIDs = this.selectedObjects.filter(
+          obj => obj.name && to_remove.includes(obj.name)).reduce(
           (prev, obj) => [...prev, obj.id], [],
         );
         getDB().objects.bulkDelete(objIDs);
@@ -141,6 +142,28 @@ export default {
         }
 
         this.toggleDeleteModal();
+
+        const dataTable = document.getElementById("objtable");
+        dataTable.clearSelections();
+
+        // Only files can be deleted
+        // Show warnings when deleting subfolders
+        if (to_remove.length > 0) {
+          document.querySelector("#objects-toasts").addToast(
+            { progress: false,
+              type: "success",
+              message: this.$t("message.objects.deleteSuccess")},
+          );
+        } else {
+          document.querySelector("#container-error-toasts").addToast(
+            {
+              progress: false,
+              type: "error",
+              duration: 30000,
+              message: this.$t("message.container_ops.deleteNote"),
+            },
+          );
+        }
       });
     },
   },

swift_browser_ui_frontend/src/components/ObjectTable.vue

@@ -42,7 +42,6 @@
         </li>
       </ul>
     </div>
-
     <div
       v-if="checkedRows.length"
       class="selection-bar"
@@ -110,7 +109,7 @@
       :render-folders="renderFolders"
       :checked-rows="checkedRows"
       @selected-rows="handleSelection"
-      @delete-object="toggleDeleteModal([$event])"
+      @delete-object="confirmDelete"
     />
     <c-toasts
       id="objects-toasts"
@@ -137,6 +136,7 @@ import {
   getSharedContainers,
   getAccessDetails,
   toggleDeleteModal,
+  isFile,
 } from "@/common/globalFunctions";
 import { getDB } from "@/common/db";
 import { liveQuery } from "dexie";
@@ -345,7 +345,19 @@ export default {
       this.$store.commit("toggleShareModal", true);
       this.$store.commit("setFolderName", this.containerName);
     },
-    toggleDeleteModal,
+    confirmDelete: function(item) {
+      if (isFile(item.name, this.$route)) {
+        toggleDeleteModal([item]);
+      } else {
+        document.querySelector("#container-error-toasts").addToast(
+          {
+            progress: false,
+            type: "error",
+            duration: 30000,
+            message: this.$t("message.container_ops.deleteNote"),
+          });
+      }
+    },
     updateObjects: async function () {
       if (
         this.containerName === undefined
@@ -396,9 +408,6 @@ export default {
         },
       );
     },
-    isRowCheckable: function (row) {
-      return this.renderFolders ? this.isFile(row.name) : true;
-    },
     checkLargeDownloads: function () {
       if (document.cookie.match("ENA_DL")) {
         this.allowLargeDownloads = true;
@@ -526,14 +535,23 @@ export default {
       this.filteredObjects = this.oList.
         filter(obj => filteredObjectsIds.indexOf(obj.id) === -1);
     },
-    displayTags: function (name) {
-      return this.showTags && !(this.renderFolders && !this.isFile(name));
-    },
     handleSelection(selection) {
       const objects = this.oList;
       this.checkedRows = objects.filter(
         item => selection.indexOf(item.name) > -1,
       );
+
+      /* Subfolders should also be selected and then filtered out from
+        deletableObjects later
+      */
+      if (this.checkedRows.length < selection.length) {
+        for (let i = 0; i < selection.length; i++) {
+          if(!this.checkedRows.some(row => row && row.name === selection[i])) {
+            const obj = objects.find(obj => !this.checkedRows.some(row => row.name === selection[i]) && obj.name.includes(`${selection[i]}/`));
+            this.checkedRows.push(obj);
+          }
+        }
+      }
     },
     clearSelections() {
       const dataTable = document.getElementById("objtable");
@@ -712,4 +730,8 @@ export default {
     padding: .5rem 0;
   }
 }
+
+#objects-toasts {
+  bottom: 40vh;
+}
 </style>

swift_browser_ui_frontend/src/pages/BrowserPage.vue

@@ -81,7 +81,7 @@
       <c-toasts
         id="container-error-toasts"
         vertical="top"
-        horizontal="right"
+        horizontal="center"
       />
     </div>
     <CFooter />
@@ -286,4 +286,8 @@ c-modal {
   font-weight: bold;
   margin-bottom: -2rem;
 }
+
+#container-error-toasts {
+  margin-top: 50vh;
+}
 </style>