@webitel/ui-sdk 25.4.19 → 25.4.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.04.19",
+  "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/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>

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

@@ -0,0 +1,197 @@
+<template>
+  <article class="preset-preview">
+    <wt-expansion-panel
+      :collapsed="collapsed"
+      @closed="clearEdit"
+    >
+      <template #title>
+        <header class="preset-preview-title-wrapper">
+          <!--
+                    this <div> is used only for @click.stop to be set, so that expansion panel toggle won't trigger.
+                    it would be great to use @click.stop to wt-ratio,
+                    but with @vue/compat build and direct input it won't be working like that :(
+        -->
+          <div @click.stop>
+            <wt-radio
+              :selected="isSelected"
+              :value="true"
+              @input="emit('preset:select', preset)"
+            />
+          </div>
+          <p
+            :title="preset.name"
+            class="preset-preview-name"
+          >
+            {{ preset.name }}
+          </p>
+        </header>
+      </template>
+      <template #actions="{ open }">
+        <wt-icon-action
+          v-if="!editMode"
+          action="edit"
+          @click.stop="startEdit({ open })"
+        />
+
+        <wt-icon-action
+          v-if="editMode"
+          action="delete"
+          @click.stop="emit('preset:delete', preset)"
+        />
+
+        <wt-icon-action
+          v-if="editMode"
+          :disabled="v$.$invalid"
+          action="save"
+          @click.stop="submitEdit"
+        />
+
+        <wt-icon-action
+          v-if="editMode"
+          action="cancel"
+          @click.stop="clearEdit"
+        />
+      </template>
+      <template #default>
+        <div class="preset-preview-content">
+          <preset-name-field
+            v-if="editMode"
+            v-model:model-value="editDraft.name"
+            :v="v$.name"
+            @update:model-value="nameAlreadyExistsError = false"
+          />
+
+          <preset-filters-preview
+            :filters="presetFilters"
+          />
+
+          <preset-description-field
+            v-model:model-value="editDraft.description"
+            :preview-mode="!editMode"
+          />
+        </div>
+      </template>
+    </wt-expansion-panel>
+  </article>
+</template>
+
+<script lang="ts" setup>
+import {EnginePresetQuery} from "webitel-sdk";
+import {computed, ref} from "vue";
+import {useVuelidate} from "@vuelidate/core";
+import {required} from "@vuelidate/validators";
+import {AxiosError} from "axios";
+import {WtExpansionPanel, WtIconAction, WtRadio} from "../../../../../../components/index";
+import {createFiltersManager} from "../../../filters/index";
+import PresetFiltersPreview from "../_shared/preset-filters-preview.vue";
+import PresetNameField from "../_shared/input-fields/preset-name-field.vue";
+import PresetDescriptionField from "../_shared/input-fields/preset-description-field.vue";
+
+type Props = {
+  preset: EnginePresetQuery;
+  isSelected: boolean;
+  collapsed: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'preset:select': [EnginePresetQuery];
+  'preset:update': [{ preset: EnginePresetQuery, onSuccess: () => void, onFailure: (err: AxiosError) => void }];
+  'preset:delete': [EnginePresetQuery];
+}>();
+
+const presetFilters = computed(() => {
+  const snapshot = props.preset?.preset?.['filtersManager.toString'];
+  if (!snapshot) return [];
+
+  const filtersManager = createFiltersManager();
+  filtersManager.fromString(snapshot);
+
+  return filtersManager.getFiltersList();
+});
+
+const editMode = ref(false);
+
+/**
+ *  updating request in progress flag
+ *  */
+const editing = ref(false);
+
+const nameAlreadyExistsError = ref(false);
+
+const editDraft = ref({
+  name: '',
+  description: '',
+});
+
+const fillDraft = () => {
+  editDraft.value = {
+    name: props.preset.name,
+    description: props.preset.description,
+  };
+};
+
+fillDraft();
+
+const v$ = useVuelidate(computed(() => {
+  return {
+    name: {
+      required,
+      alreadyExists: () => !nameAlreadyExistsError.value,
+    },
+  };
+}), editDraft, {$autoDirty: true});
+v$.value.$touch();
+
+const startEdit = ({open: openExpansion}) => {
+  openExpansion();
+  editMode.value = true;
+};
+
+const clearEdit = () => {
+  editing.value = false;
+  editMode.value = false;
+};
+
+const submitEdit = () => {
+  const preset: EnginePresetQuery = {
+    ...props.preset,
+    ...editDraft.value,
+  };
+  const onFailure = (err: AxiosError) => {
+    if (err.status === 409) {
+      nameAlreadyExistsError.value = true;
+    }
+    editing.value = false;
+  };
+
+  emit('preset:update', {
+    preset,
+    onSuccess: clearEdit,
+    onFailure,
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.preset-preview-title-wrapper {
+  display: flex;
+  min-width: 0;
+  gap: var(--spacing-xs);
+}
+
+.preset-preview-name {
+  overflow: hidden;
+  flex: 1 1 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.preset-preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+}
+</style>