pages

src/routes/items/+page.svelte

@@ -11,88 +11,26 @@
 	import { Label } from '$lib/components/ui/label';
 	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 { type Item } from '$lib/types/item';
 
-	let itemLocation: string | undefined = $state('');
-	let foundLocation: string | undefined = $state();
-	let description: string | undefined = $state();
-	let isGenerating = $state(false);
+	let createDialogOpen: boolean = $state(false);
 
-	async function onSelect() {
-		isGenerating = true;
-		description = await genDescription();
-		isGenerating = false;
+	function openCreateDialog() {
+		createDialogOpen = true;
 	}
 
-
 	let { data }: PageProps = $props();
 </script>
 
 <div class="max-w-7xl mx-auto px-4">
 	<div class="justify-between flex">
-		<h1 class="font-semibold text-4xl mb-4 mt-2">Found Items</h1>
+		<h1 class="text-3xl mb-2 mt-2">Found Items</h1>
 		<div class="inline-block">
-			<Dialog.Root>
-				<Dialog.Trigger class={buttonVariants({ variant: 'default' })} type="button"
-				>Post an item
-				</Dialog.Trigger
-				>
-				<Dialog.Content>
-					<Dialog.Header>
-						<Dialog.Title>Submit Found Item</Dialog.Title>
-						<Dialog.Description>
-							Your item will need to be approved before becoming public.
-						</Dialog.Description>
-					</Dialog.Header>
-					<form method="post" action="?/create" enctype="multipart/form-data">
-						<Field.Group>
-							<ImageUpload onSelect={onSelect} required={true} />
-							<Field.Field>
-								<Field.Label for="description">
-									Description<span class="text-error">*</span>
-								</Field.Label>
-								<Input id="description" name="description" bind:value={description}
-											 placeholder="A red leather book bag..." maxlength={200}
-											 required />
-							</Field.Field>
-							<Field.Field>
-								<Field.Label for="foundLocation">
-									Where did you find it?
-								</Field.Label>
-								<Input id="foundLocation" name="foundLocation" bind:value={foundLocation}
-											 placeholder="By the tennis courts." required />
-							</Field.Field>
-							<RadioGroup.Root name="location" bind:value={itemLocation}>
-								<div class="flex items-center space-x-2">
-									<RadioGroup.Item value="finderPossession" id="finderPossession" />
-									<Label for="finderPossession">I still have the item.</Label>
-								</div>
-								<div class="flex items-center space-x-2">
-									<RadioGroup.Item value="turnedIn" id="turnedIn" />
-									<Label for="turnedIn">I turned the item in to the school lost and found.</Label>
-								</div>
-							</RadioGroup.Root>
-							<Field.Field class={itemLocation !== 'finderPossession' ? 'disabled hidden' : ''}>
-								<Field.Label for="email">
-									Your Email
-								</Field.Label>
-								<Input id="email" name="email" placeholder="name@domain.com"
-											 class={itemLocation !== 'finderPossession' ? 'disabled' : ''} pattern={EMAIL_REGEX_STRING}
-											 required={itemLocation === 'finderPossesion'} />
-								<!--				<Field.Error>Enter a valid email address.</Field.Error>-->
-							</Field.Field>
-						</Field.Group>
-
-						<Dialog.Footer class="mt-4">
-							<Dialog.Close class={buttonVariants({ variant: "outline" })} type="button"
-							>Cancel
-							</Dialog.Close
-							>
-							<Button type="submit">Submit</Button>
-						</Dialog.Footer>
-					</form>
-				</Dialog.Content>
-			</Dialog.Root>
+			<Button variant="default" class="" onclick={openCreateDialog}>
+				Submit a Found Item
+			</Button>
 		</div>
 	</div>
 
@@ -101,7 +39,7 @@
 		{#if data.user && data.items.some(
 			(item) => item.approvedDate === null
 		)}
-			<FieldSeparator class="col-span-full text-lg mb-2 h-8">
+			<FieldSeparator class="col-span-full text-lg h-8">
 				Pending items
 			</FieldSeparator>
 		{/if}
@@ -127,13 +65,9 @@
 		{/each}
 
 	</div>
-
 </div>
 
+<SubmitItemDialog bind:open={createDialogOpen} />
+
 
-{#if isGenerating}
-	<div class="fixed inset-0 bg-black/75 z-999999 w-screen h-screen justify-center items-center flex">
-		<p class="text-6xl text-primary">Loading...</p>
-	</div>
-{/if}