@webitel/ui-sdk 24.12.171 → 24.12.173

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.171",
+  "version": "24.12.173",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -20,7 +20,8 @@
     "link": "npm link",
     "update-node": "nvm install --lts && nvm alias default node",
     "i": "npm install",
-    "lint:package": "publint"
+    "lint:package": "publint",
+    "orval": "orval"
   },
   "main": "./dist/ui-sdk.js",
   "type": "module",
@@ -113,11 +114,12 @@
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^11.2.0",
-    "@webitel/styleguide": "^24.12.22",
+    "@webitel/styleguide": "^24.12.25",
     "autosize": "^6.0.1",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "csv-stringify": "^5.5.3",
+    "date-fns": "^4.1.0",
     "deep-copy": "^1.4.2",
     "deep-equal": "^2.2.3",
     "deepmerge": "^4.3.1",
@@ -138,7 +140,7 @@
     "vue-router": "^4.4.5",
     "webitel-sdk": "^24.10.29",
     "xlsx": "^0.18.5",
-    "date-fns": "^4.1.0"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -159,6 +161,7 @@
     "happy-dom": "^15.11.6",
     "markdown-it": "^14.1.0",
     "markdown-table": "^3.0.4",
+    "orval": "^7.6.0",
     "path": "^0.12.7",
     "pinia": "^2.3.0",
     "postcss": "^8.4.49",

package/src/api/transformers/index.js

@@ -8,16 +8,19 @@ import notify from './notify/notify.transformer.js';
 import sanitize from './sanitize/sanitize.transformer.js';
 import snakeToCamel from './snakeToCamel/snakeToCamel.transformer.js';
 import starToSearch from './starToSearch/starToSearch.transformer.js';
+import { skipIf } from './skipIf/skipIf';
 
-export default applyTransform;
 export {
+  camelToSnake,
+  generateUrl,
   log,
   merge,
+  mergeEach,
   notify,
-  starToSearch,
-  camelToSnake,
-  snakeToCamel,
   sanitize,
-  generateUrl,
-  mergeEach,
+  skipIf,
+  snakeToCamel,
+  starToSearch,
 };
+
+export default applyTransform;

package/src/api/transformers/skipIf/skipIf.ts

@@ -0,0 +1,6 @@
+export const skipIf = (transformer: (...payload: unknown[]) => unknown, ifFn: boolean | ((...payload: unknown[]) => boolean)) => (payload: unknown) => {
+    if (typeof ifFn === 'function' ? ifFn(payload) : ifFn) {
+        return payload;
+    }
+    return transformer(payload);
+};

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

@@ -17,4 +17,6 @@ export const WtIconActionIconMappings = Object.freeze({
   [IconAction.CLEAR]: 'clear',
   [IconAction.ADD_FILTER]: 'add-filter',
   [IconAction.SAVE]: 'save',
+  [IconAction.SAVE_PRESET]: 'save',
+  [IconAction.APPLY_PRESET]: 'load-preset',
 });

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

@@ -36,6 +36,8 @@ const props = defineProps({
         IconAction.REFRESH,
         IconAction.SAVE,
         IconAction.CANCEL,
+        IconAction.SAVE_PRESET,
+        IconAction.APPLY_PRESET,
       ]).includes(v),
   },
   disabled: {

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

@@ -1,4 +1,6 @@
 :root {
+  --wt-label-padding: var(--spacing-2xs) var(--spacing-xs);
+
   --wt-label-color: var(--text-main-color);
   --wt-label-error-color: var(--text-error-color);
   --wt-label-disabled-color: var(--text-disabled-color);

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

@@ -46,6 +46,7 @@ export default {
   cursor: text;
   transition: var(--transition);
   color: var(--wt-label-color);
+  //padding: var(--wt-label-padding);
 
   &--invalid {
     color: var(--wt-label-error-color);

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

@@ -18,6 +18,8 @@ const IconAction = Object.freeze({
   CLEAR: 'clear',
   ADD_FILTER: 'add-filter',
   SAVE: 'save',
+  SAVE_PRESET: 'save-preset',
+  APPLY_PRESET: 'apply-preset',
 });
 
 export default IconAction;

package/src/locale/en/en.js

@@ -20,6 +20,7 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    replace: 'Replace',
     download: 'Download',
     history: 'History',
     filter: ({ plural }) => plural(['Filter', 'Filters']),
@@ -347,6 +348,7 @@ export default {
     latinWithNumber:
       'The code must contain only letters (A-Z, a-z) and numbers (0-9), and must start with a letter',
     integer: 'The field should contain only whole numbers',
+    nameAlreadyInUse: 'This name is already in use',
   },
   webitelUI: {
     searchBar: {
@@ -420,6 +422,12 @@ export default {
         [IconAction.ADD_FILTER]: ({ linked }) => linked('reusable.add'),
         [IconAction.SAVE]: ({ linked }) => linked('reusable.save'),
         [IconAction.CANCEL]: ({ linked }) => linked('reusable.cancel'),
+        [IconAction.SAVE_PRESET]: ({ linked }) => {
+          return `${linked('reusable.save')} ${linked('webitelUI.filters.presets.preset').toLowerCase()}`;
+        },
+        [IconAction.APPLY_PRESET]: ({ linked }) => {
+          return `${linked('vocabulary.apply')} ${linked('webitelUI.filters.presets.preset').toLowerCase()}`;
+        },
       },
     },
     errorPages: {
@@ -624,6 +632,38 @@ export default {
       variable: ({ linked }) => {
         return linked('vocabulary.variables');
       },
+      presets: {
+        preset: 'Preset | Presets',
+        overwritePresetTitle: 'A preset with this name already exists.',
+        overwritePresetText: 'Do you want to replace it?',
+        notifications: {
+          success: {
+            /* suka ebuchij linked(,param) ne praciuje */
+            update: ({ linked }) => {
+              return linked('systemNotifications.success.update', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+            create: ({ linked }) => {
+              return linked('systemNotifications.success.create', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+            delete: ({ linked }) => {
+              return linked('systemNotifications.success.delete', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+          },
+        },
+      },
+    },
+  },
+  systemNotifications: {
+    success: {
+      update: ({ named }) => `The ${named('entity').toLowerCase()} was updated`,
+      create: ({ named }) => `The ${named('entity').toLowerCase()} was saved`,
+      delete: ({ named }) => `The ${named('entity').toLowerCase()} was deleted`,
     },
   },
   errorNotifications: {

package/src/locale/ru/ru.js

@@ -20,6 +20,7 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    replace: 'Заменить',
     download: 'Скачать',
     history: 'История',
     filter: 'Фильтр | Фильтры',
@@ -345,6 +346,7 @@ export default {
     latinWithNumber:
       'Код должен содержать только буквы (A-Z, a-z) и цифры (0-9) и начинатся с буквы',
     integer: 'Поле должно содержать только целые числа',
+    nameAlreadyInUse: 'Это название уже используется',
   },
   webitelUI: {
     searchBar: {
@@ -418,6 +420,12 @@ export default {
         [IconAction.ADD_FILTER]: ({ linked }) => linked('reusable.add'),
         [IconAction.SAVE]: ({ linked }) => linked('reusable.save'),
         [IconAction.CANCEL]: ({ linked }) => linked('reusable.cancel'),
+        [IconAction.SAVE_PRESET]: ({ linked }) => {
+          return `${linked('reusable.save')} ${linked('webitelUI.filters.presets.preset').toLowerCase()}`;
+        },
+        [IconAction.APPLY_PRESET]: ({ linked }) => {
+          return `${linked('vocabulary.apply')} ${linked('webitelUI.filters.presets.preset').toLowerCase()}`;
+        },
       },
     },
     errorPages: {
@@ -460,7 +468,7 @@ export default {
     },
     empty: {
       text: {
-        empty: 'Записи в разделе еще не созданы',
+        empty: 'Записи еще не созданы',
         filters: 'К сожалению, ни одна запись не соответствует вашим критериям',
       },
     },
@@ -621,6 +629,37 @@ export default {
       variable: ({ linked }) => {
         return linked('vocabulary.variables');
       },
+      presets: {
+        preset: 'Пресет | Пресеты',
+        overwritePresetTitle: 'Пресет с таким названием уже существует.',
+        overwritePresetText: 'Хотите его заменить?',
+        notifications: {
+          success: {
+            update: ({ linked }) => {
+              return linked('systemNotifications.success.update', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+            create: ({ linked }) => {
+              return linked('systemNotifications.success.create', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+            delete: ({ linked }) => {
+              return linked('systemNotifications.success.delete', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+          },
+        },
+      },
+    },
+  },
+  systemNotifications: {
+    success: {
+      update: ({ named }) => `${named('entity')} был обновлён`,
+      create: ({ named }) => `${named('entity')} был сохранён`,
+      delete: ({ named }) => `${named('entity')} был удалён`,
     },
   },
   errorNotifications: {

package/src/locale/ua/ua.js

@@ -20,6 +20,7 @@ import { snakeToCamel } from '../../scripts/caseConverters.js';
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
   reusable: {
+    replace: 'Замінити',
     download: 'Завантажити',
     history: 'Історія',
     filter: 'Фільтр | Фільтри',
@@ -345,6 +346,7 @@ export default {
     latinWithNumber:
       'Код повинен містити лише літери (A-Z, a-z) та цифри (0-9) і починатися з літери',
     integer: 'Поле повинно містити лише цілі числа',
+    nameAlreadyInUse: 'Така назва вже використовується',
   },
   webitelUI: {
     searchBar: {
@@ -418,6 +420,12 @@ export default {
         [IconAction.ADD_FILTER]: ({ linked }) => linked('reusable.add'),
         [IconAction.SAVE]: ({ linked }) => linked('reusable.save'),
         [IconAction.CANCEL]: ({ linked }) => linked('reusable.cancel'),
+        [IconAction.SAVE_PRESET]: ({ linked }) => {
+          return `${linked('reusable.save')} ${linked('webitelUI.filters.presets.preset').toLowerCase()}`;
+        },
+        [IconAction.APPLY_PRESET]: ({ linked }) => {
+          return `${linked('vocabulary.apply')} ${linked('webitelUI.filters.presets.preset').toLowerCase()}`;
+        },
       },
     },
     errorPages: {
@@ -460,7 +468,7 @@ export default {
     },
     empty: {
       text: {
-        empty: 'Записи у розділі ще не створені',
+        empty: 'Записи ще не створені',
         filters: 'На жаль, жоден запис не відповідає вашим критеріям',
       },
     },
@@ -621,6 +629,37 @@ export default {
       variable: ({ linked }) => {
         return linked('vocabulary.variables');
       },
+      presets: {
+        preset: 'Пресет | Пресети',
+        overwritePresetTitle: 'Пресет з такою назвою вже існує.',
+        overwritePresetText: 'Бажаєте його замінити?',
+        notifications: {
+          success: {
+            update: ({ linked }) => {
+              return linked('systemNotifications.success.update', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+            create: ({ linked }) => {
+              return linked('systemNotifications.success.create', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+            delete: ({ linked }) => {
+              return linked('systemNotifications.success.delete', {
+                entity: linked('filters.presets.preset'),
+              });
+            },
+          },
+        },
+      },
+    },
+  },
+  systemNotifications: {
+    success: {
+      update: ({ named }) => `${named('entity')} було оновлено`,
+      create: ({ named }) => `${named('entity')} було збережено`,
+      delete: ({ named }) => `${named('entity')} було видалено`,
     },
   },
   errorNotifications: {

package/src/mixins/validationMixin/useValidation.js

@@ -62,6 +62,9 @@ export function useValidation({
         validationText =
           v.value.regex?.$message ||
           `${t('validation.isRegExpMatched')} ${v.value.regex?.$params?.regex}`;
+      else if (v.value.nameAlreadyInUse.$invalid) {
+        validationText = t('validation.nameAlreadyInUse');
+      }
     }
 
     if (customValidators?.value) {

package/src/modules/Filters/v2/filter-presets/api/PresetQuery.api.ts

@@ -0,0 +1,123 @@
+import {
+  EngineCreatePresetQueryRequest,
+  EnginePresetQuery,
+  PresetQueryServiceApiFactory,
+} from 'webitel-sdk';
+
+import {
+  getDefaultGetListResponse,
+  getDefaultGetParams,
+  getDefaultInstance,
+  getDefaultOpenAPIConfig,
+} from '../../../../../api/defaults/index';
+import applyTransform, {
+  camelToSnake,
+  merge,
+  notify,
+  skipIf,
+  snakeToCamel,
+  starToSearch,
+} from '../../../../../api/transformers/index';
+
+const instance = getDefaultInstance();
+const configuration = getDefaultOpenAPIConfig();
+
+const service = PresetQueryServiceApiFactory(configuration, '', instance);
+
+type GetPresetListRequestConfig = {
+  transformers: {
+    useStarToSearch?: boolean;
+  };
+};
+
+const getPresetList = async (params, config: GetPresetListRequestConfig) => {
+  const useStarToSearch = config?.transformers?.useStarToSearch ?? true;
+
+  const { page, size, search, sort, fields, presetNamespace, id } =
+    applyTransform(params, [
+      merge(getDefaultGetParams()),
+      (params) => (useStarToSearch ? starToSearch('search')(params) : params),
+    ]);
+
+  try {
+    const response = await service.searchPresetQuery(
+      page,
+      size,
+      search,
+      sort || '-created_at',
+      fields || ['id', 'name', 'preset', 'description'],
+      id,
+    );
+    const { items, next } = applyTransform(response.data, [
+      snakeToCamel(),
+      merge(getDefaultGetListResponse()),
+    ]);
+    return {
+      items: applyTransform(items, [
+        (items) =>
+          items.filter(({ preset }) => preset.namespace === presetNamespace),
+      ]),
+      next,
+    };
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const addPreset = async ({
+  preset,
+  namespace,
+}: {
+  preset: EngineCreatePresetQueryRequest;
+  namespace: string;
+}): Promise<EnginePresetQuery> => {
+  const item = applyTransform(preset, [
+    camelToSnake(),
+    (item) => {
+      item.preset.namespace = namespace;
+      return item;
+    },
+  ]);
+  try {
+    const response = await service.createPresetQuery(item);
+    return applyTransform(response.data, [snakeToCamel()]);
+  } catch (err) {
+    throw applyTransform(err, [skipIf(notify, (err) => err.status === 409)]);
+  }
+};
+
+const updatePreset = async ({ item: itemInstance, id, namespace }) => {
+  const item = applyTransform(itemInstance, [
+    camelToSnake(),
+    (item) => {
+      item.preset.namespace = namespace;
+      return item;
+    },
+  ]);
+  try {
+    const response = await service.updatePresetQuery(id, item);
+    return applyTransform(response.data, [snakeToCamel()]);
+  } catch (err) {
+    throw applyTransform(err, [skipIf(notify, (err) => err.status === 409)]);
+  }
+};
+
+const deletePreset = async ({ id }) => {
+  try {
+    const response = await service.deletePresetQuery(id);
+    return applyTransform(response.data, []);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const PresetQueryAPI = {
+  getList: getPresetList,
+  add: addPreset,
+  update: updatePreset,
+  delete: deletePreset,
+};
+
+export { addPreset, deletePreset, getPresetList, updatePreset };
+
+export default PresetQueryAPI;

package/src/modules/Filters/v2/filter-presets/components/_shared/input-fields/preset-description-field.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    v-if="props.previewMode && model"
+  >
+    <wt-label>
+      {{ t('vocabulary.description') }}
+    </wt-label>
+    <p>
+      {{ model }}
+    </p>
+  </div>
+
+  <wt-textarea
+    v-if="!props.previewMode"
+    :value="model"
+    :label="t('vocabulary.description')"
+    @input="model = $event"
+  />
+</template>
+
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+import { WtTextarea, WtLabel } from '../../../../../../../components/index';
+
+const model = defineModel<string>();
+
+const props = defineProps<{
+  previewMode?: boolean;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/src/modules/Filters/v2/filter-presets/components/_shared/input-fields/preset-name-field.vue

@@ -0,0 +1,31 @@
+<template>
+  <wt-input
+    v-model="model"
+    :v="props.v"
+    :label="t('reusable.name')"
+    required
+  />
+</template>
+
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+import {Validation} from '@vuelidate/core';
+import { WtInput } from '../../../../../../../components/index';
+
+type ModelValue = string;
+
+const model = defineModel<ModelValue>();
+
+type Props = {
+  v: Validation;
+};
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

package/src/modules/Filters/v2/filter-presets/components/_shared/preset-filters-preview.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="save-preset-filters-preview">
+    <wt-label>
+      {{ t('webitelUI.filters.filterName') }}
+    </wt-label>
+    <dynamic-filter-panel-wrapper
+      size="sm"
+    >
+      <template #filters>
+        <dynamic-filter-preview
+          v-for="(filter) of props.filters"
+          :key="filter.name"
+          :filter="filter"
+          dummy
+        >
+          <template #info>
+            <component
+              :is="FilterOptionToPreviewComponentMap[filter.name]"
+              :value="filter.value"
+            >
+            </component>
+          </template>
+        </dynamic-filter-preview>
+      </template>
+    </dynamic-filter-panel-wrapper>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+
+import { WtLabel } from '../../../../../../components/index';
+import type {IFilter} from "../../../filters";
+import DynamicFilterPanelWrapper
+  from "../../../filters/components/dynamic-filter-panel-wrapper.vue";
+import { FilterOptionToPreviewComponentMap} from "../../../filters/components/filter-options";
+import DynamicFilterPreview
+  from "../../../filters/components/preview/dynamic-filter-preview.vue";
+
+type Props = {
+  filters: IFilter[];
+};
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+
+</script>
+
+<style scoped lang="scss">
+</style>