@webitel/ui-datalist 1.0.9 → 1.0.12

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
+    "build:types": "vue-tsc -p ./tsconfig.build.json",
     "lint:fix": "eslint --fix ./src && prettier --write --check ./src",
     "lint:fix-staged": "npx lint-staged",
     "lint:package": "publint",
@@ -12,14 +13,14 @@
   },
   "type": "module",
   "main": "./src/index.ts",
-  "types": "./src/index.d.ts",
+  "types": "./dist/types/index.d.ts",
   "workspaces": [
     "../../"
   ],
   "exports": {
     ".": "./src/index.ts",
-    "./filters": "./src/filters/index.ts",
-    "./presets": "./src/filter-presets/index.ts"
+    "./filters": "./src/modules/filters/index.ts",
+    "./presets": "./src/modules/filter-presets/index.ts"
   },
   "files": [
     "src/*",
@@ -35,7 +36,8 @@
   "dependencies": {
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@webitel/ui-sdk": "^25.4.59"
+    "@webitel/ui-sdk": "^25.4.66",
+    "@webitel/styleguide": "^24.12.26"
   },
   "devDependencies": {
     "vue-tsc": "^2.2.8",

package/src/index.ts

@@ -1,3 +1,3 @@
-import { createTableStore } from './table/createTableStore.store';
+import { createTableStore } from './modules/table/createTableStore.store';
 
 export { createTableStore };

package/src/{filter-presets → modules/filter-presets}/components/_shared/preset-filters-preview.vue

@@ -6,9 +6,10 @@
     <dynamic-filter-panel-wrapper size="sm">
       <template #filters>
         <dynamic-filter-preview
-          v-for="filter of props.filters"
+          v-for="({ filter, filterConfig }) of appliedFilterToFilterConfigMappings"
           :key="filter.name"
           :filter="filter"
+          :filter-config="filterConfig"
           readonly
         />
       </template>
@@ -20,17 +21,25 @@
 import { WtLabel } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
-import type { IFilter } from '../../../filters';
+import type {IFiltersManager} from '../../../filters';
 import DynamicFilterPanelWrapper from '../../../filters/components/dynamic-filter-panel-wrapper.vue';
 import DynamicFilterPreview from '../../../filters/components/preview/dynamic-filter-preview.vue';
+import { useFilterConfigsToolkit } from "../../../filters/composables/useFilterConfigsToolkit";
+import {TFilterConfig} from "../../../filters/modules/filterConfig/classes/FilterConfig";
 
-type Props = {
-  filters: IFilter[];
-};
-
-const props = defineProps<Props>();
+const props = defineProps<{
+  filtersManager: IFiltersManager;
+  filterConfigs: TFilterConfig[];
+}>();
 
 const { t } = useI18n();
+
+const {
+  appliedFilterToFilterConfigMappings,
+} = useFilterConfigsToolkit({
+  filterOptions: props.filterConfigs,
+  filtersManager: props.filtersManager,
+});
 </script>
 
 <style scoped></style>

package/src/{filter-presets → modules/filter-presets}/components/apply-preset/apply-preset-action.vue

@@ -32,9 +32,10 @@
             <preset-preview
               v-for="preset of dataList"
               :key="preset.id"
-              collapsed
+              :filter-configs="props.filterConfigs"
               :is-selected="preset === selectedPreset"
               :preset="preset"
+              collapsed
               @preset:select="selectedPreset = preset"
               @preset:update="updatePreset"
               @preset:delete="() => deletePreset(preset)"
@@ -82,7 +83,8 @@ import { computed, inject, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import PresetQueryAPI from '../../api/PresetQuery.api.ts';
+import {TFilterConfig} from "../../../filters/modules/filterConfig/classes/FilterConfig";
+import PresetQueryAPI from '../../api/PresetQuery.ts';
 import PresetPreview from './preset-preview.vue';
 
 const props = defineProps<{
@@ -91,11 +93,7 @@ const props = defineProps<{
    */
   namespace: string;
   usePresetsStore: Store;
-  /**
-   * @description
-   * Is needed for preset to exclude filter values, not related to filters panel
-   */
-  filterOptions: FilterOption[];
+  filterConfigs: TFilterConfig[];
 }>();
 
 const emit = defineEmits<{
@@ -178,7 +176,7 @@ const updatePreset = async ({ preset, onSuccess, onFailure }) => {
     await PresetQueryAPI.update({
       item: { ...preset },
       id: preset.id,
-      namespace: preset.namespace,
+      namespace: preset.preset?.namespace,
     });
     eventBus.$emit('notification', {
       type: 'success',
@@ -217,8 +215,8 @@ const deletePreset = async (preset: EnginePresetQuery) => {
 .apply-preset-main-content {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   height: 100%;
+  gap: var(--spacing-xs);
 
   .wt-empty {
     flex-grow: 1;
@@ -230,10 +228,10 @@ const deletePreset = async (preset: EnginePresetQuery) => {
   @extend %wt-scrollbar;
 
   display: flex;
+  overflow-y: auto;
   flex-direction: column;
-  gap: var(--spacing-xs);
   max-height: 400px;
-  overflow-y: auto;
+  gap: var(--spacing-xs);
   scrollbar-gutter: stable;
 }
 </style>

package/src/{filter-presets → modules/filter-presets}/components/apply-preset/preset-preview.vue

@@ -61,7 +61,10 @@
             @update:model-value="nameAlreadyExistsError = false"
           />
 
-          <preset-filters-preview :filters="presetFilters" />
+          <preset-filters-preview
+            :filters-manager="filtersManager"
+            :filter-configs="props.filterConfigs"
+          />
 
           <preset-description-field
             v-model:model-value="editDraft.description"
@@ -86,6 +89,7 @@ import { computed, ref } from 'vue';
 import { EnginePresetQuery } from 'webitel-sdk';
 
 import { createFiltersManager } from '../../../filters';
+import {TFilterConfig} from "../../../filters/modules/filterConfig/classes/FilterConfig";
 import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
 import PresetNameField from '../_shared/input-fields/preset-name-field.vue';
 import PresetFiltersPreview from '../_shared/preset-filters-preview.vue';
@@ -94,6 +98,7 @@ type Props = {
   preset: EnginePresetQuery;
   isSelected: boolean;
   collapsed: boolean;
+  filterConfigs: TFilterConfig[];
 };
 
 const props = defineProps<Props>();
@@ -110,14 +115,15 @@ const emit = defineEmits<{
   'preset:delete': [EnginePresetQuery];
 }>();
 
-const presetFilters = computed(() => {
-  const snapshot = props.preset?.preset?.['filtersManager.toString'];
-  if (!snapshot) return [];
-
+const filtersManager = computed(() => {
   const filtersManager = createFiltersManager();
-  filtersManager.fromString(snapshot);
 
-  return filtersManager.getFiltersList();
+  const snapshot = props.preset?.preset?.['filtersManager.toString'];
+  if (snapshot) {
+    filtersManager.fromString(snapshot);
+  }
+
+  return filtersManager;
 });
 
 const editMode = ref(false);

package/src/{filter-presets → modules/filter-presets}/components/save-preset/save-preset-action.vue

@@ -15,6 +15,7 @@
       "
       :shown="true /* coz visibility is controlled by v-if*/"
       :filters-manager="localFiltersManager"
+      :filter-configs="props.filterConfigs"
       :namespace="namespace"
       @submit="handlePresetSubmit"
       @close="showSaveForm = false"
@@ -37,15 +38,15 @@ import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
 import {
-  createFiltersManager,
-  FilterOption,
+  createFiltersManager, FilterName,
   IFiltersManager,
 } from '../../../filters';
+import {TFilterConfig} from "../../../filters/modules/filterConfig/classes/FilterConfig";
 import {
   addPreset,
   getPresetList,
   updatePreset,
-} from '../../api/PresetQuery.api.ts';
+} from '../../api/PresetQuery';
 import OverwritePresetPopup from './overwrite-preset-popup.vue';
 import SavePresetPopup, { SubmitConfig } from './save-preset-popup.vue';
 
@@ -62,9 +63,10 @@ const props = defineProps<{
   filtersManager: IFiltersManager;
   /**
    * @description
-   * Is needed for preset to exclude filter values, not related to filters panel
+   * include in preset only filter values related to filters panel
    */
-  filterOptions: FilterOption[];
+  filtersIncluded: FilterName[];
+  filterConfigs: TFilterConfig[];
 }>();
 
 const eventBus = inject('$eventBus');
@@ -76,7 +78,7 @@ watch(
   () => {
     localFiltersManager.reset();
     localFiltersManager.fromString(
-      props.filtersManager.toString({ include: props.filterOptions }),
+      props.filtersManager.toString({ include: props.filtersIncluded }),
     );
   },
   { immediate: true },

package/src/{filter-presets → modules/filter-presets}/components/save-preset/save-preset-popup.vue

@@ -24,7 +24,10 @@
         />
       </form>
 
-      <preset-filters-preview :filters="appliedFilters" />
+      <preset-filters-preview
+        :filters-manager="props.filtersManager"
+        :filter-configs="props.filterConfigs"
+      />
     </template>
 
     <template #actions>
@@ -54,6 +57,7 @@ import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
 import type { IFiltersManager } from '../../../filters';
+import {TFilterConfig} from "../../../filters/modules/filterConfig/classes/FilterConfig";
 import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
 import PresetNameField from '../_shared/input-fields/preset-name-field.vue';
 import PresetFiltersPreview from '../_shared/preset-filters-preview.vue';
@@ -70,6 +74,7 @@ const props = defineProps<{
    * is needed here for `.toString()`
    */
   filtersManager: IFiltersManager;
+  filterConfigs: TFilterConfig[];
 }>();
 
 const emit = defineEmits<{

package/src/{filter-presets → modules/filter-presets}/stores/createFilterPresetsStore.ts

@@ -1,7 +1,7 @@
 import { EnginePresetQuery } from 'webitel-sdk';
 
 import { createTableStore } from '../../table/createTableStore.store.ts';
-import PresetQueryAPI from '../api/PresetQuery.api.ts';
+import PresetQueryAPI from '../api/PresetQuery.ts';
 import { headers } from './headers/headers.ts';
 
 export const createFilterPresetsStore = (namespace = 'presets') => {

package/src/{filters/types/Filter.d.ts → modules/filters/classes/Filter.ts}

@@ -45,7 +45,24 @@ export interface IFilter {
   set: (data: FilterData) => IFilter;
 }
 
-export interface FilterNameSelectRepresentation {
-  name: string;
-  value: FilterName;
+export class Filter implements IFilter {
+  readonly name: FilterName;
+  label: FilterLabel;
+  value: FilterValue;
+
+  constructor(
+    { name, value, label }: FilterInitParams,
+    public payload: object | undefined,
+    public config: FilterConfig,
+  ) {
+    this.name = name;
+    this.value = value;
+    this.label = label;
+  }
+
+  set({ value, label }: { value?: FilterValue; label?: FilterLabel }): IFilter {
+    this.value = value;
+    this.label = label;
+    return this;
+  }
 }

package/src/{filters → modules/filters}/classes/FiltersManager.ts

@@ -5,8 +5,9 @@ import {
   filterNameFromSnapshotKey,
   filterValuePropFromSnapshotKey,
   filterValueToSnapshotKey,
-} from '../scripts/utils.ts';
-import type {
+} from '../scripts/utils';
+import {
+  Filter,
   FilterConfig,
   FilterData,
   FilterInitParams,
@@ -14,9 +15,75 @@ import type {
   FilterName,
   FilterValue,
   IFilter,
-} from '../types/Filter';
-import { FiltersManagerConfig, IFiltersManager } from '../types/FiltersManager';
-import { Filter } from './Filter.ts';
+} from './Filter';
+
+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;
 
 class FiltersManager implements IFiltersManager {
   filters = new Map<FilterName, IFilter>();

package/src/modules/filters/components/config/dynamic-filter-config-form-value-input.vue

@@ -0,0 +1,27 @@
+<template>
+  <component
+    :is="props.filterConfig.valueInputComponent"
+    v-model:model-value="filterValue"
+    :label="label"
+    :filter-config="props.filterConfig"
+    @update:invalid="emit('update:invalid', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import {TFilterConfig} from "../../modules/filterConfig/classes/FilterConfig";
+
+const filterValue = defineModel<unknown>();
+
+const props = defineProps<{
+  filterConfig: TFilterConfig;
+  label?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+</script>
+
+<style scoped>
+</style>

package/src/{filters → modules/filters}/components/config/dynamic-filter-config-form.vue

@@ -4,10 +4,11 @@
       :clearable="false"
       :disabled="editMode"
       :label="t('webitelUI.filters.filterName')"
-      :options="options"
+      :options="filterConfigOptions"
+      option-label="label"
       :value="filterName"
-      track-by="value"
-      use-value-from-options-by-prop="value"
+      track-by="name"
+      use-value-from-options-by-prop="name"
       @input="onFilterNameUpdate($event)"
     />
 
@@ -21,10 +22,11 @@
         onValueInvalidChange,
       }"
     >
-      <component
-        :is="FilterOptionToValueComponentMap[filterName]"
+      <dynamic-filter-config-form-value-input
+        v-if="filterName"
         :key="filterName"
         :model-value="filterValue"
+        :filter-config="selectedFilterConfig"
         :label="valueInputLabelText"
         @update:model-value="onValueChange"
         @update:invalid="onValueInvalidChange"
@@ -63,25 +65,28 @@ import deepcopy from 'deep-copy';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import type {
-  FilterInitParams,
-  FilterNameSelectRepresentation,
-  IFilter,
-} from '../../types/Filter';
-import { FilterOptionToValueComponentMap } from '../filter-options';
+import {FilterInitParams, IFilter} from "../../classes/Filter";
+import {BaseFilterConfig} from "../../modules/filterConfig/classes/FilterConfig";
 import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
-
-interface AddModeProps {
-  options: Array<FilterNameSelectRepresentation>;
-}
-
-interface EditModeProps {
-  filter: IFilter;
-}
-
-type Props = AddModeProps | EditModeProps;
-
-const props = defineProps<Props>();
+import DynamicFilterConfigFormValueInput from "./dynamic-filter-config-form-value-input.vue";
+
+const props = defineProps<{
+  /**
+   * @description
+   * "Add" mode
+   */
+  filterConfigs?: BaseFilterConfig[];
+  /**
+   * @description
+   * "Edit" mode
+   */
+  filterConfig?: BaseFilterConfig;
+  /**
+   * @description
+   * Edited filter instance
+   */
+  filter?: IFilter;
+}>();
 
 const emit = defineEmits<{
   submit: [FilterInitParams];
@@ -98,6 +103,24 @@ const editMode = !!props.filter;
 
 const invalid = ref(false);
 
+const filterConfigOptions = computed(() => {
+  if (props.filterConfig) {
+    return [props.filterConfig];
+  }
+
+  return props.filterConfigs;
+});
+
+const selectedFilterConfig = computed(() => {
+  if (props.filterConfig) {
+    return props.filterConfig;
+  }
+
+  return filterConfigOptions.value.find((filterConfig) => {
+    return filterConfig.name === filterName.value;
+  });
+});
+
 const onValueChange = (v) => {
   filterValue.value = v;
 };

package/src/{filters → modules/filters}/components/dynamic-filter-add-action.vue

@@ -18,7 +18,7 @@
         v-bind="{ tooltipSlotScope }"
       >
         <dynamic-filter-config-form
-          :options="props.filterOptions"
+          :filter-configs="props.filterConfigs"
           @cancel="() => tooltipSlotScope.hide()"
           @submit="
             (payload) => submit(payload, { hide: tooltipSlotScope.hide })
@@ -33,15 +33,13 @@
 import { WtIconAction } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
-import type {
-  FilterInitParams,
-  FilterNameSelectRepresentation,
-} from '../types/Filter';
+import {FilterInitParams} from "../classes/Filter";
+import {BaseFilterConfig} from "../modules/filterConfig/classes/FilterConfig";
 import DynamicFilterConfigForm from './config/dynamic-filter-config-form.vue';
 import DynamicFilterConfigView from './config/dynamic-filter-config-view.vue';
 
 interface Props {
-  filterOptions: FilterNameSelectRepresentation[];
+  filterConfigs: BaseFilterConfig[];
   showLabel?: boolean;
 }