@webitel/ui-sdk 26.8.87 → 26.8.91

package/src/modules/TableVariableColumnSelect/composable/__tests__/useTableVariableHeaders.spec.ts

@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+
+import {
+	isVariableHeader,
+	useTableVariableHeaders,
+	VARIABLE_FIELD_PREFIX,
+} from '../useTableVariableHeaders';
+
+describe('isVariableHeader', () => {
+	it('detects variable headers by field or value prefix', () => {
+		expect(
+			isVariableHeader({
+				field: `${VARIABLE_FIELD_PREFIX}city`,
+			}),
+		).toBe(true);
+		expect(
+			isVariableHeader({
+				value: `${VARIABLE_FIELD_PREFIX}city`,
+			}),
+		).toBe(true);
+		expect(
+			isVariableHeader({
+				field: 'name',
+				value: 'name',
+			}),
+		).toBe(false);
+	});
+});
+
+describe('useTableVariableHeaders', () => {
+	it('replaces existing variable headers and appends new ones', () => {
+		const headers = ref([
+			{
+				field: 'name',
+				value: 'name',
+				show: true,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}old`,
+				value: `${VARIABLE_FIELD_PREFIX}old`,
+				text: 'old',
+				show: true,
+			},
+		]);
+		const updateShownHeaders = vi.fn();
+
+		const { updateVariableHeaders } = useTableVariableHeaders({
+			headers,
+			updateShownHeaders,
+		});
+
+		updateVariableHeaders([
+			{
+				field: `${VARIABLE_FIELD_PREFIX}old`,
+				value: `${VARIABLE_FIELD_PREFIX}old`,
+				text: 'old',
+				show: true,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}new`,
+				value: `${VARIABLE_FIELD_PREFIX}new`,
+				text: 'new',
+				show: true,
+			},
+		]);
+
+		expect(updateShownHeaders).toHaveBeenCalledWith([
+			{
+				field: 'name',
+				value: 'name',
+				show: true,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}old`,
+				value: `${VARIABLE_FIELD_PREFIX}old`,
+				text: 'old',
+				show: true,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}new`,
+				value: `${VARIABLE_FIELD_PREFIX}new`,
+				text: 'new',
+				show: true,
+			},
+		]);
+	});
+
+	it('removes variable headers missing from the incoming list', () => {
+		const headers = ref([
+			{
+				field: `${VARIABLE_FIELD_PREFIX}keep`,
+				value: `${VARIABLE_FIELD_PREFIX}keep`,
+				text: 'keep',
+				show: false,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}drop`,
+				value: `${VARIABLE_FIELD_PREFIX}drop`,
+				text: 'drop',
+				show: true,
+			},
+		]);
+		const updateShownHeaders = vi.fn();
+
+		const { updateVariableHeaders } = useTableVariableHeaders({
+			headers,
+			updateShownHeaders,
+		});
+
+		updateVariableHeaders([
+			{
+				field: `${VARIABLE_FIELD_PREFIX}keep`,
+				value: `${VARIABLE_FIELD_PREFIX}keep`,
+				text: 'keep',
+				show: true,
+			},
+		]);
+
+		expect(updateShownHeaders).toHaveBeenCalledWith([
+			{
+				field: `${VARIABLE_FIELD_PREFIX}keep`,
+				value: `${VARIABLE_FIELD_PREFIX}keep`,
+				text: 'keep',
+				show: false,
+			},
+		]);
+	});
+});

package/src/modules/TableVariableColumnSelect/composable/useTableVariableHeaders.ts

@@ -0,0 +1,59 @@
+import type { WtTableHeader } from '../../../components/wt-table/types/WtTable';
+
+export const VARIABLE_FIELD_PREFIX = 'variables.';
+
+export type TableVariableHeader = WtTableHeader;
+
+type HeadersRef = {
+	readonly value: TableVariableHeader[];
+};
+
+export const isVariableHeader = (
+	header: Pick<TableVariableHeader, 'field' | 'value'>,
+) =>
+	(header.field ?? '').startsWith(VARIABLE_FIELD_PREFIX) ||
+	(header.value ?? '').startsWith(VARIABLE_FIELD_PREFIX);
+
+export function useTableVariableHeaders({
+	headers,
+	updateShownHeaders,
+}: {
+	headers: HeadersRef;
+	updateShownHeaders: (headers: TableVariableHeader[]) => void;
+}) {
+	const updateVariableHeaders = (incoming: TableVariableHeader[]) => {
+		const incomingByField = new Map(
+			incoming.map((header) => [
+				header.field,
+				header,
+			]),
+		);
+
+		const updatedHeaders = headers.value.flatMap((header) => {
+			if (!isVariableHeader(header))
+				return [
+					header,
+				];
+
+			const next = incomingByField.get(header.field);
+			if (!next) return [];
+
+			incomingByField.delete(header.field);
+			return [
+				{
+					...next,
+					show: header.show,
+				},
+			];
+		});
+
+		updateShownHeaders([
+			...updatedHeaders,
+			...incomingByField.values(),
+		]);
+	};
+
+	return {
+		updateVariableHeaders,
+	};
+}

package/src/modules/TableVariableColumnSelect/index.ts

@@ -0,0 +1,7 @@
+export { default as WtTableVariableColumnSelect } from './components/wt-table-variable-column-select.vue';
+export {
+	isVariableHeader,
+	type TableVariableHeader,
+	useTableVariableHeaders,
+	VARIABLE_FIELD_PREFIX,
+} from './composable/useTableVariableHeaders';