From 7c514cae75336ce0aae682c5e7344c332d714abe Mon Sep 17 00:00:00 2001
From: Ibrahim Mammadov <zxyctn@gmail.com>
Date: Tue, 3 Sep 2024 16:49:15 +0200
Subject: [PATCH] Update Facets with new params and add onChange action

---
 src/lib/components/Facets/Facets.svelte   | 162 ++++++++++++++++------
 src/lib/components/Facets/ShowMore.svelte |  52 +++----
 src/lib/models/Models.ts                  |  42 ++++--
 src/routes/components/facets/data/data.ts | 130 +++++++++--------
 4 files changed, 240 insertions(+), 146 deletions(-)

diff --git a/src/lib/components/Facets/Facets.svelte b/src/lib/components/Facets/Facets.svelte
index cbfb4992..f257436f 100644
--- a/src/lib/components/Facets/Facets.svelte
+++ b/src/lib/components/Facets/Facets.svelte
@@ -1,36 +1,71 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import { getModalStore, Modal, TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
 
 	import ShowMore from './ShowMore.svelte';
-	import type { FacetOption, FacetGroup } from '$models/Models';
+	import type { FacetGroup, SelectedFacetGroup } from '$models/Models';
 
 	export let groupSelection = false;
-	export let groups: FacetGroup;
-	export let selected: FacetGroup;
-	export let selectedGroups: { [key: string]: boolean } = {};
+	export let groups: FacetGroup[];
 	export let showAll = false;
 	export let open = false;
 
+	let displayedGroups = structuredClone(groups);
+
+	let selected: { [key: string]: SelectedFacetGroup } = groups.reduce((acc, g) => {
+		const children = g.children.reduce((acc, c) => {
+			acc[c.name] = {
+				...c,
+				selected: false
+			};
+			return acc;
+		}, {});
+
+		acc[g.name] = {
+			...g,
+			children,
+			selected: false
+		};
+
+		return acc;
+	}, {});
+	let selectedItems: {
+		[key: string]: {
+			[key: string]: boolean;
+		};
+	} = {};
+	let selectedGroups: { [key: string]: boolean } = {};
+
+	Object.keys(selected).forEach((groupName) => {
+		selectedItems[groupName] = {};
+		Object.keys(selected[groupName].children).forEach((itemName) => {
+			selectedItems[groupName][itemName] = false;
+		});
+		selectedGroups[groupName] = false;
+	});
+
+	const dispatch = createEventDispatcher();
+	
 	const modalStore = getModalStore();
-	const showMore = (group: string) => {
+	const showMore = (group: SelectedFacetGroup) => {
 		modalStore.trigger({
 			type: 'component',
-			title: `${group}`,
+			title: `${group.displayName}`,
 			component: {
 				ref: ShowMore,
 				props: {
 					group,
 					handleSave,
-					handleCancel,
-					selected: selected[group],
-					items: groups[group].sort((a, b) => a.value.localeCompare(b.value))
+					handleCancel
 				}
 			}
 		});
 	};
 
-	const handleSave = (group: string, selectedItems: FacetOption[]) => {
-		selected[group] = selectedItems;
+	const handleSave = (group: SelectedFacetGroup) => {
+		Object.keys(group.children).forEach((key) => {
+			selectedItems[group.name][key] = group.children[key].selected;
+		});
 		modalStore.close();
 	};
 
@@ -38,77 +73,120 @@
 		modalStore.close();
 	};
 
+	const mapSelected = (type: 'items' | 'groups') => {
+		const changed: any = [];
+
+		if (type === 'items') {
+			Object.keys(selectedItems).forEach((group) => {
+				Object.keys(selectedItems[group]).forEach((item) => {
+					if (selectedItems[group][item] !== selected[group].children[item].selected) {
+						changed.push({
+							parent: group,
+							selectedItem: item
+						});
+						selected[group].children[item].selected = selectedItems[group][item];
+					}
+				});
+			});
+		} else {
+			Object.keys(selectedGroups).forEach((group) => {
+				if (selectedGroups[group] !== selected[group].selected) {
+					changed.push({
+						parent: null,
+						selectedItem: group
+					});
+					selected[group].selected = selectedGroups[group];
+				}
+			});
+		}
+
+		dispatch('change', changed);
+	};
+
 	const sortOptions = () => {
 		// Sort facets in a descending order if count exits, or sort alphabetically
-		Object.keys(groups).forEach((group) => {
-			groups[group] = [
-				...selected[group].sort((a, b) => {
+		Object.keys(selected).forEach((group) => {
+			const checked = Object.keys(selected[group].children)
+				.filter((item) => selected[group].children[item].selected)
+				.map((item) => selected[group].children[item])
+				.sort((a, b) => {
 					if (a.count != undefined && b.count != undefined) {
 						return b.count - a.count;
 					}
-					return a.value.localeCompare(b.value);
-				}),
-				...groups[group]
-					.filter((item) => !selected[group].includes(item))
-					.sort((a, b) => {
-						if (a.count != undefined && b.count != undefined) {
-							return b.count - a.count;
-						}
-						return a.value.localeCompare(b.value);
-					})
+					return a.displayName.localeCompare(b.displayName);
+				})
+				.map((item) => item.name);
+
+			const unchecked = Object.keys(selected[group].children).filter(
+				(item) => !checked.includes(item)
+			);
+
+			const groupIndex = displayedGroups.findIndex((g) => g.name === group);
+
+			displayedGroups[groupIndex].children = [
+				...checked.map(
+					(item) => displayedGroups[groupIndex].children.find((i) => i.name === item)!
+				),
+				...unchecked.map(
+					(item) => displayedGroups[groupIndex].children.find((i) => i.name === item)!
+				)
 			];
 		});
 	};
 
-	$: selected, sortOptions();
+	$: selectedItems, mapSelected('items'), sortOptions();
+	$: selectedGroups, mapSelected('groups');
 </script>
 
 <TreeView selection={groupSelection} multiple={groupSelection} padding="p-1" hover="">
-	{#each Object.keys(groups) as group}
+	{#each displayedGroups as group}
 		<TreeViewItem
-			name="groups"
-			value={group}
+			name={group.name}
+			value={group.name}
 			{open}
 			hyphenOpacity="opacity-0"
+			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
-			bind:checked={selectedGroups[group]}
 		>
-			<p class="font-semibold">{group}</p>
+			<p class="font-semibold">{group.displayName}</p>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->
 				{#if !showAll}
-					{#each groups[group].slice(0, 5) as item}
+					{#each group.children.slice(0, 5) as item}
 						<TreeViewItem
-							bind:group={selected[group]}
-							name={group}
-							value={item}
+							bind:group={selectedItems[group.name]}
+							name={item.name}
+							value={item.displayName}
 							hyphenOpacity="opacity-0"
+							bind:checked={selectedItems[group.name][item.name]}
 							spacing="space-x-3"
 							selection
 							multiple
 						>
-							<p>{item.value} ({item.count})</p>
+							<p>{item.displayName} ({item.count})</p>
 						</TreeViewItem>
 					{/each}
 					<!-- Trigger for the Modal to view all options -->
-					{#if groups[group].length > 5}
+					{#if group.children.length > 5}
 						<TreeViewItem hyphenOpacity="opacity-0">
-							<button class="anchor" on:click={() => showMore(group)}>more</button></TreeViewItem
+							<button class="anchor" on:click={() => showMore(selected[group.name])}>more</button
+							></TreeViewItem
 						>
 					{/if}
 				{:else}
-					{#each groups[group] as item}
+					{#each group.children as item}
 						<TreeViewItem
-							bind:group={selected[group]}
-							name={group}
-							value={item}
+							bind:group={selectedItems[group.name]}
+							bind:checked={selectedItems[group.name][item.name]}
+							name={item.name}
+							value={item.displayName}
 							hyphenOpacity="opacity-0"
 							spacing="space-x-3"
 							selection
 							multiple
 						>
-							<p>{item.value} ({item.count})</p>
+							<p>{item.displayName} ({item.count})</p>
 						</TreeViewItem>
 					{/each}
 				{/if}
diff --git a/src/lib/components/Facets/ShowMore.svelte b/src/lib/components/Facets/ShowMore.svelte
index 5c489d27..41067b65 100644
--- a/src/lib/components/Facets/ShowMore.svelte
+++ b/src/lib/components/Facets/ShowMore.svelte
@@ -1,42 +1,34 @@
 <script lang="ts">
-	import type { FacetOption } from '$models/Models';
+	import type { SelectedFacetGroup } from '$models/Models';
 
-	export let group: string; // Group name
-	export let items: FacetOption[]; // All possible choices
-	export let selected: FacetOption[]; // Initially selected items
-	export let handleSave: (group: string, selectedItems: FacetOption[]) => {};
+	export let group: SelectedFacetGroup;
+	export let handleSave: (group: SelectedFacetGroup) => {};
 	export let handleCancel: () => {};
 
-	// This local variable is needed for resetting the Modal when the user cancels selection.
-	let selectedItems = selected; // Selected items in the Modal.
-
-	const handleCheck = (e, index: number) => {
-		const target = e.target as HTMLInputElement;
-		if (target.checked) {
-			selectedItems = [...selectedItems, items[index]];
-		} else {
-			selectedItems = selectedItems.filter((item) => item !== items[index]);
-		}
-	};
+	let selected = structuredClone(group.children);
 
 	const selectAll = () => {
-		selectedItems = items;
+		Object.keys(selected).forEach((key) => (selected[key].selected = true));
 	};
 
 	const selectNone = () => {
-		selectedItems = [];
+		Object.keys(selected).forEach((key) => (selected[key].selected = false));
 	};
 
 	const onSave = () => {
-		handleSave(group, selectedItems);
+		handleSave({
+			...group,
+			children: selected
+		});
 	};
 
 	const onCancel = () => {
-		selectedItems = selected;
+		console.log(selected, group.children);
+		selected = structuredClone(group.children);
 		handleCancel();
 	};
 
-	const gridClass = (items: FacetOption[]) => {
+	const gridClass = (items: any[]) => {
 		if (items.length >= 50) {
 			return 'grid-cols-5';
 		} else if (items.length >= 30) {
@@ -51,24 +43,20 @@
 
 <div class="p-5 rounded-md bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
 	<!-- Header -->
-	<h2 class="text-xl font-semibold">{group}</h2>
+	<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
 	<!-- Items -->
 	<div
 		class="grid {gridClass(
-			items
+			Object.keys(selected)
 		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
 	>
-		{#each items as item, index}
+		{#each Object.keys(selected) as key}
 			<label class="flex gap-3 items-center">
-				<input
-					type="checkbox"
-					class="checkbox"
-					value={item.value}
-					on:click={(e) => handleCheck(e, index)}
-					checked={selectedItems.includes(item)}
-				/>
-				<span class="whitespace-nowrap break-before-avoid break-after-avoid">{item.value}</span>
+				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
+				<span class="whitespace-nowrap break-before-avoid break-after-avoid"
+					>{selected[key].displayName}</span
+				>
 			</label>
 		{/each}
 	</div>
diff --git a/src/lib/models/Models.ts b/src/lib/models/Models.ts
index a3c77124..6505df10 100644
--- a/src/lib/models/Models.ts
+++ b/src/lib/models/Models.ts
@@ -104,7 +104,7 @@ export interface Columns {
 	[key: string]: Column;
 }
 
-// Server config type for the table 
+// Server config type for the table
 export type ServerConfig = {
 	baseUrl?: string; // Base URL for server-side table
 	sendModel?: Send; // Send model for server-side table
@@ -191,14 +191,29 @@ export type Filter = {
 	value: string | number | Date | boolean;
 };
 
-export type FacetOption = {
-	value: string;
+export interface FacetOption {
+	name: string;
+	displayName: string;
 	count?: number;
-};
+}
 
-export type FacetGroup = {
-	[key: string]: FacetOption[];
-};
+export interface FacetGroup {
+	name: string;
+	displayName: string;
+	children: FacetOption[];
+	count?: number;
+}
+
+export interface SelectedFacetOption extends FacetOption {
+	selected: boolean;
+}
+
+export interface SelectedFacetGroup extends Omit<FacetGroup, 'children'> {
+	selected: boolean;
+	children: {
+		[key: string]: SelectedFacetOption;
+	};
+}
 
 export class Send {
 	id: number;
@@ -237,14 +252,13 @@ export class Receive {
 export class errorType {
 	statusText: string;
 	status: number;
-	error:string;
-	stackTrace:string
+	error: string;
+	stackTrace: string;
 
 	constructor() {
-		this.statusText = "";
+		this.statusText = '';
 		this.status = 0;
-		this.error = "";
-		this.stackTrace = "";
+		this.error = '';
+		this.stackTrace = '';
 	}
-
-};
+}
diff --git a/src/routes/components/facets/data/data.ts b/src/routes/components/facets/data/data.ts
index 97b33825..8c442be0 100644
--- a/src/routes/components/facets/data/data.ts
+++ b/src/routes/components/facets/data/data.ts
@@ -1,58 +1,72 @@
-export const groups = {
-	Mediums: [
-		{ value: 'books', count: 1 },
-		{ value: 'movies', count: 2 },
-		{ value: 'music', count: 3 },
-		{ value: 'podcasts', count: 4 },
-		{ value: 'articles', count: 5 },
-		{ value: 'blogs', count: 6 }
-	],
-	Genres: [
-		{ value: 'fiction', count: 0 },
-		{ value: 'non-fiction', count: 1 },
-		{ value: 'comedy', count: 2 },
-		{ value: 'drama', count: 3 },
-		{ value: 'action', count: 4 },
-		{ value: 'romance', count: 5 },
-		{ value: 'thriller', count: 6 },
-		{ value: 'horror', count: 7 },
-		{ value: 'sci-fi', count: 8 },
-		{ value: 'fantasy', count: 9 },
-		{ value: 'adventure', count: 10 },
-		{ value: 'animation', count: 20 },
-		{ value: 'biography', count: 30 },
-		{ value: 'crime', count: 10 },
-		{ value: 'documentary', count: 0 },
-		{ value: 'family', count: 1 },
-		{ value: 'history', count: 2 },
-		{ value: 'musical', count: 3 },
-		{ value: 'mystery', count: 4 },
-		{ value: 'war', count: 5 },
-		{ value: 'western', count: 6 },
-		{ value: 'sport', count: 7 },
-		{ value: 'superhero', count: 8 },
-		{ value: 'noir', count: 9 },
-		{ value: 'disaster', count: 10 },
-		{ value: 'spy', count: 82 },
-		{ value: 'martial arts', count: 2 },
-		{ value: 'satire', count: 5 },
-		{ value: 'black comedy', count: 7 },
-		{ value: 'psychological thriller', count: 9 },
-		{ value: 'erotica', count: 3 },
-		{ value: 'experimental', count: 20 },
-		{ value: 'political thriller', count: 10 },
-		{ value: 'coming-of-age', count: 30 },
-		{ value: 'silent film', count: 40 },
-		{ value: 'mockumentary', count: 50 },
-		{ value: 'holiday', count: 10 },
-		{ value: 'music', count: 10 },
-		{ value: 'dance', count: 5 },
-		{ value: 'teen', count: 12 },
-	],
-	Authors: [
-		{ value: 'Stephen King', count: 10 },
-		{ value: 'J.K. Rowling', count: 3 },
-		{ value: 'Agatha Christie', count: 4 },
-		{ value: 'Dan Brown', count: 7 }
-	]
-};
+import type { FacetGroup } from '$models/Models';
+
+export const groups: FacetGroup[] = [
+	{
+		children: [
+			{ name: 'books', displayName: 'books', count: 1 },
+			{ name: 'movies', displayName: 'movies', count: 2 },
+			{ name: 'music', displayName: 'music', count: 3 },
+			{ name: 'podcasts', displayName: 'podcasts', count: 4 },
+			{ name: 'articles', displayName: 'articles', count: 5 },
+			{ name: 'blogs', displayName: 'blogs', count: 6 }
+		],
+		name: 'mediums',
+		displayName: 'Mediums'
+	},
+	{
+		children: [
+			{ name: 'fiction', displayName: 'fiction', count: 0 },
+			{ name: 'non-fiction', displayName: 'non-fiction', count: 1 },
+			{ name: 'comedy', displayName: 'comedy', count: 2 },
+			{ name: 'drama', displayName: 'drama', count: 3 },
+			{ name: 'action', displayName: 'action', count: 4 },
+			{ name: 'romance', displayName: 'romance', count: 5 },
+			{ name: 'thriller', displayName: 'thriller', count: 6 },
+			{ name: 'horror', displayName: 'horror', count: 7 },
+			{ name: 'sci-fi', displayName: 'sci-fi', count: 8 },
+			{ name: 'fantasy', displayName: 'fantasy', count: 9 },
+			{ name: 'adventure', displayName: 'adventure', count: 10 },
+			{ name: 'animation', displayName: 'animation', count: 20 },
+			{ name: 'biography', displayName: 'biography', count: 30 },
+			{ name: 'crime', displayName: 'crime', count: 10 },
+			{ name: 'documentary', displayName: 'documentary', count: 0 },
+			{ name: 'family', displayName: 'family', count: 1 },
+			{ name: 'history', displayName: 'history', count: 2 },
+			{ name: 'musical', displayName: 'musical', count: 3 },
+			{ name: 'mystery', displayName: 'mystery', count: 4 },
+			{ name: 'war', displayName: 'war', count: 5 },
+			{ name: 'western', displayName: 'western', count: 6 },
+			{ name: 'sport', displayName: 'sport', count: 7 },
+			{ name: 'superhero', displayName: 'superhero', count: 8 },
+			{ name: 'noir', displayName: 'noir', count: 9 },
+			{ name: 'disaster', displayName: 'disaster', count: 10 },
+			{ name: 'spy', displayName: 'spy', count: 82 },
+			{ name: 'martial arts', displayName: 'martial arts', count: 2 },
+			{ name: 'satire', displayName: 'satire', count: 5 },
+			{ name: 'black comedy', displayName: 'black comedy', count: 7 },
+			{ name: 'psychological thriller', displayName: 'psychological thriller', count: 9 },
+			{ name: 'erotica', displayName: 'erotica', count: 3 },
+			{ name: 'experimental', displayName: 'experimental', count: 20 },
+			{ name: 'political thriller', displayName: 'political thriller', count: 10 },
+			{ name: 'coming-of-age', displayName: 'coming-of-age', count: 30 },
+			{ name: 'silent film', displayName: 'silent film', count: 40 },
+			{ name: 'mockumentary', displayName: 'mockumentary', count: 50 },
+			{ name: 'holiday', displayName: 'holiday', count: 10 },
+			{ name: 'music', displayName: 'music', count: 10 },
+			{ name: 'dance', displayName: 'dance', count: 5 },
+			{ name: 'teen', displayName: 'teen', count: 12 }
+		],
+		name: 'genres',
+		displayName: 'Genres'
+	},
+	{
+		children: [
+			{ name: 'Stephen King', displayName: 'Stephen King', count: 10 },
+			{ name: 'J.K. Rowling', displayName: 'J.K. Rowling', count: 3 },
+			{ name: 'Agatha Christie', displayName: 'Agatha Christie', count: 4 },
+			{ name: 'Dan Brown', displayName: 'Dan Brown', count: 7 }
+		],
+		name: 'authors',
+		displayName: 'Authors'
+	}
+];