Merge branch 'rc' of https://github.com/BEXIS2/Core into rc

BEXIS2 · Sep 27, 2024 · ce5f7a1 · ce5f7a1
2 parents d8f8f3c + 1518908
commit ce5f7a1
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/lib/components/Card.svelte b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/lib/components/Card.svelte
@@ -12,7 +12,7 @@
 
 <div class="flex grow">
 	<div
-		class="p-4 px-5 border rounded-md bg-surface-100 border-surface-500 min-w-[500px] max-w-[800px] grow cursor-pointer hover:border-primary-500"
+		class="p-4 px-5 border rounded-md bg-surface-100 border-surface-500 grow cursor-pointer hover:border-primary-500"
 		on:click={() => window.open(`/ddm/data/Showdata/${id}`)}
 		on:keydown={() => window.open(`/ddm/data/Showdata/${id}`)}
 		role="link"

diff --git a/...ole/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/lib/components/Cards.svelte b/...ole/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/lib/components/Cards.svelte
@@ -1,23 +1,48 @@
 <script lang="ts">
 	import { writable, type Writable } from 'svelte/store';
+	import { Paginator } from '@skeletonlabs/skeleton';
+	import type { PaginationSettings } from '@skeletonlabs/skeleton';
 
 	import Card from './Card.svelte';
 
 	export let store: Writable<any[]> = writable([]);
+
+	let paginationSettings = {
+		page: 0,
+		limit: 10,
+		size: $store.length,
+		amounts: [5, 10, 20, 50, 100]
+	} satisfies PaginationSettings;
+
+	$: cards = $store.slice(
+		paginationSettings.page * paginationSettings.limit,
+		paginationSettings.page * paginationSettings.limit + paginationSettings.limit
+	);
+
+	$: paginationSettings.size = $store.length;
 </script>
 
-<div class="flex flex-col gap-4 grow">
+<div class="flex flex-col gap-4 grow min-w-[500px] max-w-[800px]">
 	<p class="text-muted text-sm">
 		{$store.length}
 		{`dataset${$store.length !== 1 ? 's' : ''}`} found
 	</p>
 
-	{#each $store as card}
+	{#each cards as card (card.id)}
 		<Card
 			card={{
 				...card,
 				license: ''
 			}}
 		/>
 	{/each}
+
+	{#if $store.length > 0}
+		<Paginator
+			bind:settings={paginationSettings}
+			showFirstLastButtons={false}
+			showPreviousNextButtons={true}
+			controlVariant="variant-filled-primary"
+		/>
+	{/if}
 </div>
diff --git a/...ExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/publicsearch/+page.svelte b/...ExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/publicsearch/+page.svelte
@@ -401,7 +401,7 @@
 					</div>
 
 					<select class="input w-max" bind:value={currentCategory}>
-						{#each categories as category}
+						{#each categories as category (category.name)}
 							<option value={category.name}>{category.displayName}</option>
 						{/each}
 					</select>
@@ -432,7 +432,7 @@
 				<!-- Criteria and applied search queries -->
 				<div class="flex grow w-full">
 					<div class="flex gap-8 overflow-auto w-96 grow">
-						{#each Object.keys($criteria) as key, index}
+						{#each Object.keys($criteria) as key, index (key)}
 							{#if $criteria[key].values.length > 0}
 								<div class="flex items-center gap-6">
 									<div
@@ -442,7 +442,7 @@
 									</div>
 									<div class="flex items-center gap-2"></div>
 									{#if $criteria[key].values.length < 3}
-										{#each $criteria[key].values as value, index}
+										{#each $criteria[key].values as value, index (`${key}-${value}`)}
 											<button
 												type="reset"
 												class="underline"

diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/search/+page.svelte b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/search/+page.svelte
@@ -420,13 +420,13 @@
 					</div>
 
 					<select class="input w-max" bind:value={currentCategory}>
-						{#each categories as category}
+						{#each categories as category (category.name)}
 							<option value={category.name}>{category.displayName}</option>
 						{/each}
 					</select>
 					<Select
 						loadOptions={setAutoCompleteValues}
-						class="input grow max-w-[500px] min-w-[200px]"
+						class="input grow max-w-[500px] min-w-[500px]"
 						name="search"
 						bind:filterText={q}
 						on:select={handleAutoCompleteSelect}
@@ -445,15 +445,15 @@
 				<!-- Criteria and applied search queries -->
 				<div class="flex grow w-full">
 					<div class="flex gap-4 w-96 grow overflow-auto">
-						{#each Object.keys($criteria) as key, index}
+						{#each Object.keys($criteria) as key, index (key)}
 							{#if $criteria[key].values.length > 0}
 								<div class="flex items-center gap-4">
 									<div class="w-min font-bold text-nowrap text-xs">
 										{$criteria[key].displayName}:
 									</div>
 
 									{#if $criteria[key].values.length < 3}
-										{#each $criteria[key].values as value, index}
+										{#each $criteria[key].values as value, index (`${key}-${value}`)}
 											<CriteriaChip
 												on:remove={async () => {
 													if ($criteria[key].type === 'Facet') {