@webitel/ui-datalist 1.0.0 → 1.0.2

package/src/filters/components/filter-options/team/team-filter-value-field.vue

@@ -0,0 +1,56 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :search-method="searchMethod"
+    :value="model"
+    :v="v$.model"
+    multiple
+    use-value-from-options-by-prop="id"
+    @input="handleInput"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { searchMethod } from './config.js';
+
+type ModelValue = number[];
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+
+const handleInput = (value: ModelValue) => {
+  model.value = value;
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/team/team-filter-value-preview.vue

@@ -0,0 +1,31 @@
+<template>
+  <ul v-if="localValue">
+    <li
+      v-for="({ name }, index) of localValue"
+      :key="index"
+    >
+      {{ name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { searchMethod } from './config.js';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const localValue = ref([]);
+
+const getLocalValue = async () => {
+  const { items } = await searchMethod({ id: props.value });
+  localValue.value = items;
+};
+
+getLocalValue();
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/total-duration/TotalDurationFilter.d.ts

@@ -0,0 +1,4 @@
+export type TotalDurationFilterModelValue = {
+  from: number;
+  to: number;
+};

package/src/filters/components/filter-options/total-duration/total-duration-filter-value-field.vue

@@ -0,0 +1,19 @@
+<template>
+  <duration-filter-value-field
+    :model-value="model"
+    @update:model-value="model = $event"
+    @update:invalid="emit('update:invalid', $event)"
+  />
+</template>
+
+<script lang="ts" setup>
+import DurationFilterValueField from '../_shared/durations/duration-filter-value-field.vue';
+import type { TotalDurationFilterModelValue } from './TotalDurationFilter';
+
+const model = defineModel<TotalDurationFilterModelValue>();
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/total-duration/total-duration-filter-value-preview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="total-duration-filter-value-preview">
+    <div v-if="from">
+      <p class="total-duration-filter-value-preview__title">
+        {{ t('reusable.from') }}
+      </p>
+
+      <span>{{ from }}</span>
+    </div>
+
+    <div v-if="to">
+      <p class="total-duration-filter-value-preview__title">
+        {{ t('reusable.to') }}
+      </p>
+
+      <span>{{ to }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+import { useFromToSecToPreviewTime } from '../_shared/composables/useFromToSecToPreviewTime';
+import type { TalkDurationFilterModelValue } from '../talk-duration/TalkDurationFilter';
+
+const props = defineProps<{
+  value: TalkDurationFilterModelValue;
+}>();
+
+const { t } = useI18n();
+
+const { from, to } = useFromToSecToPreviewTime(props.value);
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.duration-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/filters/components/filter-options/user/config.js

@@ -0,0 +1,4 @@
+import UsersAPI from '@webitel/ui-sdk/src/api/clients/users/users';
+
+export const searchMethod = UsersAPI.getLookup;
+export const localePath = '';

package/src/filters/components/filter-options/user/user-filter-value-field.vue

@@ -0,0 +1,56 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :search-method="searchMethod"
+    :value="model"
+    :v="v$.model"
+    multiple
+    use-value-from-options-by-prop="id"
+    @input="handleInput"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { WtSelect } from '@webitel/ui-sdk/src/components/index';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { searchMethod } from './config.js';
+
+type ModelValue = number[];
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+
+const handleInput = (value: ModelValue) => {
+  model.value = value;
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/user/user-filter-value-preview.vue

@@ -0,0 +1,31 @@
+<template>
+  <ul v-if="localValue">
+    <li
+      v-for="({ name }, index) of localValue"
+      :key="index"
+    >
+      {{ name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { searchMethod } from './config.js';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const localValue = ref([]);
+
+const getLocalValue = async () => {
+  const { items } = await searchMethod({ id: props.value });
+  localValue.value = items;
+};
+
+getLocalValue();
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/variable/variable-filter-value-field.vue

@@ -0,0 +1,49 @@
+<template>
+  <wt-input
+    v-model="model"
+    :label="t('webitelUI.filters.filterValue')"
+    :v="v$.model"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import variableSearchValidator from '@webitel/ui-sdk/src/validators/variableSearchValidator/variableSearchValidator';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+type ModelValue = string;
+
+const model = defineModel<ModelValue>();
+if (!model.value) {
+  model.value = '';
+}
+
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required: variableSearchValidator(),
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+
+v$.value.$touch();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/variable/variable-filter-value-preview.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="variables-filter-value-preview">
+    <div>
+      <p class="variables-filter-value-preview__title">
+        {{ t('vocabulary.keys') }}:
+      </p>
+      <span>{{ variable[0] }}</span>
+    </div>
+
+    <div>
+      <p class="variables-filter-value-preview__title">
+        {{ t('vocabulary.values') }}:
+      </p>
+      <span>{{ variable[1] }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+  value: string;
+}>();
+
+const { t } = useI18n();
+
+const variable = props.value.split('=');
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.variables-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/filters/components/preview/dynamic-filter-preview-info.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="dynamic-filter-preview-info">
+    <header class="dynamic-filter-preview-info__header">
+      <slot name="header" />
+    </header>
+
+    <wt-divider />
+
+    <div class="dynamic-filter-preview-info__body">
+      <slot name="default" />
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.dynamic-filter-preview-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+
+  &__header {
+    @extend %typo-subtitle-1;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+}
+</style>

package/src/filters/components/preview/dynamic-filter-preview.vue

@@ -0,0 +1,76 @@
+<template>
+  <dynamic-filter-config-view :disabled="dummy">
+    <template #activator="{ visible: configFormVisible }">
+      <wt-tooltip :disabled="configFormVisible">
+        <template #activator>
+          <wt-chip color="primary">
+            {{ filter.label || t(`webitelUI.filters.${filter.name}`) }}
+            <wt-icon-btn
+              v-if="!dummy"
+              icon="close--filled"
+              size="sm"
+              color="on-primary"
+              @mousedown.stop="deleteFilter"
+            />
+          </wt-chip>
+        </template>
+
+        <template #default>
+          <dynamic-filter-preview-info>
+            <template #header>
+              {{ t(`webitelUI.filters.${props.filter.name}`) }}
+            </template>
+
+            <template #default>
+              <slot name="info" />
+            </template>
+          </dynamic-filter-preview-info>
+        </template>
+      </wt-tooltip>
+    </template>
+
+    <template #content="slotScope">
+      <slot
+        name="form"
+        v-bind="slotScope"
+      />
+    </template>
+  </dynamic-filter-config-view>
+</template>
+
+<script lang="ts" setup>
+import { WtChip } from '@webitel/ui-sdk/src/components/index';
+import { WtIconBtn } from '@webitel/ui-sdk/src/components/index';
+import { WtTooltip } from '@webitel/ui-sdk/src/components/index';
+import { useI18n } from 'vue-i18n';
+
+import type { IFilter } from '../../types/Filter';
+import DynamicFilterConfigView from '../config/dynamic-filter-config-view.vue';
+import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
+
+interface Props {
+  filter: IFilter;
+  dummy?: boolean /* https://webitel.atlassian.net/browse/WTEL-6308?focusedCommentId=657415 */;
+}
+
+const { t } = useI18n();
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'delete:filter': [IFilter];
+}>();
+
+const deleteFilter = () => {
+  emit('delete:filter', props.filter);
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-chip {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-2xs);
+}
+</style>

package/src/filters/components/table-filters-panel.vue

@@ -0,0 +1,83 @@
+<template>
+  <section class="table-filters-panel">
+    <slot></slot>
+    <div class="table-filters-panel-filters">
+      <dynamic-filter-add-action>
+        <template #form>
+          <dynamic-filter-config-form
+            :options="unappliedFilters"
+            @submit="applyFilter"
+          >
+            <template
+              #value-input="{
+                filterName,
+                filterValue,
+                onValueChange,
+                onValueInvalidChange,
+              }"
+            >
+              <component
+                :is="getFilterValueComponent(filterName)"
+                :key="filterName"
+                :model-value="filterValue"
+                @update:model-value="onValueChange"
+                @undate:invalid="onValueInvalidChange"
+              />
+            </template>
+          </dynamic-filter-config-form>
+        </template>
+      </dynamic-filter-add-action>
+
+      <dynamic-filter-preview
+        v-for="filter of appliedFilters"
+        :key="filter.name"
+        :filter="filter"
+        @delete:filter="deleteAppliedFilter($event.name)"
+      >
+        <template #form>
+          <dynamic-filter-config-form
+            :filter="filter"
+            @submit="updateAppliedFilter"
+          >
+            <template
+              #value-input="{
+                filterName,
+                filterValue,
+                onValueChange,
+                onValueInvalidChange,
+              }"
+            >
+              <component
+                :is="getFilterValueComponent(filterName)"
+                :key="filterName"
+                :model-value="filterValue"
+                @update:model-value="onValueChange"
+                @undate:invalid="onValueInvalidChange"
+              />
+            </template>
+          </dynamic-filter-config-form>
+        </template>
+      </dynamic-filter-preview>
+    </div>
+    <div class="table-filters-panel-actions"></div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import DynamicFilterConfigForm from './config/dynamic-filter-config-form.vue';
+import DynamicFilterAddAction from './dynamic-filter-add-action.vue';
+import DynamicFilterPreview from './preview/dynamic-filter-preview.vue';
+
+// interface Props {}
+// const props = defineProps<Props>();
+
+// const emit = defineEmits<{
+//   'add:filter': [];
+//   'update:filter': [];
+//   'delete:filter': [];
+//   'reset:filters': [];
+//   hide: [];
+// }>();
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/createTableFiltersStore.ts

@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia';
+import { computed, reactive, ref } from 'vue';
+
+import { PersistedStorageType } from '../persist/PersistedStorage.types.ts';
+import { usePersistedStorage } from '../persist/usePersistedStorage.ts';
+import { createFiltersManager } from './classes/FiltersManager.ts';
+import { FiltersManagerConfig } from './types/FiltersManager';
+
+export const createTableFiltersStore = (
+  namespace: string,
+  config?: { filtersManagerConfig: FiltersManagerConfig },
+) => {
+  const id = `${namespace}/filters`;
+
+  return defineStore(id, () => {
+    const filtersManager = reactive(
+      createFiltersManager(config?.filtersManagerConfig),
+    );
+
+    /* for watchers in filter components */
+    const isRestoring = ref(false);
+
+    /*
+     wrapping filtersManager methods to extend their functionality
+     if it will be needed in future
+     */
+    const hasFilter = filtersManager.hasFilter.bind(filtersManager);
+    const addFilter = filtersManager.addFilter.bind(filtersManager);
+    const updateFilter = filtersManager.updateFilter.bind(filtersManager);
+    const deleteFilter = filtersManager.deleteFilter.bind(filtersManager);
+
+    const filtersList = computed(() => filtersManager.getFiltersList());
+
+    const setupPersistence = () => {
+      const { restore: restoreFilters } = usePersistedStorage({
+        name: 'filters',
+
+        value: computed(
+          () => filtersManager,
+        ) /* computed is used to provide value as ref(), not reactive() – as per usePersistedStorage interface */,
+
+        storages: [PersistedStorageType.Route],
+
+        /* use custom .toString() logic, provided by FiltersManager */
+        onStore: async (save, { name }) => {
+          const snapshotStr = filtersManager.toString();
+          return save({ name, value: snapshotStr });
+        },
+
+        /* use custom .fromString() logic, provided by FiltersManager */
+        onRestore: async (restore, name) => {
+          isRestoring.value = true;
+          const snapshotStr = await restore(name);
+          /*
+          snapshot as string because we know that filtersManager.toString() returns string,
+           not string[]
+           */
+          if (snapshotStr) filtersManager.fromString(snapshotStr as string);
+
+          isRestoring.value = false;
+        },
+      });
+
+      return restoreFilters();
+    };
+
+    return {
+      filtersManager,
+      isRestoring,
+
+      filtersList,
+
+      hasFilter,
+      addFilter,
+      updateFilter,
+      deleteFilter,
+
+      setupPersistence,
+    };
+  });
+};

package/src/filters/enums/FilterOption.ts

@@ -0,0 +1,43 @@
+export const FilterOption = {
+  Agent: 'agent',
+  AmdResult: 'amdResult',
+  Contact: 'contact',
+  Direction: 'direction',
+  Rated: 'rated',
+  Gateway: 'gateway',
+  Grantee: 'grantee',
+  Cause: 'cause',
+  Queue: 'queue',
+  RatedBy: 'ratedBy',
+  HasFile: 'hasFile',
+  Score: 'score',
+  Tag: 'tag',
+  TalkDuration: 'talkDuration',
+  Team: 'team',
+  TotalDuration: 'totalDuration',
+  HasTranscription: 'hasTranscription',
+  User: 'user',
+  Variable: 'variable',
+  CreatedAtFrom: 'createdAtFrom',
+  CreatedAtTo: 'createdAtTo',
+  Status: 'status',
+  Source: 'source',
+  Service: 'service',
+  Author: 'author',
+  Reporter: 'reporter',
+  Impacted: 'impacted',
+  Assignee: 'assignee',
+  ContactGroup: 'contactGroup',
+  Priority: 'priority',
+  CloseReasonGroups: 'closeReasonGroups',
+  Rating: 'rating',
+  Sla: 'sla',
+  SlaCondition: 'slaCondition',
+  ReactionTime: 'reactionTime',
+  ResolutionTime: 'resolutionTime',
+  ActualReactionTime: 'actualReactionTime',
+  ActualResolutionTime: 'actualResolutionTime',
+  HasAttachment: 'hasAttachment',
+} as const;
+
+export type FilterOption = (typeof FilterOption)[keyof typeof FilterOption];