@webitel/ui-sdk 24.12.84 → 24.12.86

package/src/modules/Filters/v2/filters/components/dynamic/config/dynamic-filter-config-form.vue

@@ -0,0 +1,146 @@
+<template>
+  <form class="dynamic-filter-config-form">
+    <wt-select
+      :disabled="editMode"
+      :label="t('webitelUI.filters.filterName')"
+      :options="options"
+      :value="filterName"
+      use-value-from-options-by-prop="id"
+      @input="filterName = $event"
+    />
+    <slot
+      name="value-input"
+      v-bind="{
+        filterName,
+        filterValue,
+        inputLabel: t('webitelUI.filters.filterValue'),
+        onValueChange: (v) => (filterValue = v),
+        onValueInvalidChange: (v) => (invalid = v),
+      }"
+    />
+    <wt-input
+      v-model="filterLabel"
+      :label="t('webitelUI.filters.filterLabel')"
+      @input="touchedLabel = true"
+    />
+    <footer class="dynamic-filter-config-form-footer">
+      <wt-button
+        :disabled="invalid"
+        wide
+        @click="submit"
+      >
+        {{ t('reusable.save') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        wide
+        @click="emit('cancel')"
+      >
+        {{ t('reusable.cancel') }}
+      </wt-button>
+    </footer>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import deepcopy from 'deep-copy';
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtButton from '../../../../../../../components/wt-button/wt-button.vue';
+import WtInput from '../../../../../../../components/wt-input/wt-input.vue';
+import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
+import type {
+  FilterInitParams,
+  FilterName,
+  IFilter,
+} from '../../../types/Filter';
+
+interface FilterNameSelectRepresentation {
+  name: string;
+  value: FilterName;
+}
+
+interface AddModeProps {
+  options: Array<FilterNameSelectRepresentation>;
+}
+
+interface EditModeProps {
+  filter: IFilter;
+}
+
+type Props = AddModeProps | EditModeProps;
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  submit: [FilterInitParams];
+  cancel: [];
+}>();
+
+const { t } = useI18n();
+
+const filterName = ref();
+const filterLabel = ref('');
+const filterValue = ref();
+
+// if user have not changed label yet, it will be changed with selected filterName
+const touchedLabel = ref(false);
+
+const editMode = !!props.filter;
+
+const invalid = ref(false);
+
+const submit = () => {
+  emit('submit', {
+    name: filterName.value,
+    label: filterLabel.value,
+    value: filterValue.value,
+  });
+};
+
+if (props.options) {
+  watch(
+    props.options,
+    () => {
+      filterName.value = props.options[0]?.value;
+      filterValue.value = null;
+
+      if (!touchedLabel.value) {
+        filterLabel.value = filterName.value;
+      }
+    },
+    { immediate: true },
+  );
+}
+
+if (props.filter) {
+  watch(
+    props.filter,
+    () => {
+      filterName.value = props.filter.name;
+      filterValue.value = deepcopy(props.filter.value);
+      filterLabel.value = props.filter.label;
+    },
+    { immediate: true },
+  );
+}
+</script>
+
+<style lang="scss" scoped>
+$form-width: 380px;
+
+.dynamic-filter-config-form {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: $form-width;
+  padding: var(--spacing-sm);
+  gap: var(--spacing-sm);
+}
+
+.dynamic-filter-config-form-footer {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+</style>

package/src/modules/Filters/v2/filters/components/dynamic/config/dynamic-filter-config-view.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="dynamic-filter-config-view">
+    <wt-tooltip :triggers="['click']">
+      <template #activator="slotScope">
+        <slot
+          name="activator"
+          v-bind="slotScope"
+        />
+      </template>
+      <template #default="slotScope">
+        <slot
+          name="content"
+          v-bind="slotScope"
+        />
+      </template>
+    </wt-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * this component should only be used for config view representation: tooltip/popup/etc,
+ * and their styling
+ */
+
+import WtTooltip from '../../../../../../../components/wt-tooltip/wt-tooltip.vue';
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/dynamic/dynamic-filter-add-action.vue

@@ -0,0 +1,41 @@
+<template>
+  <dynamic-filter-config-view class="dynamic-filter-add-action">
+    <template #activator>
+      <div class="dynamic-filter-add-action-wrapper">
+        <p v-if="props.showLabel">
+          {{ t('webitelUI.filters.addFilter') }}
+        </p>
+        <wt-icon-btn icon="add-filter" />
+      </div>
+    </template>
+
+    <template #content>
+      <slot name="form"> filter form should be here</slot>
+    </template>
+  </dynamic-filter-config-view>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+import DynamicFilterConfigView from './config/dynamic-filter-config-view.vue';
+
+interface Props {
+  showLabel?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+</script>
+
+<style lang="scss" scoped>
+.dynamic-filter-add-action-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  cursor: pointer;
+  gap: var(--spacing-2xs);
+}
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <section class="dynamic-filter-preview-info">
+    <header class="dynamic-filter-preview-info-header">
+      {{ props.name }}
+    </header>
+
+    <wt-divider />
+
+    <!--    TODO: how to visually represent id/value types? -->
+    <ul v-if="isArrayValue">
+      <li
+        v-for="(el, index) of value"
+        :key="index"
+      >
+        {{ el }}
+      </li>
+    </ul>
+
+    <article v-else>
+      {{ props.value }}
+    </article>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import type { FilterName, FilterValue } from '../../../types/Filter';
+
+interface Props {
+  name: FilterName;
+  value: FilterValue;
+}
+
+const props = defineProps<Props>();
+
+const isArrayValue = Array.isArray(props.value);
+</script>
+
+<style lang="scss" scoped>
+.dynamic-filter-preview-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.dynamic-filter-preview-info-header {
+  @extend %typo-subtitle-1;
+}
+</style>

package/src/modules/Filters/v2/filters/components/dynamic/preview/dynamic-filter-preview.vue

@@ -0,0 +1,61 @@
+<template>
+  <dynamic-filter-config-view>
+    <template #activator="{ visible: configFormVisible }">
+      <wt-tooltip :disabled="configFormVisible">
+        <template #activator>
+          <wt-chip color="primary">
+            {{ props.filter.label || props.filter.name }}
+            <wt-icon-btn
+              icon="close--filled"
+              size="sm"
+              @mousedown.stop="deleteFilter"
+            />
+          </wt-chip>
+        </template>
+
+        <template #default>
+          <dynamic-filter-preview-info
+            :name="props.filter.name"
+            :value="props.filter.value"
+          />
+        </template>
+      </wt-tooltip>
+    </template>
+
+    <template #content>
+      <slot name="form" />
+    </template>
+  </dynamic-filter-config-view>
+</template>
+
+<script lang="ts" setup>
+import WtChip from '../../../../../../../components/wt-chip/wt-chip.vue';
+import WtIconBtn from '../../../../../../../components/wt-icon-btn/wt-icon-btn.vue';
+import WtTooltip from '../../../../../../../components/wt-tooltip/wt-tooltip.vue';
+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;
+}
+
+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;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2xs);
+}
+</style>

package/src/modules/Filters/v2/filters/components/static/search-filter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="search-filter"></div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({});
+
+const emit = defineEmits([]);
+</script>
+
+<style scoped lang="scss">
+.search-filter {
+}
+</style>

package/src/modules/Filters/v2/filters/components/table-filters-panel.vue

@@ -0,0 +1,87 @@
+<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 './dynamic/config/dynamic-filter-config-form.vue';
+import DynamicFilterAddAction from './dynamic/dynamic-filter-add-action.vue';
+import DynamicFilterPreview from './dynamic/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>
+.table-filters-panel {
+}
+</style>

package/src/modules/Filters/v2/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/modules/Filters/v2/filters/index.ts

@@ -0,0 +1,27 @@
+import { Filter } from './classes/Filter.ts';
+import { createFiltersManager } from './classes/FiltersManager';
+import type {
+  FilterConfig,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FilterValue,
+  IFilter,
+} from './types/Filter.d.ts';
+import type {
+  FiltersManagerConfig,
+  IFiltersManager,
+} from './types/FiltersManager.d.ts';
+
+export { createFiltersManager, Filter };
+
+export type {
+  FilterConfig,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FiltersManagerConfig,
+  FilterValue,
+  IFilter,
+  IFiltersManager,
+};

package/src/modules/Filters/v2/filters/scripts/utils.ts

@@ -0,0 +1,31 @@
+import type { FilterName } from '../types/Filter';
+
+export const filterLabelToSnapshotKey = (name: FilterName): string =>
+  `${name}_lbl`;
+
+export const filterValueToSnapshotKey = (name: FilterName): string =>
+  `${name}_val`;
+
+const filterLabelFromSnapshotKey = (snapshotKey: string): FilterName =>
+  snapshotKey.replace('_lbl', '');
+
+const filterValueFromSnapshotKey = (snapshotKey: string): FilterName =>
+  snapshotKey.replace('_val', '');
+
+const isLabelSnapshotKey = (snapshotKey: string): boolean =>
+  snapshotKey.includes('_lbl');
+
+const isValueSnapshotKey = (snapshotKey: string): boolean =>
+  snapshotKey.includes('_val');
+
+export const filterNameFromSnapshotKey = (snapshotKey: string): FilterName => {
+  if (isLabelSnapshotKey(snapshotKey))
+    return filterLabelFromSnapshotKey(snapshotKey);
+  if (isValueSnapshotKey(snapshotKey))
+    return filterValueFromSnapshotKey(snapshotKey);
+};
+
+export const filterValuePropFromSnapshotKey = (snapshotKey: string): string => {
+  if (isLabelSnapshotKey(snapshotKey)) return 'label';
+  if (isValueSnapshotKey(snapshotKey)) return 'value';
+};

package/src/modules/Filters/v2/filters/types/Filter.d.ts

@@ -0,0 +1,41 @@
+export type FilterName = string;
+export type FilterLabel = string;
+export type FilterValue =
+  | object
+  | []
+  | string
+  | number
+  | boolean
+  | undefined
+  | null;
+
+/**
+ * represents user-input data, that should be (re)stored
+ */
+export interface FilterData {
+  value: FilterValue;
+  label?: FilterLabel;
+}
+
+export interface FilterInitParams extends FilterData {
+  name: FilterName;
+}
+
+export interface FilterConfig {
+  /**
+   * Perform simple type conversion on store/restore,
+   * without need to provide custom store/restore functions
+   */
+  storableType?: string;
+  /**
+   * list of persistence storages that should be used for this filter
+   */
+  storage?: string[];
+}
+
+export interface IFilter {
+  name: FilterName;
+  value: FilterValue;
+  label?: FilterLabel;
+  set: (data: FilterData) => IFilter;
+}

package/src/modules/Filters/v2/filters/types/FiltersManager.d.ts

@@ -0,0 +1,76 @@
+import type {
+  FilterConfig,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FilterValue,
+  IFilter,
+} from './Filter.types.ts';
+
+export interface IFiltersManager {
+  filters: Map<FilterName, IFilter>;
+
+  hasFilter: (name: FilterName) => boolean;
+  getFilter: (name: FilterName) => IFilter;
+  addFilter: (
+    params: FilterInitParams,
+    payload?: object,
+    config?: FilterConfig,
+  ) => IFilter;
+  updateFilter: ({
+    name,
+  }: {
+    name: FilterName;
+    value?: FilterValue;
+    label?: FilterLabel;
+  }) => IFilter;
+  deleteFilter: (name: FilterName) => IFilter;
+
+  /**
+   * Converts filters data to String, that can be stored
+   */
+  toString: () => string;
+
+  /**
+   * Restores filters from string
+   */
+  fromString: (snapshotStr: string) => void;
+
+  /**
+   * deletes filters
+   * If include/exclude are not provided, all filters will be deleted
+   */
+  reset: ({
+    include,
+    exclude,
+  }?: {
+    include?: FilterName[];
+    exclude?: FilterName[];
+  }) => void;
+
+  /**
+   * @returns Array<FilterName>
+   */
+  getAllKeys: () => FilterName[];
+
+  /**
+   * @returns { FilterName: FilterValue }
+   */
+
+  getAllValues: () => { [name: FilterName]: FilterValue };
+  /**
+   * @returns Array<IFilter>
+   * @param include
+   * @param exclude
+   */
+
+  getFiltersList: ({
+    include,
+    exclude,
+  }?: {
+    include?: FilterName[];
+    exclude?: FilterName[];
+  }) => IFilter[];
+}
+
+export type FiltersManagerConfig = FilterConfig;