LPP-60015 persist previous page values in multiSelect itemSelector

modules/apps/item-selector/item-selector-web/src/main/resources/META-INF/resources/js/ViewItemSelectorViewDescriptorMultiple.ts

@@ -16,25 +16,75 @@ export default function ({
 	itemSelectorSelectedEvent,
 	namespace,
 }: Props) {
+	const searchContainer = Liferay.SearchContainer.get(`${namespace}entries`);
+	const containerId = `${namespace}entries`;
 
-	// @ts-ignore
+	const GLOBAL_KEY = `${namespace}__idToJsonMap`;
+	const idToJsonMap: Map<string, string> =
+		(window as any)[GLOBAL_KEY] || new Map<string, string>();
+	(window as any)[GLOBAL_KEY] = idToJsonMap;
 
-	const searchContainer = Liferay.SearchContainer.get(`${namespace}entries`);
+	const getContainer = (): HTMLElement | null =>
+		document.getElementById(containerId);
+
+	const getIdFromJsonString = (
+		jsonStr: string | undefined | null
+	): string | null => {
+		if (!jsonStr) {return null;}
+		try {
+			const obj = JSON.parse(jsonStr);
+			const id = obj?.assetEntryId ?? obj?.classPK;
+
+			return id != null ? String(id) : null;
+		}
+		catch {
+			return null;
+		}
+	};
+
+	const indexVisibleRows = () => {
+		const container = getContainer();
+		if (!container) {return;}
+
+		const rows = container.querySelectorAll<HTMLElement>(
+			'li[data-value], tr[data-value], dd[data-value]'
+		);
+
+		rows.forEach((row) => {
+			const jsonStr = row.dataset.value;
+			const id = getIdFromJsonString(jsonStr);
+			if (id && jsonStr) {
+				idToJsonMap.set(id, jsonStr);
+			}
+		});
+	};
+
+	const getSelectedIds = (): string[] => {
+		const nodeList = searchContainer.select.getAllSelectedElements();
+		const ids: string[] = [];
+
+		nodeList.each((node: any) => {
+			const v = node.get('value');
+			if (v != null) {ids.push(String(v));}
+		});
+
+		return Array.from(new Set(ids));
+	};
+
+	const buildPayload = (): string[] => {
+		indexVisibleRows();
+		const ids = getSelectedIds();
+
+		return ids.map((id) => idToJsonMap.get(id) ?? id);
+	};
 
 	const searchContainerOnHandler = searchContainer.on('rowToggled', () => {
-		const searchContainerItems: HTMLElement[] = searchContainer.select
-			.getAllSelectedElements()
-			.getDOMNodes();
+		const payload = buildPayload();
 
 		getOpener().Liferay.fire(itemSelectorSelectedEvent, {
 			data: {
 				returnType: itemSelectorReturnType,
-				value: searchContainerItems
-					.map((item: HTMLElement) => item.closest('li, tr, dd'))
-					.filter((domElement): domElement is HTMLElement =>
-						Boolean(domElement)
-					)
-					.map((domElement) => domElement.dataset.value),
+				value: payload,
 			},
 		});
 	});