feat: added filters and columns actions to wt-icon-action.vue […

…WTEL-5881](https://webitel.atlassian.net/browse/WTEL-5881)
webitel · Jan 13, 2025 · da0c0da · da0c0da
1 parent cd356e9
commit da0c0da
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 94 deletions.
diff --git a/docs/pages/webitel-ui/components/wt-icon-action/examples/example-icon-action.vue b/docs/pages/webitel-ui/components/wt-icon-action/examples/example-icon-action.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { IActionData } from '__lib__/components/wt-icon-action/IActionData.js';
+import { WtIconActionIconMappings } from '__lib__/components/wt-icon-action/iconMappings.js';
 import { IconAction } from '__lib__/enums/index.js';
 
 const IAMap = Object.entries(IconAction).reduce((acc, [key, value]) => {
   acc[value] = key;
   return acc;
 }, {});
 
-const availableActions = Object.keys(IActionData);
+const availableActions = Object.keys(WtIconActionIconMappings);
 </script>
 
 <template>
@@ -38,4 +38,4 @@ const availableActions = Object.keys(IActionData);
   </wt-table>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.48",
+  "version": "24.12.50",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -129,7 +129,7 @@
     "plyr": "3.7.8",
     "query-string": "^9.1.1",
     "sortablejs": "^1.15.3",
-    "vue-i18n": "^9.14.1",
+    "vue-i18n": "^11.0.1",
     "vue-multiselect": "^3.1.0",
     "vue-observe-visibility": "^2.0.0-alpha.1",
     "vue-router": "^4.4.5",
@@ -180,7 +180,7 @@
     "@rollup/rollup-linux-x64-gnu": "4.9.5"
   },
   "engines": {
-    "npm": "10.9.0",
-    "node": "v22.12.0"
+    "npm": "10",
+    "node": "v22"
   }
 }
diff --git a/src/components/wt-icon-action/IActionData.js b/src/components/wt-icon-action/IActionData.js
diff --git a/src/components/wt-icon-action/iconMappings.js b/src/components/wt-icon-action/iconMappings.js
@@ -0,0 +1,14 @@
+import { IconAction } from '../../enums/index.js';
+
+export const WtIconActionIconMappings = Object.freeze({
+  [IconAction.ADD]: 'plus',
+  [IconAction.DELETE]: 'bucket',
+  [IconAction.DOWNLOAD]: 'download',
+  [IconAction.EDIT]: 'edit',
+  [IconAction.HISTORY]: 'history',
+  [IconAction.REFRESH]: 'refresh',
+  [IconAction.EXPAND]: 'expand',
+  [IconAction.COLLAPSE]: 'collapse',
+  [IconAction.FILTERS]: 'filter',
+  [IconAction.COLUMNS]: 'column-select',
+});
diff --git a/src/components/wt-icon-action/wt-icon-action.vue b/src/components/wt-icon-action/wt-icon-action.vue
@@ -14,8 +14,9 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { IActionData } from './IActionData.js';
+
 import IconAction from '../../enums/IconAction/IconAction.enum.js';
+import { WtIconActionIconMappings } from './iconMappings.js';
 
 const props = defineProps({
   /**
@@ -45,16 +46,19 @@ const emit = defineEmits(['click']);
 const { t } = useI18n();
 
 const iconAction = computed(() => {
-  const data = IActionData[props.action];
+  const icon = WtIconActionIconMappings[props.action];
 
-  if (!data) {
+  if (!icon) {
     console.error(
       `Unknown action for wt-icon-action component: ${props.action}`,
     );
     return { icon: 'edit', hint: props.action };
   }
 
-  return data;
+  return {
+    icon,
+    hint: `webitelUI.iconAction.hints.${props.action}`,
+  };
 });
 </script>
 

diff --git a/src/locale/en/en.js b/src/locale/en/en.js
@@ -5,7 +5,9 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
+
 import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import { IconAction } from '../../enums/index.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections from '../../enums/WebitelApplications/AuditorSections.enum.js';
@@ -18,6 +20,9 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    download: 'Download',
+    history: 'History',
+    filter: ({ plural }) => plural(['Filter', 'Filters']),
     total: 'Total',
     ok: 'Ok',
     save: 'Save',
@@ -349,11 +354,18 @@ export default {
       breakOut: 'Break Out',
     },
     iconAction: {
-      deleteActionHint: 'Delete',
-      editActionHint: 'Edit',
-      addActionHint: 'Add',
-      historyActionHint: 'History',
-      downloadActionHint: 'Download',
+      hints: {
+        [IconAction.DELETE]: ({ linked }) => linked('reusable.delete'),
+        [IconAction.EDIT]: ({ linked }) => linked('reusable.edit'),
+        [IconAction.ADD]: ({ linked }) => linked('reusable.add'),
+        [IconAction.HISTORY]: ({ linked }) => linked('reusable.history'),
+        [IconAction.DOWNLOAD]: ({ linked }) => linked('reusable.download'),
+        [IconAction.FILTERS]: ({ linked }) => linked('reusable.filter'),
+        [IconAction.COLUMNS]: 'Select columns',
+        [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
+        [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
+        [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+      },
     },
     errorPages: {
       goBack: 'Go back',

diff --git a/src/locale/ru/ru.js b/src/locale/ru/ru.js
@@ -5,7 +5,9 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
+
 import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import { IconAction } from '../../enums/index.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections from '../../enums/WebitelApplications/AuditorSections.enum.js';
@@ -18,6 +20,9 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    download: 'Скачать',
+    history: 'История',
+    filter: 'Фильтр | Фильтры',
     total: 'Всего',
     ok: 'Ок',
     save: 'Сохранить',
@@ -347,11 +352,18 @@ export default {
       breakOut: 'Принудительный перерыв',
     },
     iconAction: {
-      deleteActionHint: 'Удалить',
-      editActionHint: 'Редактировать',
-      addActionHint: 'Добавить',
-      historyActionHint: 'История',
-      downloadActionHint: 'Скачать',
+      hints: {
+        [IconAction.DELETE]: ({ linked }) => linked('reusable.delete'),
+        [IconAction.EDIT]: ({ linked }) => linked('reusable.edit'),
+        [IconAction.ADD]: ({ linked }) => linked('reusable.add'),
+        [IconAction.HISTORY]: ({ linked }) => linked('reusable.history'),
+        [IconAction.DOWNLOAD]: ({ linked }) => linked('reusable.download'),
+        [IconAction.FILTERS]: ({ linked }) => linked('reusable.filter', 2),
+        [IconAction.COLUMNS]: 'Добавить колонки',
+        [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
+        [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
+        [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+      },
     },
     errorPages: {
       goBack: 'Вернуться назад',

diff --git a/src/locale/ua/ua.js b/src/locale/ua/ua.js
@@ -5,7 +5,9 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
+
 import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import { IconAction } from '../../enums/index.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum.js';
 import AuditorSections from '../../enums/WebitelApplications/AuditorSections.enum.js';
@@ -18,6 +20,9 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    download: 'Завантажити',
+    history: 'Історія',
+    filter: 'Фільтр | Фільтри',
     total: 'Всього',
     ok: 'Ок',
     save: 'Зберегти',
@@ -347,11 +352,18 @@ export default {
       breakOut: 'Примусова перерва',
     },
     iconAction: {
-      deleteActionHint: 'Видалити',
-      editActionHint: 'Редагувати',
-      addActionHint: 'Додати',
-      historyActionHint: 'Історія',
-      downloadActionHint: 'Скачати',
+      hints: {
+        [IconAction.DELETE]: ({ linked }) => linked('reusable.delete'),
+        [IconAction.EDIT]: ({ linked }) => linked('reusable.edit'),
+        [IconAction.ADD]: ({ linked }) => linked('reusable.add'),
+        [IconAction.HISTORY]: ({ linked }) => linked('reusable.history'),
+        [IconAction.DOWNLOAD]: ({ linked }) => linked('reusable.download'),
+        [IconAction.FILTERS]: ({ linked }) => linked('reusable.filter', 2),
+        [IconAction.COLUMNS]: 'Додати колонки',
+        [IconAction.REFRESH]: ({ linked }) => linked('reusable.refresh'),
+        [IconAction.EXPAND]: ({ linked }) => linked('reusable.expand'),
+        [IconAction.COLLAPSE]: ({ linked }) => linked('reusable.collapse'),
+      },
     },
     errorPages: {
       goBack: 'Повернутись назад',