@webitel/ui-datalist 1.1.66 → 1.1.68

package/package.json

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

package/src/modules/filters/modules/filterConfig/components/contact-group/contact-group-filter-value-field.vue

@@ -3,7 +3,7 @@
     :label="labelValue"
     :search-method="props.filterConfig.searchRecords"
     :v="!disableValidation && vList"
-    :model-value="model?.list"
+    :model-value="value.list"
     data-key="id"
     option-value="id"
     v-bind="$attrs"
@@ -12,9 +12,9 @@
   <wt-checkbox
     v-if="!props.filterConfig?.hideUnassigned"
     :label="t('reusable.showUnassigned')"
-    :selected="!!model?.unassigned"
+    :selected="!!value.unassigned"
     :v="!disableValidation && vUnassigned"
-    @update:selected="model.unassigned = !!$event"
+    @update:selected="handleInput('unassigned', !!$event)"
   />
 </template>
 
@@ -27,12 +27,6 @@ import { useI18n } from 'vue-i18n';
 
 import { IContactGroupFilterConfig } from './index';
 
-const props = defineProps<{
-	filterConfig: IContactGroupFilterConfig;
-	disableValidation?: boolean;
-	hideLabel?: boolean;
-}>();
-
 type ModelValue = {
 	list?: string[];
 	unassigned?: boolean | null;
@@ -45,39 +39,62 @@ const model = defineModel<ModelValue>({
 	}),
 });
 
+const value = computed<ModelValue>(
+	() =>
+		model.value ?? {
+			list: [],
+			unassigned: null,
+		},
+);
+
+const handleInput = <K extends keyof ModelValue>(
+	key: K,
+	newFieldValue: ModelValue[K],
+) => {
+	model.value = {
+		...value.value,
+		[key]: newFieldValue,
+	};
+};
+
+const changeListValue = (event: string[]) => {
+	if (!event.length && !value.value.unassigned) {
+		model.value = {};
+		return;
+	}
+	handleInput('list', event);
+};
+
+const props = defineProps<{
+	filterConfig: IContactGroupFilterConfig;
+	disableValidation?: boolean;
+	hideLabel?: boolean;
+}>();
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,
 	];
 }>();
+
 const { t } = useI18n();
 
 const labelValue = computed(() =>
 	props?.hideLabel ? undefined : t('webitelUI.filters.filterValue'),
 );
 
-const changeListValue = (event: string[]) => {
-	if (!event.length && !model.value.unassigned) {
-		model.value = {};
-		return;
-	}
-	model.value = {
-		...model.value,
-		list: event,
-	};
-};
 const v$ = useVuelidate<{
 	model: ModelValue;
 }>(
 	computed(() => ({
 		model: {
 			list: {
-				required: requiredIf(() => !model.value.unassigned),
+				required: requiredIf(() => !value.value.unassigned),
 			},
 			unassigned: {
 				required: requiredIf(
 					() =>
-						!!props.filterConfig?.hideUnassigned && !model.value.list?.length,
+						!!props.filterConfig?.hideUnassigned && !value.value.list?.length,
 				),
 			},
 		},
@@ -106,11 +123,9 @@ onMounted(() => {
 });
 
 watch(
-	() => v$?.value?.$invalid,
+	() => v$.value.$invalid,
 	(invalid) => {
-		if (v$?.value) {
-			emit('update:invalid', invalid);
-		}
+		emit('update:invalid', invalid);
 	},
 	{
 		immediate: true,

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

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import { createApp } from 'vue';
+import { createApp, ref } from 'vue';
 import { createMemoryHistory, createRouter, type Router } from 'vue-router';
 
 import type { DatalistTableHeader } from '../../types/tableStore.types';
@@ -141,6 +141,149 @@ describe('tableHeadersStoreBody', () => {
 		});
 	});
 
+	describe('access', () => {
+		const createGatedStore = (gated: DatalistTableHeader[]) =>
+			tableHeadersStoreBody({
+				rawHeaders: [
+					...rawHeaders.map((header) => ({
+						...header,
+					})),
+					...gated,
+				],
+				id,
+			});
+
+		it('drops a denied header from headers, shownHeaders and fields', () => {
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => false,
+				} as DatalistTableHeader,
+			]);
+
+			expect(store.headers.value.map(({ field }) => field)).not.toContain(
+				'agent',
+			);
+			expect(store.shownHeaders.value.map(({ field }) => field)).not.toContain(
+				'agent',
+			);
+			expect(store.fields.value).not.toContain('agent');
+		});
+
+		it('keeps a granted header and leaves ungated headers untouched', () => {
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => true,
+				} as DatalistTableHeader,
+			]);
+
+			expect(store.fields.value).toEqual([
+				'name',
+				'subject',
+				'agent',
+			]);
+		});
+
+		it('unwraps a ref returned by the access gate', () => {
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => ref(false),
+				} as DatalistTableHeader,
+			]);
+
+			expect(store.fields.value).toEqual([
+				'name',
+				'subject',
+			]);
+		});
+
+		it('does not resurrect a denied header from the persisted fields', async () => {
+			await router.push({
+				name: 'cases',
+				query: {
+					fields: 'agent,createdAt',
+				},
+			});
+
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => false,
+				} as DatalistTableHeader,
+			]);
+			await runWithRouter(() => store.setupPersistence());
+
+			expect(store.fields.value).toEqual([
+				'createdAt',
+			]);
+			expect(store.headers.value.map(({ field }) => field)).not.toContain(
+				'agent',
+			);
+		});
+
+		it('does not resurrect a denied header on reset', () => {
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => false,
+				} as DatalistTableHeader,
+			]);
+
+			store.$reset();
+
+			expect(store.headers.value.map(({ field }) => field)).not.toContain(
+				'agent',
+			);
+		});
+
+		it('keeps a field alive while another allowed header still claims it', async () => {
+			await router.push({
+				name: 'cases',
+				query: {
+					fields: 'member',
+				},
+			});
+
+			/* `member` and `memberId` share one API field — only one is gated */
+			const store = createGatedStore([
+				{
+					value: 'member',
+					field: 'member',
+					show: true,
+					sort: null,
+				} as DatalistTableHeader,
+				{
+					value: 'memberId',
+					field: 'member',
+					show: false,
+					sort: null,
+					access: () => false,
+				} as DatalistTableHeader,
+			]);
+			await runWithRouter(() => store.setupPersistence());
+
+			expect(store.headers.value.map(({ value }) => value)).toContain('member');
+			expect(store.headers.value.map(({ value }) => value)).not.toContain(
+				'memberId',
+			);
+			expect(store.fields.value).toEqual([
+				'member',
+			]);
+		});
+	});
+
 	describe('syncPersistence', () => {
 		it('publishes a customized column set', async () => {
 			const store = await setUpStore();

package/src/modules/headers/createTableHeadersStore.ts

@@ -1,7 +1,7 @@
 import type { WtTableSortOrder } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
 import { sortToQueryAdapter } from '@webitel/ui-sdk/scripts';
 import { SortSymbols } from '@webitel/ui-sdk/scripts/sortQueryAdapters';
-import { computed, nextTick, ref } from 'vue';
+import { computed, nextTick, ref, unref } from 'vue';
 
 import { createDatalistStore } from '../_shared/createDatalistStore';
 import {
@@ -24,7 +24,21 @@ export const tableHeadersStoreBody = ({
 	rawHeaders,
 	id,
 }: TableHeadersStoreBodyParams) => {
-	const headers = ref<DatalistTableHeader[]>(rawHeaders);
+	const isAllowed = (header: DatalistTableHeader) =>
+		!header.access || !!unref(header.access());
+
+	const allowedHeaders = rawHeaders.filter(isAllowed);
+
+	/* headers may share a `field`, so it stays allowed while any of them is */
+	const allowedFields = new Set(allowedHeaders.map((header) => header.field));
+	const deniedFields = new Set(
+		rawHeaders
+			.filter((header) => !isAllowed(header))
+			.map((header) => header.field)
+			.filter((field) => !allowedFields.has(field)),
+	);
+
+	const headers = ref<DatalistTableHeader[]>(allowedHeaders);
 	const isReorderingColumn = ref(false);
 
 	const shownHeaders = computed(() => {
@@ -64,7 +78,7 @@ export const tableHeadersStoreBody = ({
 	});
 
 	const $reset = () => {
-		headers.value = rawHeaders;
+		headers.value = allowedHeaders;
 	};
 
 	const updateShownHeaders = (value: DatalistTableHeader[]) => {
@@ -112,7 +126,10 @@ export const tableHeadersStoreBody = ({
 		});
 	};
 
-	const updateFields = (fields: string[]) => {
+	const updateFields = (persistedFields: string[]) => {
+		/* persisted state predates the gate, and unknown fields are revived below */
+		const fields = persistedFields.filter((field) => !deniedFields.has(field));
+
 		const fieldsSet = new Set(fields);
 		const mainFieldNames = new Set(headers.value.map((header) => header.field));
 

package/src/modules/types/tableStore.types.ts

@@ -13,6 +13,13 @@ import type { DatalistStoreProviderType } from './StoreProvider';
 export type DatalistTableHeader = WtTableHeader & {
 	field: string;
 	shouldBeInitialized?: boolean;
+	/**
+	 * Access gate supplied by the consuming app, evaluated once when the headers
+	 * store is created. Returning `false` drops the column completely: absent
+	 * from the column picker, never rendered, never requested, and not
+	 * restorable from persisted state. Omitted means allowed.
+	 */
+	access?: () => boolean | Ref<boolean>;
 };
 
 export type TrackSelectedRowBy<T> = (row: T) => T;