112 lines
4.0 KiB
Svelte
112 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
|
|
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
|
import * as Field from '$lib/components/ui/field/index.js';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
import ImageUpload from '$lib/components/custom/image-upload/image-upload.svelte';
|
|
import type { PageProps } from './$types';
|
|
import { EMAIL_REGEX_STRING } from '$lib/consts';
|
|
import { genDescription } from './gen-desc.remote';
|
|
import * as RadioGroup from '$lib/components/ui/radio-group';
|
|
import { Label } from '$lib/components/ui/label';
|
|
import ItemListing from '$lib/components/custom/item-listing.svelte';
|
|
|
|
let itemLocation: string | undefined = $state('');
|
|
let foundLocation: string | undefined = $state();
|
|
let description: string | undefined = $state();
|
|
let isGenerating = $state(false);
|
|
|
|
async function onSelect() {
|
|
isGenerating = true;
|
|
description = await genDescription();
|
|
isGenerating = false;
|
|
}
|
|
|
|
|
|
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>
|
|
<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..."
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="justify-start grid gap-4 grid-cols-[repeat(auto-fill,minmax(16rem,max-content))]">
|
|
{#each data.items as item (item.id)}
|
|
<ItemListing item={item} />
|
|
{/each}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{#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}
|
|
|