apachegh-131: Enable delete confirmations

dinukadesilva · Sep 2, 2021 · 1044625 · 1044625
1 parent 226f70c
commit 1044625
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 28 deletions.
diff --git a/src/lib/components/button/button-delete-after-confirmation.vue b/src/lib/components/button/button-delete-after-confirmation.vue
@@ -0,0 +1,60 @@
+<template>
+  <b-button :variant="variant" :size="size" :disabled="disabled" v-on:click="onClickDelete" v-b-tooltip.hover
+            :title="title">
+    <slot>
+      <b-icon icon="trash"/>
+    </slot>
+    <b-modal ref="delete-confirmation-modal" size="md">
+      <template #modal-title>
+        <slot name="delete-confirmation-modal-title">
+          Delete Confirmation
+        </slot>
+      </template>
+      <slot name="delete-confirmation-modal-body">
+        <p>This action cannot be undone.</p>
+      </slot>
+      <template #modal-footer="{close}">
+        <button-overlay :show="processing">
+          <b-button variant="danger" size="sm" v-on:click="onClickProceedDelete">Delete</b-button>
+        </button-overlay>
+        <b-button variant="secondary" size="sm" @click="close">Cancel</b-button>
+      </template>
+    </b-modal>
+  </b-button>
+</template>
+
+<script>
+import ButtonOverlay from "@/lib/components/overlay/button-overlay";
+
+export default {
+  name: "button-delete-after-confirmation",
+  components: {ButtonOverlay},
+  props: {
+    variant: {},
+    size: {},
+    disabled: {},
+    title: {}
+  },
+  data() {
+    return {
+      processing: false
+    }
+  },
+  methods: {
+    onClickDelete() {
+      this.$refs["delete-confirmation-modal"].show();
+    },
+    onClickProceedDelete() {
+      this.processing = true;
+      this.$emit("click");
+      this.processing = false;
+
+      this.$refs["delete-confirmation-modal"].hide();
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/lib/components/pages/ListTenants.vue b/src/lib/components/pages/ListTenants.vue
@@ -64,10 +64,10 @@
               <b-td>
                 <b-overlay :show="processingDelete[childTenant.clientId]" v-if="childTenant.status === 'REQUESTED'"
                            rounded spinner-small spinner-variant="primary" class="d-inline-block">
-                  <b-button variant="link" size="sm" v-on:click="deleteTenant(childTenant)" v-b-tooltip.hover
-                            title="Delete">
+                  <button-delete-after-confirmation variant="link" size="sm" v-on:click="deleteTenant(childTenant)"
+                                                    v-b-tooltip.hover title="Delete">
                     <b-icon icon="trash"></b-icon>
-                  </b-button>
+                  </button-delete-after-confirmation>
                 </b-overlay>
               </b-td>
             </b-tr>
@@ -111,11 +111,12 @@ import TenantHome from "./TenantHome";
 import {custosService} from "../../store/util/custos.util";
 import TableOverlayInfo from "../overlay/table-overlay-info";
 import ButtonCopy from "../button/button-copy";
+import ButtonDeleteAfterConfirmation from "@/lib/components/button/button-delete-after-confirmation";
 
 export default {
   name: "ListTenants",
   store: store,
-  components: {ButtonCopy, TableOverlayInfo, TenantHome},
+  components: {ButtonDeleteAfterConfirmation, ButtonCopy, TableOverlayInfo, TenantHome},
   data() {
     return {
       processingDelete: {},

diff --git a/src/lib/components/pages/TenantEntities.vue b/src/lib/components/pages/TenantEntities.vue
@@ -93,11 +93,11 @@
                   <div>
                     <!-- Delete Entity Button -->
                     <button-overlay :show="processingDelete[entityId]">
-                      <b-button variant="link" size="sm" v-on:click="onClickDelete(entityMap[entityId])"
-                                v-b-tooltip.hover
-                                title="Delete">
+                      <button-delete-after-confirmation variant="link" size="sm"
+                                                        v-on:click="onClickDelete(entityMap[entityId])"
+                                                        v-b-tooltip.hover title="Delete">
                         <b-icon icon="trash"></b-icon>
-                      </b-button>
+                      </button-delete-after-confirmation>
                     </button-overlay>
                   </div>
                 </div>
@@ -129,11 +129,19 @@ import TableOverlayInfo from "../overlay/table-overlay-info";
 import ModalShareEntity from "@/lib/components/modals/modal-share-entity";
 import ButtonOverlay from "@/lib/components/overlay/button-overlay";
 import ButtonCopy from "@/lib/components/button/button-copy";
+import ButtonDeleteAfterConfirmation from "@/lib/components/button/button-delete-after-confirmation";
 
 export default {
   name: "TenantEntities",
   store: store,
-  components: {ButtonCopy, ButtonOverlay, ModalShareEntity, TableOverlayInfo, TenantHome},
+  components: {
+    ButtonDeleteAfterConfirmation,
+    ButtonCopy,
+    ButtonOverlay,
+    ModalShareEntity,
+    TableOverlayInfo,
+    TenantHome
+  },
   data() {
     return {
       processingDelete: {},

diff --git a/src/lib/components/pages/TenantEntityTypes.vue b/src/lib/components/pages/TenantEntityTypes.vue
@@ -24,10 +24,11 @@
             <b-td>{{ entityType.description }}</b-td>
             <b-td>
               <button-overlay :show="processingDelete[entityType.id]">
-                <b-button variant="link" size="sm" v-on:click="onClickDelete(entityType)" v-b-tooltip.hover
-                          title="Delete" :disabled="disabledEntityTypes[entityType.id]">
+                <button-delete-after-confirmation variant="link" size="sm" v-on:click="onClickDelete(entityType)"
+                                                  v-b-tooltip.hover title="Delete"
+                                                  :disabled="disabledEntityTypes[entityType.id]">
                   <b-icon icon="trash"></b-icon>
-                </b-button>
+                </button-delete-after-confirmation>
               </button-overlay>
             </b-td>
           </b-tr>
@@ -43,11 +44,12 @@ import store from "../../store";
 import TableOverlayInfo from "../overlay/table-overlay-info";
 import ButtonOverlay from "../overlay/button-overlay";
 import ButtonCopy from "../button/button-copy";
+import ButtonDeleteAfterConfirmation from "@/lib/components/button/button-delete-after-confirmation";
 
 export default {
   name: "TenantEntityTypes",
   store: store,
-  components: {ButtonCopy, ButtonOverlay, TableOverlayInfo, TenantHome},
+  components: {ButtonDeleteAfterConfirmation, ButtonCopy, ButtonOverlay, TableOverlayInfo, TenantHome},
   data() {
     return {
       processingDelete: {},

diff --git a/src/lib/components/pages/TenantGroup.vue b/src/lib/components/pages/TenantGroup.vue
@@ -25,10 +25,10 @@
             <b-td>
               <b-overlay :show="processingRemoveUser[user.username]"
                          rounded spinner-small spinner-variant="primary" class="d-inline-block">
-                <b-button variant="link" size="sm" v-on:click="onRemoveUser(user)"
-                          :disabled="user.membershipType === 'OWNER'">
+                <button-delete-after-confirmation variant="link" size="sm" v-on:click="onRemoveUser(user)"
+                                                  :disabled="user.membershipType === 'OWNER'">
                   <b-icon icon="trash"/>
-                </b-button>
+                </button-delete-after-confirmation>
               </b-overlay>
             </b-td>
           </b-tr>
@@ -52,10 +52,11 @@ import TenantHome from "./TenantHome";
 import store from "../../store";
 import TableOverlayInfo from "../overlay/table-overlay-info";
 import ModalSelectUsersOrGroups from "../modals/modal-select-users-or-groups";
+import ButtonDeleteAfterConfirmation from "@/lib/components/button/button-delete-after-confirmation";
 
 export default {
   name: "TenantGroup",
-  components: {ModalSelectUsersOrGroups, TableOverlayInfo, TenantHome},
+  components: {ButtonDeleteAfterConfirmation, ModalSelectUsersOrGroups, TableOverlayInfo, TenantHome},
   store: store,
   data() {
     return {

diff --git a/src/lib/components/pages/TenantGroups.vue b/src/lib/components/pages/TenantGroups.vue
@@ -31,9 +31,10 @@
             <b-td>{{ group.ownerId }}</b-td>
             <b-td>
               <button-overlay :show="processingDelete[group.groupId]">
-                <b-button variant="link" v-on:click="onDeleteClick(group)" v-b-tooltip.hover title="Delete">
+                <button-delete-after-confirmation variant="link" v-on:click="onDeleteClick(group)" v-b-tooltip.hover
+                                                  title="Delete">
                   <b-icon icon="trash"></b-icon>
-                </b-button>
+                </button-delete-after-confirmation>
               </button-overlay>
             </b-td>
           </b-tr>
@@ -59,11 +60,12 @@ import TenantHome from "./TenantHome";
 import TableOverlayInfo from "../overlay/table-overlay-info";
 import ButtonOverlay from "../overlay/button-overlay";
 import ButtonCopy from "../button/button-copy";
+import ButtonDeleteAfterConfirmation from "@/lib/components/button/button-delete-after-confirmation";
 
 export default {
   name: "TenantGroups",
   store: store,
-  components: {ButtonCopy, ButtonOverlay, TableOverlayInfo, TenantHome},
+  components: {ButtonDeleteAfterConfirmation, ButtonCopy, ButtonOverlay, TableOverlayInfo, TenantHome},
   data() {
     return {
       processingDelete: {},

diff --git a/src/lib/components/pages/TenantPermissionTypes.vue b/src/lib/components/pages/TenantPermissionTypes.vue
@@ -24,10 +24,11 @@
             <b-td>{{ permissionType.description }}</b-td>
             <b-td>
               <button-overlay :show="processingDelete[permissionType.id]">
-                <b-button variant="link" size="sm" v-on:click="onClickDelete(permissionType)" v-b-tooltip.hover
-                          title="Delete" :disabled="disabledPermissionType[permissionType.id]">
+                <button-delete-after-confirmation variant="link" size="sm" v-on:click="onClickDelete(permissionType)"
+                                                  v-b-tooltip.hover title="Delete"
+                                                  :disabled="disabledPermissionType[permissionType.id]">
                   <b-icon icon="trash"></b-icon>
-                </b-button>
+                </button-delete-after-confirmation>
               </button-overlay>
             </b-td>
           </b-tr>
@@ -43,11 +44,12 @@ import store from "../../store";
 import TableOverlayInfo from "../overlay/table-overlay-info";
 import ButtonOverlay from "../overlay/button-overlay";
 import ButtonCopy from "../button/button-copy";
+import ButtonDeleteAfterConfirmation from "@/lib/components/button/button-delete-after-confirmation";
 
 export default {
   name: "TenantPermissionTypes",
   store: store,
-  components: {ButtonCopy, ButtonOverlay, TableOverlayInfo, TenantHome},
+  components: {ButtonDeleteAfterConfirmation, ButtonCopy, ButtonOverlay, TableOverlayInfo, TenantHome},
   data() {
     return {
       processingDelete: {},

diff --git a/src/lib/components/pages/TenantRoles.vue b/src/lib/components/pages/TenantRoles.vue
@@ -25,10 +25,11 @@
             <!--            <b-td>TENANT</b-td>-->
             <b-td>
               <button-overlay :show="processingDelete[role.tenantRoleId]">
-                <b-button variant="link" size="sm" v-on:click="onClickDelete(role)" v-b-tooltip.hover title="Delete"
-                          :disabled="rolesToBeDisabled.indexOf(role.name) >= 0">
+                <button-delete-after-confirmation variant="link" size="sm" v-on:click="onClickDelete(role)"
+                                                  v-b-tooltip.hover title="Delete"
+                                                  :disabled="rolesToBeDisabled.indexOf(role.name) >= 0">
                   <b-icon icon="trash"></b-icon>
-                </b-button>
+                </button-delete-after-confirmation>
               </button-overlay>
             </b-td>
           </b-tr>
@@ -57,11 +58,12 @@ import store from "../../store";
 import TableOverlayInfo from "../overlay/table-overlay-info";
 import ButtonOverlay from "../overlay/button-overlay";
 import ButtonCopy from "../button/button-copy";
+import ButtonDeleteAfterConfirmation from "@/lib/components/button/button-delete-after-confirmation";
 
 export default {
   name: "TenantRoles",
   store: store,
-  components: {ButtonCopy, ButtonOverlay, TableOverlayInfo, TenantHome},
+  components: {ButtonDeleteAfterConfirmation, ButtonCopy, ButtonOverlay, TableOverlayInfo, TenantHome},
   data() {
     return {
       processingDelete: {},