Change buefy.dialogs to csc-ui modals

CHANGELOG.md

@@ -67,6 +67,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GL #944) Replace buefy b-select with c-select from `csc-ui`
 - (GL #944) Replace buefy b-loading with c-loader from `csc-ui` and remove unused b-loading
 - (GL #944) Replace buefy b-table with c-data-table from `csc-ui`
+- (GL #944) Replace buefy dialogs with c-modal from `csc-ui`
 
 ### Fixed
 

swift_browser_ui_frontend/src/common/globalFunctions.js

@@ -31,6 +31,17 @@ export function toggleCopyFolderModal(folderName, sourceProjectId) {
   modifyBrowserPageStyles();
 }
 
+export function toggleDeleteModal(objects, containerName) {
+  store.commit("toggleDeleteModal", true);
+  if (objects) {
+    store.commit("setDeletableObjects", objects);
+  }
+  if (containerName) {
+    store.commit("setFolderName", containerName);
+  }
+  modifyBrowserPageStyles();
+}
+
 export function modifyBrowserPageStyles() {
   const element = document.getElementById("mainContainer");
   element.classList.toggle("mainContainer-additionalStyles");

swift_browser_ui_frontend/src/common/store.js

@@ -52,6 +52,8 @@ const store = new Vuex.Store({
     openEditTagsModal: false,
     selectedObjectName: "",
     openCopyFolderModal: false,
+    openDeleteModal: false,
+    deletableObjects: [],
     isFolderCopied: false,
     sourceProjectId: "",
     uploadAbort: undefined,
@@ -231,6 +233,12 @@ const store = new Vuex.Store({
     toggleCopyFolderModal(state, payload) {
       state.openCopyFolderModal = payload;
     },
+    toggleDeleteModal(state, payload) {
+      state.openDeleteModal = payload;
+    },
+    setDeletableObjects(state, payload) {
+      state.deletableObjects = payload;
+    },
     setFolderCopiedStatus(state, payload) {
       state.isFolderCopied = payload;
     },

swift_browser_ui_frontend/src/components/ContainerTable.vue

@@ -31,8 +31,8 @@ import {
   getAccessDetails,
   toggleCopyFolderModal,
   modifyBrowserPageStyles,
+  toggleDeleteModal,
 } from "@/common/globalFunctions";
-import {swiftDeleteContainer} from "@/common/api";
 
 export default {
   name: "ContainerTable",
@@ -397,35 +397,9 @@ export default {
             + container,
         );
       } else {
-        this.$buefy.dialog.confirm({
-          title: this.$t("message.container_ops.deleteConfirm"),
-          message: this.$t("message.container_ops.deleteConfirmMessage"),
-          confirmText: this.$t("message.container_ops.deleteConfirm"),
-          type: "is-danger",
-          hasIcon: true,
-          onConfirm: () => {this.deleteContainer(container);},
-        });
+        toggleDeleteModal(null, container);
       }
     },
-    deleteContainer: function(container) {
-      document.querySelector("#container-toasts").addToast(
-        { progress: false,
-          type: "success",
-          message: this.$t("message.container_ops.deleteSuccess")},
-      );
-      const projectID = this.$store.state.active.id;
-      swiftDeleteContainer(
-        projectID,
-        container,
-      ).then(async () => {
-        await this.$store.state.db.containers
-          .where({
-            projectID,
-            name: container,
-          })
-          .delete();
-      });
-    },
     handlePaginationText() {
       this.paginationOptions.textOverrides = this.locale === "fi"
         ? this.paginationTextOverrides

swift_browser_ui_frontend/src/components/DeleteModal.vue

@@ -0,0 +1,164 @@
+<template>
+  <c-card class="delete-modal">
+    <c-alert type="error">
+      <div slot="title">
+        {{ title }}
+      </div>
+
+      {{ message }}
+
+      <c-card-actions justify="end">
+        <c-button 
+          outlined
+          @click="toggleDeleteModal"
+          @keyup.enter="toggleDeleteModal"
+        >
+          {{ $t("message.cancel") }}
+        </c-button>
+        <c-button 
+          @click="isObject ? deleteObjects() : deleteContainer()"
+          @keyup.enter="isObject ? deleteObjects() : deleteContainer()"
+        >
+          {{ confirmText }}
+        </c-button>
+      </c-card-actions>
+    </c-alert>
+  </c-card>
+</template>
+
+<script>
+import { 
+  swiftDeleteObjects,
+  swiftDeleteContainer,
+} from "@/common/api";
+import {
+  modifyBrowserPageStyles,
+} from "@/common/globalFunctions";
+
+export default {
+  name: "DeleteModal",
+  data: function () {
+    return {
+      isObject: false,
+    };
+  },
+  computed: {
+    title() {
+      return this.isObject 
+        ? this.$t("message.objects.deleteObjects")
+        : this.$t("message.container_ops.deleteConfirm");
+    },
+    message() {
+      return this.isObject 
+        ? this.$t("message.objects.deleteObjectsMessage")
+        : this.$t("message.container_ops.deleteConfirmMessage");
+    },
+    confirmText() {
+      return this.isObject 
+        ? this.$t("message.objects.deleteConfirm")
+        : this.$t("message.container_ops.deleteConfirm");
+    },
+    selectedObjects() {
+      return this.$store.state.deletableObjects.length > 0
+        ? this.$store.state.deletableObjects
+        : [];
+    },
+    selectedFolderName() {
+      return this.$store.state.selectedFolderName.length > 0
+        ? this.$store.state.selectedFolderName
+        : "";
+    },
+  },
+  watch: {
+    selectedObjects: function () {
+      if (this.selectedObjects && this.selectedObjects.length > 0) {
+        this.isObject = true;
+      } else {
+        this.isObject = false;
+      }
+    },
+  },
+  methods: {
+    toggleDeleteModal: function() {
+      this.$store.commit("toggleDeleteModal", false);
+      this.$store.commit("setDeletableObjects", []);
+      this.$store.commit("setFolderName", "");
+      modifyBrowserPageStyles();
+    },
+    deleteContainer: function() {
+      document.querySelector("#container-toasts").addToast(
+        { progress: false,
+          type: "success",
+          message: this.$t("message.container_ops.deleteSuccess")},
+      );
+
+      const projectID = this.$route.params.project;
+      swiftDeleteContainer(
+        projectID,
+        this.selectedFolderName,
+      ).then(async () => {
+        await this.$store.state.db.containers
+          .where({
+            projectID,
+            name: this.selectedFolderName,
+          })
+          .delete();
+
+        this.toggleDeleteModal();
+      });
+    },
+    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);
+      }
+      if(this.$route.name !== "SharedObjects") {
+        const objIDs = this.selectedObjects.reduce(
+          (prev, obj) => [...prev, obj.id], [],
+        );
+        this.$store.state.db.objects.bulkDelete(objIDs);
+      }
+      swiftDeleteObjects(
+        this.$route.params.owner || this.$route.params.project,
+        this.$route.params.container,
+        to_remove,
+      ).then(async () => {
+        if (this.$route.name === "SharedObjects") {
+          await this.$store.dispatch(
+            "updateSharedObjects",
+            {
+              project: this.$route.params.project,
+              owner: this.$route.params.owner,
+              container: {
+                name: this.$route.params.container,
+                id: 0,
+              },
+            },
+          );
+        }
+
+        this.toggleDeleteModal();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/css/prod.scss";
+
+.mdi-alert-circle {
+  font-size: 2.0em;
+  color: $csc-red;
+}
+
+.delete-modal {
+  padding: 0px;
+}
+</style>

swift_browser_ui_frontend/src/components/ObjectTable.vue

@@ -110,7 +110,7 @@
       :checked-rows="checkedRows"
       @change-folder="changeFolder"
       @selected-rows="handleSelection"
-      @delete-object="confirmDelete([$event])"
+      @delete-object="toggleDeleteModal([$event])"
     />
     <c-toasts
       id="objects-toasts"
@@ -132,11 +132,11 @@
 </template>
 
 <script>
-import { swiftDeleteObjects } from "@/common/api";
 import { getHumanReadableSize, truncate } from "@/common/conv";
 import {
   getSharedContainers,
   getAccessDetails,
+  toggleDeleteModal,
 } from "@/common/globalFunctions";
 import { liveQuery } from "dexie";
 import { useObservable } from "@vueuse/rxjs";
@@ -358,6 +358,7 @@ export default {
       this.$store.commit("toggleShareModal", true);
       this.$store.commit("setFolderName", this.containerName);
     },
+    toggleDeleteModal,
     updateObjects: async function () {
       if (
         this.containerName === undefined
@@ -620,59 +621,6 @@ export default {
     displayTags: function (name) {
       return this.showTags && !(this.renderFolders && !this.isFile(name));
     },
-    confirmDelete: function (deletables) {
-      this.$buefy.dialog.confirm({
-        title: this.$t("message.objects.deleteObjects"),
-        message: this.$t("message.objects.deleteObjectsMessage"),
-        confirmText: this.$t("message.objects.deleteConfirm"),
-        type: "is-danger",
-        hasIcon: true,
-        onConfirm: () => {this.deleteObjects(deletables);},
-        ariaModal: true,
-        ariaRole: "alertdialog",
-      });
-    },
-    deleteObjects: function (deletables) {
-      this.clearSelections();
-      document.querySelector("#objects-toasts").addToast(
-        { progress: false,
-          type: "success",
-          message: this.$t("message.objects.deleteSuccess")},
-      );
-      let to_remove = new Array;
-      if (typeof(deletables) == "string") {
-        to_remove.push(deletables);
-      } else {
-        for (let object of deletables) {
-          to_remove.push(object.name);
-        }
-      }
-      if(this.$route.name !== "SharedObjects") {
-        const objIDs = deletables.reduce(
-          (prev, obj) => [...prev, obj.id], [],
-        );
-        this.$store.state.db.objects.bulkDelete(objIDs);
-      }
-      swiftDeleteObjects(
-        this.ownerProject,
-        this.$route.params.container,
-        to_remove,
-      ).then(async () => {
-        if (this.$route.name === "SharedObjects") {
-          await this.$store.dispatch(
-            "updateSharedObjects",
-            {
-              project: this.$route.params.project,
-              owner: this.ownerProject,
-              container: {
-                name: this.$route.params.container,
-                id: 0,
-              },
-            },
-          );
-        }
-      });
-    },
     handleSelection(selection) {
       const objects = this.oList;
       this.checkedRows = objects.filter(
@@ -747,7 +695,7 @@ export default {
         {
           label: this.$t("message.table.deleteSelected"),
           icon: "mdi-trash-can-outline",
-          action: () => this.confirmDelete(this.checkedRows),
+          action: () => toggleDeleteModal(this.checkedRows),
         },
         {
           label: this.$t("message.table.clearSelected"),
@@ -851,5 +799,4 @@ export default {
     padding: .5rem 0;
   }
 }
-
 </style>

swift_browser_ui_frontend/src/entries/main.js

@@ -13,6 +13,7 @@ import UploadModal from "@/components/UploadModal";
 import EditTagsModal from "@/components/EditTagsModal";
 import ShareModal from "@/components/ShareModal";
 import CopyFolderModal from "@/components/CopyFolderModal";
+import DeleteModal from "@/components/DeleteModal";
 
 // CSC UI things
 import cModel from "@/common/csc-ui.js";
@@ -135,6 +136,7 @@ new Vue({
     EditTagsModal,
     ShareModal,
     CopyFolderModal,
+    DeleteModal,
   },
   data: function () {
     return {
@@ -213,6 +215,14 @@ new Vue({
         return newState;
       },
     },
+    openDeleteModal: {
+      get() {
+        return this.$store.state.openDeleteModal;
+      },
+      set(newState) {
+        return newState;
+      },
+    },
     openShareModal: {
       get() {
         return this.$store.state.openShareModal;