@webitel/ui-sdk 24.12.171 → 24.12.173

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

@@ -0,0 +1,226 @@
+<template>
+  <div class="apply-preset-action">
+    <wt-icon-action
+      :action="IconAction.APPLY_PRESET"
+      @click="showPresetsList = true"
+    />
+    <wt-popup
+      :shown="showPresetsList"
+      size="md"
+      @close="showPresetsList = false"
+    >
+      <template #title>
+        {{ `${t('vocabulary.apply')} ${t('webitelUI.filters.presets.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) of dataList"
+              :key="preset.id"
+              collapsed
+              :is-selected="preset === selectedPreset"
+              :preset="preset"
+              @preset:select="selectedPreset = preset"
+              @preset:update="updatePreset"
+              @preset:delete="() => deletePreset(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 {type StoreDefinition, storeToRefs } from "pinia";
+import {computed, inject, ref, watch, onUnmounted} from "vue";
+import {useI18n} from "vue-i18n";
+
+import {WtButton, WtEmpty, WtPopup, WtSearchBar, WtIconAction} from "../../../../../../components/index";
+import {useTableEmpty} from "../../../../../TableComponentModule/composables/useTableEmpty";
+import { IconAction } from "../../../../../../enums";
+import PresetQueryAPI from '../../api/PresetQuery.api.ts';
+import PresetPreview from "./preset-preview.vue";
+import {EnginePresetQuery} from "webitel-sdk";
+
+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);
+filtersManager.value.addFilter({name: 'presetNamespace', value: props.namespace});
+
+const search = computed({
+  get: () => {
+    return filtersManager.value.getFilter('search')?.value || '';
+  },
+  set: (value) => {
+    filtersManager.value.addFilter({name: 'search', value});
+  }
+});
+
+const {
+  showEmpty,
+  image: imageEmpty,
+  text: textEmpty,
+} = useTableEmpty({
+  dataList,
+  isLoading,
+  error,
+  filters: computed(() => {
+    return {
+      search: search.value,
+    };
+  }),
+});
+
+watch(showPresetsList, () => {
+  initialize();
+
+  watch(showPresetsList, (value) => {
+    if (value) {
+      search.value = '';
+      /* search.value reset causes re-fetch as filter change, so
+      loadDataList() is commented.
+      TODO: implement ability to set filters "silently" and refactor this code */
+      // loadDataList();
+    }
+  });
+}, {once: true});
+
+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 },
+      id: preset.id,
+      namespace: props.namespace,
+    });
+    eventBus.$emit('notification', {
+      type: 'success',
+      text: t('systemNotifications.success.update', {
+        entity: t('webitelUI.filters.presets.preset'),
+      }),
+    });
+    onSuccess();
+    return loadDataList();
+  } catch (err) {
+    onFailure(err);
+    throw err;
+  }
+};
+
+const deletePreset = async (preset: EnginePresetQuery) => {
+  await deleteEls([preset]);
+  eventBus.$emit('notification', {
+    type: 'success',
+    text: t('systemNotifications.success.delete', {
+      entity: t('webitelUI.filters.presets.preset'),
+    }),
+  });
+};
+</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,
+      nameAlreadyInUse: () => !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>

package/src/modules/Filters/v2/filter-presets/components/save-preset/overwrite-preset-popup.vue

@@ -0,0 +1,62 @@
+<template>
+  <wt-popup
+    size="md"
+    @close="emit('close')"
+  >
+    <template #title>
+      {{ `${t('reusable.save')} ${t('webitelUI.filters.presets.preset').toLowerCase()}` }}
+    </template>
+    <template #main>
+      <p class="overwrite-preset-popup-text">
+        {{ t('webitelUI.filters.presets.overwritePresetTitle') }}
+      </p>
+      <p class="overwrite-preset-popup-text">
+        {{ t('webitelUI.filters.presets.overwritePresetText') }}
+      </p>
+    </template>
+    <template #actions>
+      <wt-button
+        color="error"
+        :loading="isSaving"
+        @click="confirm"
+      >
+        {{ t('reusable.replace') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="emit('cancel')"
+        >{{ t('reusable.cancel') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtPopup } from '../../../../../../components/index';
+import { SubmitConfig } from './save-preset-popup.vue';
+
+const emit = defineEmits<{
+  confirm: [SubmitConfig];
+  cancel: [];
+  close: [];
+}>();
+
+const { t } = useI18n();
+
+const isSaving = ref(false);
+
+const confirm = () => {
+  emit('confirm', {
+    onCompleted: () => (isSaving.value = false),
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.overwrite-preset-popup-text {
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+  <div class="save-preset-action">
+    <wt-icon-action
+      :action="IconAction.SAVE_PRESET"
+      :disabled="disableAction"
+      @click="showSaveForm = true"
+    />
+
+    <save-preset-popup
+      v-if="showSaveForm /* v-if is used to re-mount component on each open/close so that each time component data re-inits*/"
+      v-show="!presetToOverwriteWith /* on 'overwrite preset' popup hide this popup, but don't reset it*/"
+      :shown="true /* coz visibility is controlled by v-if*/"
+      :filters-manager="props.filtersManager"
+      :namespace="namespace"
+      @submit="handlePresetSubmit"
+      @close="showSaveForm = false"
+    />
+
+    <overwrite-preset-popup
+      v-if="presetToOverwriteWith"
+      @confirm="handlePresetOverwriteConfirmation"
+      @cancel="presetToOverwriteWith = null"
+      @close="presetToOverwriteWith = null"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed, inject, type Ref,ref} from 'vue';
+import {useI18n} from "vue-i18n";
+import {EnginePresetQuery} from "webitel-sdk";
+
+import { WtIconAction } from '../../../../../../components/index';
+import {IFiltersManager} from "../../../filters/index";
+import {addPreset, getPresetList, updatePreset} from '../../api/PresetQuery.api.ts';
+import OverwritePresetPopup from "./overwrite-preset-popup.vue";
+import { IconAction } from "../../../../../../enums";
+import SavePresetPopup, {SubmitConfig} from "./save-preset-popup.vue";
+
+const props = defineProps<{
+  /**
+   * presets "section" namespace
+   */
+  namespace: string;
+  filtersManager: IFiltersManager;
+}>();
+
+const eventBus = inject('$eventBus');
+
+const { t } = useI18n();
+
+/**
+ * disable "save" btn if there's nothing to save
+ * */
+const disableAction = computed(() => {
+  return !props.filtersManager.getAllKeys().length;
+});
+
+/**
+ * visibility flag
+ * */
+const showSaveForm = ref(false);
+
+/**
+ * if preset with the same name already exists, this will be suggested to set to that preset
+ */
+const presetToOverwriteWith: Ref<EnginePresetQuery | null> = ref(null);
+
+const handlePresetSubmit = async (preset: EnginePresetQuery, { onCompleted }: SubmitConfig) => {
+  try {
+    await addPreset({ preset, namespace: props.namespace });
+
+    eventBus.$emit('notification', {
+      type: 'success',  text: t('systemNotifications.success.create', {
+        entity: t('webitelUI.filters.presets.preset'),
+      }),
+    });
+
+    showSaveForm.value = false;
+  } catch (err) {
+    if (err?.status === 409) {
+      presetToOverwriteWith.value = preset;
+    }
+    throw err;
+  } finally {
+    if (onCompleted) onCompleted();
+  }
+};
+
+const handlePresetOverwriteConfirmation = async ({ onCompleted }: SubmitConfig) => {
+  try {
+    const {items} = await getPresetList({
+      search: presetToOverwriteWith.value.name,
+      presetNamespace: props.namespace,
+    }, {
+      transformers: {useStarToSearch: false},
+    });
+    const {id: existingPresetId} = items[0];
+    await updatePreset({
+      id: existingPresetId,
+      item: {
+        ...presetToOverwriteWith.value,
+      },
+      namespace: props.namespace,
+    });
+
+    eventBus.$emit('notification', {
+      type: 'success',  text: t('systemNotifications.success.update', {
+        entity: t('webitelUI.filters.presets.preset'),
+      }),
+    });
+
+    presetToOverwriteWith.value = null;
+    showSaveForm.value = false;
+  } finally {
+    if (onCompleted) onCompleted();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>