@bexis2/bexis2-core-ui 0.4.15 → 0.4.17

package/README.md

@@ -1,4 +1,12 @@
 # bexis-core-ui
+## 0.4.17
+- Table
+  - Fix client-side search
+## 0.4.16
+- Facets
+  - Replaces groups array with a writable store to re-render component on data manipulation.
+  - Adds selected attribute to the type so that Facets can be initialized with some selected values.
+
 ## 0.4.15
 - Update Facets with new params and add onChange action
   - Changes structure of Facets data

package/dist/components/Facets/Facets.svelte

@@ -5,31 +5,9 @@ export let groupSelection = false;
 export let groups;
 export let showAll = false;
 export let open = false;
-let displayedGroups = structuredClone(groups);
-let selected = groups.reduce((acc, g) => {
-  const children = g.children.reduce((acc2, c) => {
-    acc2[c.name] = {
-      ...c,
-      selected: false
-    };
-    return acc2;
-  }, {});
-  acc[g.name] = {
-    ...g,
-    children,
-    selected: false
-  };
-  return acc;
-}, {});
+let selected;
 let selectedItems = {};
 let selectedGroups = {};
-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) => {
@@ -48,7 +26,7 @@ const showMore = (group) => {
 };
 const handleSave = (group) => {
   Object.keys(group.children).forEach((key) => {
-    selectedItems[group.name][key] = group.children[key].selected;
+    selectedItems[group.name][key] = group.children[key].selected || false;
   });
   modalStore.close();
 };
@@ -80,7 +58,7 @@ const mapSelected = (type) => {
       }
     });
   }
-  dispatch("change", changed);
+  changed.length && dispatch("change", changed);
 };
 const sortOptions = () => {
   Object.keys(selected).forEach((group) => {
@@ -104,6 +82,31 @@ const sortOptions = () => {
     ];
   });
 };
+groups.subscribe((data) => {
+  selected = data.reduce((acc, g) => {
+    const children = g.children.reduce((acc2, c) => {
+      acc2[c.name] = {
+        ...c,
+        selected: c.selected || false
+      };
+      return acc2;
+    }, {});
+    acc[g.name] = {
+      ...g,
+      children,
+      selected: g.selected || false
+    };
+    return acc;
+  }, {});
+  Object.keys(selected).forEach((groupName) => {
+    selectedItems[groupName] = {};
+    Object.keys(selected[groupName].children).forEach((itemName) => {
+      selectedItems[groupName][itemName] = selected[groupName].children[itemName].selected || false;
+    });
+    selectedGroups[groupName] = selected[groupName].selected || false;
+  });
+});
+$: displayedGroups = structuredClone($groups);
 $: selectedItems, mapSelected("items"), sortOptions();
 $: selectedGroups, mapSelected("groups");
 </script>
@@ -118,7 +121,9 @@ $: selectedGroups, mapSelected("groups");
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
 		>
-			<p class="font-semibold">{group.displayName}</p>
+			<p class="font-semibold">
+				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
+			</p>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->

package/dist/components/Facets/Facets.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
+import type { Writable } from 'svelte/store';
 import type { FacetGroup } from '../../models/Models';
 declare const __propDef: {
     props: {
         groupSelection?: boolean;
-        groups: FacetGroup[];
+        groups: Writable<FacetGroup[]>;
         showAll?: boolean;
         open?: boolean;
     };

package/dist/components/Table/TableContent.svelte

@@ -321,9 +321,11 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 				<form
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
-						if (!sendModel) throw new Error('Server-side configuration is missing');
-
-						sendModel.q = searchValue;
+						if (serverSide && !sendModel) {
+throw new Error('Server-side configuration is missing');
+} else {
+sendModel.q = searchValue;
+}
 						$filterValue = searchValue;
 					}}
 				>
@@ -339,10 +341,15 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
-								if (!sendModel) throw new Error('Server-side configuration is missing');
+								if (serverSide && !sendModel) {
+throw new Error('Server-side configuration is missing');
+} else {
+sendModel.q = '';
+}
+
+							$filterValue = searchValue;
 
 								searchValue = '';
-								sendModel.q = '';
 								$filterValue = '';
 							}}><Fa icon={faXmark} /></button
 						>
@@ -352,10 +359,13 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
-							if (!sendModel) throw new Error('Server-side configuration is missing');
+							if (serverSide && !sendModel) {
+throw new Error('Server-side configuration is missing');
+} else {
+sendModel.q = searchValue;
+}
 
 							$filterValue = searchValue;
-							sendModel.q = searchValue;
 						}}>Search</button
 					>
 				</form>

package/dist/index.d.ts

@@ -20,6 +20,7 @@ import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
 import Facets from './components/Facets/Facets.svelte';
+import type { FacetGroup, FacetOption, SelectedFacetGroup } from './models/Models';
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
@@ -40,6 +41,7 @@ export { TablePlaceholder };
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
 export { Facets };
+export type { FacetGroup, FacetOption, SelectedFacetGroup };
 export { CodeEditor };
 export type { TableConfig, Columns, Column };
 export { bexis2theme };

package/dist/models/Models.d.ts

@@ -155,20 +155,18 @@ export interface FacetOption {
     name: string;
     displayName: string;
     count?: number;
+    selected?: boolean;
 }
 export interface FacetGroup {
     name: string;
     displayName: string;
+    selected?: boolean;
     children: FacetOption[];
     count?: number;
 }
-export interface SelectedFacetOption extends FacetOption {
-    selected: boolean;
-}
 export interface SelectedFacetGroup extends Omit<FacetGroup, 'children'> {
-    selected: boolean;
     children: {
-        [key: string]: SelectedFacetOption;
+        [key: string]: FacetOption;
     };
 }
 export declare class Send {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.15",
+  "version": "0.4.17",
   "private": false,
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/Facets/Facets.svelte

@@ -1,34 +1,17 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { getModalStore, Modal, TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
+	import type { Writable } from 'svelte/store';
 
 	import ShowMore from './ShowMore.svelte';
 	import type { FacetGroup, SelectedFacetGroup } from '$models/Models';
 
 	export let groupSelection = false;
-	export let groups: FacetGroup[];
+	export let groups: Writable<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 selected: { [key: string]: SelectedFacetGroup };
 	let selectedItems: {
 		[key: string]: {
 			[key: string]: boolean;
@@ -36,16 +19,8 @@
 	} = {};
 	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: SelectedFacetGroup) => {
 		modalStore.trigger({
@@ -64,7 +39,7 @@
 
 	const handleSave = (group: SelectedFacetGroup) => {
 		Object.keys(group.children).forEach((key) => {
-			selectedItems[group.name][key] = group.children[key].selected;
+			selectedItems[group.name][key] = group.children[key].selected || false;
 		});
 		modalStore.close();
 	};
@@ -100,7 +75,7 @@
 			});
 		}
 
-		dispatch('change', changed);
+		changed.length && dispatch('change', changed);
 	};
 
 	const sortOptions = () => {
@@ -134,6 +109,36 @@
 		});
 	};
 
+	groups.subscribe((data) => {
+		selected = data.reduce((acc, g) => {
+			const children = g.children.reduce((acc, c) => {
+				acc[c.name] = {
+					...c,
+					selected: c.selected || false
+				};
+				return acc;
+			}, {});
+
+			acc[g.name] = {
+				...g,
+				children,
+				selected: g.selected || false
+			};
+
+			return acc;
+		}, {});
+
+		Object.keys(selected).forEach((groupName) => {
+			selectedItems[groupName] = {};
+			Object.keys(selected[groupName].children).forEach((itemName) => {
+				selectedItems[groupName][itemName] =
+					selected[groupName].children[itemName].selected || false;
+			});
+			selectedGroups[groupName] = selected[groupName].selected || false;
+		});
+	});
+
+	$: displayedGroups = structuredClone($groups);
 	$: selectedItems, mapSelected('items'), sortOptions();
 	$: selectedGroups, mapSelected('groups');
 </script>
@@ -148,7 +153,9 @@
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
 		>
-			<p class="font-semibold">{group.displayName}</p>
+			<p class="font-semibold">
+				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
+			</p>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->

package/src/lib/components/Table/TableContent.svelte

@@ -389,9 +389,11 @@
 				<form
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
-						if (!sendModel) throw new Error('Server-side configuration is missing');
-
-						sendModel.q = searchValue;
+						if (serverSide && !sendModel) {
+throw new Error('Server-side configuration is missing');
+} else {
+sendModel.q = searchValue;
+}
 						$filterValue = searchValue;
 					}}
 				>
@@ -407,10 +409,15 @@
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
-								if (!sendModel) throw new Error('Server-side configuration is missing');
+								if (serverSide && !sendModel) {
+throw new Error('Server-side configuration is missing');
+} else {
+sendModel.q = '';
+}
+
+							$filterValue = searchValue;
 
 								searchValue = '';
-								sendModel.q = '';
 								$filterValue = '';
 							}}><Fa icon={faXmark} /></button
 						>
@@ -420,10 +427,13 @@
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
-							if (!sendModel) throw new Error('Server-side configuration is missing');
+							if (serverSide && !sendModel) {
+throw new Error('Server-side configuration is missing');
+} else {
+sendModel.q = searchValue;
+}
 
 							$filterValue = searchValue;
-							sendModel.q = searchValue;
 						}}>Search</button
 					>
 				</form>

package/src/lib/index.ts

@@ -32,6 +32,7 @@ import type { TableConfig, Columns, Column } from './models/Models';
 
 //Facets
 import Facets from './components/Facets/Facets.svelte';
+import type { FacetGroup, FacetOption, SelectedFacetGroup } from './models/Models';
 
 // CodeEditor
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
@@ -108,6 +109,7 @@ export { Table, TableFilter, columnFilter, searchFilter };
 
 // Facets
 export { Facets };
+export type { FacetGroup, FacetOption, SelectedFacetGroup };
 
 // CodeEditor
 export { CodeEditor };

package/src/lib/models/Models.ts

@@ -195,23 +195,20 @@ export interface FacetOption {
 	name: string;
 	displayName: string;
 	count?: number;
+	selected?: boolean;
 }
 
 export interface FacetGroup {
 	name: string;
 	displayName: string;
+	selected?: boolean;
 	children: FacetOption[];
 	count?: number;
 }
 
-export interface SelectedFacetOption extends FacetOption {
-	selected: boolean;
-}
-
 export interface SelectedFacetGroup extends Omit<FacetGroup, 'children'> {
-	selected: boolean;
 	children: {
-		[key: string]: SelectedFacetOption;
+		[key: string]: FacetOption;
 	};
 }