@webitel/ui-datalist 26.8.15 → 26.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.15",
+	"version": "26.8.17",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",

package/src/modules/filters/components/config/dynamic-view/dynamic-filter-config-form.vue

@@ -70,13 +70,13 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtButton, WtSingleSelect } from '@webitel/ui-sdk/components';
-import { isEmpty } from '@webitel/ui-sdk/scripts';
 import deepcopy from 'deep-copy';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { FilterInitParams, IFilter } from '../../../classes/Filter';
 import { BaseFilterConfig } from '../../../modules/filterConfig/classes/FilterConfig';
+import { isEmptyFilterValue } from '../../../scripts/utils';
 import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
 import DynamicFilterConfigFormValueInput from './dynamic-filter-config-form-value-input.vue';
 
@@ -142,7 +142,7 @@ v$.value.$touch();
 const invalid = ref(false);
 
 const isSubmitDisabled = computed(() => {
-	if (props.columnMode && isEmpty(filterValue.value)) {
+	if (props.columnMode && isEmptyFilterValue(filterValue.value)) {
 		return !editMode || !filterName.value || !!props.filterConfig?.notDeletable;
 	}
 

package/src/modules/filters/components/config/static-view/__tests__/static-filter-field.spec.ts

@@ -113,6 +113,46 @@ describe('StaticFilterField', () => {
 		expect(wrapper.emitted('delete:filter')).toHaveLength(1);
 	});
 
+	it('deletes an applied range filter when both bounds are cleared', () => {
+		filtersManager.addFilter({
+			name: FilterOption.Agent,
+			value: {
+				from: 10,
+				to: 20,
+			},
+		});
+
+		const wrapper = mountField(deletableConfig, filtersManager);
+
+		emitValue(wrapper, {
+			from: null,
+			to: null,
+		});
+
+		expect(wrapper.emitted('delete:filter')).toHaveLength(1);
+		expect(wrapper.emitted('update:filter')).toBeUndefined();
+	});
+
+	it('updates an applied range filter when one bound is left', () => {
+		filtersManager.addFilter({
+			name: FilterOption.Agent,
+			value: {
+				from: 10,
+				to: 20,
+			},
+		});
+
+		const wrapper = mountField(deletableConfig, filtersManager);
+
+		emitValue(wrapper, {
+			from: null,
+			to: 20,
+		});
+
+		expect(wrapper.emitted('delete:filter')).toBeUndefined();
+		expect(wrapper.emitted('update:filter')).toHaveLength(1);
+	});
+
 	it('keeps a notDeletable filter when its field is cleared', () => {
 		filtersManager.addFilter({
 			name: FilterOption.JoinedAt,

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

@@ -1,9 +1,9 @@
-import { isEmpty } from '@webitel/ui-sdk/scripts';
 import { type MaybeRefOrGetter, toValue } from 'vue';
 
 import type { FilterValue, IFilter } from '../classes/Filter';
 import type { StaticFilterEmits } from '../components/types/Filter.types';
 import type { AnyFilterConfig } from '../modules/filterConfig';
+import { isEmptyFilterValue } from '../scripts/utils';
 
 type StaticFilterEmit = <K extends keyof StaticFilterEmits>(
 	event: K,
@@ -23,13 +23,13 @@ export const useFilterValueChange = ({
 		const currentFilter = toValue(filter);
 		const config = toValue(filterConfig);
 
-		if (isEmpty(value) && typeof value !== 'boolean') {
+		if (isEmptyFilterValue(value)) {
 			if (!currentFilter) return;
 			if (config.notDeletable) return;
 			return emit('delete:filter', currentFilter);
 		}
 
-		if (isEmpty(currentFilter?.value)) {
+		if (isEmptyFilterValue(currentFilter?.value)) {
 			return emit('add:filter', {
 				name: config.name,
 				value,

package/src/modules/filters/scripts/__tests__/utils.spec.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+
+import { isEmptyFilterValue } from '../utils';
+
+describe('isEmptyFilterValue', () => {
+	it.each([
+		true,
+		false,
+	])('treats boolean %s as a non-empty value', (value) => {
+		expect(isEmptyFilterValue(value)).toBe(false);
+	});
+
+	it.each([
+		null,
+		undefined,
+		'',
+		[],
+		{},
+		{
+			from: null,
+			to: undefined,
+		},
+	])('treats %j as an empty value', (value) => {
+		expect(isEmptyFilterValue(value)).toBe(true);
+	});
+
+	it.each([
+		'value',
+		1,
+		[
+			1,
+		],
+		{
+			from: 1,
+			to: null,
+		},
+	])('treats %j as a non-empty value', (value) => {
+		expect(isEmptyFilterValue(value)).toBe(false);
+	});
+});

package/src/modules/filters/scripts/utils.ts

@@ -1,4 +1,6 @@
-import type { FilterData, FilterName } from '../classes/Filter';
+import { isEmpty } from '@webitel/ui-sdk/scripts';
+
+import type { FilterData, FilterName, FilterValue } from '../classes/Filter';
 
 export const filterLabelToSnapshotKey = (name: FilterName): string =>
 	`${name}_lbl`;
@@ -33,3 +35,12 @@ export const filterValuePropFromSnapshotKey = (
 	if (isLabelSnapshotKey(snapshotKey)) return 'label';
 	if (isValueSnapshotKey(snapshotKey)) return 'value';
 };
+
+export const isEmptyFilterValue = (value: FilterValue): boolean => {
+	if (typeof value === 'boolean') return false;
+	if (isEmpty(value)) return true;
+	if (typeof value !== 'object' || Array.isArray(value)) return false;
+	return Object.values(value).every(
+		(field) => field === null || field === undefined || field === '',
+	);
+};

package/src/modules/headers/createTableHeadersStore.ts

@@ -59,7 +59,8 @@ export const tableHeadersStoreBody = ({
 		}: {
 			column: DatalistTableHeader;
 			order: DatalistTableHeader['sort'];
-		}) => `${sortToQueryAdapter(order)}${column.field}`;
+		}) =>
+			`${sortToQueryAdapter(typeof order === 'boolean' ? undefined : order)}${column.field}`;
 
 		const sortedCol = headers.value.find((header) => header.sort);