Merge pull request #184 from pyoner/issue-182

feat: add a Nodes.filter property for items
basf · Jan 11, 2024 · 5aca4a3 · 5aca4a3
2 parents 7430d5b + 4341158
commit 5aca4a3
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 53 deletions.
diff --git a/src/layouts/Nodes.svelte b/src/layouts/Nodes.svelte
@@ -27,10 +27,14 @@
 					/>
 				</Col>
 			{/if}
-			{#each data as item (item.id)}
+			{#each data.filter(filter) as item (item.id)}
 				<slot {item} />
 			{:else}
-				<div class="text-center distant_msg">Nothing found &mdash; maybe <span class="link" on:click={() => goto('/import')}>add data</span>?</div>
+				<div class="text-center distant_msg">
+					Nothing found &mdash; maybe <span class="link" on:click={() => goto('/import')}
+						>add data</span
+					>?
+				</div>
 			{/each}
 		{:catch _error}
 			<Col>
@@ -53,6 +57,7 @@
 </script>
 
 <script lang="ts">
+	export let filter = (item) => item != null;
 	export let add: boolean;
 	export let addTooltip: string;
 	export let addAction = () => (add = !add);

diff --git a/src/pages/Materials.svelte b/src/pages/Materials.svelte
@@ -1,34 +1,43 @@
 <Main>
-	<Nodes asyncData={$collectionsAsync} paginate={false}>
+	<Nodes
+		asyncData={$collectionsAsync}
+		paginate={false}
+		filter={(item) => item.typeSlug === 'phases'}
+	>
 		<div slot="filter">
 			<!-- no filter panel -->
 		</div>
 		<svelte:fragment let:item>
-			{#if item.typeSlug === 'phases'}
-				<Col col="12">
-					<Collection
-						id={item.id}
-						title={item.title}
-						description={item.description}
-						visibility={item.visibility}
-						userId={item.userId}
-						userFirstName={item.userFirstName}
-						userLastName={item.userLastName}
-						typeSlug={item.typeSlug}
-						typeLabel={item.typeLabel}
-						typeFlavor={item.typeFlavor}
-					>
-						<IconButton
-							slot="action"
-							icon="forward"
-							variant="link"
-							size="xxl"
-							tooltip="Show all matching data"
-							on:click={() => goto('/?collectionIds=' + item.id + '&limit=' + PAGE_LIMIT + '&visibility=&type=')}
-						/>
-					</Collection>
-				</Col>
-			{/if}
+			<Col col="12">
+				<Collection
+					id={item.id}
+					title={item.title}
+					description={item.description}
+					visibility={item.visibility}
+					userId={item.userId}
+					userFirstName={item.userFirstName}
+					userLastName={item.userLastName}
+					typeSlug={item.typeSlug}
+					typeLabel={item.typeLabel}
+					typeFlavor={item.typeFlavor}
+				>
+					<IconButton
+						slot="action"
+						icon="forward"
+						variant="link"
+						size="xxl"
+						tooltip="Show all matching data"
+						on:click={() =>
+							goto(
+								'/?collectionIds=' +
+									item.id +
+									'&limit=' +
+									PAGE_LIMIT +
+									'&visibility=&type='
+							)}
+					/>
+				</Collection>
+			</Col>
 		</svelte:fragment>
 	</Nodes>
 </Main>

diff --git a/src/pages/Tasks.svelte b/src/pages/Tasks.svelte
@@ -1,33 +1,35 @@
 <Main>
-	<Nodes asyncData={$collectionsAsync} paginate={false}>
+	<Nodes
+		asyncData={$collectionsAsync}
+		paginate={false}
+		filter={(item) => item.typeSlug === 'requests' && item.userId === SERVICE_UID}
+	>
 		<div slot="filter">
 			<!-- no filter panel -->
 		</div>
 		<svelte:fragment let:item>
-			{#if item.typeSlug === 'requests' && item.userId === SERVICE_UID}
-				<Col col="12">
-					<Collection
-						id={item.id}
-						title={item.title}
-						description={item.description}
-						visibility={item.visibility}
-						userId={item.userId}
-						userFirstName={item.userFirstName}
-						userLastName={item.userLastName}
-						typeLabel={item.typeLabel}
-						typeFlavor={item.typeFlavor}
-					>
-						<IconButton
-							slot="action"
-							icon="download"
-							variant="link"
-							size="xxl"
-							tooltip="Take on this request"
-							on:click={() => processCollection(item.id)}
-						/>
-					</Collection>
-				</Col>
-			{/if}
+			<Col col="12">
+				<Collection
+					id={item.id}
+					title={item.title}
+					description={item.description}
+					visibility={item.visibility}
+					userId={item.userId}
+					userFirstName={item.userFirstName}
+					userLastName={item.userLastName}
+					typeLabel={item.typeLabel}
+					typeFlavor={item.typeFlavor}
+				>
+					<IconButton
+						slot="action"
+						icon="download"
+						variant="link"
+						size="xxl"
+						tooltip="Take on this request"
+						on:click={() => processCollection(item.id)}
+					/>
+				</Collection>
+			</Col>
 		</svelte:fragment>
 	</Nodes>
 </Main>