@webitel/ui-datalist 1.1.4 → 1.1.6

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

@@ -71,34 +71,36 @@
 
 <script lang="ts" setup>
 import {
-  WtButton,
-  WtEmpty,
-  WtIconAction,
-  WtPopup,
-  WtSearchBar,
+	WtButton,
+	WtEmpty,
+	WtIconAction,
+	WtPopup,
+	WtSearchBar,
 } from '@webitel/ui-sdk/components';
 import { IconAction } from '@webitel/ui-sdk/enums';
 import { useTableEmpty } from '@webitel/ui-sdk/modules/TableComponentModule/composables/useTableEmpty';
 import { type Store, storeToRefs } from 'pinia';
-import {computed, inject, onMounted, ref, watch} from 'vue';
+import { computed, inject, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import {AnyFilterConfig} from "../../../filters/modules/filterConfig/classes/FilterConfig";
+import { AnyFilterConfig } from '../../../filters/modules/filterConfig/classes/FilterConfig';
 import PresetQueryAPI from '../../api/PresetQuery.ts';
 import PresetPreview from './preset-preview.vue';
 
 const props = defineProps<{
-  /**
-   * presets "section" namespace
-   */
-  namespace: string;
-  presetsStore: () => Store;
-  filterConfigs: AnyFilterConfig[];
+	/**
+	 * presets "section" namespace
+	 */
+	namespace: string;
+	presetsStore: () => Store;
+	filterConfigs: AnyFilterConfig[];
 }>();
 
 const emit = defineEmits<{
-  apply: [string];
+	apply: [
+		string,
+	];
 }>();
 
 const eventBus = inject('$eventBus');
@@ -109,128 +111,148 @@ const showPresetsList = ref(false);
 
 const presetsStore = props.presetsStore;
 const { dataList, error, isLoading, filtersManager, presetId } =
-  storeToRefs(presetsStore);
+	storeToRefs(presetsStore);
 
-const { loadDataList, initialize, updateSize, deleteEls, setupPresetPersistence } = presetsStore;
+const {
+	loadDataList,
+	initialize,
+	updateSize,
+	deleteEls,
+	setupPresetPersistence,
+} = presetsStore;
 
 updateSize(1000);
 filtersManager.value.addFilter({
-  name: 'presetNamespace',
-  value: props.namespace,
+	name: 'presetNamespace',
+	value: props.namespace,
 });
 
 const lastSetSearchValue = ref<string | null>(null);
 
 const search = computed({
-  get: () => {
-    return filtersManager.value.getFilter('search')?.value || '';
-  },
-  set: (value) => {
-    // Skip if this value was already set via handleSearchInput
-    if (lastSetSearchValue.value === value) {
-      lastSetSearchValue.value = null;
-      return;
-    }
-    filtersManager.value.addFilter({ name: 'search', value });
-  },
+	get: () => {
+		return filtersManager.value.getFilter('search')?.value || '';
+	},
+	set: (value) => {
+		// Skip if this value was already set via handleSearchInput
+		if (lastSetSearchValue.value === value) {
+			lastSetSearchValue.value = null;
+			return;
+		}
+		filtersManager.value.addFilter({
+			name: 'search',
+			value,
+		});
+	},
 });
 
 const handleSearchInput = (value: string) => {
-  // Update search immediately when cleared to bypass debounce
-  if (!value) {
-    lastSetSearchValue.value = value;
-    filtersManager.value.addFilter({ name: 'search', value });
-  }
+	// Update search immediately when cleared to bypass debounce
+	if (!value) {
+		lastSetSearchValue.value = value;
+		filtersManager.value.addFilter({
+			name: 'search',
+			value,
+		});
+	}
 };
 
 const {
-  showEmpty,
-  image: imageEmpty,
-  text: textEmpty,
+	showEmpty,
+	image: imageEmpty,
+	text: textEmpty,
 } = useTableEmpty({
-  dataList,
-  isLoading,
-  error,
-  filters: computed(() => {
-    return {
-      search: search.value,
-    };
-  }),
+	dataList,
+	isLoading,
+	error,
+	filters: computed(() => {
+		return {
+			search: search.value,
+		};
+	}),
 });
 
 watch(
-  showPresetsList,
-  () => {
-    initialize();
-
-    watch(showPresetsList, (value) => {
-      if (value) {
-        search.value = '';
-        /* search.value reset causes re-fetch as filter change, so
+	showPresetsList,
+	() => {
+		initialize();
+
+		watch(showPresetsList, (value) => {
+			if (value) {
+				search.value = '';
+				/* search.value reset causes re-fetch as filter change, so
       loadDataList() is commented.
       TODO: implement ability to set filters "silently" and refactor this code */
-        // loadDataList();
-      }
-    });
-  },
-  { once: true },
+				// loadDataList();
+			}
+		});
+	},
+	{
+		once: true,
+	},
 );
 
 const selectedPreset = ref();
 
 const applySelectedPreset = () => {
-  const filtersSnapshot =
-    selectedPreset.value.preset['filtersManager.toString'];
-  emit('apply', filtersSnapshot);
-  presetId.value = selectedPreset.value.id
+	const filtersSnapshot =
+		selectedPreset.value.preset['filtersManager.toString'];
+	emit('apply', filtersSnapshot);
+	presetId.value = selectedPreset.value.id;
 
-  selectedPreset.value = null;
-  showPresetsList.value = false;
+	selectedPreset.value = null;
+	showPresetsList.value = false;
 };
 
 const updatePreset = async ({ preset, onSuccess, onFailure }) => {
-  try {
-    await PresetQueryAPI.update({
-      item: { ...preset },
-      id: preset.id,
-      namespace: preset.preset?.namespace,
-    });
-    eventBus.$emit('notification', {
-      type: 'success',
-      text: t('systemNotifications.success.update', {
-        entity: t('webitelUI.filters.presets.preset'),
-      }),
-    });
-    onSuccess();
-    return loadDataList();
-  } catch (err) {
-    onFailure(err);
-    throw err;
-  }
+	try {
+		await PresetQueryAPI.update({
+			item: {
+				...preset,
+			},
+			id: preset.id,
+			namespace: preset.preset?.namespace,
+		});
+		eventBus.$emit('notification', {
+			type: 'success',
+			text: t('systemNotifications.success.update', {
+				entity: t('webitelUI.filters.presets.preset'),
+			}),
+		});
+		onSuccess();
+		return loadDataList();
+	} catch (err) {
+		onFailure(err);
+		throw err;
+	}
 };
 
 const deletePreset = async (preset: EnginePresetQuery) => {
-  await deleteEls([preset]);
-  eventBus.$emit('notification', {
-    type: 'success',
-    text: t('systemNotifications.success.delete', {
-      entity: t('webitelUI.filters.presets.preset'),
-    }),
-  });
+	await deleteEls([
+		preset,
+	]);
+	eventBus.$emit('notification', {
+		type: 'success',
+		text: t('systemNotifications.success.delete', {
+			entity: t('webitelUI.filters.presets.preset'),
+		}),
+	});
 };
 
 const restorePresetById = async (id: number | null) => {
-  if (!id) return;
-  const presetData = await PresetQueryAPI.get({ id });
-  const filters = presetData?.preset?.['filtersManager.toString'];
+	if (!id) return;
+	const presetData = await PresetQueryAPI.get({
+		id,
+	});
+	const filters = presetData?.preset?.['filtersManager.toString'];
 
-  if (filters) emit('apply', filters);
-}
+	if (filters) emit('apply', filters);
+};
 
 onMounted(async () => {
-  await setupPresetPersistence();
-  await restorePresetById(presetId.value)
-})
+	await setupPresetPersistence();
+	await restorePresetById(presetId.value);
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -81,50 +81,54 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import {
-  WtExpansionPanel,
-  WtIconAction,
-  WtRadio,
+	WtExpansionPanel,
+	WtIconAction,
+	WtRadio,
 } from '@webitel/ui-sdk/components';
 import { AxiosError } from 'axios';
 import { computed, ref } from 'vue';
 import { EnginePresetQuery } from 'webitel-sdk';
 
 import { createFiltersManager } 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';
 
 type Props = {
-  preset: EnginePresetQuery;
-  isSelected: boolean;
-  collapsed: boolean;
-  filterConfigs: AnyFilterConfig[];
+	preset: EnginePresetQuery;
+	isSelected: boolean;
+	collapsed: boolean;
+	filterConfigs: AnyFilterConfig[];
 };
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  'preset:select': [EnginePresetQuery];
-  'preset:update': [
-    {
-      preset: EnginePresetQuery;
-      onSuccess: () => void;
-      onFailure: (err: AxiosError) => void;
-    },
-  ];
-  'preset:delete': [EnginePresetQuery];
+	'preset:select': [
+		EnginePresetQuery,
+	];
+	'preset:update': [
+		{
+			preset: EnginePresetQuery;
+			onSuccess: () => void;
+			onFailure: (err: AxiosError) => void;
+		},
+	];
+	'preset:delete': [
+		EnginePresetQuery,
+	];
 }>();
 
 const filtersManager = computed(() => {
-  const filtersManager = createFiltersManager();
+	const filtersManager = createFiltersManager();
 
-  const snapshot = props.preset?.preset?.['filtersManager.toString'];
-  if (snapshot) {
-    filtersManager.fromString(snapshot);
-  }
+	const snapshot = props.preset?.preset?.['filtersManager.toString'];
+	if (snapshot) {
+		filtersManager.fromString(snapshot);
+	}
 
-  return filtersManager;
+	return filtersManager;
 });
 
 const editMode = ref(false);
@@ -137,64 +141,66 @@ const editing = ref(false);
 const nameAlreadyExistsError = ref(false);
 
 const editDraft = ref({
-  name: '',
-  description: '',
+	name: '',
+	description: '',
 });
 
 const fillDraft = () => {
-  editDraft.value = {
-    name: props.preset.name,
-    description: props.preset.description,
-  };
+	editDraft.value = {
+		name: props.preset.name,
+		description: props.preset.description,
+	};
 };
 
 fillDraft();
 
 const v$ = useVuelidate(
-  computed(() => {
-    return {
-      name: {
-        required,
-        nameAlreadyInUse: () => !nameAlreadyExistsError.value,
-      },
-    };
-  }),
-  editDraft,
-  { $autoDirty: true },
+	computed(() => {
+		return {
+			name: {
+				required,
+				nameAlreadyInUse: () => !nameAlreadyExistsError.value,
+			},
+		};
+	}),
+	editDraft,
+	{
+		$autoDirty: true,
+	},
 );
 v$.value.$touch();
 
 const startEdit = ({ open: openExpansion }) => {
-  openExpansion();
-  editMode.value = true;
+	openExpansion();
+	editMode.value = true;
 };
 
 const clearEdit = () => {
-  editMode.value = false;
+	editMode.value = false;
 };
 
 const submitEdit = () => {
-  const preset: EnginePresetQuery = {
-    ...props.preset,
-    ...editDraft.value,
-  };
-  const onFailure = (err: AxiosError) => {
-    if (err.status === 409) {
-      nameAlreadyExistsError.value = true;
-    }
-    editing.value = false;
-  };
-
-  emit('preset:update', {
-    preset,
-    onSuccess: clearEdit,
-    onFailure,
-  });
+	const preset: EnginePresetQuery = {
+		...props.preset,
+		...editDraft.value,
+	};
+	const onFailure = (err: AxiosError) => {
+		if (err.status === 409) {
+			nameAlreadyExistsError.value = true;
+		}
+		editing.value = false;
+	};
+
+	emit('preset:update', {
+		preset,
+		onSuccess: clearEdit,
+		onFailure,
+	});
 };
 
 const updatePresetName = () => {
-  nameAlreadyExistsError.value = false;
-  editing.value = true;
+	nameAlreadyExistsError.value = false;
+	editing.value = true;
 };
 </script>
 

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

@@ -41,9 +41,11 @@ import { useI18n } from 'vue-i18n';
 import { SubmitConfig } from './save-preset-popup.vue';
 
 const emit = defineEmits<{
-  confirm: [SubmitConfig];
-  cancel: [];
-  close: [];
+	confirm: [
+		SubmitConfig,
+	];
+	cancel: [];
+	close: [];
 }>();
 
 const { t } = useI18n();
@@ -51,9 +53,9 @@ const { t } = useI18n();
 const isSaving = ref(false);
 
 const confirm = () => {
-  emit('confirm', {
-    onCompleted: () => (isSaving.value = false),
-  });
+	emit('confirm', {
+		onCompleted: () => (isSaving.value = false),
+	});
 };
 </script>