merge master[WTEL-4740](https://webitel.atlassian.net/browse/WTEL-4740)

package.json

@@ -15,7 +15,7 @@
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
-    "@webitel/ui-sdk": "^24.12.16",
+    "@webitel/ui-sdk": "^24.12.28",
     "axios": "^1.7.7",
     "deep-equal": "^2.2.1",
     "dompurify": "^3.1.2",

src/app/locale/en/en.js

@@ -108,6 +108,8 @@ export default {
     slas: {
       slas: 'SLA | SLAs',
       conditions: 'Condition | Conditions',
+      editCondition: 'Edit condition',
+      addCondition: 'Add condition',
       reactionTime: 'Reaction time',
       resolutionTime: 'Resolution time',
       validFrom: 'Valid from',

src/app/locale/ru/ru.js

@@ -107,6 +107,8 @@ export default {
     slas: {
       slas: 'SLA | SLAs',
       conditions: 'Условие | Условия',
+      editCondition: 'Редактировать условие',
+      addCondition: 'Добавить условие',
       reactionTime: 'Плановое время реакции',
       resolutionTime: 'Плановое время решения',
       validFrom: 'Действителен с',

src/app/locale/ua/ua.js

@@ -107,6 +107,8 @@ export default {
     slas: {
       slas: 'SLA | SLAs',
       conditions: 'Умова | Умови',
+      editCondition: 'Редагувати умову',
+      addCondition: 'Додати умову',
       reactionTime: 'Плановий час реакції',
       resolutionTime: 'Плановий час вирішення',
       validFrom: 'Дійсний з',

src/modules/configuration/components/the-configuration.vue

@@ -1,41 +1,43 @@
 <template>
   <wt-navigation-menu
     :nav="nav"
-    :icons="icons"/>
+    :icons="icons"
+  />
 </template>
 
 <script setup>
 import { useI18n } from 'vue-i18n';
+import { computed, reactive } from 'vue';
 import lookupsIcon from '../../../app/assets/icons/sprite/crm-lookups.svg';
 import CrmSections from '@webitel/ui-sdk/src/enums/WebitelApplications/CrmSections.enum.js';
 
 const { t } = useI18n();
 
 const icons = [lookupsIcon];
 
-const nav = [
+const nav = reactive([
   {
     value: 'lookups',
-    name: t('lookups.lookups'),
+    name: computed(() => t('lookups.lookups')),
     subNav: [
-      {
-        value: CrmSections.SLAS,
-        name: t('lookups.slas.slas', 2),
-        route: 'lookups/slas',
-      },
       {
         value: CrmSections.SOURCES,
-        name: t('lookups.sources.sources', 2),
+        name: computed(() => t('lookups.sources.sources', 2)),
         route: 'lookups/sources',
       },
+      {
+        value: CrmSections.SLAS,
+        name: computed(() => t('lookups.slas.slas', 2)),
+        route: 'lookups/slas',
+      },
       {
         value: CrmSections.CONTACT_GROUPS,
-        name: t('lookups.contactGroups.contactGroups', 2),
+        name: computed(() => t('lookups.contactGroups.contactGroups', 2)),
         route: 'lookups/contact-groups',
       },
     ],
   },
-];
+]);
 </script>
 
 <style lang="scss" scoped>

src/modules/configuration/modules/lookups/modules/contact-groups/api/contactGroups.js

@@ -6,7 +6,6 @@ import {
 } from '@webitel/ui-sdk/src/api/defaults/index.js';
 import applyTransform, {
   camelToSnake,
-  generateUrl,
   merge,
   mergeEach,
   notify,
@@ -26,7 +25,13 @@ const contactGroupsService = new GroupsApiFactory(configuration, '', instance);
 
 const baseUrl = '/contacts/groups';
 
-const fieldsToSend = ['name', 'description', 'enabled', 'type', 'default_group'];
+const fieldsToSend = [
+  'name',
+  'description',
+  'enabled',
+  'type',
+  'default_group',
+];
 
 const getContactGroupsList = async (params) => {
   const fieldsToSend = ['page', 'size', 'q', 'sort', 'fields', 'type'];

src/modules/configuration/modules/lookups/modules/contact-groups/api/dymanicGroups.js

@@ -0,0 +1,60 @@
+import {
+  getDefaultInstance, getDefaultOpenAPIConfig,
+} from '@webitel/ui-sdk/src/api/defaults/index.js';
+import applyTransform, {
+  camelToSnake,
+  notify,
+  sanitize,
+  snakeToCamel,
+} from '@webitel/ui-sdk/src/api/transformers/index.js';
+import { DynamicGroupsApiFactory } from 'webitel-sdk';
+
+const instance = getDefaultInstance();
+const configuration = getDefaultOpenAPIConfig();
+
+const dynamicContactGroupsService = new DynamicGroupsApiFactory(configuration, '', instance);
+
+const fieldsToSend = ['name', 'description', 'enabled', 'type', 'default_group_id'];
+
+const preRequestHandler = (item) => {
+  return {
+    ...item,
+    type: item.type.toUpperCase(),
+    defaultGroupId: item.defaultGroup.id,
+  }
+};
+
+const addDynamicContactGroup = async (itemInstance) => {
+  const item = applyTransform(itemInstance, [
+    preRequestHandler,
+    camelToSnake(),
+    sanitize(fieldsToSend),
+  ]);
+
+  try {
+    const response = await dynamicContactGroupsService.createDynamicGroup(item);
+    return applyTransform(response.data, [
+      snakeToCamel()
+    ]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const updateDynamicContactGroup = async ({ itemInstance, itemId: id }) => {
+  const item = applyTransform(itemInstance, [preRequestHandler, camelToSnake(), sanitize(fieldsToSend)]);
+
+  try {
+    const response = await dynamicContactGroupsService.updateDynamicGroup(id, item);
+    return applyTransform(response.data, [snakeToCamel()]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const dynamicContactGroupsAPI = {
+  add: addDynamicContactGroup,
+  update: updateDynamicContactGroup,
+}
+
+export default dynamicContactGroupsAPI;

src/modules/configuration/modules/lookups/modules/slas/components/opened-sla-general.vue

@@ -27,23 +27,23 @@
         @input="setItemProp({ path: 'description', value: $event })"
       />
 
-      <div>
+      <div class="opened-card-input-grid ">
         <wt-timepicker
           :label="t('lookups.slas.reactionTime')"
           :value="itemInstance.reactionTime"
-          format='hh:mm'
+          format="hh:mm"
+          required
           @input="setItemProp({ path: 'reactionTime', value: +$event })"
         />
 
         <wt-timepicker
           :label="t('lookups.slas.resolutionTime')"
           :value="itemInstance.resolutionTime"
-          format='hh:mm'
+          format="hh:mm"
+          required
           @input="setItemProp({ path: 'resolutionTime', value: +$event })"
         />
-      </div>
 
-      <div class="opened-sla-general__wrapper">
         <wt-datepicker
           :label="t('lookups.slas.validFrom')"
           :value="itemInstance.validFrom"
@@ -84,8 +84,10 @@ function loadCalendarsList(search) {
 </script>
 
 <style lang="scss" scoped>
-.opened-sla-general__wrapper {
-  display: flex;
-  gap: var(--spacing-sm);
+// TODO: temporary solution. Will be fixed with typography
+.opened-sla-general {
+  :deep(.wt-textarea__textarea) {
+    min-height: 120px;
+  }
 }
 </style>

src/modules/configuration/modules/lookups/modules/slas/components/the-slas.vue

@@ -20,9 +20,9 @@
           <wt-action-bar
             :include="[IconAction.ADD, IconAction.REFRESH, IconAction.DELETE]"
             :disabled:add="!hasCreateAccess"
-            :disabled:delete="!hasDeleteAccess || !selected.length"
+            :disabled:delete="!selected.length"
             @click:add="router.push({ name: `${CrmSections.SLAS}-card`, params: { id: 'new' }})"
-            @click:refresh="loadData"
+            @click:refresh="refresh"
             @click:delete="askDeleteConfirmation({
                   deleted: selected,
                   callback: () => deleteData(selected),
@@ -37,8 +37,6 @@
           </wt-action-bar>
         </header>
 
-        <wt-loader v-show="isLoading" />
-
         <delete-confirmation-popup
           :shown="isDeleteConfirmationPopup"
           :callback="deleteCallback"
@@ -56,7 +54,9 @@
             :text="textEmpty"
           />
 
-          <wt-table-transition v-if="dataList.length && !isLoading">
+          <wt-loader v-show="isLoading" />
+
+          <div v-if="dataList.length && !isLoading">
             <wt-table
               :data="dataList"
               :headers="headers"
@@ -94,7 +94,7 @@
                 />
               </template>
             </wt-table>
-          </wt-table-transition>
+          </div>
           <filter-pagination
             :namespace="filtersNamespace"
             :is-next="isNext"
@@ -106,14 +106,13 @@
 </template>
 
 <script setup>
-import { computed, onUnmounted } from 'vue';
+import { computed, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { useClose } from '@webitel/ui-sdk/src/composables/useClose/useClose.js';
 import IconAction from '@webitel/ui-sdk/src/enums/IconAction/IconAction.enum.js';
 import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
-import WtTableTransition from '@webitel/ui-sdk/src/components/on-demand/wt-table-transition/wt-table-transition.vue';
 import CrmSections from '@webitel/ui-sdk/src/enums/WebitelApplications/CrmSections.enum.js';
 import {
   useDeleteConfirmationPopup,
@@ -123,7 +122,7 @@ import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/fil
 import DeleteConfirmationPopup
   from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';
-import { useTableStore } from '@webitel/ui-sdk/src/modules/TableStoreModule/composables/useTableStore.js';
+import { useTableStore } from '@webitel/ui-sdk/src/store/new/modules/tableStoreModule/useTableStore.js';
 import { useTableEmpty } from '@webitel/ui-sdk/src/modules/TableComponentModule/composables/useTableEmpty.js';
 import filters from '../modules/filters/store/filters.js';
 
@@ -160,10 +159,12 @@ const {
   sort,
   setSelected,
   onFilterEvent,
+  resetState,
 } = useTableStore(baseNamespace);
 
 const {
   namespace: filtersNamespace,
+  filtersValue,
   restoreFilters,
 
   subscribe,
@@ -179,13 +180,14 @@ restoreFilters();
 
 onUnmounted(() => {
   flushSubscribers();
+  resetState();
 });
 
 const path = computed(() => [
   { name: t('crm') },
   { name: t('startPage.configuration.name'), route: '/configuration' },
   { name: t('lookups.lookups'), route: '/configuration' },
-  { name: t('lookups.slas.slas', 2), route: '/slas' },
+  { name: t('lookups.slas.slas', 2) },
 ]);
 
 const { close } = useClose('configuration');
@@ -202,6 +204,21 @@ const {
   image: imageEmpty,
   text: textEmpty,
 } = useTableEmpty({ dataList, filters, error, isLoading });
+
+const refresh = () => {
+  // https://webitel.atlassian.net/browse/WTEL-5711
+  // because 'selected' value needs cleaned
+
+  resetState();
+  loadData();
+};
+
+watch(() => filtersValue.value, () => {
+  // https://webitel.atlassian.net/browse/WTEL-5744
+  // because 'selected' value needs cleaned when changing filters
+
+  resetState();
+});
 </script>
 
 <style lang="scss" scoped>