@webitel/ui-sdk 25.4.19 → 25.4.20

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;