fix: api and small refactore component[WTEL-4883](https://webitel.atl…

…assian.net/browse/WTEL-4883)

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.10.77",
+    "@webitel/ui-sdk": "^24.10.80",
     "axios": "^1.7.7",
     "deep-equal": "^2.2.1",
     "dompurify": "^3.1.2",

src/modules/configuration/modules/lookups/modules/slas/api/slas.js

@@ -7,14 +7,11 @@ import applyTransform, {
   camelToSnake,
   generateUrl,
   merge,
-  mergeEach,
   notify,
   sanitize,
   snakeToCamel,
   starToSearch,
 } from '@webitel/ui-sdk/src/api/transformers/index.js';
-import deepCopy from 'deep-copy';
-import ConvertDuration from '@webitel/ui-sdk/src/scripts/convertDuration.js';
 
 const instance = getDefaultInstance();
 
@@ -36,7 +33,6 @@ const getSlasList = async (params) => {
   try {
     const response = await instance.get(url);
     const { items, next } = applyTransform(response.data, [
-      snakeToCamel(['profile']),
       merge(getDefaultGetListResponse()),
     ]);
     return {
@@ -48,8 +44,6 @@ const getSlasList = async (params) => {
   }
 };
 
-
-
 const getSla = async ({ itemId: id }) => {
   const itemResponseHandler = (item) => {
     return item.sla;
@@ -62,81 +56,45 @@ const getSla = async ({ itemId: id }) => {
   try {
     const response = await instance.get(url);
     return applyTransform(response.data, [
+      snakeToCamel(),
       itemResponseHandler,
     ]);
   } catch (err) {
     throw applyTransform(err, [notify]);
   }
 };
 
-const convertTime = (value) => {
-  const generalTime = ConvertDuration(value);
-  const time = {};
-
-  const hours = generalTime.split(':')[0];
-  const hoursValue = hours[0] === '0' ? hours[1] : hours;
-
-  const minutes = generalTime.split(':')[1];
-  const minutesValue = minutes[0] === '0' ? minutes[1] : minutes;
-
-  if(hoursValue !== '00' && hoursValue !== '0') {
-    time.hours = hoursValue;
-  }
-
-  if(minutesValue !== '00' && minutesValue !== '0') {
-    time.minutes = minutesValue;
-  }
-
-  if(!time.hours && !time.minutes) {
-    return null;
-  }
-
-  return time;
-}
-
 const preRequestHandler = (item) => {
-  const copy = deepCopy(item);
-
-  if(copy.validFrom) {
-    copy.validFrom = new Date(copy.validFrom).toISOString();
-  }
-  if(copy.validTo) {
-    copy.validTo = new Date(copy.validTo).toISOString();
-  }
-  if(copy.reactionTime) {
-    const timeValue = convertTime(copy.reactionTime);
-    if(!timeValue) {
-      delete copy.reactionTime;
-    } else {
-      copy.reactionTime = timeValue;
-    }
-  }
-
-  if(copy.resolutionTime) {
-    const timeValue = convertTime(copy.resolutionTime);
-    if(!timeValue) {
-      delete copy.resolutionTime;
-    } else {
-      copy.resolutionTime = timeValue;
-    }
+  return {
+    ...item,
+    calendarId: item.calendar.id,
   }
-
-  if(copy.calendar) {
-    copy.calendarId = copy.calendar.id;
-  }
-
-  return copy;
 };
 
 const addSla = async ({ itemInstance }) => {
   const fieldsToSend = ['name', 'description', 'validFrom', 'validTo', 'calendarId', 'reactionTime', 'resolutionTime'];
   const item = applyTransform(itemInstance, [
     preRequestHandler,
     sanitize(fieldsToSend),
+    camelToSnake(),
   ]);
   try {
     const response = await instance.post(baseUrl, item);
-    return applyTransform(response.data, []);
+    return applyTransform(response.data, [
+      snakeToCamel()
+    ]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const updateSla = async ({ itemInstance, itemId: id }) => {
+  const item = applyTransform(itemInstance, [camelToSnake(), sanitize(fieldsToSend)]);
+
+  const url = `${baseUrl}/${id}`;
+  try {
+    const response = await instance.put(url, item);
+    return applyTransform(response.data, [snakeToCamel()]);
   } catch (err) {
     throw applyTransform(err, [notify]);
   }
@@ -155,8 +113,9 @@ const deleteSla = async ({ id }) => {
 const SlasAPI = {
   getList: getSlasList,
   get: getSla,
-  delete: deleteSla,
   add: addSla,
+  update: updateSla,
+  delete: deleteSla,
 }
 
 export default SlasAPI;

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

@@ -55,15 +55,15 @@
       <div class="opened-sla-general__wrapper">
         <wt-datepicker
           :disabled="disableUserInput"
-          :label="$t('lookups.slas.validFrom')"
+          :label="t('lookups.slas.validFrom')"
           :value="itemInstance.validFrom"
           mode="datetime"
           @input="setItemProp({ prop: 'validFrom', value: $event })"
         />
 
         <wt-datepicker
           :disabled="disableUserInput"
-          :label="$t('lookups.slas.validTo')"
+          :label="t('lookups.slas.validTo')"
           :value="itemInstance.validTo"
           mode="datetime"
           @input="setItemProp({ prop: 'validTo', value: $event })"

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

@@ -92,6 +92,7 @@ const {
 const { v$, invalid } = useValidate(validateSchema, { itemInstance });
 const { isNew, pathName, disabledSave, saveText, save, initialize } = useCardComponent({
   ...restStore,
+  id,
   itemInstance,
   invalid,
 });

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

@@ -20,8 +20,14 @@
           <wt-actions-bar
             mode="table"
             :actions="[IconAction.ADD, IconAction.REFRESH, IconAction.DELETE]"
+            :disabled:add="!hasCreateAccess"
+            :disabled:delete="!hasDeleteAccess || !selected.length"
             @click:add="router.push({ name: `${CrmSections.SLAS}-card`, params: { id: 'new' }})"
             @click:refresh="loadData"
+            @click:delete="askDeleteConfirmation({
+                  deleted: selected,
+                  callback: () => deleteData(selected),
+                })"
           >
             <template #search-bar>
               <filter-search
@@ -34,7 +40,6 @@
       </section>
 
 
-
       <wt-loader v-show="isLoading" />
 
       <delete-confirmation-popup
@@ -109,7 +114,7 @@ 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 { computed, onUnmounted, ref } from 'vue';
+import { computed, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
@@ -140,7 +145,6 @@ const {
   isLoading,
   headers,
   isNext,
-  error,
 
   loadData,
   deleteData,
@@ -175,19 +179,6 @@ const path = computed(() => [
   { name: t('lookups.slas.slas', 2), route: '/slas' },
 ]);
 
-const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
-
-const deletableSelectedItems = computed(() => (
-  selected.value.filter((item) => item.access.delete)
-));
-
-function deleteSelectedItems() {
-  return askDeleteConfirmation({
-    deleted: deletableSelectedItems.value,
-    callback: () => deleteData([...deletableSelectedItems.value]),
-  });
-}
-
 const { close } = useClose('configuration');
 
 function edit(item) {

src/modules/configuration/modules/lookups/modules/slas/store/slas.js

@@ -10,6 +10,16 @@ import filters from '../modules/filters/store/filters';
 
 const resettableState = {
   itemInstance: {
+    name: '',
+    description: '',
+    calendar: {
+      id: '',
+      name: '',
+    },
+    reactionTime: 0,
+    resolutionTime: 0,
+    validTo: 0,
+    validFrom: 0,
   },
 };