refactor: communications tab new filters [WTEL-4539]

webitel · May 24, 2024 · acfa275 · acfa275
1 parent 6bc5ac8
commit acfa275
Show file tree

Hide file tree

Showing 13 changed files with 91 additions and 108 deletions.
diff --git a/src/modules/contacts/components/opened-contact-communication-popup.vue b/src/modules/contacts/components/opened-contact-communication-popup.vue
@@ -66,7 +66,7 @@ const store = useStore();
 const props = defineProps({
   channel: {
     type: String,
-    default: 'number',
+    required: true,
   },
   namespace: {
     type: String,
@@ -90,6 +90,7 @@ const communicationOptions = [
     addText: t('contacts.communications.emails.addTitle'),
     updateText: t('contacts.communications.emails.editTitle'),
     filterField: EngineCommunicationChannels.Email,
+    getNamespace: `${props.namespace}/GET_EMAIL`,
     addNamespace: `${props.namespace}/ADD_EMAIL`,
     updateNamespace: `${props.namespace}/UPDATE_EMAIL`,
   },

diff --git a/src/modules/contacts/components/the-contacts.vue b/src/modules/contacts/components/the-contacts.vue
@@ -179,8 +179,10 @@ const {
   flushSubscribers,
 } = useTableFilters(namespace);
 
-subscribe({ event: FilterEvent.FILTER_SET, callback: onFilterEvent });
-subscribe({ event: FilterEvent.RESTORED, callback: onFilterEvent });
+subscribe({
+  event: '*',
+  callback: onFilterEvent,
+});
 
 restoreFilters();
 

diff --git a/src/modules/contacts/modules/emails/api/EmailsAPI.js b/src/modules/contacts/modules/emails/api/EmailsAPI.js
@@ -39,7 +39,7 @@ const getList = async (params) => {
       size,
       q,
       sort,
-      fields,
+      ['etag', ...fields],
       id,
     );
     const { data, next } = applyTransform(response.data, [

diff --git a/src/modules/contacts/modules/emails/components/the-emails.vue b/src/modules/contacts/modules/emails/components/the-emails.vue
@@ -2,15 +2,13 @@
   <div class="contact-communication-tab emails">
 
     <communication-popup
-      :shown="isCommunicationPopup"
-      :item="editedItem"
       :namespace="namespace"
       channel="email"
-      @close="closePopup"
+      @close="closeCommunicationPopup"
     />
 
     <delete-confirmation-popup
-      v-if="isConfirmationPopup"
+      :shown="isConfirmationPopup"
       :callback="deleteCallback"
       :delete-count="deleteCount"
       @close="closeDelete"
@@ -20,7 +18,7 @@
       <wt-icon-action
         :disabled="!access.hasRbacEditAccess"
         action="add"
-        @click="isCommunicationPopup = true"
+        @click="addCommunication"
       />
     </header>
 
@@ -64,7 +62,7 @@
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
             action="edit"
-            @click="edit(item)"
+            @click="editCommunication(item)"
           />
           <wt-icon-action
             :disabled="!access.hasRbacEditAccess"
@@ -81,7 +79,7 @@
 </template>
 
 <script setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters';
 import { useTableStore } from '@webitel/ui-sdk/src/modules/TableStoreModule/composables/useTableStore';
@@ -90,6 +88,7 @@ import DeleteConfirmationPopup
 import {
   useDeleteConfirmationPopup,
 } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import dummyLight from '../assets/email-dummy-light.svg';
 import dummyDark from '../assets/email-dummy-dark.svg';
@@ -104,6 +103,8 @@ const props = defineProps({
   },
 });
 
+const router = useRouter();
+const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
 
@@ -118,9 +119,25 @@ const {
   patchProperty,
   deleteData,
   sort,
+  onFilterEvent,
 } = useTableStore(props.namespace);
 
-const { filtersNamespace } = useTableFilters(namespace);
+const {
+  subscribe,
+  flushSubscribers,
+  restoreFilters,
+} = useTableFilters(namespace);
+
+subscribe({
+  event: '*',
+  callback: onFilterEvent,
+});
+
+restoreFilters();
+
+onUnmounted(() => {
+  flushSubscribers();
+});
 
 const {
   isVisible: isConfirmationPopup,
@@ -131,24 +148,35 @@ const {
   closeDelete,
 } = useDeleteConfirmationPopup();
 
-const editedItem = ref(null);
-const isCommunicationPopup = ref(false);
-
 const showDummy = computed(() => !dataList.value.length);
 const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
 
 function setAsPrimary({ item, index }) {
   return store.dispatch(`${namespace}/SET_AS_PRIMARY`, { item, index });
 }
 
-function edit(item) {
-  editedItem.value = item;
-  isCommunicationPopup.value = true;
+function addCommunication() {
+  return router.push({
+    ...route,
+    params: { commId: 'new' },
+  });
+}
+
+function editCommunication({ id }) {
+  return router.push({
+    ...route,
+    params: { commId: id },
+  });
 }
 
-function closePopup() {
-  isCommunicationPopup.value = false;
-  editedItem.value = null
+function closeCommunicationPopup() {
+  const params = { ...route.params };
+  delete params.commId;
+
+  return router.push({
+    ...route,
+    params,
+  });
 }
 
 </script>

diff --git a/src/modules/contacts/modules/emails/modules/filters/store/filters.js b/src/modules/contacts/modules/emails/modules/filters/store/filters.js
@@ -1,36 +1,17 @@
 import FiltersStoreModule
   from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule';
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
 
 const filtersList = [
   {
     name: 'page',
     value: 1,
-    defaultValue: 1,
-    router,
-    get: ['value', 'query'],
-    set: ['value', 'query'],
-    restore: ['query'],
   },
   {
     name: 'size',
     value: 1000,
-    defaultValue: 1000,
-    router,
-    get: ['value', 'query'],
-    set: ['value', 'query'],
-    restore: ['query'],
   },
   {
     name: 'sort',
-    value: '',
-    defaultValue: '',
-    router,
-    get: ['value', 'query'],
-    set: ['value', 'query'],
-    restore: ['query'],
   },
 
 ];

diff --git a/src/modules/contacts/modules/emails/store/emails.js b/src/modules/contacts/modules/emails/store/emails.js
@@ -10,7 +10,6 @@ import filters from '../modules/filters/store/filters';
 
 const getters = {
   PARENT_ID: (state, getters, rootState) => rootState.contacts.card.itemId,
-  REQUIRED_FIELDS: () => ['etag'],
 };
 
 const actions = {
@@ -26,6 +25,10 @@ const actions = {
       await context.dispatch('LOAD_DATA_LIST');
     }
   },
+  GET_EMAIL: async (context, { id }) => {
+    await context.dispatch('LOAD_DATA_LIST');
+    return context.state.dataList.find((item) => item.id === id);
+  },
   ADD_EMAIL: async (context, { itemInstance }) => {
     const primary = !context.state.dataList.length;
     try {

diff --git a/src/modules/contacts/modules/messaging/api/MessagingAPI.js b/src/modules/contacts/modules/messaging/api/MessagingAPI.js
@@ -31,7 +31,7 @@ const getList = async (params) => {
       size,
       q,
       sort,
-      fields,
+      ['etag', ...fields],
       id,
     );
     const { data, next } = applyTransform(response.data, [

diff --git a/src/modules/contacts/modules/messaging/components/the-messaging.vue b/src/modules/contacts/modules/messaging/components/the-messaging.vue
@@ -2,7 +2,7 @@
   <div class="contact-communication-tab">
 
     <delete-confirmation-popup
-      v-if="isConfirmationPopup"
+      :shown="isConfirmationPopup"
       :callback="deleteCallback"
       :delete-count="deleteCount"
       @close="closeDelete"
@@ -54,7 +54,7 @@
 </template>
 
 <script setup>
-import { computed, inject } from 'vue';
+import { computed, inject, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters';
@@ -91,9 +91,25 @@ const {
 
   deleteData,
   sort,
+  onFilterEvent,
 } = useTableStore(props.namespace);
 
-const { filtersNamespace } = useTableFilters(namespace);
+const {
+  subscribe,
+  flushSubscribers,
+  restoreFilters,
+} = useTableFilters(namespace);
+
+subscribe({
+  event: '*',
+  callback: onFilterEvent,
+});
+
+restoreFilters();
+
+onUnmounted(() => {
+  flushSubscribers();
+});
 
 const {
   isVisible: isConfirmationPopup,

diff --git a/src/modules/contacts/modules/messaging/modules/filters/store/filters.js b/src/modules/contacts/modules/messaging/modules/filters/store/filters.js
@@ -1,36 +1,17 @@
 import FiltersStoreModule
   from '@webitel/ui-sdk/src/modules/Filters/store/FiltersStoreModule';
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
 
 const filtersList = [
   {
     name: 'page',
     value: 1,
-    defaultValue: 1,
-    router,
-    get: ['value', 'query'],
-    set: ['value', 'query'],
-    restore: ['query'],
   },
   {
     name: 'size',
     value: 1000,
-    defaultValue: 1000,
-    router,
-    get: ['value', 'query'],
-    set: ['value', 'query'],
-    restore: ['query'],
   },
   {
     name: 'sort',
-    value: '',
-    defaultValue: '',
-    router,
-    get: ['value', 'query'],
-    set: ['value', 'query'],
-    restore: ['query'],
   },
 ];