@webitel/ui-datalist 1.1.5 → 1.1.7

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,
+	};
 };

package/src/modules/filters/createTableFiltersStore.ts

@@ -5,113 +5,129 @@ import { PersistedStorageType } from '../persist/PersistedStorage.types';
 import { usePersistedStorage } from '../persist/usePersistedStorage';
 import { useTableStoreConfig } from '../types/tableStore.types';
 import {
-  createFiltersManager,
-  FiltersManagerConfig,
+	createFiltersManager,
+	FiltersManagerConfig,
 } from './classes/FiltersManager';
 
-export const tableFiltersStoreBody = (namespace, config?: {
-  filtersManagerConfig: FiltersManagerConfig;
-}) => {
-  const filtersManager = reactive(
-    createFiltersManager(config?.filtersManagerConfig),
-  );
+export const tableFiltersStoreBody = (
+	namespace,
+	config?: {
+		filtersManagerConfig: FiltersManagerConfig;
+	},
+) => {
+	const filtersManager = reactive(
+		createFiltersManager(config?.filtersManagerConfig),
+	);
 
-  /* for watchers in filter components */
-  const isRestoring = ref(false);
+	/* for watchers in filter components */
+	const isRestoring = ref(false);
 
-  const searchMode = ref('');
+	const searchMode = ref('');
 
-  const updateSearchMode = (newSearch: string) => {
-    searchMode.value = newSearch;
-  };
+	const updateSearchMode = (newSearch: string) => {
+		searchMode.value = newSearch;
+	};
 
-  /*
+	/*
    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);
-        /*
+	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;
-      },
-    });
-
-    const { restore: restoreSearchMode } = usePersistedStorage({
-      name: 'searchMode',
-      value: searchMode,
-      storages: [PersistedStorageType.LocalStorage],
-      storagePath: namespace,
-
-      onStore: async (save, { name }) => {
-        return save({ name, value: searchMode.value });
-      },
-      onRestore: async (restore, name) => {
-        const value = await restore(name);
-        if (value) searchMode.value = value as string;
-      },
-    });
-
-    return Promise.all([restoreFilters(), restoreSearchMode()]);
-  };
-
-  return {
-    filtersManager,
-    isRestoring,
-    searchMode,
-
-    filtersList,
-
-    hasFilter,
-    addFilter,
-    updateFilter,
-    deleteFilter,
-
-    updateSearchMode,
-
-    setupPersistence,
-  };
+				if (snapshotStr) filtersManager.fromString(snapshotStr as string);
+
+				isRestoring.value = false;
+			},
+		});
+
+		const { restore: restoreSearchMode } = usePersistedStorage({
+			name: 'searchMode',
+			value: searchMode,
+			storages: [
+				PersistedStorageType.LocalStorage,
+			],
+			storagePath: namespace,
+
+			onStore: async (save, { name }) => {
+				return save({
+					name,
+					value: searchMode.value,
+				});
+			},
+			onRestore: async (restore, name) => {
+				const value = await restore(name);
+				if (value) searchMode.value = value as string;
+			},
+		});
+
+		return Promise.all([
+			restoreFilters(),
+			restoreSearchMode(),
+		]);
+	};
+
+	return {
+		filtersManager,
+		isRestoring,
+		searchMode,
+
+		filtersList,
+
+		hasFilter,
+		addFilter,
+		updateFilter,
+		deleteFilter,
+
+		updateSearchMode,
+
+		setupPersistence,
+	};
 };
 
 export const createTableFiltersStore = <Entity>(
-  namespace: string,
-  config: useTableStoreConfig<Entity> & {
-    filtersManagerConfig?: FiltersManagerConfig;
-  },
+	namespace: string,
+	config: useTableStoreConfig<Entity> & {
+		filtersManagerConfig?: FiltersManagerConfig;
+	},
 ) => {
-  const id = `${namespace}/filters`;
-  return createDatalistStore({
-    storeBody: () => tableFiltersStoreBody(namespace, config),
-    config,
-    namespace: id,
-  });
+	const id = `${namespace}/filters`;
+	return createDatalistStore({
+		storeBody: () => tableFiltersStoreBody(namespace, config),
+		config,
+		namespace: id,
+	});
 };

package/src/modules/filters/index.ts

@@ -1,37 +1,38 @@
 import {
-  Filter,
-  FilterInitParams,
-  FilterInstanceConfig,
-  FilterLabel,
-  FilterName,
-  FilterValue,
-  IFilter,
+	Filter,
+	FilterInitParams,
+	FilterInstanceConfig,
+	FilterLabel,
+	FilterName,
+	FilterValue,
+	IFilter,
 } from './classes/Filter';
 import {
-  createFiltersManager,
-  FiltersManagerConfig,
-  IFiltersManager,
+	createFiltersManager,
+	FiltersManagerConfig,
+	IFiltersManager,
 } from './classes/FiltersManager';
 import DynamicFilterSearchComponent from './components/search-bar/dynamic-filter-search.vue';
 import TableFiltersPanelComponent from './components/table-filters-panel.vue';
 import { FilterOption } from './modules/filterConfig/enums/FilterOption';
+
 export * from './modules/filterConfig';
 
 export {
-  createFiltersManager,
-  DynamicFilterSearchComponent,
-  Filter,
-  FilterOption,
-  TableFiltersPanelComponent,
+	createFiltersManager,
+	DynamicFilterSearchComponent,
+	Filter,
+	FilterOption,
+	TableFiltersPanelComponent,
 };
 
 export type {
-  FilterInitParams,
-  FilterInstanceConfig,
-  FilterLabel,
-  FilterName,
-  FiltersManagerConfig,
-  FilterValue,
-  IFilter,
-  IFiltersManager,
+	FilterInitParams,
+	FilterInstanceConfig,
+	FilterLabel,
+	FilterName,
+	FiltersManagerConfig,
+	FilterValue,
+	IFilter,
+	IFiltersManager,
 };