@webitel/ui-datalist 26.8.1 → 26.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.1",
+	"version": "26.8.2",
 	"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,