fbla26/src/routes/items/+page.svelte

<script lang="ts">
	import { Button, buttonVariants } from '$lib/components/ui/button';
	import * as Dialog from '$lib/components/ui/dialog';
	import * as Field from '$lib/components/ui/field';
	import { Input } from '$lib/components/ui/input';
	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 '$lib/db/items.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';
	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';

	// 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 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="hidden md:inline-block">
			<Button variant="default" class="" onclick={openCreateDialog}>
				Submit a found item
			</Button>
		</div>
	</div>

	{#if data.items.length === 0}

		<h1 class="text-xl text-center font-semibold mt-16">No items found!</h1>
		<p class="text-center">Try broadening your search terms to get more results.</p>
	{:else}
		<div class="grid gap-4 grid-cols-[repeat(auto-fill,minmax(18rem,max-content))] justify-center">

			{#if data.user && data.items.some(
				(item) => item.approvedDate === null
			)}
				<FieldSeparator class="col-span-full text-lg h-8 my-2">
					Pending items
				</FieldSeparator>

				{#each data.items as item (item.id)}
					{#if item.approvedDate === null}
						<ItemListing item={item} admin={data.user !== null} editCallback={openEditDialog}
												 inquireCallback={openInquireDialog} claimCallback={openClaimDialog} />
					{/if}
				{/each}
			{/if}

			{#if data.user && data.items.some(
				(item) => item.approvedDate !== null && item.claimedDate === null
			)}
				<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 && item.claimedDate === null}
					<ItemListing item={item} admin={data.user !== null} editCallback={openEditDialog}
											 inquireCallback={openInquireDialog} claimCallback={openClaimDialog} />
				{/if}
			{/each}

			{#if data.user && data.items.some(
				(item) => item.claimedDate !== null
			)}
				<FieldSeparator class="col-span-full text-lg my-2 h-8 w-full">
					Claimed items
				</FieldSeparator>
				{#each data.items as item (item.id)}
					{#if item.claimedDate !== null}
						<ItemListing item={item} admin={data.user !== null} editCallback={openEditDialog}
												 inquireCallback={openInquireDialog} claimCallback={openClaimDialog} />
					{/if}
				{/each}
			{/if}

		</div>
	{/if}
</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} />