inquiries and claims

src/routes/items/+page.svelte

@@ -12,68 +12,108 @@
 	import ItemListing from '$lib/components/custom/item-listing.svelte';
 	import { FieldSeparator } from '$lib/components/ui/field';
 	import SubmitItemDialog from '$lib/components/custom/submit-item-dialog.svelte';
+	import EditItemDialog from '$lib/components/custom/edit-item-dialog.svelte';
+	import InquireItemDialog from '$lib/components/custom/inquire-item-dialog.svelte';
+	import ClaimItemDialog from '$lib/components/custom/claim-item-dialog.svelte';
+	import { PlusIcon } from '@lucide/svelte';
+	import type { Item } from '$lib/types/item.server';
 
 	// import { type Item } from '$lib/types/item';
 
+
 	let createDialogOpen: boolean = $state(false);
 
 	function openCreateDialog() {
 		createDialogOpen = true;
 	}
 
+	let editDialogOpen: boolean = $state(false);
+	let editItem: Item | undefined = $state(undefined);
+
+	function openEditDialog(item: Item | undefined) {
+		editItem = item;
+		editDialogOpen = true;
+	}
+
+	let inquireDialogOpen: boolean = $state(false);
+	let inquireItem: Item | undefined = $state(undefined);
+
+	function openInquireDialog(item: Item | undefined) {
+		inquireItem = item;
+		inquireDialogOpen = true;
+	}
+
+	let claimDialogOpen: boolean = $state(false);
+	let claimItem: Item | undefined = $state(undefined);
+
+	function openClaimDialog(item: Item | undefined) {
+		claimItem = item;
+		claimDialogOpen = true;
+	}
+
 	let { data }: PageProps = $props();
 </script>
 
 <div class="max-w-7xl mx-auto px-4">
-	<div class="justify-between flex">
-		<form action="">
-			<Field.Field orientation="horizontal" class="max-w-sm">
+	<div class="justify-between flex mb-4">
+		<form action="" class="w-full">
+			<Field.Field orientation="horizontal" class="w-full max-w-md">
 				<Input type="search" name="search" id="search" placeholder="Search..." />
 				<Button variant="default" type="submit">Search</Button>
 			</Field.Field>
 		</form>
 		<!--		<h1 class="text-3xl mb-2 mt-2">Found Items</h1>-->
-		<div class="inline-block">
-			<Button variant="secondary" class="" onclick={openCreateDialog}>
-				Submit a Found Item
+		<div class="hidden md:inline-block">
+			<Button variant="default" class="" onclick={openCreateDialog}>
+				Submit a found item
 			</Button>
 		</div>
 	</div>
 
-	<div class="grid gap-4 grid-cols-[repeat(auto-fill,minmax(16rem,max-content))]">
+	<div class="grid gap-4 grid-cols-[repeat(auto-fill,minmax(16rem,max-content))] justify-center">
 
 		{#if data.user && data.items.some(
 			(item) => item.approvedDate === null
 		)}
-			<FieldSeparator class="col-span-full text-lg h-8">
+			<FieldSeparator class="col-span-full text-lg h-8 my-2">
 				Pending items
 			</FieldSeparator>
 		{/if}
 
 		{#each data.items as item (item.id)}
 			{#if item.approvedDate === null}
-				<ItemListing item={item} admin={data.user !== null} />
+				<ItemListing item={item} admin={data.user !== null} editCallback={openEditDialog}
+										 inquireCallback={openInquireDialog} claimCallback={openClaimDialog} />
 			{/if}
 		{/each}
 
 		{#if data.user && data.items.some(
 			(item) => item.approvedDate !== null
 		)}
-			<FieldSeparator class="col-span-full text-lg my-2 h-8">
+			<FieldSeparator class="col-span-full text-lg my-2 h-8 w-full">
 				Public items
 			</FieldSeparator>
 		{/if}
 
 		{#each data.items as item (item.id)}
 			{#if item.approvedDate !== null}
-				<ItemListing item={item} admin={data.user !== null} />
+				<ItemListing item={item} admin={data.user !== null} editCallback={openEditDialog}
+										 inquireCallback={openInquireDialog} claimCallback={openClaimDialog} />
 			{/if}
 		{/each}
 
 	</div>
 </div>
 
+<Button class="fixed shadow-lg bottom-6 right-6 rounded-xl md:hidden p-6 text-xl" size="default"
+				onclick={openCreateDialog}>
+	<PlusIcon size={32} />
+	New item
+</Button>
+
 <SubmitItemDialog bind:open={createDialogOpen} />
-
+<EditItemDialog bind:open={editDialogOpen} item={editItem} />
+<InquireItemDialog bind:open={inquireDialogOpen} item={inquireItem} />
+<ClaimItemDialog bind:open={claimDialogOpen} item={claimItem} />