@webitel/ui-datalist 26.8.2 → 26.8.4

package/package.json

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

package/src/modules/card/composables/__tests__/useCardRouting.spec.ts

@@ -0,0 +1,146 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { effectScope, nextTick, type Ref, reactive, ref } from 'vue';
+
+import type { CardItemId } from '../../types/CardStore.types';
+import { useCardRouting } from '../useCardRouting';
+
+const mocks = vi.hoisted(() => ({
+	route: {
+		params: {},
+	} as {
+		params: Record<string, string>;
+	},
+	replace: vi.fn(),
+}));
+
+vi.mock('vue-router', () => ({
+	useRoute: () => mocks.route,
+	useRouter: () => ({
+		replace: mocks.replace,
+	}),
+}));
+
+/**
+ * A nested card lives inside its parent's card page, so the parent can be
+ * created underneath it: `route.params.id` goes from `'new'` to a real id while
+ * the popup is already mounted. A `parentId` captured as a plain string at
+ * setup keeps addressing `'new'`, and every nested request goes to
+ * `<entity>/new/<nested>`.
+ *
+ * [WTEL-10348](https://webitel.atlassian.net/browse/WTEL-10348)
+ */
+describe('useCardRouting', () => {
+	const run = (options: {
+		itemId: Ref<CardItemId>;
+		routeParamName?: string;
+		parentId?: (() => CardItemId) | string;
+	}) => {
+		const scope = effectScope(true);
+		const routing = scope.run(() => useCardRouting(options));
+
+		if (!routing) throw new Error('useCardRouting returned nothing');
+
+		return routing;
+	};
+
+	beforeEach(() => {
+		mocks.replace.mockReset();
+		mocks.replace.mockResolvedValue(undefined);
+		mocks.route = reactive({
+			params: {},
+		});
+	});
+
+	it('resolves a getter parent on read instead of capturing it', () => {
+		mocks.route.params = {
+			id: 'new',
+		};
+
+		const { parentId } = run({
+			itemId: ref(null),
+			routeParamName: 'bucketId',
+			parentId: () => mocks.route.params.id,
+		});
+
+		expect(parentId.value).toBe('new');
+
+		mocks.route.params = {
+			id: '42',
+		};
+
+		expect(parentId.value).toBe('42');
+	});
+
+	it('keeps accepting a plain string parent', () => {
+		const { parentId } = run({
+			itemId: ref(null),
+			routeParamName: 'bucketId',
+			parentId: '42',
+		});
+
+		expect(parentId.value).toBe('42');
+	});
+
+	it('writes the server id into the route of a newly created nested item', async () => {
+		mocks.route.params = {
+			id: '42',
+			bucketId: 'new',
+		};
+		const itemId = ref<CardItemId>(null);
+
+		run({
+			itemId,
+			routeParamName: 'bucketId',
+			parentId: () => mocks.route.params.id,
+		});
+
+		itemId.value = 7;
+		await nextTick();
+
+		expect(mocks.replace).toHaveBeenCalledWith({
+			params: {
+				id: '42',
+				bucketId: 7,
+			},
+		});
+	});
+
+	it('leaves the route alone for a nested item that already had an id', async () => {
+		mocks.route.params = {
+			id: '42',
+			bucketId: '7',
+		};
+		const itemId = ref<CardItemId>(null);
+
+		run({
+			itemId,
+			routeParamName: 'bucketId',
+			parentId: () => mocks.route.params.id,
+		});
+
+		itemId.value = 7;
+		await nextTick();
+
+		expect(mocks.replace).not.toHaveBeenCalled();
+	});
+
+	it('writes the server id into the route of a top-level card', async () => {
+		mocks.route.params = {
+			id: 'new',
+		};
+		const itemId = ref<CardItemId>(null);
+
+		run({
+			itemId,
+		});
+
+		itemId.value = 42;
+		await nextTick();
+
+		expect(mocks.replace).toHaveBeenCalledWith({
+			params: {
+				id: 42,
+			},
+		});
+	});
+});

package/src/modules/card/composables/useCardRouting.ts

@@ -1,35 +1,41 @@
-import { computed, type Ref, watch } from 'vue';
+import { computed, type MaybeRefOrGetter, type Ref, toValue, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import type { CardItemId } from '../types/CardStore.types';
+import type { CardItemId, CardParentId } from '../types/CardStore.types';
 
 /**
  * Routing logic shared by top-level and nested card components.
  *
  * - `routeParamName` — which `route.params` key holds the item ID (default: `'id'`)
  * - `parentId` — when provided, the card is treated as nested: URL is updated
- *   only when a newly created item receives its server-assigned ID
+ *   only when a newly created item receives its server-assigned ID. Pass a ref
+ *   or a getter whenever the parent can be created while the card is already
+ *   mounted — a popup living inside its parent's card page watches
+ *   `route.params.id` go from `'new'` to a real id underneath it, and a plain
+ *   string captured at setup would keep addressing `'new'`.
  */
 export const useCardRouting = ({
 	itemId,
 	routeParamName = 'id',
-	parentId,
+	parentId: rawParentId,
 	manualSetup = false,
 }: {
 	itemId: Ref<CardItemId>;
 	routeParamName?: string;
-	parentId?: string;
+	parentId?: MaybeRefOrGetter<CardParentId>;
 	manualSetup?: boolean;
 }) => {
 	const router = useRouter();
 	const route = useRoute();
 
 	const routeId = computed(() => route.params[routeParamName]);
+	/** resolved on read, so a nested card always addresses the current parent */
+	const parentId = computed(() => toValue(rawParentId));
 
 	if (!manualSetup) {
 		const unwatch = watch(itemId, async (next, prev) => {
 			if (next && !prev) {
-				if (!parentId || routeId.value === 'new') {
+				if (!parentId.value || routeId.value === 'new') {
 					await router.replace({
 						params: {
 							...route.params,

package/src/modules/card/composables/useNestedCardComponent.ts

@@ -1,6 +1,7 @@
 import { type StoreDefinition, storeToRefs } from 'pinia';
-import { watch } from 'vue';
+import { type MaybeRefOrGetter, watch } from 'vue';
 
+import type { CardParentId } from '../types/CardStore.types';
 import { useCardComponent } from './useCardComponent';
 import { useCardRouting } from './useCardRouting';
 
@@ -9,7 +10,9 @@ import { useCardRouting } from './useCardRouting';
  *
  * Wraps `useCardComponent` with `manualSetup: true` and delegates
  * routing to `useCardRouting`. Pass `parentId` from the component —
- * its presence indicates a nested card context.
+ * its presence indicates a nested card context. A ref or getter is read on
+ * every `initialize`, so a popup mounted while its parent was still `'new'`
+ * follows the parent's real id instead of addressing `'new'` forever.
  *
  * @example
  * ```ts
@@ -34,7 +37,7 @@ export const useNestedCardComponent = <
 	useCardStore: StoreDefinition;
 	onLoadErrorHandler?: (err: unknown) => void;
 	routeParamName: string;
-	parentId?: string;
+	parentId?: MaybeRefOrGetter<CardParentId>;
 }) => {
 	const cardSetup = useCardComponent<CardEntity>({
 		useCardStore,
@@ -46,7 +49,7 @@ export const useNestedCardComponent = <
 	const { itemId } = storeToRefs(cardStore);
 	const { initialize, $reset } = cardStore;
 
-	const { routeId } = useCardRouting({
+	const { routeId, parentId: currentParentId } = useCardRouting({
 		itemId,
 		routeParamName,
 		parentId,
@@ -58,7 +61,7 @@ export const useNestedCardComponent = <
 			if (value) {
 				initialize({
 					itemId: value === 'new' ? null : value,
-					parentId,
+					parentId: currentParentId.value,
 				});
 			} else {
 				$reset();

package/src/modules/card/stores/createCardStore.ts

@@ -172,7 +172,7 @@ export const createCardStore = <
 			parentId: initialParentId,
 		}: {
 			itemId?: string | number;
-			parentId?: string | number;
+			parentId?: CardParentId;
 		} = {}) => {
 			if (initialParentId) {
 				parentId.value = initialParentId;

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

@@ -0,0 +1,186 @@
+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();
+		});
+	});
+});

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;
 	};