Display confirmation dialog and toasts on toggling file to public

Toasts are also displayed when toggling file to private
bcgov · May 15, 2024 · f6485a5 · f6485a5
1 parent 9b0f424
commit f6485a5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/frontend/src/components/object/ObjectPermission.vue b/frontend/src/components/object/ObjectPermission.vue
@@ -66,6 +66,7 @@ onBeforeMount(() => {
         class="ml-4"
         :bucket-id="object.bucketId"
         :object-id="object.id"
+        :object-name="object.name"
         :object-public="object.public"
         :user-id="getUserId"
       />

diff --git a/frontend/src/components/object/ObjectPublicToggle.vue b/frontend/src/components/object/ObjectPublicToggle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
-import { InputSwitch } from '@/lib/primevue';
+import { InputSwitch, useConfirm, useToast } from '@/lib/primevue';
 import { useObjectStore, usePermissionStore } from '@/store';
 import { Permissions } from '@/utils/constants';
 
@@ -11,6 +11,7 @@ import type { Ref } from 'vue';
 type Props = {
   bucketId: string;
   objectId: string;
+  objectName: string;
   objectPublic: boolean;
   userId: string;
 };
@@ -25,8 +26,36 @@ const permissionStore = usePermissionStore();
 const isPublic: Ref<boolean> = ref(props.objectPublic);
 
 // Actions
-const togglePublic = async (isPublic: boolean) => {
-  await objectStore.togglePublic(props.objectId, isPublic);
+const toast = useToast();
+const confirm = useConfirm();
+
+const togglePublic = async (setPublicValue: boolean) => {
+  if (setPublicValue) {
+    confirm.require({
+      message:
+        'Please confirm that you want to set the file(s) to public. ' +
+        'This allows the share link to be accessible by anyone, even without credentials.',
+      header: 'Confirm set to public',
+      acceptLabel: 'Confirm',
+      rejectLabel: 'Cancel',
+      accept: () => {
+        objectStore
+          .togglePublic(props.objectId, true)
+          .then(() => {
+            toast.success(`"${props.objectName}" set to public`);
+          })
+          .catch((e) => toast.error(e));
+      },
+      reject: () => (isPublic.value = false),
+      onHide: () => (isPublic.value = false)
+    });
+  } else
+    objectStore
+      .togglePublic(props.objectId, false)
+      .then(() => {
+        toast.success(`"${props.objectName}" is no longer public`);
+      })
+      .catch((e) => toast.error(e));
 };
 
 watch(props, () => {

diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
@@ -262,9 +262,7 @@ const selectedFilters = (payload: any) => {
       >
         <template #body="{ data }">
           <div>
-            <router-link
-              :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: data.id } }"
-            >
+            <router-link :to="{ name: RouteNames.DETAIL_OBJECTS, query: { objectId: data.id } }">
               <span v-tooltip.bottom="'View file details'">
                 {{ data.name }}
               </span>
@@ -307,6 +305,7 @@ const selectedFilters = (payload: any) => {
             v-if="props.bucketId && getUserId"
             :bucket-id="props.bucketId"
             :object-id="data.id"
+            :object-name="data.name"
             :object-public="data.public"
             :user-id="getUserId"
           />