@webitel/ui-datalist 26.8.3 → 26.8.5

package/src/modules/table/__tests__/createTableStore.spec.ts

@@ -0,0 +1,262 @@
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { createMemoryHistory, createRouter, type Router } from 'vue-router';
+
+import type { DatalistTableHeader } from '../../types/tableStore.types';
+import { createTableStore } from '../createTableStore.store';
+
+const routes = [
+	{
+		path: '/cases',
+		name: 'cases',
+		component: {
+			template: '<div />',
+		},
+	},
+];
+
+const headers = [
+	{
+		value: 'name',
+		field: 'name',
+		show: true,
+		sort: null,
+	},
+	{
+		value: 'subject',
+		field: 'subject',
+		show: true,
+		sort: null,
+	},
+] as DatalistTableHeader[];
+
+const flush = async () => {
+	for (let i = 0; i < 5; i += 1) {
+		await new Promise((resolve) => setTimeout(resolve));
+	}
+};
+
+/*
+ `setupStore` runs once per store, and the watchers it depends on must outlive
+ every component that renders the table. Registering them from the caller left
+ them owned by that component's effect scope, so a card tab that had been
+ walked away from came back inert — it loaded once and then ignored sort,
+ pagination, page size, column visibility and filters
+ ([WTEL-10308](https://webitel.atlassian.net/browse/WTEL-10308), fixed by
+ [WTEL-10277](https://webitel.atlassian.net/browse/WTEL-10277)).
+
+ Tables that keep persistence were spared by accident back then: their setup
+ awaits the restore, so the watchers landed with no active scope. Both settings
+ are covered here, because that difference was invisible until it broke.
+ */
+describe('tableStoreBody', () => {
+	let router: Router;
+	let getList: ReturnType<typeof vi.fn>;
+
+	beforeEach(async () => {
+		localStorage.clear();
+		sessionStorage.clear();
+		setActivePinia(createPinia());
+
+		router = createRouter({
+			history: createMemoryHistory(),
+			routes,
+		});
+		await router.push('/cases');
+		await router.isReady();
+
+		getList = vi.fn().mockResolvedValue({
+			items: [],
+			next: false,
+		});
+	});
+
+	/*
+   a tab on a card page: the table component is unmounted and mounted back as
+   the user walks the tabs, and the store outlives all of it
+   */
+	const mountTab = (useStore: ReturnType<typeof createTableStore>) => {
+		const Tab = defineComponent({
+			setup() {
+				const store = useStore();
+				/* a nested list is initialized with the card's id */
+				store.initialize({
+					parentId: '42',
+				});
+				return () => h('div');
+			},
+		});
+
+		return mount(Tab, {
+			global: {
+				plugins: [
+					router,
+				],
+			},
+		});
+	};
+
+	describe.each([
+		[
+			'with persistence',
+			false,
+		],
+		[
+			'without persistence',
+			true,
+		],
+	])('%s', (_label, disablePersistence) => {
+		let useStore: ReturnType<typeof createTableStore>;
+
+		beforeEach(async () => {
+			useStore = createTableStore(`cases-${disablePersistence}/datalist`, {
+				apiModule: {
+					getList,
+				},
+				headers,
+				disablePersistence,
+			});
+
+			const first = mountTab(useStore);
+			await flush();
+			first.unmount();
+			await flush();
+
+			mountTab(useStore);
+			await flush();
+
+			getList.mockClear();
+		});
+
+		it('reloads on sort after the component is remounted', async () => {
+			const store = useStore();
+
+			store.updateSort(store.headers[0]);
+			await flush();
+
+			expect(getList).toHaveBeenCalled();
+		});
+
+		it('reloads on size change after the component is remounted', async () => {
+			const store = useStore();
+
+			store.updateSize(20);
+			await flush();
+
+			expect(getList).toHaveBeenCalled();
+		});
+
+		it('reloads on page change after the component is remounted', async () => {
+			const store = useStore();
+
+			store.updatePage(2);
+			await flush();
+
+			expect(getList).toHaveBeenCalled();
+		});
+
+		it('reloads on search after the component is remounted', async () => {
+			const store = useStore();
+
+			store.addFilter({
+				name: 'search',
+				value: 'lorem',
+			});
+			await flush();
+
+			expect(getList).toHaveBeenCalled();
+		});
+
+		it('reloads on a hidden column after the component is remounted', async () => {
+			const store = useStore();
+
+			store.updateShownHeaders(
+				store.headers.map((header, index) => ({
+					...header,
+					show: index === 0,
+				})),
+			);
+			await flush();
+
+			expect(getList).toHaveBeenCalled();
+		});
+	});
+	/*
+   A nested list is emptied by the card store it is registered with, and until
+   it has a parent again it must not load: the store keeps the parent it was
+   initialized with, so a reload in between queried the previous card's record.
+
+   [WTEL-10350](https://webitel.atlassian.net/browse/WTEL-10350)
+  */
+	describe('$reset of a nested list', () => {
+		let useStore: ReturnType<typeof createTableStore>;
+
+		beforeEach(async () => {
+			useStore = createTableStore('cases-reset/datalist', {
+				apiModule: {
+					getList,
+				},
+				headers,
+				disablePersistence: true,
+			});
+
+			mountTab(useStore);
+			await flush();
+			getList.mockClear();
+		});
+
+		it('drops the rows, the parent and the pagination', async () => {
+			const store = useStore();
+			store.updatePage(3);
+			await flush();
+
+			store.$reset();
+
+			expect(store.dataList).toEqual([]);
+			expect(store.selected).toEqual([]);
+			expect(store.error).toBeNull();
+			expect(store.page).toBe(1);
+		});
+
+		it('keeps the headers, which are the user column choice', async () => {
+			const store = useStore();
+			store.updateShownHeaders(
+				store.headers.map((header, index) => ({
+					...header,
+					show: index === 0,
+				})),
+			);
+			await flush();
+			const shown = store.headers.map((header) => header.show);
+
+			store.$reset();
+
+			expect(store.headers.map((header) => header.show)).toEqual(shown);
+		});
+
+		it('loads nothing until it has a parent again', async () => {
+			const store = useStore();
+			store.$reset();
+			getList.mockClear();
+
+			await store.loadDataList();
+			store.updatePage(2);
+			await flush();
+
+			expect(getList).not.toHaveBeenCalled();
+
+			store.initialize({
+				parentId: '43',
+			});
+			await flush();
+
+			expect(getList).toHaveBeenCalledWith(
+				expect.objectContaining({
+					parentId: '43',
+				}),
+			);
+		});
+	});
+});

package/src/modules/table/__tests__/useNestedTableList.spec.ts

@@ -0,0 +1,218 @@
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, h, ref } from 'vue';
+import { createMemoryHistory, createRouter, type Router } from 'vue-router';
+
+import { provideCardStore } from '../../card/composables/useCardStoreProvider';
+import type { CardItemId } from '../../card/types/CardStore.types';
+import type { DatalistTableHeader } from '../../types/tableStore.types';
+import { useNestedTableList } from '../composables/useNestedTableList';
+import { createTableStore } from '../createTableStore.store';
+
+const routes = [
+	{
+		path: '/queues',
+		name: 'queues',
+		component: {
+			template: '<div />',
+		},
+	},
+];
+
+const headers = [
+	{
+		value: 'name',
+		field: 'name',
+		show: true,
+		sort: null,
+	},
+] as DatalistTableHeader[];
+
+const flush = async () => {
+	for (let i = 0; i < 5; i += 1) {
+		await new Promise((resolve) => setTimeout(resolve));
+	}
+};
+
+/*
+ A nested list store is shared by every card of its kind and outlives all of
+ them, so a tab that read it directly showed the rows of whichever record was
+ opened before — and a card for an unsaved record showed them until saved.
+
+ [WTEL-10350](https://webitel.atlassian.net/browse/WTEL-10350)
+ */
+describe('useNestedTableList', () => {
+	let router: Router;
+	let getList: ReturnType<typeof vi.fn>;
+	let useStore: ReturnType<typeof createTableStore>;
+	let namespace = 0;
+
+	beforeEach(async () => {
+		localStorage.clear();
+		sessionStorage.clear();
+		setActivePinia(createPinia());
+
+		router = createRouter({
+			history: createMemoryHistory(),
+			routes,
+		});
+		await router.push('/queues');
+		await router.isReady();
+
+		getList = vi.fn().mockImplementation(({ parentId }) =>
+			Promise.resolve({
+				items: [
+					{
+						id: 1,
+						name: `row of ${parentId}`,
+					},
+				],
+				next: false,
+			}),
+		);
+
+		namespace += 1;
+		useStore = createTableStore(`queue-buckets-${namespace}/datalist`, {
+			apiModule: {
+				getList,
+			},
+			headers,
+			disablePersistence: true,
+		});
+	});
+
+	/** a card page with one nested tab in it */
+	const openCard = (itemId: CardItemId) => {
+		const cardItemId = ref<CardItemId>(itemId);
+		const nestedLists = new Set<{
+			$reset: () => void;
+		}>();
+
+		const Tab = defineComponent({
+			setup() {
+				useNestedTableList({
+					useTableStore: useStore,
+				});
+				return () => h('div');
+			},
+		});
+
+		const Card = defineComponent({
+			setup() {
+				provideCardStore({
+					get itemId() {
+						return cardItemId.value;
+					},
+					registerNestedList: (list) => nestedLists.add(list),
+				});
+
+				return () => h(Tab);
+			},
+		});
+
+		const card = mount(Card, {
+			global: {
+				plugins: [
+					router,
+				],
+			},
+		});
+
+		/** what the card page does on unmount */
+		const close = () => {
+			for (const list of nestedLists) list.$reset();
+			nestedLists.clear();
+			card.unmount();
+		};
+
+		return {
+			card,
+			close,
+			cardItemId,
+			nestedLists,
+		};
+	};
+
+	it('loads the list of the card it is opened in', async () => {
+		openCard('42');
+		await flush();
+
+		expect(getList).toHaveBeenCalledWith(
+			expect.objectContaining({
+				parentId: '42',
+			}),
+		);
+		expect(useStore().dataList).toEqual([
+			{
+				id: 1,
+				name: 'row of 42',
+			},
+		]);
+	});
+
+	it('registers itself with the card, which empties it on close', async () => {
+		const first = openCard('42');
+		await flush();
+		expect(first.nestedLists.size).toBe(1);
+
+		first.close();
+		await flush();
+
+		expect(useStore().dataList).toEqual([]);
+		expect(first.nestedLists.size).toBe(0);
+	});
+
+	it('shows no rows of the previously opened card', async () => {
+		const first = openCard('42');
+		await flush();
+		first.close();
+		await flush();
+
+		getList.mockClear();
+		const second = openCard(null); // a record that is not saved yet
+		await flush();
+
+		expect(getList).not.toHaveBeenCalled();
+		expect(useStore().dataList).toEqual([]);
+		second.close();
+	});
+
+	it('loads once the unsaved record gets its id', async () => {
+		const card = openCard(null);
+		await flush();
+		expect(getList).not.toHaveBeenCalled();
+
+		card.cardItemId.value = '43';
+		await flush();
+
+		expect(getList).toHaveBeenCalledWith(
+			expect.objectContaining({
+				parentId: '43',
+			}),
+		);
+		expect(useStore().dataList).toEqual([
+			{
+				id: 1,
+				name: 'row of 43',
+			},
+		]);
+	});
+
+	it('does not reload the previous parent when the store reloads itself', async () => {
+		const first = openCard('42');
+		await flush();
+		first.close();
+		await flush();
+
+		getList.mockClear();
+		const store = useStore();
+
+		// what a pagination change does, with no card to belong to
+		store.updatePage(2);
+		await flush();
+
+		expect(getList).not.toHaveBeenCalled();
+		expect(store.dataList).toEqual([]);
+	});
+});

package/src/modules/table/composables/useNestedTableList.ts

@@ -0,0 +1,57 @@
+import type { StoreDefinition } from 'pinia';
+import { computed, type MaybeRefOrGetter, toValue, watch } from 'vue';
+
+import { useInjectedCardStore } from '../../card/composables/useCardStoreProvider';
+import type { CardItemId } from '../../card/types/CardStore.types';
+
+/**
+ * The list of a card page's nested tab.
+ *
+ * The store is shared by every card of its kind and outlives all of them, so a
+ * tab that read it directly showed the rows of whichever record was opened
+ * before — and a card for an unsaved record, having no id to initialize with,
+ * showed them until it was saved.
+ *
+ * Registering the list with the card store makes the card responsible for
+ * emptying it, and the parent to load comes from the card's own `itemId`: it
+ * arrives late for a record created from a nested tab, and the list follows.
+ *
+ * ```ts
+ * const tableStore = useNestedTableList({ useTableStore: useQueueBucketsStore });
+ * const { dataList, isLoading } = storeToRefs(tableStore);
+ * ```
+ *
+ * [WTEL-10350](https://webitel.atlassian.net/browse/WTEL-10350)
+ */
+export const useNestedTableList = ({
+	useTableStore,
+	parentId,
+}: {
+	useTableStore: StoreDefinition;
+	/** only where the parent is not the card's own record */
+	parentId?: MaybeRefOrGetter<CardItemId>;
+}) => {
+	const tableStore = useTableStore();
+	const cardStore = useInjectedCardStore();
+
+	cardStore?.registerNestedList(tableStore);
+
+	const parent = computed<CardItemId>(
+		() => toValue(parentId) ?? cardStore?.itemId ?? null,
+	);
+
+	watch(
+		parent,
+		(id) => {
+			if (id)
+				tableStore.initialize({
+					parentId: id,
+				});
+		},
+		{
+			immediate: true,
+		},
+	);
+
+	return tableStore;
+};

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

@@ -34,6 +34,13 @@ export const tableStoreBody = <Entity extends Identifiable>(
 	const useFiltersStore = createTableFiltersStore(namespace, config);
 
 	const parentId = ref();
+	/**
+	 * A list initialized with a `parentId` is nested in a card page, and stays
+	 * nested for the store's lifetime — the api module addresses its parent.
+	 * `parentId` is dropped on `$reset`, this is not: it is what tells a reset
+	 * store apart from a registry one that never had a parent.
+	 */
+	const isNested = ref(false);
 
 	const paginationStore = usePaginationStore();
 	const { page, size, next } = makeThisToRefs<typeof paginationStore>(
@@ -129,6 +136,15 @@ export const tableStoreBody = <Entity extends Identifiable>(
 	const loadDataList = async ({
 		withLoading = true,
 	}: LoadDataListOptions = {}) => {
+		/*
+     a nested list with no parent has nothing to address: either its card was
+     left (the card store reset it) or the record is not saved yet. Loading
+     here would query whatever parent the store held before.
+
+     [WTEL-10350](https://webitel.atlassian.net/browse/WTEL-10350)
+    */
+		if (isNested.value && !parentId.value) return;
+
 		if (withLoading) {
 			isLoading.value = true;
 		}
@@ -344,6 +360,7 @@ export const tableStoreBody = <Entity extends Identifiable>(
 	} = {}) => {
 		if (storeParentId) {
 			parentId.value = storeParentId;
+			isNested.value = true;
 		}
 
 		const isStoreAlreadySetUp = isStoreSetUp.value;
@@ -365,6 +382,24 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		return loadDataList();
 	};
 
+	/**
+	 * Drops everything that belonged to one parent record. Called by the card
+	 * store this list is registered with, when the card page goes away.
+	 *
+	 * Headers are left alone — they are the user's column choice, restored once
+	 * per app lifetime — and so is `isStoreSetUp`, for the same reason.
+	 */
+	const $reset = () => {
+		dataList.value = [];
+		selected.value = [];
+		error.value = null;
+		isLoading.value = false;
+		parentId.value = undefined;
+
+		paginationStore.$reset();
+		filtersManager.value.reset();
+	};
+
 	const resetInfiniteScrollTableParamsToDefaults = () => {
 		paginationStore.$reset();
 		filtersManager.value.reset();
@@ -373,6 +408,7 @@ export const tableStoreBody = <Entity extends Identifiable>(
 
 	return {
 		isStoreSetUp, // internal export for pinia devtools
+		isNested, // internal export for pinia devtools
 
 		dataList,
 		selected,
@@ -395,6 +431,7 @@ export const tableStoreBody = <Entity extends Identifiable>(
 
 		setupStore, // only setup, no data loading
 		initialize, // setup + load data
+		$reset, // drop the data and the parent binding
 		syncPersistence, // republish store state into the route query
 
 		loadDataList,