@bexis2/bexis2-core-ui 0.4.17 → 0.4.19

package/README.md

@@ -1,4 +1,10 @@
 # bexis-core-ui
+## 0.4.19
+## 0.4.18
+- Updates indicator text for current page and possible number of pages in a Table
+- Fixes client-side search on Table
+- Adds "No rows available" text in Table if search or filter returns no rows.
+
 ## 0.4.17
 - Table
   - Fix client-side search

package/dist/components/Facets/Facets.svelte

@@ -5,12 +5,12 @@ export let groupSelection = false;
 export let groups;
 export let showAll = false;
 export let open = false;
-let selected;
-let selectedItems = {};
-let selectedGroups = {};
-const dispatch = createEventDispatcher();
-const modalStore = getModalStore();
-const showMore = (group) => {
+export const showMore = (groupName) => {
+  const group = selected[groupName];
+  dispatch("showMoreOpenChange", {
+    group: group.name,
+    open: true
+  });
   modalStore.trigger({
     type: "component",
     title: `${group.displayName}`,
@@ -24,13 +24,37 @@ const showMore = (group) => {
     }
   });
 };
+let selected;
+let selectedItems = {};
+let selectedGroups = {};
+const dispatch = createEventDispatcher();
+const modalStore = getModalStore();
 const handleSave = (group) => {
-  Object.keys(group.children).forEach((key) => {
-    selectedItems[group.name][key] = group.children[key].selected || false;
+  const { name: groupName, children } = group;
+  dispatch("showMoreOpenChange", {
+    group: groupName,
+    open: false
   });
+  for (const key in children) {
+    const selectedValue = children[key].selected || false;
+    selectedItems[groupName][key] = selectedValue;
+    if (selected[groupName].children[key].selected !== selectedValue) {
+      selected[groupName].children[key].selected = selectedValue;
+    }
+  }
+  dispatch("showMoreSelect", [
+    {
+      parent: groupName,
+      selected: Object.keys(children).map((key) => children[key].selected)
+    }
+  ]);
   modalStore.close();
 };
-const handleCancel = () => {
+const handleCancel = (groupName) => {
+  dispatch("showMoreOpenChange", {
+    group: groupName,
+    open: false
+  });
   modalStore.close();
 };
 const mapSelected = (type) => {
@@ -58,7 +82,7 @@ const mapSelected = (type) => {
       }
     });
   }
-  changed.length && dispatch("change", changed);
+  changed.length && dispatch("facetSelect", changed);
 };
 const sortOptions = () => {
   Object.keys(selected).forEach((group) => {
@@ -107,7 +131,7 @@ groups.subscribe((data) => {
   });
 });
 $: displayedGroups = structuredClone($groups);
-$: selectedItems, mapSelected("items"), sortOptions();
+$: selectedItems, mapSelected("items");
 $: selectedGroups, mapSelected("groups");
 </script>
 
@@ -145,7 +169,7 @@ $: selectedGroups, mapSelected("groups");
 					<!-- Trigger for the Modal to view all options -->
 					{#if group.children.length > 5}
 						<TreeViewItem hyphenOpacity="opacity-0">
-							<button class="anchor" on:click={() => showMore(selected[group.name])}>more</button
+							<button class="anchor" on:click={() => showMore(group.name)}>more</button
 							></TreeViewItem
 						>
 					{/if}

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

@@ -7,9 +7,12 @@ declare const __propDef: {
         groups: Writable<FacetGroup[]>;
         showAll?: boolean;
         open?: boolean;
+        showMore?: (groupName: string) => void;
     };
     events: {
-        change: CustomEvent<any>;
+        showMoreOpenChange: CustomEvent<any>;
+        showMoreSelect: CustomEvent<any>;
+        facetSelect: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -19,5 +22,6 @@ export type FacetsProps = typeof __propDef.props;
 export type FacetsEvents = typeof __propDef.events;
 export type FacetsSlots = typeof __propDef.slots;
 export default class Facets extends SvelteComponent<FacetsProps, FacetsEvents, FacetsSlots> {
+    get showMore(): (groupName: string) => void;
 }
 export {};

package/dist/components/Facets/ShowMore.svelte

@@ -17,7 +17,7 @@ const onSave = () => {
 const onCancel = () => {
   console.log(selected, group.children);
   selected = structuredClone(group.children);
-  handleCancel();
+  handleCancel(group.name);
 };
 const gridClass = (items) => {
   if (items.length >= 50) {

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         group: SelectedFacetGroup;
         handleSave: (group: SelectedFacetGroup) => {};
-        handleCancel: () => {};
+        handleCancel: (groupName: string) => {};
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Table/TableContent.svelte

@@ -322,10 +322,11 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
 						if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = searchValue;
-}
+							throw new Error('Server-side configuration is missing');
+						} else {
+							sendModel.q = searchValue;
+						}
+            
 						$filterValue = searchValue;
 					}}
 				>
@@ -342,12 +343,10 @@ sendModel.q = searchValue;
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = '';
-}
-
-							$filterValue = searchValue;
+									throw new Error('Server-side configuration is missing');
+								} else {
+									sendModel.q = '';
+								}
 
 								searchValue = '';
 								$filterValue = '';
@@ -360,10 +359,10 @@ sendModel.q = '';
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = searchValue;
-}
+								throw new Error('Server-side configuration is missing');
+							} else {
+								sendModel.q = searchValue;
+							}
 
 							$filterValue = searchValue;
 						}}>Search</button
@@ -506,6 +505,13 @@ sendModel.q = searchValue;
 						{/each}
 					</tbody>
 				</table>
+				{#if $pageRows.length === 0}
+					<div
+						class="p-8 flex items-center justify-center bg-tertiary-500/30 dark:bg-tertiary-900/10"
+					>
+						No rows available
+					</div>
+				{/if}
 			</div>
 		</div>
 	{:else}

package/dist/components/Table/TablePagination.svelte

@@ -107,11 +107,7 @@ $: $pageSize = pageSizeDropdownValue;
 	<div class="flex justify-end items-center">
 		<span class="text-sm text-gray-500">
 			{#if $pageCount > 0}
-				{#if $pageCount == 1}
-					1 page
-				{:else}
-					{$pageCount} pages
-				{/if}
+				Page {$pageIndex + 1} of {$pageCount}
 			{:else}
 				No pages
 			{/if}

package/package.json

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

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

@@ -11,18 +11,14 @@
 	export let showAll = false;
 	export let open = false;
 
-	let selected: { [key: string]: SelectedFacetGroup };
-	let selectedItems: {
-		[key: string]: {
-			[key: string]: boolean;
-		};
-	} = {};
-	let selectedGroups: { [key: string]: boolean } = {};
+	export const showMore = (groupName: string) => {
+		const group: SelectedFacetGroup = selected[groupName];
 
-	const dispatch = createEventDispatcher();
+		dispatch('showMoreOpenChange', {
+			group: group.name,
+			open: true
+		});
 
-	const modalStore = getModalStore();
-	const showMore = (group: SelectedFacetGroup) => {
 		modalStore.trigger({
 			type: 'component',
 			title: `${group.displayName}`,
@@ -37,14 +33,50 @@
 		});
 	};
 
+	let selected: { [key: string]: SelectedFacetGroup };
+	let selectedItems: {
+		[key: string]: {
+			[key: string]: boolean;
+		};
+	} = {};
+	let selectedGroups: { [key: string]: boolean } = {};
+
+	const dispatch = createEventDispatcher();
+
+	const modalStore = getModalStore();
+
 	const handleSave = (group: SelectedFacetGroup) => {
-		Object.keys(group.children).forEach((key) => {
-			selectedItems[group.name][key] = group.children[key].selected || false;
+		const { name: groupName, children } = group;
+
+		dispatch('showMoreOpenChange', {
+			group: groupName,
+			open: false
 		});
+
+		for (const key in children) {
+			const selectedValue = children[key].selected || false;
+			selectedItems[groupName][key] = selectedValue;
+
+			if (selected[groupName].children[key].selected !== selectedValue) {
+				selected[groupName].children[key].selected = selectedValue;
+			}
+		}
+
+		dispatch('showMoreSelect', [
+			{
+				parent: groupName,
+				selected: Object.keys(children).map((key) => children[key].selected)
+			}
+		]);
+
 		modalStore.close();
 	};
 
-	const handleCancel = () => {
+	const handleCancel = (groupName: string) => {
+		dispatch('showMoreOpenChange', {
+			group: groupName,
+			open: false
+		});
 		modalStore.close();
 	};
 
@@ -75,9 +107,10 @@
 			});
 		}
 
-		changed.length && dispatch('change', changed);
+		changed.length && dispatch('facetSelect', changed);
 	};
 
+	// Keeping the sorting function, but stays unused for now
 	const sortOptions = () => {
 		// Sort facets in a descending order if count exits, or sort alphabetically
 		Object.keys(selected).forEach((group) => {
@@ -139,7 +172,7 @@
 	});
 
 	$: displayedGroups = structuredClone($groups);
-	$: selectedItems, mapSelected('items'), sortOptions();
+	$: selectedItems, mapSelected('items'); // sortOptions(); // Sorting is not used for now
 	$: selectedGroups, mapSelected('groups');
 </script>
 
@@ -177,7 +210,7 @@
 					<!-- Trigger for the Modal to view all options -->
 					{#if group.children.length > 5}
 						<TreeViewItem hyphenOpacity="opacity-0">
-							<button class="anchor" on:click={() => showMore(selected[group.name])}>more</button
+							<button class="anchor" on:click={() => showMore(group.name)}>more</button
 							></TreeViewItem
 						>
 					{/if}

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

@@ -3,7 +3,7 @@
 
 	export let group: SelectedFacetGroup;
 	export let handleSave: (group: SelectedFacetGroup) => {};
-	export let handleCancel: () => {};
+	export let handleCancel: (groupName: string) => {};
 
 	let selected = structuredClone(group.children);
 
@@ -25,7 +25,7 @@
 	const onCancel = () => {
 		console.log(selected, group.children);
 		selected = structuredClone(group.children);
-		handleCancel();
+		handleCancel(group.name);
 	};
 
 	const gridClass = (items: any[]) => {

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

@@ -390,10 +390,11 @@
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
 						if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = searchValue;
-}
+							throw new Error('Server-side configuration is missing');
+						} else {
+							sendModel.q = searchValue;
+						}
+            
 						$filterValue = searchValue;
 					}}
 				>
@@ -410,12 +411,10 @@ sendModel.q = searchValue;
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = '';
-}
-
-							$filterValue = searchValue;
+									throw new Error('Server-side configuration is missing');
+								} else {
+									sendModel.q = '';
+								}
 
 								searchValue = '';
 								$filterValue = '';
@@ -428,10 +427,10 @@ sendModel.q = '';
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = searchValue;
-}
+								throw new Error('Server-side configuration is missing');
+							} else {
+								sendModel.q = searchValue;
+							}
 
 							$filterValue = searchValue;
 						}}>Search</button
@@ -574,6 +573,13 @@ sendModel.q = searchValue;
 						{/each}
 					</tbody>
 				</table>
+				{#if $pageRows.length === 0}
+					<div
+						class="p-8 flex items-center justify-center bg-tertiary-500/30 dark:bg-tertiary-900/10"
+					>
+						No rows available
+					</div>
+				{/if}
 			</div>
 		</div>
 	{:else}

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

@@ -117,11 +117,7 @@
 	<div class="flex justify-end items-center">
 		<span class="text-sm text-gray-500">
 			{#if $pageCount > 0}
-				{#if $pageCount == 1}
-					1 page
-				{:else}
-					{$pageCount} pages
-				{/if}
+				Page {$pageIndex + 1} of {$pageCount}
 			{:else}
 				No pages
 			{/if}