@webitel/ui-sdk 25.4.18 → 25.4.20

package/package.json

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

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() : ifFn) {
+        return payload;
+    }
+    return transformer(payload);
+};

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

@@ -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

@@ -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/filter-presets/api/PresetQuery.api.ts

@@ -0,0 +1,131 @@
+import {EngineCreatePresetQueryRequest, EnginePresetQuery, PresetQueryServiceApiFactory} from 'webitel-sdk';
+import {getDefaultGetListResponse, getDefaultGetParams, getDefaultInstance, getDefaultOpenAPIConfig} from '../../../../../api/defaults/index';
+import applyTransform, {
+    camelToSnake,
+    merge,
+    notify,
+    snakeToCamel,
+    starToSearch,
+    skipIf,
+} 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,
+            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}) => {
+    const item = applyTransform(itemInstance, [
+        camelToSnake(),
+    ]);
+    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 {
+    getPresetList,
+    addPreset,
+    updatePreset,
+    deletePreset,
+};
+
+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('reusable.description') }}
+    </wt-label>
+    <p>
+      {{ model }}
+    </p>
+  </div>
+
+  <wt-textarea
+    v-if="!props.previewMode"
+    :value="model"
+    :label="t('reusable.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,51 @@
+<template>
+  <div class="save-preset-filters-preview">
+    <wt-label>
+      {{ t('webitelUI.filters.filterName') }}
+    </wt-label>
+    <dynamic-filter-panel-wrapper>
+      <template #filters>
+        <dynamic-filter-preview
+          v-for="(filter) of props.filters"
+          :key="filter.name"
+          :filter="filter"
+          dummy
+        >
+          <template #info>
+            <component
+              :is="getFilterFieldComponent(filter.name, 'previewField')"
+              :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 DynamicFilterPreview
+  from "../../../filters/components/preview/dynamic-filter-preview.vue";
+import DynamicFilterPanelWrapper
+  from "../../../filters/components/dynamic-filter-panel-wrapper.vue";
+import type {IFilter} from "../../../filters/types/Filter.d.ts";
+import {getFilterFieldComponent} from "../../../filters/components/values/filterComponentsMap";
+
+type Props = {
+  filters: IFilter[];
+};
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+
+</script>
+
+<style scoped lang="scss">
+.preset-filters-preview {
+
+}
+</style>

package/src/modules/Filters/v2/filter-presets/components/apply-preset/apply-preset-action.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="apply-preset-action">
+    <wt-icon-btn
+      icon="load-preset"
+      @click="showPresetsList = true"
+    />
+    <wt-popup
+      :shown="showPresetsList"
+      size="sm"
+      @close="showPresetsList = false"
+    >
+      <template #title>
+        {{ `${t('vocabulary.apply')} ${t('filters.preset.preset').toLowerCase()}` }}
+      </template>
+
+      <template #main>
+        <section class="apply-preset-main-content">
+          <wt-search-bar
+            :value="search"
+            @search="search = $event"
+          />
+
+          <wt-empty
+            v-show="showEmpty"
+            :image="imageEmpty"
+            :text="textEmpty"
+          />
+
+          <section class="available-presets-list">
+            <preset-preview
+              v-for="(preset, index) of dataList"
+              :key="preset.id"
+              :collapsed="!!index"
+              :is-selected="preset === selectedPreset"
+              :preset="preset"
+              @preset:select="selectedPreset = preset"
+              @preset:update="updatePreset"
+              @preset:delete="() => deleteEls([preset])"
+            />
+          </section>
+<!--            TODO: infinite scroll -->
+<!--          <wt-intersection-observer-->
+<!--            :loading="isLoading"-->
+<!--            :next="false"-->
+<!--            @next="updatePage(page + 1)"-->
+<!--          />-->
+        </section>
+      </template>
+
+      <template #actions>
+        <wt-button
+          :disabled="!selectedPreset"
+          @click="applySelectedPreset"
+        >
+          {{ t('vocabulary.apply') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          @click="showPresetsList = false"
+        >
+          {{ t('reusable.cancel') }}
+        </wt-button>
+      </template>
+    </wt-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed, inject, ref, watch} from "vue";
+import {useI18n} from "vue-i18n";
+import {type StoreDefinition, storeToRefs } from "pinia";
+import {WtButton, WtIconBtn, WtPopup, WtSearchBar, WtEmpty} from "../../../../../../components/index";
+import {useTableEmpty} from "../../../../../TableComponentModule/composables/useTableEmpty";
+import PresetQueryAPI from '../../api/PresetQuery.api.ts';
+import PresetPreview from "./preset-preview.vue";
+
+const props = defineProps<{
+  /**
+   * presets "section" namespace
+   */
+  namespace: string;
+  usePresetsStore: StoreDefinition;
+}>();
+
+const emit = defineEmits<{
+  apply: [string];
+}>();
+
+const eventBus = inject('$eventBus');
+
+const {t} = useI18n();
+
+const showPresetsList = ref(false);
+
+const presetsStore = props.usePresetsStore();
+const {
+  dataList,
+  error,
+  isLoading,
+  filtersManager,
+  page,
+} = storeToRefs(presetsStore);
+
+const {
+  loadDataList,
+  initialize,
+  updateSize,
+  deleteEls,
+} = presetsStore;
+
+updateSize(1000);
+
+const {
+  showEmpty,
+  image: imageEmpty,
+  text: textEmpty,
+} = useTableEmpty({
+  dataList,
+  isLoading,
+  error,
+  filters: computed(() => filtersManager.value.getAllValues()),
+});
+
+filtersManager.value.addFilter({name: 'presetNamespace', value: props.namespace});
+
+watch(showPresetsList, () => {
+  initialize();
+
+  watch(showPresetsList, (value) => {
+    if (value) {
+      loadDataList();
+    }
+  });
+}, {once: true});
+
+const search = computed({
+  get: () => {
+    return filtersManager.value.getFilter('search')?.value || '';
+  },
+  set: (value) => {
+    filtersManager.value.addFilter({name: 'search', value});
+  }
+});
+
+const selectedPreset = ref();
+
+const applySelectedPreset = () => {
+  const filtersSnapshot = selectedPreset.value.preset['filtersManager.toString'];
+  emit('apply', filtersSnapshot);
+
+  selectedPreset.value = null;
+  showPresetsList.value = false;
+};
+
+const updatePreset = async ({preset, onSuccess, onFailure}) => {
+  try {
+    await PresetQueryAPI.update({
+      item: { ...preset, section: props.namespace },
+      id: preset.id,
+    });
+    onSuccess();
+    return loadDataList();
+  } catch (err) {
+    onFailure(err);
+    throw err;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apply-preset-action .wt-popup {
+  :deep(.wt-popup__popup) {
+    height: 480px;
+  }
+}
+
+.apply-preset-main-content {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+
+  .wt-empty {
+    flex-grow: 1;
+    max-width: 100%;
+  }
+}
+
+.available-presets-list {
+  @extend %wt-scrollbar;
+
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  max-height: 400px;
+  gap: var(--spacing-xs);
+  scrollbar-gutter: stable;
+}
+</style>