Merge pull request #545 from webitel/refactor/delete-popup

Refactor/delete popup
webitel · Oct 31, 2023 · fda27ce · fda27ce
2 parents 44c3247 + a578134
commit fda27ce
Show file tree

Hide file tree

Showing 43 changed files with 1,401 additions and 296 deletions.
diff --git a/src/app/mixins/baseMixins/baseTableMixin/deleteMixin/deleteConfirmationMixin.js b/src/app/mixins/baseMixins/baseTableMixin/deleteMixin/deleteConfirmationMixin.js
diff --git a/src/app/mixins/baseMixins/baseTableMixin/deleteMixin/tableDeleteMixin.js b/src/app/mixins/baseMixins/baseTableMixin/deleteMixin/tableDeleteMixin.js
@@ -1,17 +1,6 @@
-import deleteConfirmationMixin from './deleteConfirmationMixin';
-
 export default {
-  mixins: [deleteConfirmationMixin],
   methods: {
-    callDelete(deleted) {
-      if (this.isDeleteConfirmation) {
-        this.askDeleteConfirmation({
-          deleted,
-          callback: this.makeDelete.bind(this, deleted),
-        });
-      } else this.makeDelete(deleted);
-    },
-    makeDelete(deleted) {
+    deleteData(deleted) {
       return this.dispatchDelete(deleted);
     },
     dispatchDelete() {

diff --git a/src/modules/contact-center/modules/agents/components/the-agents.vue b/src/modules/contact-center/modules/agents/components/the-agents.vue
@@ -11,9 +11,9 @@
 
     <template #main>
       <delete-confirmation-popup
-        v-show="deleteConfirmation.isDeleteConfirmationPopup"
-        :delete-count="deleteConfirmation.deleteCount"
-        :callback="deleteConfirmation.callback"
+        v-show="isDeleteConfirmationPopup"
+        :delete-count="deleteCount"
+        :callback="deleteCallback"
         @close="closeDelete"
       />
 
@@ -43,7 +43,10 @@
                 v-if="hasDeleteAccess"
                 :class="{'hidden': anySelected}"
                 :selected-count="selectedRows.length"
-                @click="callDelete(selectedRows)"
+                @click="askDeleteConfirmation({
+                  deleted: selectedRows,
+                  callback: () => deleteData(selectedRows),
+                })"
               />
             </wt-table-actions>
           </div>
@@ -106,7 +109,10 @@
                 v-if="hasDeleteAccess"
                 action="delete"
                 class="table-action"
-                @click="callDelete(item)"
+                @click="askDeleteConfirmation({
+                  deleted: [item],
+                  callback: () => deleteData(item),
+                })"
               />
             </template>
           </wt-table>
@@ -135,17 +141,38 @@ import tableComponentMixin from '../../../../../app/mixins/objectPagesMixins/obj
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
 import agentStatusMixin from '../../../mixins/agentStatusMixin';
 import HistoryPopup from './agent-history-popup.vue';
+import DeleteConfirmationPopup
+  from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
+import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+
 
 const namespace = 'ccenter/agents';
 
 export default {
   name: 'TheAgents',
-  components: { HistoryPopup },
+  components: { HistoryPopup, DeleteConfirmationPopup },
   mixins: [tableComponentMixin, agentStatusMixin],
 
   setup() {
     const { dummy } = useDummy({ namespace, showAction: true });
-    return { dummy };
+    const {
+      isVisible: isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+
+      askDeleteConfirmation,
+      closeDelete,
+    } = useDeleteConfirmationPopup();
+
+    return {
+      dummy,
+      isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+
+      askDeleteConfirmation,
+      closeDelete,
+    };
   },
 
   data: () => ({

diff --git a/src/modules/contact-center/modules/queues/components/the-queues.vue b/src/modules/contact-center/modules/queues/components/the-queues.vue
@@ -17,9 +17,9 @@
         @close="isQueueSelectPopup = false"
       />
       <delete-confirmation-popup
-        v-show="deleteConfirmation.isDeleteConfirmationPopup"
-        :delete-count="deleteConfirmation.deleteCount"
-        :callback="deleteConfirmation.callback"
+        v-show="isDeleteConfirmationPopup"
+        :delete-count="deleteCount"
+        :callback="deleteCallback"
         @close="closeDelete"
       />
 
@@ -44,8 +44,12 @@
                 v-if="hasDeleteAccess"
                 :class="{'hidden': anySelected}"
                 :selected-count="selectedRows.length"
-                @click="callDelete(selectedRows)"
+                @click="askDeleteConfirmation({
+                  deleted: selectedRows,
+                  callback: () => deleteData(selectedRows),
+                })"
               />
+
             </wt-table-actions>
           </div>
         </header>
@@ -123,7 +127,10 @@
                 v-if="hasDeleteAccess"
                 action="delete"
                 class="table-action"
-                @click="callDelete(item)"
+                @click="askDeleteConfirmation({
+                  deleted: [item],
+                  callback: () => deleteData(item),
+                })"
               />
             </template>
           </wt-table>
@@ -149,18 +156,39 @@ import tableComponentMixin from '../../../../../app/mixins/objectPagesMixins/obj
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
 import QueueTypeProperties from '../lookups/QueueTypeProperties.lookup';
 import QueuePopup from './create-queue-popup.vue';
+import DeleteConfirmationPopup
+  from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
+import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
 
 const namespace = 'ccenter/queues';
 
 export default {
   name: 'TheQueues',
-  components: { QueuePopup },
+  components: { QueuePopup, DeleteConfirmationPopup },
   mixins: [tableComponentMixin],
 
   setup() {
     const { dummy } = useDummy({ namespace, showAction: true });
-    return { dummy };
+    const {
+      isVisible: isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+
+      askDeleteConfirmation,
+      closeDelete,
+    } = useDeleteConfirmationPopup();
+
+    return {
+      dummy,
+      isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+
+      askDeleteConfirmation,
+      closeDelete,
+    };
   },
+
   data: () => ({
     namespace,
     isQueueSelectPopup: false,

diff --git a/...es/queues/modules/members/components/communications/opened-queue-member-communication.vue b/...es/queues/modules/members/components/communications/opened-queue-member-communication.vue
@@ -7,9 +7,9 @@
     />
 
     <delete-confirmation-popup
-      v-show="deleteConfirmation.isDeleteConfirmationPopup"
-      :delete-count="deleteConfirmation.deleteCount"
-      :callback="deleteConfirmation.callback"
+      v-show="isDeleteConfirmationPopup"
+      :delete-count="deleteCount"
+      :callback="deleteCallback"
       @close="closeDelete"
     />
 
@@ -25,7 +25,10 @@
           v-if="!disableUserInput"
           :class="{'hidden': anySelected}"
           :selected-count="selectedRows.length"
-          @click="callDelete(selectedRows)"
+          @click="askDeleteConfirmation({
+            deleted: selectedRows,
+            callback: () => deleteData(selectedRows),
+          })"
         />
         <wt-icon-btn
           v-if="!disableUserInput"
@@ -65,7 +68,10 @@
           <wt-icon-action
             action="delete"
             class="table-action"
-            @click="callDelete(item)"
+            @click="askDeleteConfirmation({
+              deleted: [item],
+              callback: () => deleteData(item),
+            })"
           />
         </template>
       </wt-table>
@@ -79,11 +85,34 @@ import { mapActions, mapState } from 'vuex';
 import openedObjectTableTabMixin
   from '../../../../../../../../app/mixins/objectPagesMixins/openedObjectTableTabMixin/openedObjectTableTabMixin';
 import CommunicationPopup from './opened-queue-member-communication-popup.vue';
+import DeleteConfirmationPopup
+  from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
+import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+
 
 export default {
   name: 'OpenedQueueMemberCommunication',
-  components: { CommunicationPopup },
+  components: { CommunicationPopup, DeleteConfirmationPopup },
   mixins: [openedObjectTableTabMixin],
+  setup() {
+    const {
+      isVisible: isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+
+      askDeleteConfirmation,
+      closeDelete,
+    } = useDeleteConfirmationPopup();
+
+    return {
+      isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+
+      askDeleteConfirmation,
+      closeDelete,
+    };
+  },
   data: () => ({
     dataListValue: [],
     searchValue: '',

diff --git a/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue b/src/modules/contact-center/modules/queues/modules/members/components/the-queue-members.vue
@@ -45,9 +45,9 @@
       />
 
       <delete-confirmation-popup
-        v-show="deleteConfirmation.isDeleteConfirmationPopup"
-        :delete-count="deleteConfirmation.deleteCount"
-        :callback="deleteConfirmation.callback"
+        v-show="isDeleteConfirmationPopup"
+        :delete-count="deleteCount"
+        :callback="deleteCallback"
         @close="closeDelete"
       />
 
@@ -172,7 +172,10 @@
               <wt-icon-action
                 action="delete"
                 class="table-action"
-                @click="callDelete(item)"
+                @click="askDeleteConfirmation({
+                  deleted: [item],
+                  callback: () => deleteData(item),
+                })"
               />
             </template>
           </wt-table>
@@ -203,6 +206,9 @@ import TheQueueMembersFilters from '../modules/filters/components/the-queue-memb
 import destinationsPopup from './communications/opened-queue-member-destinations-popup.vue';
 import ResetPopup from './reset-members-popup.vue';
 import uploadPopup from './upload-members-popup.vue';
+import DeleteConfirmationPopup
+  from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
+import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
 
 export default {
   name: 'TheQueueMembers',
@@ -212,8 +218,30 @@ export default {
     destinationsPopup,
     ResetPopup,
     TheQueueMembersFilters,
+    DeleteConfirmationPopup,
   },
   mixins: [tableComponentMixin],
+
+  setup() {
+    const {
+      isVisible: isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+
+      askDeleteConfirmation,
+      closeDelete,
+    } = useDeleteConfirmationPopup();
+
+    return {
+      isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+
+      askDeleteConfirmation,
+      closeDelete,
+    };
+  },
+
   data: () => ({
     namespace: 'ccenter/queues/members',
     isUploadPopup: false,