@webitel/ui-datalist 1.1.4 → 1.1.6

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

@@ -69,14 +69,14 @@
 <script lang="ts" setup>
 import { WtIconAction } from '@webitel/ui-sdk/components';
 import { Store } from 'pinia';
-import {computed} from 'vue';
-import {WebitelProtoDataField} from "webitel-sdk";
+import { computed } from 'vue';
+import { WebitelProtoDataField } from 'webitel-sdk';
 
 import { ApplyPresetAction, SavePresetAction } from '../../filter-presets';
-import {FilterData, IFilter} from "../classes/Filter";
-import {IFiltersManager} from "../classes/FiltersManager";
-import {useFilterConfigsToolkit} from "../composables/useFilterConfigsToolkit";
-import {AnyFilterConfig} from "../modules/filterConfig/classes/FilterConfig";
+import { FilterData, IFilter } from '../classes/Filter';
+import { IFiltersManager } from '../classes/FiltersManager';
+import { useFilterConfigsToolkit } from '../composables/useFilterConfigsToolkit';
+import { AnyFilterConfig } from '../modules/filterConfig/classes/FilterConfig';
 import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
 import StaticFilterField from './config/static-view/static-filter-field.vue';
 import DynamicFilterAddAction from './dynamic-filter-add-action.vue';
@@ -84,55 +84,55 @@ import DynamicFilterPanelWrapper from './dynamic-filter-panel-wrapper.vue';
 import DynamicFilterPreview from './preview/dynamic-filter-preview.vue';
 
 type Props = {
-  /**
-   * @description
-   * available filter options to set
-   */
-  filterOptions: (FilterOption | AnyFilterConfig)[];
-  /**
-   * @description
-   * create local filters manager from snapshot
-   * inside save-preset.vue
-   */
-  filtersManager: IFiltersManager;
-  /**
-   * @author @dlohvinov
-   *
-   * @implements
-   * [WTEL-6702](https://webitel.atlassian.net/browse/WTEL-6702)
-   *
-   * @description
-   * Decided to pass fields as a prop instead of converting them to
-   * Props.filterOptions, because this functionality can be expanded to many
-   * filter panels
-   */
-  filterableExtensionFields?: WebitelProtoDataField[];
-  /**
-   * @description
-   * QueryPreset "section" field
-   */
-  presetNamespace?: string;
-  /**
-   * @author @dlohvinov
-   *
-   * @description
-   * table store for operating with presets as dataList.
-   * Seems to me like a bad idea, because apply-preset should not store
-   * any data in a specific store – component state should be enough.
-   * However as for now, there's no composable implementing this logic,
-   * so store is used instead.
-   *
-   * TODO: https://github.com/webitel/webitel-ui-sdk/pull/551
-   */
-  usePresetsStore?: Store;
-
-  /**
-   * @author @Lera24
-   * @description
-   * Static view filter rendering mode. With it, filters are drawn immediately when the form is opened
-   * [https://webitel.atlassian.net/browse/WTEL-6934]
-   */
-  staticMode?: boolean;
+	/**
+	 * @description
+	 * available filter options to set
+	 */
+	filterOptions: (FilterOption | AnyFilterConfig)[];
+	/**
+	 * @description
+	 * create local filters manager from snapshot
+	 * inside save-preset.vue
+	 */
+	filtersManager: IFiltersManager;
+	/**
+	 * @author @dlohvinov
+	 *
+	 * @implements
+	 * [WTEL-6702](https://webitel.atlassian.net/browse/WTEL-6702)
+	 *
+	 * @description
+	 * Decided to pass fields as a prop instead of converting them to
+	 * Props.filterOptions, because this functionality can be expanded to many
+	 * filter panels
+	 */
+	filterableExtensionFields?: WebitelProtoDataField[];
+	/**
+	 * @description
+	 * QueryPreset "section" field
+	 */
+	presetNamespace?: string;
+	/**
+	 * @author @dlohvinov
+	 *
+	 * @description
+	 * table store for operating with presets as dataList.
+	 * Seems to me like a bad idea, because apply-preset should not store
+	 * any data in a specific store – component state should be enough.
+	 * However as for now, there's no composable implementing this logic,
+	 * so store is used instead.
+	 *
+	 * TODO: https://github.com/webitel/webitel-ui-sdk/pull/551
+	 */
+	usePresetsStore?: Store;
+
+	/**
+	 * @author @Lera24
+	 * @description
+	 * Static view filter rendering mode. With it, filters are drawn immediately when the form is opened
+	 * [https://webitel.atlassian.net/browse/WTEL-6934]
+	 */
+	staticMode?: boolean;
 };
 
 const props = defineProps<Props>();
@@ -147,29 +147,37 @@ const props = defineProps<Props>();
  * 2. filtersManager shouldn't be passed here, it seems to me like an anti-pattern
  */
 const emit = defineEmits<{
-  'filter:add': [FilterData];
-  'filter:update': [FilterData];
-  'filter:delete': [IFilter];
-  'filter:reset-all': [];
-  /**
-   * string == filtersManager.toString() snapshot
-   */
-  'preset:apply': [string];
-  hide: [];
+	'filter:add': [
+		FilterData,
+	];
+	'filter:update': [
+		FilterData,
+	];
+	'filter:delete': [
+		IFilter,
+	];
+	'filter:reset-all': [];
+	/**
+	 * string == filtersManager.toString() snapshot
+	 */
+	'preset:apply': [
+		string,
+	];
+	hide: [];
 }>();
 
 const {
-  filterConfigs,
-  staticViewFilterToFilterConfigMappings,
-  filtersIncluded,
-  appliedFilters,
-  appliedFilterToFilterConfigMappings,
-  unAppliedFiltersConfigs,
+	filterConfigs,
+	staticViewFilterToFilterConfigMappings,
+	filtersIncluded,
+	appliedFilters,
+	appliedFilterToFilterConfigMappings,
+	unAppliedFiltersConfigs,
 } = useFilterConfigsToolkit({
-  filterOptions: props.filterOptions,
-  filtersManager: props.filtersManager,
-  filterableExtensionFields: props.filterableExtensionFields,
-  staticMode: props.staticMode,
+	filterOptions: props.filterOptions,
+	filtersManager: props.filtersManager,
+	filterableExtensionFields: props.filterableExtensionFields,
+	staticMode: props.staticMode,
 });
 
 const enablePresets = computed(() => !!props.presetNamespace);
@@ -179,19 +187,25 @@ https://webitel.atlassian.net/browse/WTEL-7014
 Clear filters button should be active only if filters are defined in the table-filter-panel. Excluding the search filter
 **/
 
-const listSelectedFilters = computed(()=> {
-  const filterOptionsKeys = props.filterOptions.map(filter => typeof filter === 'string' ? filter : filter.name);
-  return new Map([...props.filtersManager.filters].filter(([key]) => filterOptionsKeys.includes(key)));
+const listSelectedFilters = computed(() => {
+	const filterOptionsKeys = props.filterOptions.map((filter) =>
+		typeof filter === 'string' ? filter : filter.name,
+	);
+	return new Map(
+		[
+			...props.filtersManager.filters,
+		].filter(([key]) => filterOptionsKeys.includes(key)),
+	);
 });
 
 const presetStore = props.usePresetsStore ? props.usePresetsStore() : null;
 
 const handleResetFilters = () => {
-  emit('filter:reset-all')
-  if (presetStore) {
-    presetStore.resetPreset()
-  }
-}
+	emit('filter:reset-all');
+	if (presetStore) {
+		presetStore.resetPreset();
+	}
+};
 </script>
 
 <style>

package/src/modules/filters/components/types/Filter.types.ts

@@ -2,25 +2,29 @@ import { FilterData, FilterInitParams, IFilter } from '../../classes/Filter';
 import { AnyFilterConfig } from '../../modules/filterConfig';
 
 export interface FilterEmits {
-  'update:filter': [FilterData];
-  'delete:filter': [IFilter];
+	'update:filter': [
+		FilterData,
+	];
+	'delete:filter': [
+		IFilter,
+	];
 }
 
 export interface StaticFilterEmits extends FilterEmits {
-  'add:filter': [FilterInitParams];
+	'add:filter': [
+		FilterInitParams,
+	];
 }
 
-export interface DynamicFilterEmits extends FilterEmits {
-}
+export interface DynamicFilterEmits extends FilterEmits {}
 
 export interface FilterProps {
-  filter: IFilter;
-  filterConfig: AnyFilterConfig;
+	filter: IFilter;
+	filterConfig: AnyFilterConfig;
 }
 
-export interface StaticFilterProps extends FilterProps {
-}
+export interface StaticFilterProps extends FilterProps {}
 
 export interface DynamicFilterProps extends FilterProps {
-  readonly?: boolean;
+	readonly?: boolean;
 }

package/src/modules/filters/composables/useFilterConfigsToolkit.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef } from 'vue';
+import { ComputedRef, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { WebitelProtoDataField } from 'webitel-sdk';
 
@@ -6,151 +6,158 @@ import { FilterName, IFilter } from '../classes/Filter';
 import { IFiltersManager } from '../classes/FiltersManager';
 import { createFilterConfig } from '../modules/filterConfig/classes/createFilterConfig';
 import {
-  BaseFilterConfig,
-  FilterConfig,
+	BaseFilterConfig,
+	FilterConfig,
 } from '../modules/filterConfig/classes/FilterConfig';
 import { createTypeExtensionFilterConfig } from '../modules/filterConfig/components/_custom';
 import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
 
 export type FilterConfigToolkit = {
-  filterConfigs: ComputedRef<BaseFilterConfig[]>;
-  /**
-   * @description
-   * some filters may be stored in filtersManager,
-   * but not included in this filters panel
-   */
-  filtersIncluded: ComputedRef<FilterName[]>;
-  appliedFilters: ComputedRef<IFilter[]>;
-  /**
-   * @description
-   * available filters to add, with appliedFilters excluded
-   */
-  unAppliedFiltersConfigs: ComputedRef<BaseFilterConfig[]>;
-  appliedFilterToFilterConfigMappings: ComputedRef<
-    Array<{
-      filterConfig: BaseFilterConfig;
-      filter: IFilter;
-    }>
-  >;
+	filterConfigs: ComputedRef<BaseFilterConfig[]>;
+	/**
+	 * @description
+	 * some filters may be stored in filtersManager,
+	 * but not included in this filters panel
+	 */
+	filtersIncluded: ComputedRef<FilterName[]>;
+	appliedFilters: ComputedRef<IFilter[]>;
+	/**
+	 * @description
+	 * available filters to add, with appliedFilters excluded
+	 */
+	unAppliedFiltersConfigs: ComputedRef<BaseFilterConfig[]>;
+	appliedFilterToFilterConfigMappings: ComputedRef<
+		Array<{
+			filterConfig: BaseFilterConfig;
+			filter: IFilter;
+		}>
+	>;
 };
 
 export type FilterConfigToolkitParams = {
-  filterOptions: (FilterOption | BaseFilterConfig)[];
-  filtersManager: IFiltersManager;
-  filterableExtensionFields: WebitelProtoDataField[];
-  staticMode?: boolean;
+	filterOptions: (FilterOption | BaseFilterConfig)[];
+	filtersManager: IFiltersManager;
+	filterableExtensionFields: WebitelProtoDataField[];
+	staticMode?: boolean;
 };
 
 export const useFilterConfigsToolkit = ({
-  filterOptions,
-  filtersManager,
-  filterableExtensionFields = [], staticMode = false,
+	filterOptions,
+	filtersManager,
+	filterableExtensionFields = [],
+	staticMode = false,
 }: FilterConfigToolkitParams): FilterConfigToolkit => {
-  const { t } = useI18n();
-
-  const filterConfigs = computed(() => {
-    return (
-      filterOptions
-        /**
-         * make filterConfigs from standard filterOptions
-         */
-        .map((opt) => {
-          if (opt instanceof FilterConfig) {
-            return opt;
-          }
-
-          if (typeof opt === 'string') {
-            return createFilterConfig({ name: opt });
-          }
-
-          return new FilterConfig({
-            ...opt,
-            name: opt.name,
-          });
-        })
-        /**
-         * localize
-         */
-        .map((filterConfig) => {
-          if (!filterConfig.label) {
-            filterConfig.label = t(`webitelUI.filters.${filterConfig.name}`);
-          }
-
-          return filterConfig;
-        })
-        /**
-         * add filterConfigs for extension fields
-         */
-        .concat(
-          filterableExtensionFields.map((field: WebitelProtoDataField) => {
-            return createTypeExtensionFilterConfig(
-              { name: field.id },
-              { field },
-            );
-          }),
-        )
-    );
-  });
-
-  const filtersIncluded = computed(() => {
-    return filterConfigs.value.map(({ name }) => name);
-  });
-
-  const appliedFilters = computed(() => {
-    return filtersManager.getFiltersList({
-      include: filtersIncluded.value,
-    });
-  });
-
-  const unAppliedFiltersConfigs = computed(() => {
-    return filterConfigs.value.filter(({ name }) => {
-      return !filtersManager.hasFilter(name);
-    });
-  });
-
-  const appliedFilterToFilterConfigMappings = computed(() => {
-    const filterNameToFilterConfigMap = filterConfigs.value.reduce(
-      (map, filterConfig) => {
-        return {
-          ...map,
-          [filterConfig.name]: filterConfig,
-        };
-      },
-      {},
-    );
-
-    return appliedFilters.value.map((filter) => {
-      return {
-        filter,
-        filterConfig: filterNameToFilterConfigMap[filter.name],
-      };
-    });
-  });
-
-  const staticViewFilterToFilterConfigMappings = computed(() => {
-    // Author @Lera24
-    // [https://webitel.atlassian.net/browse/WTEL-6934]
-    //
-    // Static (computed staticViewFilterToFilterConfigMappings) filters
-    // use all page filters passed in filterOptions for configuration, without values
-    //
-    // Dynamic (computed applyFilterToFilterConfigMappings) filters consist of a configuration
-    // of filters for which a value has already been defined
-
-      return filterConfigs.value.map((filterConfig) => {
-        return {
-          filter: filtersManager.getFilter(filterConfig.name),
-          filterConfig,
-        }
-      });
-  });
-
-  return {
-    filterConfigs,
-    filtersIncluded,
-    appliedFilters,
-    appliedFilterToFilterConfigMappings,
-    staticViewFilterToFilterConfigMappings,
-    unAppliedFiltersConfigs,
-  };
+	const { t } = useI18n();
+
+	const filterConfigs = computed(() => {
+		return (
+			filterOptions
+				/**
+				 * make filterConfigs from standard filterOptions
+				 */
+				.map((opt) => {
+					if (opt instanceof FilterConfig) {
+						return opt;
+					}
+
+					if (typeof opt === 'string') {
+						return createFilterConfig({
+							name: opt,
+						});
+					}
+
+					return new FilterConfig({
+						...opt,
+						name: opt.name,
+					});
+				})
+				/**
+				 * localize
+				 */
+				.map((filterConfig) => {
+					if (!filterConfig.label) {
+						filterConfig.label = t(`webitelUI.filters.${filterConfig.name}`);
+					}
+
+					return filterConfig;
+				})
+				/**
+				 * add filterConfigs for extension fields
+				 */
+				.concat(
+					filterableExtensionFields.map((field: WebitelProtoDataField) => {
+						return createTypeExtensionFilterConfig(
+							{
+								name: field.id,
+							},
+							{
+								field,
+							},
+						);
+					}),
+				)
+		);
+	});
+
+	const filtersIncluded = computed(() => {
+		return filterConfigs.value.map(({ name }) => name);
+	});
+
+	const appliedFilters = computed(() => {
+		return filtersManager.getFiltersList({
+			include: filtersIncluded.value,
+		});
+	});
+
+	const unAppliedFiltersConfigs = computed(() => {
+		return filterConfigs.value.filter(({ name }) => {
+			return !filtersManager.hasFilter(name);
+		});
+	});
+
+	const appliedFilterToFilterConfigMappings = computed(() => {
+		const filterNameToFilterConfigMap = filterConfigs.value.reduce(
+			(map, filterConfig) => {
+				return {
+					...map,
+					[filterConfig.name]: filterConfig,
+				};
+			},
+			{},
+		);
+
+		return appliedFilters.value.map((filter) => {
+			return {
+				filter,
+				filterConfig: filterNameToFilterConfigMap[filter.name],
+			};
+		});
+	});
+
+	const staticViewFilterToFilterConfigMappings = computed(() => {
+		// Author @Lera24
+		// [https://webitel.atlassian.net/browse/WTEL-6934]
+		//
+		// Static (computed staticViewFilterToFilterConfigMappings) filters
+		// use all page filters passed in filterOptions for configuration, without values
+		//
+		// Dynamic (computed applyFilterToFilterConfigMappings) filters consist of a configuration
+		// of filters for which a value has already been defined
+
+		return filterConfigs.value.map((filterConfig) => {
+			return {
+				filter: filtersManager.getFilter(filterConfig.name),
+				filterConfig,
+			};
+		});
+	});
+
+	return {
+		filterConfigs,
+		filtersIncluded,
+		appliedFilters,
+		appliedFilterToFilterConfigMappings,
+		staticViewFilterToFilterConfigMappings,
+		unAppliedFiltersConfigs,
+	};
 };