@webitel/ui-datalist 26.8.1 → 26.8.3

package/package.json

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

package/src/modules/headers/__tests__/createTableHeadersStore.spec.ts

@@ -169,6 +169,63 @@ describe('tableHeadersStoreBody', () => {
 
 			expect(router.currentRoute.value.query.sort).toBe('+name');
 		});
+		it('keeps every column that renders from a persisted field', async () => {
+			await router.push({
+				name: 'cases',
+				query: {
+					[fieldsQueryKey]: 'protocol,app',
+				},
+			});
+
+			/* `icon` and `protocol` render from one API field */
+			const store = tableHeadersStoreBody({
+				rawHeaders: [
+					{
+						value: 'icon',
+						field: 'protocol',
+						show: true,
+					},
+					{
+						value: 'protocol',
+						field: 'protocol',
+						show: true,
+						sort: null,
+					},
+					{
+						value: 'app',
+						field: 'app',
+						show: true,
+						sort: null,
+					},
+				] as DatalistTableHeader[],
+				id,
+			});
+			await runWithRouter(() => store.setupPersistence());
+
+			expect(store.shownHeaders.value.map(({ value }) => value)).toEqual([
+				'icon',
+				'protocol',
+				'app',
+			]);
+		});
+
+		it('ignores an empty persisted field instead of adding a placeholder column', async () => {
+			/* a header persisted before it got a `field` is stored as an empty string */
+			await router.push({
+				name: 'cases',
+				query: {
+					[fieldsQueryKey]: ',name,subject',
+				},
+			});
+
+			const store = await setUpStore();
+
+			expect(store.shownHeaders.value.map(({ field }) => field)).toEqual([
+				'name',
+				'subject',
+			]);
+			expect(store.headers.value.some(({ field }) => !field)).toBe(false);
+		});
 	});
 
 	describe('access', () => {

package/src/modules/headers/createTableHeadersStore.ts

@@ -130,8 +130,11 @@ export const tableHeadersStoreBody = ({
 	};
 
 	const updateFields = (persistedFields: string[]) => {
-		/* persisted state predates the gate, and unknown fields are revived below */
-		const fields = persistedFields.filter((field) => !deniedFields.has(field));
+		/* persisted state predates the gate, and unknown fields are revived below;
+		   an empty field is a leftover of a header persisted before it got a `field` */
+		const fields = persistedFields.filter(
+			(field) => field && !deniedFields.has(field),
+		);
 
 		const fieldsSet = new Set(fields);
 		const mainFieldNames = new Set(headers.value.map((header) => header.field));
@@ -153,28 +156,26 @@ export const tableHeadersStoreBody = ({
 					}) as DatalistTableHeader,
 			);
 
-		const headersByField = new Map(
-			[
-				...mainHeaders,
-				...customHeaders,
-			].map((header) => [
-				header.field,
-				header,
-			]),
-		);
+		/* several headers may render from one field (e.g. icon + text), keep them all */
+		const headersByField = new Map<string, DatalistTableHeader[]>();
+		for (const header of [
+			...mainHeaders,
+			...customHeaders,
+		]) {
+			const list = headersByField.get(header.field) ?? [];
+			list.push(header);
+			headersByField.set(header.field, list);
+		}
 
 		const headersInPersistedOrder = fields.flatMap((field) => {
-			const header = headersByField.get(field);
-			if (!header) return [];
+			const list = headersByField.get(field) ?? [];
 			headersByField.delete(field);
-			return [
-				header,
-			];
+			return list;
 		});
 
 		const hiddenHeaders = [
 			...headersByField.values(),
-		];
+		].flat();
 
 		updateShownHeaders([
 			...headersInPersistedOrder,

package/src/modules/table/createTableStore.store.ts

@@ -1,6 +1,6 @@
 import deepEqual from 'deep-equal';
 import set from 'lodash/set';
-import { type Ref, ref, toRaw, watch } from 'vue';
+import { nextTick, type Ref, ref, toRaw, watch } from 'vue';
 
 import {
 	createDatalistStore,
@@ -247,6 +247,53 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		}
 	};
 
+	let loadingAfterFiltersChange = false;
+
+	watch(
+		[
+			() => filtersManager.value.getAllValues(),
+			sort,
+			fields,
+			size,
+		],
+		async () => {
+			if (!isStoreSetUp.value) {
+				return;
+			}
+
+			/*
+			 * @author @Lera24
+			 * https://webitel.atlassian.net/browse/WTEL-7597?focusedCommentId=697115
+			 * */
+			if (isReorderingColumn.value) {
+				return;
+			}
+			loadingAfterFiltersChange = true;
+			updatePage(1);
+			await loadDataList();
+			loadingAfterFiltersChange = false;
+		},
+		/* filtersManager requires deep watching for its values */
+		{
+			deep: true,
+		},
+	);
+
+	watch(
+		[
+			page,
+		],
+		() => {
+			if (!isStoreSetUp.value) {
+				return;
+			}
+
+			if (!loadingAfterFiltersChange && !isAppendDataList) {
+				return loadDataList();
+			}
+		},
+	);
+
 	const setupStore = async () => {
 		if (isStoreSetUp.value) {
 			return;
@@ -260,44 +307,13 @@ export const tableStoreBody = <Entity extends Identifiable>(
 			]);
 		}
 
-		let loadingAfterFiltersChange = false;
-
-		watch(
-			[
-				() => filtersManager.value.getAllValues(),
-				sort,
-				fields,
-				size,
-			],
-			async () => {
-				/*
-				 * @author @Lera24
-				 * https://webitel.atlassian.net/browse/WTEL-7597?focusedCommentId=697115
-				 * */
-				if (isReorderingColumn.value) {
-					return;
-				}
-				loadingAfterFiltersChange = true;
-				updatePage(1);
-				await loadDataList();
-				loadingAfterFiltersChange = false;
-			},
-			/* filtersManager requires deep watching for its values */
-			{
-				deep: true,
-			},
-		);
-
-		watch(
-			[
-				page,
-			],
-			() => {
-				if (!loadingAfterFiltersChange && !isAppendDataList) {
-					return loadDataList();
-				}
-			},
-		);
+		/*
+		 * lets any reactive updates the restore above just made (e.g. to
+		 * sort/fields/filters) finish flushing through the watchers above
+		 * while `isStoreSetUp` is still false, before they start reacting to
+		 * real changes
+		 */
+		await nextTick();
 
 		isStoreSetUp.value = true;
 	};