@webitel/ui-sdk 25.4.18 → 25.4.20

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>

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

@@ -0,0 +1,53 @@
+<template>
+  <wt-popup
+    size="sm"
+    @close="emit('close')"
+  >
+    <template #title>
+      {{ t('validations.alreadyExists', { field: t('reusable.name') }) }}
+    </template>
+    <template #main> some nice text goes here {{ t('') }} </template>
+    <template #actions>
+      <wt-button
+        color="error"
+        :loading="isSaving"
+        @click="confirm"
+      >
+        {{ t('reusable.overwrite') }}
+      </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 {
+}
+</style>

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="save-preset-action">
+    <wt-icon-btn
+      :disabled="disableAction"
+      icon="save"
+      @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"
+      @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, ref, type Ref} from 'vue';
+import {EnginePresetQuery} from "webitel-sdk";
+import { WtIconBtn } from '../../../../../../components/index';
+import {addPreset, getPresetList, updatePreset} from '../../api/PresetQuery.api.ts';
+import SavePresetPopup, {SubmitConfig} from "./save-preset-popup.vue";
+import OverwritePresetPopup from "./overwrite-preset-popup.vue";
+import {IFiltersManager} from "../../../filters/index";
+
+const props = defineProps<{
+  /**
+   * presets "section" namespace
+   */
+  namespace: string;
+  filtersManager: IFiltersManager;
+}>();
+
+/**
+ * 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 });
+    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,
+      },
+    });
+
+    presetToOverwriteWith.value = null;
+    showSaveForm.value = false;
+  } finally {
+    if (onCompleted) onCompleted();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+  <wt-popup
+    size="sm"
+    @close="emit('close')"
+  >
+    <template #title>
+      {{ `${t('reusable.save')} ${t('filters.preset.preset').toLowerCase()}` }}
+    </template>
+
+    <template #main>
+      <form
+        class="save-preset-form"
+        @submit.prevent="() => !v$.$invalid && save"
+      >
+        <preset-name-field
+          v-model:model-value="presetForm.name"
+          :v="v$.name"
+        />
+
+        <preset-description-field
+          v-model:model-value="presetForm.description"
+        />
+      </form>
+
+      <preset-filters-preview
+        :filters="appliedFilters"
+      />
+    </template>
+
+    <template #actions>
+      <wt-button
+        :disabled="v$.$invalid"
+        :loading="isSaving"
+        @click="save"
+      >
+        {{ t('reusable.save') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="emit('close')"
+      >
+        {{ t('reusable.cancel') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup lang="ts">
+import {computed, reactive, ref} from "vue";
+import {useI18n} from "vue-i18n";
+import {useVuelidate} from "@vuelidate/core";
+import {required} from "@vuelidate/validators";
+import {EnginePresetQuery} from "webitel-sdk";
+import type {IFiltersManager} from "../../../index";
+import { WtPopup } from '../../../../../../components/index';
+import PresetDescriptionField from "../_shared/input-fields/preset-description-field.vue";
+import PresetFiltersPreview from "../_shared/preset-filters-preview.vue";
+import PresetNameField from "../_shared/input-fields/preset-name-field.vue";
+
+export type SubmitConfig = {
+  onSuccess?: () => void;
+  onFailure?: (err: Error) => void;
+  onCompleted?: () => void;
+};
+
+const props = defineProps<{
+  filtersManager: IFiltersManager;
+}>();
+
+const emit = defineEmits<{
+  submit: [EnginePresetQuery, SubmitConfig?];
+  close: [];
+}>();
+
+const {t} = useI18n();
+
+const isSaving = ref(false);
+
+const presetForm = reactive({
+  name: '',
+  description: '',
+});
+
+const v$ = useVuelidate(computed(() => {
+  return {
+    name: {
+      required,
+    },
+  };
+}), presetForm, {$autoDirty: true});
+v$.value.$touch();
+
+const appliedFilters = computed(() => {
+  return props.filtersManager.getFiltersList();
+});
+
+const save = () => {
+  isSaving.value = true;
+
+  const preset: EnginePresetQuery = {
+    ...presetForm,
+    preset: {
+      'filtersManager.toString': props.filtersManager.toString(),
+    },
+  };
+
+  emit('submit', preset, {
+    onCompleted: () => {
+      isSaving.value = false;
+    },
+  });
+};
+
+</script>
+
+<style scoped lang="scss">
+.save-preset-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.save-preset-filters-preview-wrapper {
+  @extend %wt-scrollbar;
+  overflow-y: auto;
+  max-height: 140px;
+  margin-top: var(--spacing-sm);
+}
+</style>

package/src/modules/Filters/v2/filter-presets/index.ts

@@ -0,0 +1,10 @@
+import { createFilterPresetsStore } from "./stores/createFilterPresetsStore.ts";
+import SavePresetAction from './components/save-preset/save-preset-action.vue';
+import ApplyPresetAction from "./components/apply-preset/apply-preset-action.vue";
+
+export {
+    SavePresetAction,
+    ApplyPresetAction,
+
+    createFilterPresetsStore
+};

package/src/modules/Filters/v2/filter-presets/stores/createFilterPresetsStore.ts

@@ -0,0 +1,14 @@
+import { EnginePresetQuery } from 'webitel-sdk';
+import { createTableStore } from 'src/modules/Filters/v2/table/createTableStore.store.ts';
+import PresetQueryAPI from "../api/PresetQuery.api.ts";
+import { headers } from "./headers/headers.ts";
+
+export const createFilterPresetsStore = (namespace = 'presets') => {
+    const presetsNamespace = namespace.endsWith('presets') ? namespace : `${namespace}/presets`;
+
+    return createTableStore<EnginePresetQuery>(presetsNamespace, {
+        apiModule: PresetQueryAPI,
+        headers,
+        disablePersistence: true,
+    });
+}

package/src/modules/Filters/v2/filter-presets/stores/headers/headers.ts

@@ -0,0 +1,24 @@
+import {WtTableHeader} from "src/components/wt-table/types/WtTable.d.ts";
+
+export const headers: WtTableHeader[] = [
+    {
+        value: 'id',
+        field: 'id',
+        show: true,
+    },
+    {
+        value: 'name',
+        field: 'name',
+        show: true,
+    },
+    {
+        value: 'preset',
+        field: 'preset',
+        show: true,
+    },
+    {
+        value: 'description',
+        field: 'description',
+        show: true,
+    },
+];

package/src/modules/Filters/v2/filters/components/values/filterComponentsMap.ts

@@ -0,0 +1,147 @@
+import {
+  AgentFilter,
+  AgentFilterPreview,
+  AmdResultFilter,
+  AmdResultFilterPreview,
+  ContactFilter,
+  ContactFilterPreview,
+  CreatedAtFromFilter,
+  CreatedAtFromFilterPreview,
+  CreatedAtToFilter,
+  CreatedAtToFilterPreview,
+  DirectionFilter,
+  DirectionFilterPreview,
+  HasRatingFilterValueField,
+  HasRatingFilterValuePreview,
+  GatewayFilter,
+  GatewayFilterPreview,
+  GranteeFilter,
+  GranteeFilterPreview,
+  CauseFilter,
+  CauseFilterPreview,
+  QueueFilter,
+  QueueFilterPreview,
+  RatedByFilter,
+  RatedByFilterPreview,
+  HasFileFilter,
+  HasFileFilterPreview,
+  ScoreFilter,
+  ScoreFilterPreview,
+  TagFilter,
+  TagFilterPreview,
+  TalkDurationFilter,
+  TalkDurationFilterPreview,
+  TeamFilter,
+  TeamFilterPreview,
+  TotalDurationFilter,
+  TotalDurationFilterPreview,
+  HasTranscriptionFilter,
+  HasTranscriptionFilterPreview,
+  UserFilter,
+  UserFilterPreview,
+  VariableFilter,
+  VariableFilterPreview,
+} from '../index';
+import {Component} from "vue";
+import type {FilterName} from "../../../index";
+
+
+interface FilterOptionsComponentsConfig {
+  [key: string]: {
+    valueField: Component
+    previewField: Component
+  }
+}
+const filterOptionsComponentsConfig: FilterOptionsComponentsConfig = {
+  agent: {
+    valueField: AgentFilter,
+    previewField: AgentFilterPreview,
+  },
+  amdResult: {
+    valueField: AmdResultFilter,
+    previewField: AmdResultFilterPreview,
+  },
+  contact: {
+    valueField: ContactFilter,
+    previewField: ContactFilterPreview,
+  },
+  createdAtFrom: {
+    valueField: CreatedAtFromFilter,
+    previewField: CreatedAtFromFilterPreview,
+  },
+  createdAtTo: {
+    valueField: CreatedAtToFilter,
+    previewField: CreatedAtToFilterPreview,
+  },
+  direction: {
+    valueField: DirectionFilter,
+    previewField: DirectionFilterPreview,
+  },
+  rated: {
+    valueField: HasRatingFilterValueField,
+    previewField: HasRatingFilterValuePreview,
+  },
+  gateway: {
+    valueField: GatewayFilter,
+    previewField: GatewayFilterPreview,
+  },
+  grantee: {
+    valueField: GranteeFilter,
+    previewField: GranteeFilterPreview,
+  },
+  cause: {
+    valueField: CauseFilter,
+    previewField: CauseFilterPreview,
+  },
+  queue: {
+    valueField: QueueFilter,
+    previewField: QueueFilterPreview,
+  },
+  ratedBy: {
+    valueField: RatedByFilter,
+    previewField: RatedByFilterPreview,
+  },
+  hasFile: {
+    valueField: HasFileFilter,
+    previewField: HasFileFilterPreview,
+  },
+  score: {
+    valueField: ScoreFilter,
+    previewField: ScoreFilterPreview,
+  },
+  tag: {
+    valueField: TagFilter,
+    previewField: TagFilterPreview,
+  },
+  talkDuration: {
+    valueField: TalkDurationFilter,
+    previewField: TalkDurationFilterPreview,
+  },
+  team: {
+    valueField: TeamFilter,
+    previewField: TeamFilterPreview,
+  },
+  totalDuration: {
+    valueField: TotalDurationFilter,
+    previewField: TotalDurationFilterPreview,
+  },
+  hasTranscription: {
+    valueField: HasTranscriptionFilter,
+    previewField: HasTranscriptionFilterPreview,
+  },
+  user: {
+    valueField: UserFilter,
+    previewField: UserFilterPreview,
+  },
+  variable: {
+    valueField: VariableFilter,
+    previewField: VariableFilterPreview,
+  },
+}
+
+export const getFilterFieldComponent = (filterName: FilterName, filterField: 'valueField' | 'previewField') => {
+  const filter = filterOptionsComponentsConfig[filterName];
+  return !filter ? '' : filter[filterField] || '';
+};
+
+export default filterOptionsComponentsConfig;