@webitel/ui-datalist 1.1.5 → 1.1.6

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

package/src/modules/filters/modules/filterConfig/classes/FilterConfig.ts

@@ -4,72 +4,72 @@ import { MessageResolver } from 'vue-i18n';
 import { FilterName, FilterValue } from '../../../classes/Filter';
 
 export interface BaseFilterConfig {
-  name: FilterName;
-  valueInputComponent: Component;
-  valuePreviewComponent: Component;
-  label?: ReturnType<MessageResolver> | string;
-  notDeletable?: boolean;
+	name: FilterName;
+	valueInputComponent: Component;
+	valuePreviewComponent: Component;
+	label?: ReturnType<MessageResolver> | string;
+	notDeletable?: boolean;
 }
 
 export type FilterConfigBaseParams = {
-  name?: FilterName;
-  valueInputComponent?: Component;
-  valuePreviewComponent?: Component;
-  notDeletable?: boolean;
-  showFilterName: boolean;
+	name?: FilterName;
+	valueInputComponent?: Component;
+	valuePreviewComponent?: Component;
+	notDeletable?: boolean;
+	showFilterName: boolean;
 };
 
 export interface IWtSysTypeFilterConfig extends BaseFilterConfig {
-  searchRecords: (
-    params: FilterConfigSearchMethodParams,
-  ) => Promise<{ items: unknown[]; next?: boolean }>;
+	searchRecords: (params: FilterConfigSearchMethodParams) => Promise<{
+		items: unknown[];
+		next?: boolean;
+	}>;
 }
 
 export type FilterConfigSearchMethodParams = [
-  /**
-   * @description
-   * any request-related data
-   */
-  unknown,
-  /**
-   * @description
-   * filter-related data
-   */
-  {
-    filterName: FilterName;
-    filterValue: FilterValue;
-    filterConfig: BaseFilterConfig;
-  },
+	/**
+	 * @description
+	 * any request-related data
+	 */
+	unknown,
+	/**
+	 * @description
+	 * filter-related data
+	 */
+	{
+		filterName: FilterName;
+		filterValue: FilterValue;
+		filterConfig: BaseFilterConfig;
+	},
 ];
 
 export type AnyFilterConfig = IWtSysTypeFilterConfig | BaseFilterConfig;
 
 export class FilterConfig implements BaseFilterConfig {
-  name: FilterName;
-  valueInputComponent: Component;
-  valuePreviewComponent: Component;
-  label?: ReturnType<MessageResolver> | string;
-  staticView?: boolean;
-  notDeletable: boolean;
-  showFilterName: boolean;
+	name: FilterName;
+	valueInputComponent: Component;
+	valuePreviewComponent: Component;
+	label?: ReturnType<MessageResolver> | string;
+	staticView?: boolean;
+	notDeletable: boolean;
+	showFilterName: boolean;
 
-  constructor({
-                name,
-                valueInputComponent,
-                valuePreviewComponent,
-                notDeletable,
-                showFilterName,
-                staticView,
-              }: FilterConfigBaseParams = {}) {
-
-    if (name) this.name = name;
-    if (valueInputComponent) this.valueInputComponent = valueInputComponent;
-    if (valuePreviewComponent)
-      this.valuePreviewComponent = valuePreviewComponent;
-    this.notDeletable = !!notDeletable;
-    if (staticView) this.staticView = staticView;
-    if(showFilterName) this.showFilterName = showFilterName;
-  }
+	constructor({
+		name,
+		valueInputComponent,
+		valuePreviewComponent,
+		notDeletable,
+		showFilterName,
+		staticView,
+	}: FilterConfigBaseParams = {}) {
+		if (name) this.name = name;
+		if (valueInputComponent) this.valueInputComponent = valueInputComponent;
+		if (valuePreviewComponent)
+			this.valuePreviewComponent = valuePreviewComponent;
+		this.notDeletable = !!notDeletable;
+		if (staticView) this.staticView = staticView;
+		if (showFilterName) this.showFilterName = showFilterName;
+	}
 }
 
 /**
@@ -80,9 +80,9 @@ export class FilterConfig implements BaseFilterConfig {
  * classes in future
  */
 export abstract class WtSysTypeFilterConfig
-  extends FilterConfig
-  implements IWtSysTypeFilterConfig
+	extends FilterConfig
+	implements IWtSysTypeFilterConfig
 {
-  abstract name;
-  abstract searchRecords;
+	abstract name;
+	abstract searchRecords;
 }

package/src/modules/filters/modules/filterConfig/classes/createFilterConfig.ts

@@ -1,30 +1,30 @@
 import {
-  FilterOptionToFilterConfigCreatorMap,
-  FilterOptionToPreviewComponentMap,
-  FilterOptionToValueComponentMap,
+	FilterOptionToFilterConfigCreatorMap,
+	FilterOptionToPreviewComponentMap,
+	FilterOptionToValueComponentMap,
 } from '../components';
 import {
-  BaseFilterConfig,
-  FilterConfig,
-  FilterConfigBaseParams,
+	BaseFilterConfig,
+	FilterConfig,
+	FilterConfigBaseParams,
 } from './FilterConfig';
 
 export const createFilterConfig = (
-  params: BaseFilterConfigParams &
-    Required<BaseFilterConfig, 'name'> &
-    Record<string, unknown>,
+	params: BaseFilterConfigParams &
+		Required<BaseFilterConfig, 'name'> &
+		Record<string, unknown>,
 ): BaseFilterConfig => {
-  const { name } = params;
+	const { name } = params;
 
-  const filterConfigClass = FilterOptionToFilterConfigCreatorMap[name];
+	const filterConfigClass = FilterOptionToFilterConfigCreatorMap[name];
 
-  if (filterConfigClass) {
-    return filterConfigClass(params);
-  }
+	if (filterConfigClass) {
+		return filterConfigClass(params);
+	}
 
-  return new FilterConfig({
-    valueInputComponent: FilterOptionToValueComponentMap[name],
-    valuePreviewComponent: FilterOptionToPreviewComponentMap[name],
-    ...params,
-  });
+	return new FilterConfig({
+		valueInputComponent: FilterOptionToValueComponentMap[name],
+		valuePreviewComponent: FilterOptionToPreviewComponentMap[name],
+		...params,
+	});
 };

package/src/modules/filters/modules/filterConfig/components/_custom/filterConfig.ts

@@ -6,94 +6,111 @@ import { WebitelProtoDataField } from 'webitel-sdk';
 import { FilterConfig } from '../../classes/FilterConfig';
 import { CustomFilterOption } from '../../enums/FilterOption';
 import {
-  BaseFilterConfig,
-  FilterConfigBaseParams,
-  IWtSysTypeFilterConfig,
+	BaseFilterConfig,
+	FilterConfigBaseParams,
+	IWtSysTypeFilterConfig,
 } from '../../types/FilterConfig';
 import TypeExtensionFilterValueField from './type-extension-filter-value-field.vue';
 import TypeExtensionFilterValuePreview from './type-extension-filter-value-preview.vue';
 
 export interface ITypeExtensionFilterConfig extends BaseFilterConfig {
-  readonly field: WebitelProtoDataField;
+	readonly field: WebitelProtoDataField;
 }
 
 class TypeExtensionFilterConfig
-  extends FilterConfig
-  implements ITypeExtensionFilterConfig
+	extends FilterConfig
+	implements ITypeExtensionFilterConfig
 {
-  readonly field: WebitelProtoDataField;
+	readonly field: WebitelProtoDataField;
 
-  constructor(
-    { name }: FilterConfigBaseParams,
-    { field }: { field: WebitelProtoDataField },
-  ) {
-    super({
-      name,
-      valueInputComponent: TypeExtensionFilterValueField,
-      valuePreviewComponent: TypeExtensionFilterValuePreview,
-    });
+	constructor(
+		{ name }: FilterConfigBaseParams,
+		{
+			field,
+		}: {
+			field: WebitelProtoDataField;
+		},
+	) {
+		super({
+			name,
+			valueInputComponent: TypeExtensionFilterValueField,
+			valuePreviewComponent: TypeExtensionFilterValuePreview,
+		});
 
-    this.label = field.name;
-    this.field = field;
-  }
+		this.label = field.name;
+		this.field = field;
+	}
 }
 
 class TypeExtensionWtSysTypeFieldFilterConfig
-  extends TypeExtensionFilterConfig
-  implements IWtSysTypeFilterConfig
+	extends TypeExtensionFilterConfig
+	implements IWtSysTypeFilterConfig
 {
-  async searchRecords(
-    { id: filterValue, ...rest },
-    // {
-    //   filterValue,
-    // }: {
-    //   filterValue: unknown;
-    // },
-  ): Promise<{ items: unknown[]; next?: boolean }> {
-    const { items, ...restResponse } = await sysTypes.getLookup({
-      ...rest,
-      ...this.field.lookup,
-      id: filterValue,
-    });
+	async searchRecords(
+		{ id: filterValue, ...rest },
+		// {
+		//   filterValue,
+		// }: {
+		//   filterValue: unknown;
+		// },
+	): Promise<{
+		items: unknown[];
+		next?: boolean;
+	}> {
+		const { items, ...restResponse } = await sysTypes.getLookup({
+			...rest,
+			...this.field.lookup,
+			id: filterValue,
+		});
 
-    /**
-     * @author @dlohvinov
-     *
-     * [WTEL-6787](https://webitel.atlassian.net/browse/WTEL-6787)
-     *
-     * name from display is get here instead of wt-select props because it's
-     * much simplier than configuring wt-select, but still this code is still
-     * isolated enough.
-     *
-     * for instance, contacts:
-     * display=name.common_name
-     * objects=[{ name: { common_name: 'str' } }]
-     */
-    return {
-      items: items.map((item) => ({
-        ...item,
-        name: get(item, this.field.lookup.display),
-      })),
-      ...restResponse,
-    };
-  }
+		/**
+		 * @author @dlohvinov
+		 *
+		 * [WTEL-6787](https://webitel.atlassian.net/browse/WTEL-6787)
+		 *
+		 * name from display is get here instead of wt-select props because it's
+		 * much simplier than configuring wt-select, but still this code is still
+		 * isolated enough.
+		 *
+		 * for instance, contacts:
+		 * display=name.common_name
+		 * objects=[{ name: { common_name: 'str' } }]
+		 */
+		return {
+			items: items.map((item) => ({
+				...item,
+				name: get(item, this.field.lookup.display),
+			})),
+			...restResponse,
+		};
+	}
 }
 
 export type {
-  TypeExtensionFilterConfig,
-  TypeExtensionWtSysTypeFieldFilterConfig,
+	TypeExtensionFilterConfig,
+	TypeExtensionWtSysTypeFieldFilterConfig,
 };
 
 export const createTypeExtensionFilterConfig = (
-  name: CustomFilterOption,
-  { field }: { field: WebitelProtoDataField },
+	name: CustomFilterOption,
+	{
+		field,
+	}: {
+		field: WebitelProtoDataField;
+	},
 ) => {
-  switch (field.kind) {
-    case WtTypeExtensionFieldKind.Select:
-      return new TypeExtensionWtSysTypeFieldFilterConfig(name, { field });
-    case WtTypeExtensionFieldKind.Multiselect:
-      return new TypeExtensionWtSysTypeFieldFilterConfig(name, { field });
-    default:
-      return new TypeExtensionFilterConfig(name, { field });
-  }
+	switch (field.kind) {
+		case WtTypeExtensionFieldKind.Select:
+			return new TypeExtensionWtSysTypeFieldFilterConfig(name, {
+				field,
+			});
+		case WtTypeExtensionFieldKind.Multiselect:
+			return new TypeExtensionWtSysTypeFieldFilterConfig(name, {
+				field,
+			});
+		default:
+			return new TypeExtensionFilterConfig(name, {
+				field,
+			});
+	}
 };

package/src/modules/filters/modules/filterConfig/components/_custom/index.ts

@@ -3,9 +3,9 @@ import TypeExtensionFilterValueField from './type-extension-filter-value-field.v
 import TypeExtensionFilterValuePreview from './type-extension-filter-value-preview.vue';
 
 export {
-  createTypeExtensionFilterConfig,
-  TypeExtensionFilterValueField,
-  TypeExtensionFilterValuePreview,
+	createTypeExtensionFilterConfig,
+	TypeExtensionFilterValueField,
+	TypeExtensionFilterValuePreview,
 };
 
 export type * from './filterConfig';