@webitel/ui-datalist 1.1.4 → 1.1.6

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

@@ -33,40 +33,37 @@
 <script lang="ts" setup>
 import { WtIconAction } from '@webitel/ui-sdk/components';
 import { IconAction } from '@webitel/ui-sdk/enums';
-import { computed, inject, reactive, type Ref, ref, watch } from 'vue';
+import { computed, inject, type Ref, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
 import {
-  createFiltersManager, FilterName,
-  IFiltersManager,
+	createFiltersManager,
+	FilterName,
+	IFiltersManager,
 } from '../../../filters';
-import {AnyFilterConfig} from "../../../filters/modules/filterConfig/classes/FilterConfig";
-import {
-  addPreset,
-  getPresetList,
-  updatePreset,
-} from '../../api/PresetQuery';
+import { AnyFilterConfig } from '../../../filters/modules/filterConfig/classes/FilterConfig';
+import { addPreset, getPresetList, updatePreset } from '../../api/PresetQuery';
 import OverwritePresetPopup from './overwrite-preset-popup.vue';
 import SavePresetPopup, { SubmitConfig } from './save-preset-popup.vue';
 
 const props = defineProps<{
-  /**
-   * @description
-   * presets "section" namespace
-   */
-  namespace: string;
-  /**
-   * @author @dlohvinov
-   * serves as a source for local filters manager
-   */
-  filtersManager: IFiltersManager;
-  /**
-   * @description
-   * include in preset only filter values related to filters panel
-   */
-  filtersIncluded: FilterName[];
-  filterConfigs: AnyFilterConfig[];
+	/**
+	 * @description
+	 * presets "section" namespace
+	 */
+	namespace: string;
+	/**
+	 * @author @dlohvinov
+	 * serves as a source for local filters manager
+	 */
+	filtersManager: IFiltersManager;
+	/**
+	 * @description
+	 * include in preset only filter values related to filters panel
+	 */
+	filtersIncluded: FilterName[];
+	filterConfigs: AnyFilterConfig[];
 }>();
 
 const eventBus = inject('$eventBus');
@@ -74,14 +71,18 @@ const eventBus = inject('$eventBus');
 const localFiltersManager = reactive(createFiltersManager());
 
 watch(
-  props.filtersManager,
-  () => {
-    localFiltersManager.reset();
-    localFiltersManager.fromString(
-      props.filtersManager.toString({ include: props.filtersIncluded }),
-    );
-  },
-  { immediate: true },
+	props.filtersManager,
+	() => {
+		localFiltersManager.reset();
+		localFiltersManager.fromString(
+			props.filtersManager.toString({
+				include: props.filtersIncluded,
+			}),
+		);
+	},
+	{
+		immediate: true,
+	},
 );
 
 const { t } = useI18n();
@@ -90,7 +91,7 @@ const { t } = useI18n();
  * disable "save" btn if there's nothing to save
  * */
 const disableAction = computed(() => {
-  return !localFiltersManager.getAllKeys().length;
+	return !localFiltersManager.getAllKeys().length;
 });
 
 /**
@@ -104,64 +105,69 @@ const showSaveForm = ref(false);
 const presetToOverwriteWith: Ref<EnginePresetQuery | null> = ref(null);
 
 const handlePresetSubmit = async (
-  preset: EnginePresetQuery,
-  { onCompleted }: SubmitConfig,
+	preset: EnginePresetQuery,
+	{ onCompleted }: SubmitConfig,
 ) => {
-  try {
-    await addPreset({ preset, namespace: props.namespace });
-
-    eventBus.$emit('notification', {
-      type: 'success',
-      text: t('systemNotifications.success.create', {
-        entity: t('webitelUI.filters.presets.preset'),
-      }),
-    });
-
-    showSaveForm.value = false;
-  } catch (err) {
-    if (err?.status === 409) {
-      presetToOverwriteWith.value = preset;
-    }
-    throw err;
-  } finally {
-    if (onCompleted) onCompleted();
-  }
+	try {
+		await addPreset({
+			preset,
+			namespace: props.namespace,
+		});
+
+		eventBus.$emit('notification', {
+			type: 'success',
+			text: t('systemNotifications.success.create', {
+				entity: t('webitelUI.filters.presets.preset'),
+			}),
+		});
+
+		showSaveForm.value = false;
+	} catch (err) {
+		if (err?.status === 409) {
+			presetToOverwriteWith.value = preset;
+		}
+		throw err;
+	} finally {
+		if (onCompleted) onCompleted();
+	}
 };
 
 const handlePresetOverwriteConfirmation = async ({
-  onCompleted,
+	onCompleted,
 }: SubmitConfig) => {
-  try {
-    const { items } = await getPresetList(
-      {
-        search: presetToOverwriteWith.value.name,
-        presetNamespace: props.namespace,
-      },
-      {
-        transformers: { useStarToSearch: false },
-      },
-    );
-    const { id: existingPresetId } = items[0];
-    await updatePreset({
-      id: existingPresetId,
-      item: {
-        ...presetToOverwriteWith.value,
-      },
-      namespace: props.namespace,
-    });
-
-    eventBus.$emit('notification', {
-      type: 'success',
-      text: t('systemNotifications.success.update', {
-        entity: t('webitelUI.filters.presets.preset'),
-      }),
-    });
-
-    presetToOverwriteWith.value = null;
-    showSaveForm.value = false;
-  } finally {
-    if (onCompleted) onCompleted();
-  }
+	try {
+		const { items } = await getPresetList(
+			{
+				search: presetToOverwriteWith.value.name,
+				presetNamespace: props.namespace,
+			},
+			{
+				transformers: {
+					useStarToSearch: false,
+				},
+			},
+		);
+		const { id: existingPresetId } = items[0];
+		await updatePreset({
+			id: existingPresetId,
+			item: {
+				...presetToOverwriteWith.value,
+			},
+			namespace: props.namespace,
+		});
+
+		eventBus.$emit('notification', {
+			type: 'success',
+			text: t('systemNotifications.success.update', {
+				entity: t('webitelUI.filters.presets.preset'),
+			}),
+		});
+
+		presetToOverwriteWith.value = null;
+		showSaveForm.value = false;
+	} finally {
+		if (onCompleted) onCompleted();
+	}
 };
 </script>
 

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

@@ -59,29 +59,32 @@ import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
 import type { IFiltersManager } from '../../../filters';
-import {AnyFilterConfig} from "../../../filters/modules/filterConfig/classes/FilterConfig";
+import { AnyFilterConfig } 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';
 
 export type SubmitConfig = {
-  onSuccess?: () => void;
-  onFailure?: (err: Error) => void;
-  onCompleted?: () => void;
+	onSuccess?: () => void;
+	onFailure?: (err: Error) => void;
+	onCompleted?: () => void;
 };
 
 const props = defineProps<{
-  /**
-   * @description
-   * is needed here for `.toString()`
-   */
-  filtersManager: IFiltersManager;
-  filterConfigs: AnyFilterConfig[];
+	/**
+	 * @description
+	 * is needed here for `.toString()`
+	 */
+	filtersManager: IFiltersManager;
+	filterConfigs: AnyFilterConfig[];
 }>();
 
 const emit = defineEmits<{
-  submit: [EnginePresetQuery, SubmitConfig?];
-  close: [];
+	submit: [
+		EnginePresetQuery,
+		SubmitConfig?,
+	];
+	close: [];
 }>();
 
 const { t } = useI18n();
@@ -89,42 +92,44 @@ const { t } = useI18n();
 const isSaving = ref(false);
 
 const presetForm = reactive({
-  name: '',
-  description: '',
+	name: '',
+	description: '',
 });
 
 const v$ = useVuelidate(
-  computed(() => {
-    return {
-      name: {
-        required,
-      },
-    };
-  }),
-  presetForm,
-  { $autoDirty: true },
+	computed(() => {
+		return {
+			name: {
+				required,
+			},
+		};
+	}),
+	presetForm,
+	{
+		$autoDirty: true,
+	},
 );
 v$.value.$touch();
 
 const appliedFilters = computed(() => {
-  return props.filtersManager.getFiltersList();
+	return props.filtersManager.getFiltersList();
 });
 
 const save = () => {
-  isSaving.value = true;
-
-  const preset: EnginePresetQuery = {
-    ...presetForm,
-    preset: {
-      'filtersManager.toString': props.filtersManager.toString(),
-    },
-  };
-
-  emit('submit', preset, {
-    onCompleted: () => {
-      isSaving.value = false;
-    },
-  });
+	isSaving.value = true;
+
+	const preset: EnginePresetQuery = {
+		...presetForm,
+		preset: {
+			'filtersManager.toString': props.filtersManager.toString(),
+		},
+	};
+
+	emit('submit', preset, {
+		onCompleted: () => {
+			isSaving.value = false;
+		},
+	});
 };
 </script>
 

package/src/modules/filter-presets/stores/createFilterPresetsStore.ts

@@ -8,52 +8,57 @@ import PresetQueryAPI from '../api/PresetQuery';
 import { headers } from './headers/headers';
 
 export const filterPresetsStoreBody = (namespace = 'presets') => {
-  const presetsNamespace = namespace.endsWith('presets')
-    ? namespace
-    : `${namespace}/presets`;
-
-  const presetId = ref(null);
-
-  const setupPresetPersistence = async () => {
-    const { restore: restorePreset, reset } = usePersistedStorage({
-      name: 'preset',
-      value: presetId,
-      storages: [PersistedStorageType.LocalStorage],
-      storagePath: presetsNamespace,
-      onStore: (save, { name }) => {
-        const value = presetId.value;
-        if (!value) {
-          return reset();
-        }
-        return save({ name, value });
-      },
-      onRestore: async (restore, name) => {
-        const value = await restore(name);
-        presetId.value = Number(value);
-      },
-    });
-    await restorePreset();
-  };
-
-  const tableStore = tableStoreBody<EnginePresetQuery>(presetsNamespace, {
-    apiModule: PresetQueryAPI,
-    headers,
-    disablePersistence: true,
-  });
-
-  const resetPreset = () => {
-    presetId.value = null;
-  };
-
-  return {
-    ...tableStore,
-
-    presetId,
-    setupPresetPersistence,
-    resetPreset,
-  };
+	const presetsNamespace = namespace.endsWith('presets')
+		? namespace
+		: `${namespace}/presets`;
+
+	const presetId = ref(null);
+
+	const setupPresetPersistence = async () => {
+		const { restore: restorePreset, reset } = usePersistedStorage({
+			name: 'preset',
+			value: presetId,
+			storages: [
+				PersistedStorageType.LocalStorage,
+			],
+			storagePath: presetsNamespace,
+			onStore: (save, { name }) => {
+				const value = presetId.value;
+				if (!value) {
+					return reset();
+				}
+				return save({
+					name,
+					value,
+				});
+			},
+			onRestore: async (restore, name) => {
+				const value = await restore(name);
+				presetId.value = Number(value);
+			},
+		});
+		await restorePreset();
+	};
+
+	const tableStore = tableStoreBody<EnginePresetQuery>(presetsNamespace, {
+		apiModule: PresetQueryAPI,
+		headers,
+		disablePersistence: true,
+	});
+
+	const resetPreset = () => {
+		presetId.value = null;
+	};
+
+	return {
+		...tableStore,
+
+		presetId,
+		setupPresetPersistence,
+		resetPreset,
+	};
 };
 
 export const createFilterPresetsStore = (namespace: string) => {
-  return () => filterPresetsStoreBody(namespace);
+	return () => filterPresetsStoreBody(namespace);
 };

package/src/modules/filter-presets/stores/headers/headers.ts

@@ -1,24 +1,24 @@
 import { WtTableHeader } from 'src/components/wt-table/types/WtTable.d.ts';
 
 export const headers: WtTableHeader[] = [
-  {
-    value: 'id',
-    field: 'id',
-    show: true,
-  },
-  {
-    value: 'name',
-    field: 'name',
-    show: true,
-  },
-  {
-    value: 'preset',
-    field: 'preset',
-    show: true,
-  },
-  {
-    value: 'description',
-    field: 'description',
-    show: true,
-  },
+	{
+		value: 'id',
+		field: 'id',
+		show: true,
+	},
+	{
+		value: 'name',
+		field: 'name',
+		show: true,
+	},
+	{
+		value: 'preset',
+		field: 'preset',
+		show: true,
+	},
+	{
+		value: 'description',
+		field: 'description',
+		show: true,
+	},
 ];

package/src/modules/filters/classes/Filter.ts

@@ -3,68 +3,68 @@ import { AnyFilterConfig } from '../modules/filterConfig';
 export type FilterName = string;
 export type FilterLabel = string;
 export type FilterValue =
-  | object
-  | []
-  | string
-  | number
-  | boolean
-  | undefined
-  | null;
+	| object
+	| []
+	| string
+	| number
+	| boolean
+	| undefined
+	| null;
 
 /**
  * represents user-input data, that should be (re)stored
  */
 export interface FilterData {
-  value: FilterValue;
-  label?: FilterLabel;
+	value: FilterValue;
+	label?: FilterLabel;
 }
 
 export interface FilterInitParams extends FilterData {
-  name: FilterName;
+	name: FilterName;
 }
 
 export interface FilterEnumOption {
-  locale: string;
-  value: FilterValue;
+	locale: string;
+	value: FilterValue;
 }
 
 export interface FilterInstanceConfig {
-  /**
-   * 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[];
+	/**
+	 * 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;
+	name: FilterName;
+	value: FilterValue;
+	label?: FilterLabel;
+	set: (data: FilterData) => IFilter;
 }
 
 export class Filter implements IFilter {
-  readonly name: FilterName;
-  label: FilterLabel;
-  value: FilterValue;
+	readonly name: FilterName;
+	label: FilterLabel;
+	value: FilterValue;
 
-  constructor(
-    { name, value, label }: FilterInitParams,
-    public payload: object | undefined,
-    public config: FilterInstanceConfig,
-  ) {
-    this.name = name;
-    this.value = value;
-    this.label = label;
-  }
+	constructor(
+		{ name, value, label }: FilterInitParams,
+		public payload: object | undefined,
+		public config: FilterInstanceConfig,
+	) {
+		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;
-  }
+	set({ value, label }: { value?: FilterValue; label?: FilterLabel }): IFilter {
+		this.value = value;
+		this.label = label;
+		return this;
+	}
 }