feature: queues filters added but WIP [WTEL-3222]

package.json

@@ -36,7 +36,7 @@
     "vue-router": "^4.2.5",
     "vue2-dropzone": "^3.6.0",
     "vuex": "^4.1.0",
-    "webitel-sdk": "^23.12.9"
+    "webitel-sdk": "^23.12.11"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.4.0",

src/app/locale/en/en.js

@@ -730,6 +730,8 @@ export default {
         waiting: 'Waiting',
         ringtone: 'Ringtone',
         priority: 'Priority',
+        teams: 'Team | Teams',
+        tags: 'Tags',
         newQueue: 'New queue',
         blacklist: 'Stop list',
         newQueueDescription: 'New queue descriotion',
@@ -1063,6 +1065,11 @@ export default {
     },
   },
 
+  filters: {
+    team: 'Team',
+    queueType: 'Queue Type',
+  },
+
   utils: {
     downloadFilesBtn: {
       downloadFiles: 'Download files',

src/app/locale/kz/kz.js

@@ -640,6 +640,8 @@ export default {
         waiting: 'Күту',
         ringtone: 'Әуен',
         priority: 'Басымдық',
+        teams: 'Команда| Командалар',
+        tags: 'Тегтер',
         blacklist: 'Тоқтату ',
         newQueue: 'Жаңа кезек',
         newQueueDescription: 'Кезек түрлері',
@@ -877,6 +879,10 @@ export default {
       rowsPerPage: 'Бір беттегі жолдар саны',
     },
   },
+  filters: {
+    team: 'Команда',
+    queueType: 'Кезек түрі',
+  },
   utils: {
     downloadFilesBtn: {
       downloadFiles: 'Файлдарды жүктеп алу',

src/app/locale/ru/ru.js

@@ -728,6 +728,8 @@ export default {
         waiting: 'Ожидание',
         ringtone: 'Мелодия',
         priority: 'Приоритет',
+        teams: 'Команда| Команды',
+        tags: 'Теги',
         blacklist: 'Стоп лист',
         newQueue: 'Новая очередь',
         newQueueDescription: 'Типы очередей',
@@ -1061,6 +1063,11 @@ export default {
     },
   },
 
+  filters: {
+    queueType: 'Тип очереди',
+    team: 'Команда',
+  },
+
   utils: {
     downloadFilesBtn: {
       downloadFiles: 'Скачать файлы',

src/app/locale/ua/ua.js

@@ -730,6 +730,8 @@ export default {
         waiting: 'Очікування',
         ringtone: 'Мелодія',
         priority: 'Пріоритет',
+        teams: 'Команда| Команди',
+        tags: 'Теги',
         blacklist: 'Стоп лист',
         newQueue: 'Нова черга',
         newQueueDescription: 'Типи черг',
@@ -1060,6 +1062,11 @@ export default {
     },
   },
 
+  filters: {
+    team: 'Команда',
+    queueType: 'Тип черги',
+  },
+
   utils: {
     downloadFilesBtn: {
       downloadFiles: 'Скачати файли',

src/modules/contact-center/modules/queues/api/queues.js

@@ -44,6 +44,7 @@ const fieldsToSend = [
   'afterSchema',
   'stickyAgent',
   'grantee',
+  'tags',
 ];
 
 const preRequestHandler = (item) => {
@@ -63,13 +64,17 @@ const getQueuesList = async (params) => {
     waiting: 0,
     priority: '0',
   };
+
   const {
     page,
     size,
     search,
     sort,
     fields,
     id,
+    queueType,
+    team,
+    tags,
   } = applyTransform(params, [
     merge(getDefaultGetParams()),
     starToSearch('search'),
@@ -83,6 +88,9 @@ const getQueuesList = async (params) => {
       sort,
       fields,
       id,
+      queueType,
+      team,
+      tags,
     );
     const { items, next } = applyTransform(response.data, [
       snakeToCamel(doNotConvertKeys),
@@ -213,6 +221,42 @@ const getQueuesLookup = (params) => getQueuesList({
   fields: params.fields || ['id', 'name', 'type'],
 });
 
+const getQueuesTags = async (params) => {
+  const {
+    page,
+    size,
+    search,
+    sort,
+    fields,
+  } = applyTransform(params, [
+    merge(getDefaultGetParams()),
+    starToSearch(),
+    camelToSnake(doNotConvertKeys),
+  ]);
+  try {
+    const response = await queueService.searchQueueTags(
+        page,
+        size,
+        search,
+        sort,
+        fields,
+    );
+    const { items, next } = applyTransform(response.data, [
+      snakeToCamel(doNotConvertKeys),
+      merge(getDefaultGetListResponse()),
+    ]);
+    return {
+      items,
+      next,
+    };
+  } catch (err) {
+    throw applyTransform(err, [
+
+      notify,
+    ]);
+  }
+};
+
 const QueuesAPI = {
   getList: getQueuesList,
   get: getQueue,
@@ -221,6 +265,7 @@ const QueuesAPI = {
   update: updateQueue,
   delete: deleteQueue,
   getLookup: getQueuesLookup,
+  getQueuesTags,
 };
 
 export default QueuesAPI;

src/modules/contact-center/modules/queues/components/the-queues.vue

@@ -1,6 +1,5 @@
 <template>
   <wt-page-wrapper
-    :actions-panel="false"
     class="queues"
   >
     <template #header>
@@ -11,6 +10,12 @@
         <wt-headline-nav :path="path" />
       </wt-page-header>
     </template>
+    <template #actions-panel>
+      <the-queues-filters
+        :namespace="filtersNamespace"
+      />
+    </template>
+
     <template #main>
       <queue-popup
         v-if="isQueueSelectPopup"
@@ -100,6 +105,19 @@
                 {{ item.team.name }}
               </wt-item-link>
             </template>
+            <template #tags="{ item }">
+              <div
+                v-if="item.tags"
+                class="the-queues__tags"
+              >
+                <wt-chip
+                  v-for="(tag, key) of item.tags"
+                  :key="key"
+                >
+                  {{ tag.name }}
+                </wt-chip>
+              </div>
+            </template>
             <template #state="{ item, index }">
               <wt-switcher
                 :disabled="!hasEditAccess"
@@ -153,6 +171,7 @@
 import { useDummy } from '../../../../../app/composables/useDummy';
 import tableComponentMixin from '../../../../../app/mixins/objectPagesMixins/objectTableMixin/tableComponentMixin';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
+import TheQueuesFilters from '../modules/filters/components/the-queues-filters.vue';
 import QueueTypeProperties from '../lookups/QueueTypeProperties.lookup';
 import QueuePopup from './create-queue-popup.vue';
 import DeleteConfirmationPopup
@@ -163,7 +182,7 @@ const namespace = 'ccenter/queues';
 
 export default {
   name: 'TheQueues',
-  components: { QueuePopup, DeleteConfirmationPopup },
+  components: { TheQueuesFilters, QueuePopup, DeleteConfirmationPopup },
   mixins: [tableComponentMixin],
 
   setup() {
@@ -202,6 +221,16 @@ export default {
         { name: this.$tc('objects.ccenter.queues.queues', 2), route: '/contact-center/queues' },
       ];
     },
+    filtersNamespace() {
+      return `${this.namespace}/filters`;
+    },
+  },
+  watch: {
+    '$route.query': {
+      async handler() {
+        await this.loadList();
+      },
+    },
   },
 
   methods: {
@@ -222,9 +251,13 @@ export default {
       this.isQueueSelectPopup = true;
     },
   },
-
 };
 </script>
 
 <style lang="scss" scoped>
+.the-queues__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+}
 </style>

src/modules/contact-center/modules/queues/modules/filters/api/teamLookupApi.js

@@ -0,0 +1,55 @@
+import { AgentTeamServiceApiFactory } from 'webitel-sdk';
+import {
+  getDefaultGetListResponse,
+  getDefaultGetParams,
+} from '@webitel/ui-sdk/src/api/defaults';
+import applyTransform, {
+  merge,
+  notify,
+  snakeToCamel,
+  starToSearch,
+} from '@webitel/ui-sdk/src/api/transformers';
+import instance from '../../../../../../../app/api/instance';
+import configuration from '../../../../../../../app/api/openAPIConfig';
+
+const teamService = new AgentTeamServiceApiFactory(configuration, '', instance);
+
+const getList = async (params) => {
+  const {
+    page,
+    size,
+    search,
+    sort,
+    fields,
+    id,
+  } = applyTransform(params, [
+    merge(getDefaultGetParams()),
+    starToSearch('search'),
+  ]);
+
+  try {
+    const response = await teamService.searchAgentTeam(
+      page,
+      size,
+      search,
+      sort,
+      fields,
+      id,
+    );
+    const { items, next } = applyTransform(response.data, [
+      snakeToCamel(),
+      merge(getDefaultGetListResponse()),
+    ]);
+
+    return {
+      items,
+      next,
+    };
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+export default getList;