@webitel/ui-datalist 26.8.3 → 26.8.5

package/package.json

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

package/src/index.ts

@@ -1,5 +1,6 @@
+import { useNestedTableList } from './modules/table/composables/useNestedTableList';
 import { createTableStore } from './modules/table/createTableStore.store';
 import type { DatalistTableHeader } from './modules/types/tableStore.types';
 
 export type { DatalistTableHeader };
-export { createTableStore };
+export { createTableStore, useNestedTableList };

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/useCardComponent.ts

@@ -7,6 +7,10 @@ import { useCardAnyFieldEditedWatcher } from './useCardAnyFieldEditedWatcher';
 import { useCardIsNew } from './useCardIsNew';
 import { useCardRouting } from './useCardRouting';
 import { useCardSaveAction } from './useCardSaveAction';
+import {
+	type NestedListsOwner,
+	provideCardStore,
+} from './useCardStoreProvider';
 import { useCardValidation } from './useCardValidation';
 import { useItemCardSaveText } from './useItemCardSaveText';
 
@@ -31,6 +35,11 @@ export const useCardComponent = <
 }) => {
 	const cardStore = useCardStore();
 
+	// the nested tabs register their lists here, and the card empties them.
+	// `useCardStore` is a bare StoreDefinition, as everywhere else in here, so
+	// the store's own shape has to be asserted rather than inferred
+	provideCardStore(cardStore as unknown as NestedListsOwner);
+
 	const {
 		itemId,
 		originalItemInstance,

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/useCardStoreProvider.ts

@@ -0,0 +1,26 @@
+import { type InjectionKey, inject, provide } from 'vue';
+
+import type { CardItemId, NestedList } from '../types/CardStore.types';
+
+/**
+ * What a nested tab needs from the card page it lives in: the record it is a
+ * tab of, and somewhere to register its list so the card can empty it.
+ */
+export interface NestedListsOwner {
+	itemId: CardItemId;
+	registerNestedList: (list: NestedList) => void;
+}
+
+export const CardStoreKey: InjectionKey<NestedListsOwner> =
+	Symbol('datalistCardStore');
+
+/**
+ * `useCardComponent` provides the card's own store, so the tabs below it need
+ * no wiring of their own — see `useNestedTableList`.
+ */
+export const provideCardStore = (store: NestedListsOwner) => {
+	provide(CardStoreKey, store);
+};
+
+/** `null` outside a card page, where a list has no owner to reset it */
+export const useInjectedCardStore = () => inject(CardStoreKey, null);

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/index.ts

@@ -1,6 +1,7 @@
 export * from './composables/useCardAnyFieldEditedWatcher';
 export * from './composables/useCardComponent';
 export * from './composables/useCardListNavigation';
+export * from './composables/useCardStoreProvider';
 export * from './composables/useCardTabs';
 export * from './composables/useNestedCardComponent';
 export * from './stores/createCardStore';

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

@@ -0,0 +1,73 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { z } from 'zod/v4';
+
+import { createCardStore } from '../createCardStore';
+
+const cardStoreOf = (namespace: string) =>
+	createCardStore({
+		namespace,
+		apiModule: {
+			get: vi.fn(),
+			add: vi.fn(),
+			update: vi.fn(),
+		},
+		standardValidationSchema: z.object({
+			name: z.string().optional(),
+		}),
+	});
+
+/*
+ The lists of a card's nested tabs live in stores shared by every card of their
+ kind, so the card that filled them is the one that has to empty them.
+
+ [WTEL-10350](https://webitel.atlassian.net/browse/WTEL-10350)
+ */
+describe('createCardStore nested lists', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia());
+	});
+
+	it('empties every registered list on reset', () => {
+		const store = cardStoreOf('cases/card')();
+		const lists = [
+			{
+				$reset: vi.fn(),
+			},
+			{
+				$reset: vi.fn(),
+			},
+		];
+
+		for (const list of lists) store.registerNestedList(list);
+		store.$reset();
+
+		for (const list of lists) expect(list.$reset).toHaveBeenCalledOnce();
+	});
+
+	it('forgets them, so the next card resets only its own', () => {
+		const store = cardStoreOf('contacts/card')();
+		const list = {
+			$reset: vi.fn(),
+		};
+
+		store.registerNestedList(list);
+		store.$reset();
+		store.$reset();
+
+		expect(list.$reset).toHaveBeenCalledOnce();
+	});
+
+	it('registers a list once, however many times its tab is mounted', () => {
+		const store = cardStoreOf('queues/card')();
+		const list = {
+			$reset: vi.fn(),
+		};
+
+		store.registerNestedList(list);
+		store.registerNestedList(list);
+		store.$reset();
+
+		expect(list.$reset).toHaveBeenCalledOnce();
+	});
+});

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

@@ -10,7 +10,11 @@ import type { MaybeRef } from 'vue';
 import { effectScope, ref, toRaw, toValue, watch } from 'vue';
 import type { z } from 'zod/v4';
 
-import type { CardItemId, CardParentId } from '../types/CardStore.types';
+import type {
+	CardItemId,
+	CardParentId,
+	NestedList,
+} from '../types/CardStore.types';
 
 const defaultRegleValidationOptions: RegleSchemaBehaviourOptions &
 	RegleBehaviourOptions = {
@@ -167,12 +171,25 @@ export const createCardStore = <
 			}
 		};
 
+		/**
+		 * The lists of the card's nested tabs. They live in stores of their own,
+		 * shared by every card of this kind and outliving all of them, so the card
+		 * that filled them is the one that has to empty them.
+		 *
+		 * [WTEL-10350](https://webitel.atlassian.net/browse/WTEL-10350)
+		 */
+		const nestedLists = new Set<NestedList>();
+
+		const registerNestedList = (list: NestedList) => {
+			nestedLists.add(list);
+		};
+
 		const initialize = ({
 			itemId: initialItemId,
 			parentId: initialParentId,
 		}: {
 			itemId?: string | number;
-			parentId?: string | number;
+			parentId?: CardParentId;
 		} = {}) => {
 			if (initialParentId) {
 				parentId.value = initialParentId;
@@ -186,6 +203,9 @@ export const createCardStore = <
 		};
 
 		const $reset = () => {
+			for (const list of nestedLists) list.$reset();
+			nestedLists.clear();
+
 			itemId.value = null;
 			parentId.value = null;
 			createValidationSchema();
@@ -212,6 +232,7 @@ export const createCardStore = <
 			initialize,
 			saveItem,
 			$reset,
+			registerNestedList,
 		};
 	});
 };

package/src/modules/card/types/CardStore.types.ts

@@ -1,2 +1,10 @@
 export type CardItemId = string | number | null;
 export type CardParentId = CardItemId;
+
+/**
+ * What a card store needs from the list of one of its nested tabs: the ability
+ * to empty it when the card page goes away.
+ */
+export interface NestedList {
+	$reset: () => void;
+}