INIT

src/routes/items/ItemForm.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { enhance } from "$app/forms";
+  import { UOM_OPTIONS, CATAGORY_OPTIONS, SUB_CATAGORY_OPTIONS } from "$lib/constants/items";
+  import type { StackqItem } from "$lib/types/items";
+
+  let {
+    item = null,
+    itemsForParent = [],
+    action,
+    submitLabel,
+    error,
+    onSuccess,
+  }: {
+    item?: StackqItem | null;
+    itemsForParent?: { id: string; Item: string; SKU: string }[];
+    action: string;
+    submitLabel: string;
+    error?: string | null;
+    onSuccess?: () => void;
+  } = $props();
+
+  const isEdit = $derived(!!item);
+  const parentOptions = $derived(
+    item ? itemsForParent.filter((p) => p.id !== item!.id) : itemsForParent
+  );
+  const defaultItem = $derived(item?.Item ?? "");
+  const defaultSku = $derived(item?.SKU ?? "");
+  const defaultDesc = $derived(item?.Description ?? "");
+  const defaultUom = $derived(item?.UOM ?? "");
+  const defaultCost = $derived(item?.Cost != null ? String(item.Cost) : "");
+  const defaultVendor = $derived(item?.Vendor ?? "");
+  const defaultCat = $derived(Array.isArray(item?.Catagory) ? item!.Catagory[0] : item?.Catagory ?? "");
+  const defaultSub = $derived(Array.isArray(item?.Sub_Catagory) ? item!.Sub_Catagory[0] : item?.Sub_Catagory ?? "");
+  const defaultParent = $derived(item?.Parent ?? "");
+  const defaultHasParent = $derived(!!item?.Has_Parent);
+  const defaultStock = $derived(!!item?.Stock);
+</script>
+
+<form
+  method="POST"
+  action={action}
+  use:enhance={() => async ({ update, result }) => {
+    await update();
+    if (result.type === "success" && result.data?.success) {
+      onSuccess?.();
+    }
+  }}
+  class="flex flex-col gap-4"
+>
+  {#if isEdit}
+    <input type="hidden" name="id" value={item!.id} />
+  {/if}
+
+  <div class="grid grid-cols-2 gap-4">
+    <div class="space-y-2">
+      <Label for="Item">Item</Label>
+      <Input id="Item" name="Item" value={defaultItem} required />
+    </div>
+    <div class="space-y-2">
+      <Label for="SKU">SKU</Label>
+      <Input id="SKU" name="SKU" value={defaultSku} />
+    </div>
+  </div>
+
+  <div class="space-y-2">
+    <Label for="Description">Description</Label>
+    <Input id="Description" name="Description" value={defaultDesc} />
+  </div>
+
+  <div class="grid grid-cols-2 gap-4">
+    <div class="space-y-2">
+      <Label for="UOM">UOM</Label>
+      <select
+        id="UOM"
+        name="UOM"
+        class="border-input bg-background flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs"
+      >
+        <option value="">—</option>
+        {#each UOM_OPTIONS as o}
+          <option value={o} selected={defaultUom === o}>{o}</option>
+        {/each}
+      </select>
+    </div>
+    <div class="space-y-2">
+      <Label for="Cost">Cost</Label>
+      <Input id="Cost" name="Cost" type="number" step="any" value={defaultCost} />
+    </div>
+  </div>
+
+  <div class="space-y-2">
+    <Label for="Vendor">Vendor</Label>
+    <Input id="Vendor" name="Vendor" value={defaultVendor} />
+  </div>
+
+  <div class="grid grid-cols-2 gap-4">
+    <div class="space-y-2">
+      <Label for="Catagory">Catagory</Label>
+      <select
+        id="Catagory"
+        name="Catagory"
+        class="border-input bg-background flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs"
+      >
+        <option value="">—</option>
+        {#each CATAGORY_OPTIONS as o}
+          <option value={o} selected={defaultCat === o}>{o}</option>
+        {/each}
+      </select>
+    </div>
+    <div class="space-y-2">
+      <Label for="Sub_Catagory">Sub_Catagory</Label>
+      <select
+        id="Sub_Catagory"
+        name="Sub_Catagory"
+        class="border-input bg-background flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs"
+      >
+        <option value="">—</option>
+        {#each SUB_CATAGORY_OPTIONS as o}
+          <option value={o} selected={defaultSub === o}>{o}</option>
+        {/each}
+      </select>
+    </div>
+  </div>
+
+  <div class="space-y-2">
+    <Label for="Parent">Parent</Label>
+    <select
+      id="Parent"
+      name="Parent"
+      class="border-input bg-background flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs"
+    >
+      <option value="">—</option>
+      {#each parentOptions as p}
+        <option value={p.id} selected={defaultParent === p.id}>
+          {p.Item || p.SKU || p.id}
+        </option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="flex flex-wrap gap-6">
+    <label class="flex items-center gap-2 text-sm">
+      <input
+        type="checkbox"
+        name="Has_Parent"
+        value="on"
+        checked={defaultHasParent}
+        class="border-input size-4 rounded"
+      />
+      Has Parent
+    </label>
+    <label class="flex items-center gap-2 text-sm">
+      <input
+        type="checkbox"
+        name="Stock"
+        value="on"
+        checked={defaultStock}
+        class="border-input size-4 rounded"
+      />
+      Stock
+    </label>
+  </div>
+
+  {#if error}
+    <p class="text-destructive text-sm">{error}</p>
+  {/if}
+
+  <div class="flex justify-end gap-2">
+    <Button type="submit">{submitLabel}</Button>
+  </div>
+</form>