@webitel/ui-sdk 24.12.169 → 24.12.171

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.169",
+  "version": "24.12.171",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-divider/_variables.scss

@@ -4,5 +4,5 @@
 }
 
 :root.theme--dark {
-  --divider-border-color: var(--grey-darken-3);
+  --divider-border-color: var(--grey-darken-2);
 }

package/src/components/wt-empty/wt-empty.vue

@@ -272,6 +272,7 @@ const onSecondaryClick = onClick('secondary');
 @use '../../css/main.scss';
 
 .wt-empty {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   flex-direction: column;

package/src/components/wt-icon-action/iconMappings.js

@@ -13,6 +13,8 @@ export const WtIconActionIconMappings = Object.freeze({
   [IconAction.COLUMNS]: 'column-select',
   [IconAction.VARIABLES]: 'variable-select',
   [IconAction.CLOSE]: 'close--filled',
+  [IconAction.CANCEL]: 'close',
   [IconAction.CLEAR]: 'clear',
   [IconAction.ADD_FILTER]: 'add-filter',
+  [IconAction.SAVE]: 'save',
 });

package/src/components/wt-icon-action/wt-icon-action.vue

@@ -4,7 +4,8 @@
       <wt-icon-btn
         :disabled="disabled"
         :icon="iconAction.icon"
-        @click="emit('click')"
+        @click="emit('click', $event)"
+        @mousedown="emit('mousedown', $event)"
       />
     </template>
     {{ t(iconAction.hint) }}
@@ -33,6 +34,8 @@ const props = defineProps({
         IconAction.HISTORY,
         IconAction.DOWNLOAD,
         IconAction.REFRESH,
+        IconAction.SAVE,
+        IconAction.CANCEL,
       ]).includes(v),
   },
   disabled: {
@@ -41,7 +44,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['click', 'mousedown']);
 
 const { t } = useI18n();
 

package/src/enums/IconAction/IconAction.enum.js

@@ -13,9 +13,11 @@ const IconAction = Object.freeze({
   COLLAPSE: 'collapse',
   EXPAND: 'expand',
   CLOSE: 'close',
+  CANCEL: 'cancel',
   VARIABLES: 'variables',
   CLEAR: 'clear',
   ADD_FILTER: 'add-filter',
+  SAVE: 'save',
 });
 
 export default IconAction;

package/src/locale/en/en.js

@@ -153,7 +153,7 @@ export default {
     gateway: 'Gateway | Gateways',
     hangupCause: 'Hangup cause',
     hasOption: 'Has option',
-    hasRecording: 'Has recording',
+    hasRecording: 'Recording',
     amdResult: 'AMD result',
     ratedBy: 'Rated by',
     talkDuration: 'Talk duration',
@@ -418,6 +418,8 @@ export default {
         [IconAction.CLEAR]: ({ linked }) =>
           linked('webitelUI.tableActions.filterReset'),
         [IconAction.ADD_FILTER]: ({ linked }) => linked('reusable.add'),
+        [IconAction.SAVE]: ({ linked }) => linked('reusable.save'),
+        [IconAction.CANCEL]: ({ linked }) => linked('reusable.cancel'),
       },
     },
     errorPages: {

package/src/locale/ru/ru.js

@@ -416,6 +416,8 @@ export default {
         [IconAction.CLEAR]: ({ linked }) =>
           linked('webitelUI.tableActions.filterReset'),
         [IconAction.ADD_FILTER]: ({ linked }) => linked('reusable.add'),
+        [IconAction.SAVE]: ({ linked }) => linked('reusable.save'),
+        [IconAction.CANCEL]: ({ linked }) => linked('reusable.cancel'),
       },
     },
     errorPages: {

package/src/locale/ua/ua.js

@@ -158,7 +158,7 @@ export default {
     talkDuration: 'Тривалість розмови',
     totalDuration: 'Загальна тривалість',
     transcription: 'Транскрипція',
-    attachment: 'Додаток | Додатки',
+    attachment: 'Вкладення | Вкладення',
     queue: {
       queue: 'Черга | Черги',
       type: {
@@ -416,6 +416,8 @@ export default {
         [IconAction.CLEAR]: ({ linked }) =>
           linked('webitelUI.tableActions.filterReset'),
         [IconAction.ADD_FILTER]: ({ linked }) => linked('reusable.add'),
+        [IconAction.SAVE]: ({ linked }) => linked('reusable.save'),
+        [IconAction.CANCEL]: ({ linked }) => linked('reusable.cancel'),
       },
     },
     errorPages: {

package/src/modules/Filters/v2/filters/components/values/close-reason-groups-case/close-reason-groups-case-filter-value-preview.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { caseCloseReasonsGroupsSearchMethod } from './config'
+import { caseCloseReasonsSearchMethod } from './config'
 import {ref} from 'vue';
 
 const props = defineProps<{
@@ -21,7 +21,9 @@ const props = defineProps<{
 const localValue = ref([]);
 
 const getLocalValue = async () => {
-  const { items } = await caseCloseReasonsGroupsSearchMethod({parentId: props.value?.selection, id: props.value?.conditions });
+  const { items } = await caseCloseReasonsSearchMethod({
+    parentId: props.value?.selection,
+    id: props.value?.conditions });
   localValue.value = items;
 };
 

package/src/modules/Filters/v2/filters/components/values/has-attachment/has-attachment-filter-value-preview.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
 const { t } = useI18n();
 
 const localeValue = computed(() => {
-  const match = BooleanOptions.find((el) => el.value === props.value);
+  const match = BooleanOptions.find((el) => el.value === props.value.toString());
   return match ? t(match.locale) : '';
 });
 </script>

package/src/modules/Filters/v2/headers/createTableHeadersStore.ts

@@ -1,138 +1,140 @@
-import { defineStore } from "pinia";
-import { computed, ref } from "vue";
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
 
-import {WtTableHeader} from "../../../../components/wt-table/types/WtTable";
-import { sortToQueryAdapter } from "../../../../scripts";
-import { SortSymbols } from "../../../../scripts/sortQueryAdapters";
-import { usePersistedStorage } from "../persist/usePersistedStorage.ts";
+import { WtTableHeader } from '../../../../components/wt-table/types/WtTable';
+import { sortToQueryAdapter } from '../../../../scripts';
+import { SortSymbols } from '../../../../scripts/sortQueryAdapters';
+import { PersistedStorageType } from '../persist/PersistedStorage.types';
+import { usePersistedStorage } from '../persist/usePersistedStorage.ts';
 
 export const createTableHeadersStore = (
-	namespace: string,
-	{ headers: rawHeaders },
+  namespace: string,
+  { headers: rawHeaders },
 ) => {
-	const id = `${namespace}/headers`;
-
-	return defineStore(id, () => {
-		const headers = ref(rawHeaders);
-
-		const shownHeaders = computed(() => {
-			return headers.value.filter((header) => header.show);
-		});
-
-		const fields = computed(() => {
-			return shownHeaders.value.map((header) => header.field);
-		});
-
-		const sort = computed(() => {
-			const encodeSortQuery = ({ column, order }) =>
-				`${sortToQueryAdapter(order)}${column.field}`;
-
-			const sortedCol = headers.value.find((header) => header.sort);
-
-			return sortedCol
-				? encodeSortQuery({ column: sortedCol, order: sortedCol.sort })
-				: null;
-		});
-
-		const $reset = () => {
-			headers.value = rawHeaders;
-		};
-
-		const updateShownHeaders = (value) => {
-			headers.value = value;
-		};
-
-        const updateFields = (fields: string[]) => {
-          const newHeaders = headers.value.map((header: WtTableHeader) => {
-            return {
-              ...header,
-              show: fields.includes(header.field),
-            };
-          });
-          updateShownHeaders(newHeaders);
-        };
+  const id = `${namespace}/headers`;
 
-		const updateSort = (column) => {
-			const getNextSortOrder = (sort) => {
-				switch (sort) {
-					case SortSymbols.NONE:
-						return SortSymbols.ASC;
-					case SortSymbols.ASC:
-						return SortSymbols.DESC;
-					case SortSymbols.DESC:
-						return SortSymbols.NONE;
-					default:
-						return SortSymbols.ASC;
-				}
-			};
-
-			const changeHeadersSort = ({ headers, sortedHeader, order }) => {
-				return headers.map((header) => {
-					if (header.sort === undefined) return header;
-
-					// reset all headers by default
-					let newSort = null;
-
-					if (header.field === sortedHeader.field) {
-						newSort = order;
-					}
-
-					return {
-						...header,
-						sort: newSort,
-					};
-				});
-			};
-
-			const order = getNextSortOrder(column.sort);
-
-			const newHeaders = changeHeadersSort({
-				headers: headers.value,
-				sortedHeader: column,
-				order,
-			});
-
-			headers.value = newHeaders;
-		};
-
-      const setupPersistence = async () => {
-        const { restore: restoreFields } = usePersistedStorage({
-          name: "fields",
-          value: fields,
-          onStore: (save, { name }) => {
-            const value = fields.value.join(',');
-            return save({ name, value })
-          },
-          onRestore: async (restore, name) => {
-            const value = await restore(name) as string;
-            if (value) {
-              return updateFields(value.split(','));
-            }
-          }
-        });
+  return defineStore(id, () => {
+    const headers = ref(rawHeaders);
 
-        const { restore: restoreSort } = usePersistedStorage({
-          name: "sort",
-          value: sort,
-        });
+    const shownHeaders = computed(() => {
+      return headers.value.filter((header) => header.show);
+    });
+
+    const fields = computed(() => {
+      return shownHeaders.value.map((header) => header.field);
+    });
+
+    const sort = computed(() => {
+      const encodeSortQuery = ({ column, order }) =>
+        `${sortToQueryAdapter(order)}${column.field}`;
+
+      const sortedCol = headers.value.find((header) => header.sort);
+
+      return sortedCol
+        ? encodeSortQuery({ column: sortedCol, order: sortedCol.sort })
+        : null;
+    });
+
+    const $reset = () => {
+      headers.value = rawHeaders;
+    };
 
-        return Promise.allSettled([
-          restoreFields(),
-          restoreSort(),
-        ]);
+    const updateShownHeaders = (value) => {
+      headers.value = value;
+    };
+
+    const updateFields = (fields: string[]) => {
+      const newHeaders = headers.value.map((header: WtTableHeader) => {
+        return {
+          ...header,
+          show: fields.includes(header.field),
+        };
+      });
+      updateShownHeaders(newHeaders);
+    };
+
+    const updateSort = (column) => {
+      const getNextSortOrder = (sort) => {
+        switch (sort) {
+          case SortSymbols.NONE:
+            return SortSymbols.ASC;
+          case SortSymbols.ASC:
+            return SortSymbols.DESC;
+          case SortSymbols.DESC:
+            return SortSymbols.NONE;
+          default:
+            return SortSymbols.ASC;
+        }
       };
 
-		return {
-			headers,
-			shownHeaders,
-			fields,
-			sort,
+      const changeHeadersSort = ({ headers, sortedHeader, order }) => {
+        return headers.map((header) => {
+          if (header.sort === undefined) return header;
+
+          // reset all headers by default
+          let newSort = null;
+
+          if (header.field === sortedHeader.field) {
+            newSort = order;
+          }
 
-			updateShownHeaders,
-			updateSort,
+          return {
+            ...header,
+            sort: newSort,
+          };
+        });
+      };
 
-			setupPersistence,
-			$reset,
-		};
-	});
+      const order = getNextSortOrder(column.sort);
+
+      const newHeaders = changeHeadersSort({
+        headers: headers.value,
+        sortedHeader: column,
+        order,
+      });
+
+      headers.value = newHeaders;
+    };
+    const setupPersistence = async () => {
+      const { restore: restoreFields } = usePersistedStorage({
+        name: 'fields',
+        value: fields,
+        storages: [
+          PersistedStorageType.LocalStorage,
+          PersistedStorageType.Route,
+        ],
+        storagePath: id,
+        onStore: (save, { name }) => {
+          const value = fields.value.join(',');
+          return save({ name, value });
+        },
+        onRestore: async (restore, name) => {
+          const value = (await restore(name)) as string;
+          if (value) {
+            return updateFields(value.split(','));
+          }
+        },
+      });
+
+      const { restore: restoreSort } = usePersistedStorage({
+        name: 'sort',
+        value: sort,
+      });
+
+      return Promise.allSettled([restoreFields(), restoreSort()]);
+    };
+
+    return {
+      headers,
+      shownHeaders,
+      fields,
+      sort,
+
+      updateShownHeaders,
+      updateSort,
+
+      setupPersistence,
+      $reset,
+    };
+  });
 };

package/src/modules/Filters/v2/persist/useLocalStoragePersistedStorage.ts

@@ -4,28 +4,34 @@ const separator = ';';
 
 const makePath = (storagePath: string, key: string) => `${storagePath}/${key}`;
 
-export const useLocalStoragePersistedStorage = ({ storagePath = '' }: { storagePath: string }): StorageLike => {
+export const useLocalStoragePersistedStorage = ({
+  storagePath = '',
+}: {
+  storagePath: string;
+}): StorageLike => {
   const getItem = async (key: string) => {
     const value = localStorage.getItem(makePath(storagePath, key));
     try {
-      return value.split(separator);
+      return value.split(separator).join();
     } catch {
       return value;
     }
   };
 
   const setItem = async (key: string, inputValue: string | string[]) => {
-    const value = Array.isArray(inputValue) ? inputValue.join(separator) : inputValue;
+    const value = Array.isArray(inputValue)
+      ? inputValue.join(separator)
+      : inputValue;
     localStorage.setItem(makePath(storagePath, key), value);
-  }
+  };
 
   const removeItem = async (key: string) => {
     localStorage.removeItem(makePath(storagePath, key));
-  }
+  };
 
   return {
     getItem,
     setItem,
     removeItem,
   };
-}
+};

package/src/modules/Filters/v2/persist/usePersistedStorage.ts

@@ -106,7 +106,7 @@ export const usePersistedStorage = ({
           before running onRestore
          */
         return restoredValues.find((value) => {
-          return value !== null;
+          return value != null;
         });
       };
       await onRestore(restore, name);