@kernhq/module-inventory 0.1.2 → 0.3.0

package/src/client/components/AssetFormDialog.svelte

@@ -1,23 +1,49 @@
 <script lang="ts">
-import { Button, Dialog, Field, Input, Select, Textarea, toast } from '@kernhq/ui'
-import { createMutation, useQueryClient } from '@tanstack/svelte-query'
+import {
+  Button,
+  Dialog,
+  Field,
+  Input,
+  messageLocale,
+  Select,
+  type SelectOption,
+  Textarea,
+  toast,
+} from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import type { Asset, Category } from '../../contract/index.js'
 import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import { errorMessage } from '../errors.js'
 import { t } from '../i18n.js'
 import { canInventory } from '../permissions.js'
+import { currencyOptions, formatPrice, parsePrice, priceExample } from '../price.js'
+import { inventoryKeys } from '../query.js'
 
 /**
- * Add an asset. The tag (`INV-…`) is the server's job — people never invent codes, they read them
- * off stickers — so this form asks only for what a human actually knows on day one.
+ * Add or change an asset.
+ *
+ * One dialog for both, because they ask for exactly the same nine things and a second component
+ * would be nine fields to keep in step. `asset` is what decides which: null creates, a row edits.
+ * `assets.update` had no entry point anywhere in the module before this — the procedure existed,
+ * was tested, and no screen could reach it.
+ *
+ * The tag (`INV-…`) is the server's job — people never invent codes, they read them off stickers —
+ * so this form asks only for what a human actually knows.
  */
 interface Props {
   open: boolean
   workspaceId: string
+  /** The row being changed, or null to add one. */
+  asset?: Asset | null
 }
-let { open = $bindable(false), workspaceId }: Props = $props()
+let { open = $bindable(false), workspaceId, asset = null }: Props = $props()
 
 const api = getInventoryApi()
 const queryClient = useQueryClient()
 
+const editing = $derived(asset !== null)
+
 let shown = $state(false)
 $effect(() => {
   if (open) shown = true
@@ -25,67 +51,166 @@ $effect(() => {
 
 let name = $state('')
 let description = $state('')
+let categoryId = $state('')
 let serialNumber = $state('')
 let location = $state('')
 let purchasedOn = $state('')
 let purchasedFrom = $state('')
-let priceMinor = $state('')
+let priceText = $state('')
 let currency = $state('')
 let warrantyUntil = $state('')
 
+/**
+ * What the form was last filled from, so opening it on a different row re-seeds it.
+ *
+ * A plain variable rather than `$state`: the effect below writes it on every run, and a reactive
+ * flag it also reads is a dependency on its own write.
+ */
+let seededFrom: string | null = null
+
+$effect(() => {
+  const key = open ? (asset?.id ?? 'new') : null
+  if (key === null) {
+    seededFrom = null
+    return
+  }
+  if (seededFrom === key) return
+  seededFrom = key
+  fill(asset)
+})
+
+/**
+ * What this asset can be filed under.
+ *
+ * Archived categories are asked for as well, so a row that already carries one keeps naming it —
+ * the picker offers only live categories plus whichever this asset is already in. Without the
+ * second half, opening the form on an asset in an archived category would silently show "no
+ * category" and saving would move it out of one nobody meant to leave.
+ *
+ * `enabled` on `open` rather than always: this dialog is mounted by the list page for its whole
+ * life, and a picker nobody has opened does not need a request. The key is the page's own, so when
+ * it does fire the answer is usually already in the cache.
+ */
+const categoriesQuery = createQuery(() => ({
+  queryKey: inventoryKeys.categories(workspaceId, true),
+  queryFn: () => api.categories.list({ workspaceId, archived: true }),
+  enabled: Boolean(workspaceId) && shown,
+}))
+
+const categoryOptions = $derived<SelectOption[]>([
+  { value: '', label: t('category_none') },
+  ...(categoriesQuery.data ?? [])
+    .filter((row: Category) => !row.archivedAt || row.id === categoryId)
+    .map((row: Category) => ({ value: row.id, label: row.name })),
+])
+
+function fill(row: Asset | null) {
+  name = row?.name ?? ''
+  description = row?.description ?? ''
+  categoryId = row?.categoryId ?? ''
+  serialNumber = row?.serialNumber ?? ''
+  location = row?.location ?? ''
+  purchasedOn = row?.purchasedOn ?? ''
+  purchasedFrom = row?.purchasedFrom ?? ''
+  currency = row?.currency ?? ''
+  // Formatted for the reader's own locale *and this row's currency* — `parsePrice` reads back
+  // exactly what this writes only if both halves agree on how many decimal places the money has.
+  priceText = formatPrice(row?.priceMinor, messageLocale(), currency || null)
+  warrantyUntil = row?.warrantyUntil ?? ''
+}
+
 const close = () => {
   shown = false
   open = false
 }
 
-const reset = () => {
-  name = ''
-  description = ''
-  serialNumber = ''
-  location = ''
-  purchasedOn = ''
-  purchasedFrom = ''
-  priceMinor = ''
-  currency = ''
-  warrantyUntil = ''
-}
+/**
+ * The price, parsed the way the reader's own language writes one.
+ *
+ * `Number.parseFloat(raw.replace(',', '.'))` replaced the first comma only, so `1.234,56` — German,
+ * Turkish and Persian for twelve hundred — was stored as €1.23, and `abc` and `-5` were stored as
+ * no price at all. Neither said anything. Now an amount this locale cannot read is an error on the
+ * field, and there is no path where a wrong number is saved quietly.
+ *
+ * The **currency** is a dependency of the parse, not decoration beside it: yen has no minor unit
+ * and the dinar has three, so the same keystrokes mean different money in different currencies.
+ * Switching the picker re-parses what is already typed, which is what makes `1000` in a yen field
+ * ¥1000 rather than ¥10 — and `19.99` there an error rather than a silent ¥20.
+ */
+const currencyCode = $derived(currency.trim().toUpperCase() || null)
+const priceResult = $derived(parsePrice(priceText, messageLocale(), currencyCode))
+const priceError = $derived(
+  priceResult.ok
+    ? null
+    : t('price_invalid', isolated({ example: priceExample(messageLocale(), currencyCode) })),
+)
 
-/** Minor units are the wire format; the form takes what somebody reads off the receipt. */
-function toPrice(raw: string): number | null {
-  if (!raw.trim()) return null
-  const parsed = Number.parseFloat(raw.replace(',', '.'))
-  return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed * 100) : null
-}
+/**
+ * `disabled={save.isPending}` does not stop the second click.
+ *
+ * The attribute reaches the button on the next render and two quick clicks are one render apart, so
+ * a double-click files two assets — two rows, two tags, one of them a duplicate somebody has to go
+ * and find. A plain flag set in the same tick as the click is what actually guards it.
+ */
+let submitting = $state(false)
 
-const create = createMutation(() => ({
-  mutationFn: () =>
-    api.assets.create({
-      workspaceId,
-      name: name.trim(),
-      description: description.trim(),
-      serialNumber: serialNumber.trim() || null,
-      location: location.trim() || null,
-      purchasedFrom: purchasedFrom.trim() || null,
-      purchasedOn: purchasedOn || null,
-      warrantyUntil: warrantyUntil || null,
-      priceMinor: toPrice(priceMinor),
-      currency: currency.trim().toUpperCase() || null,
-    }),
-  onSuccess: () => {
-    toast.success(t('new'))
-    void queryClient.invalidateQueries({ queryKey: ['inventory', 'assets'] })
-    reset()
+/** What both procedures take; `update` adds the id and takes it as a patch. */
+const fields = () => ({
+  name: name.trim(),
+  description: description.trim(),
+  // `null`, never `''`: the contract takes a uuid or nothing, and an empty string is neither.
+  categoryId: categoryId || null,
+  serialNumber: serialNumber.trim() || null,
+  location: location.trim() || null,
+  purchasedFrom: purchasedFrom.trim() || null,
+  purchasedOn: purchasedOn || null,
+  warrantyUntil: warrantyUntil || null,
+  priceMinor: priceResult.ok ? priceResult.minor : null,
+  currency: currencyCode,
+})
+
+const save = createMutation(() => ({
+  mutationFn: () => {
+    const row = asset
+    return row
+      ? api.assets.update({ workspaceId, assetId: row.id, ...fields() })
+      : api.assets.create({ workspaceId, ...fields() })
+  },
+  onSuccess: (saved: Asset) => {
+    // Not `t('new')`: that is the label on the button that opened this, so the toast used to
+    // congratulate somebody on the words "New asset" rather than telling them what happened.
+    toast.success(t(editing ? 'updated_toast' : 'created_toast', isolated({ name: saved.name })))
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
     close()
   },
-  onError: (error: Error) => toast.error(error.message),
+  // Translated rather than the server's English prose: see `errors.ts`.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    submitting = false
+  },
 }))
 
-const canSubmit = $derived(Boolean(name.trim()) && canInventory('manage') && !create.isPending)
+/**
+ * `submitting` is deliberately **not** in here.
+ *
+ * It is the guard `submit()` checks, and putting it in the disabled expression as well disables the
+ * button under the finger of whoever just pressed it — the browser blurs a focused element the
+ * moment it becomes disabled and hands focus nowhere, so a keyboard user loses their place on the
+ * page mid-save. `loading={submitting}` says the same thing to a screen reader through `aria-busy`
+ * and moves nothing.
+ */
+const canSubmit = $derived(Boolean(name.trim()) && priceResult.ok && canInventory('manage'))
+
+function submit() {
+  if (submitting || !canSubmit) return
+  submitting = true
+  save.mutate()
+}
 </script>
 
 <Dialog
   bind:open={shown}
-  title={t('new')}
+  title={editing ? t('edit') : t('new')}
   onOpenChange={(next) => {
     if (!next) close()
   }}
@@ -102,6 +227,12 @@ const canSubmit = $derived(Boolean(name.trim()) && canInventory('manage') && !cr
       {/snippet}
     </Field>
 
+    <Field label={t('category')} id="inv-category">
+      {#snippet children(id)}
+        <Select {id} bind:value={categoryId} options={categoryOptions} ariaLabel={t('category')} />
+      {/snippet}
+    </Field>
+
     <div class="pair">
       <Field label={t('serial_number')} id="inv-serial">
         {#snippet children(id)}
@@ -135,24 +266,21 @@ const canSubmit = $derived(Boolean(name.trim()) && canInventory('manage') && !cr
         {/snippet}
       </Field>
       <div class="price">
+        <!-- The error goes on the `Input`, not the `Field`: it is the half that also sets
+             `aria-invalid` and points `aria-describedby` at the message, and putting it on both
+             would print the sentence twice. -->
         <Field label={t('price')} id="inv-price">
           {#snippet children(id)}
-            <Input {id} type="text" inputmode="decimal" bind:value={priceMinor} />
+            <Input {id} type="text" inputmode="decimal" bind:value={priceText} error={priceError} />
           {/snippet}
         </Field>
-        <Field label="ISO" id="inv-currency" hint="USD">
+        <!-- Was `label="ISO" hint="USD"`: an untranslated abbreviation labelling a control on a
+             Persian, Arabic, German or Turkish form, explained by an example that is not a hint. -->
+        <Field label={t('currency')} id="inv-currency">
           {#snippet children(id)}
-            <Select
-              {id}
-              bind:value={currency}
-              options={[
-                { value: '', label: '—' },
-                { value: 'USD', label: 'USD' },
-                { value: 'EUR', label: 'EUR' },
-                { value: 'IRR', label: 'IRR' },
-                { value: 'AED', label: 'AED' },
-              ]}
-            />
+            <!-- The list lives in `price.ts`: the repair form asks the same question, and two
+                 copies are two lists that gain a currency in one form and not the other. -->
+            <Select {id} bind:value={currency} options={currencyOptions('—')} />
           {/snippet}
         </Field>
       </div>
@@ -161,7 +289,7 @@ const canSubmit = $derived(Boolean(name.trim()) && canInventory('manage') && !cr
 
   {#snippet footer()}
     <Button variant="ghost" onclick={close}>{t('common.cancel')}</Button>
-    <Button onclick={() => create.mutate()} disabled={!canSubmit} loading={create.isPending}>
+    <Button onclick={submit} disabled={!canSubmit} loading={submitting}>
       {t('common.save')}
     </Button>
   {/snippet}
@@ -179,7 +307,11 @@ const canSubmit = $derived(Boolean(name.trim()) && canInventory('manage') && !cr
   }
   .price {
     display: grid;
-    grid-template-columns: 1fr 90px;
+    /* 90px fitted "ISO" and nothing else — "Para birimi" and «واحد پول» need room to sit on one
+       line, and a wrapped two-word label beside a one-line one knocks the two controls out of
+       alignment. */
+    grid-template-columns: minmax(0, 1fr) 124px;
     gap: 8px;
+    align-items: start;
   }
 </style>

package/src/client/components/AssetPhoto.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+import { Button, coreApi, Skeleton, toast, uploadFile } from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import type { Asset } from '../../contract/index.js'
+import { getInventoryApi } from '../api-instance.js'
+import { isolated } from '../bidi.js'
+import type { CoreApi } from '../core-api.js'
+import { errorMessage } from '../errors.js'
+import { t } from '../i18n.js'
+import { inventoryKeys } from '../query.js'
+
+/**
+ * The asset's photo.
+ *
+ * `assets.photoFileId` has been a field of every asset since the module existed, settable through
+ * `create` and `update` and by **nothing on screen** — an API that could store a photo and an
+ * interface that could not show one. This is that half.
+ *
+ * It sits in **Details**, not in Files, and that is a decision: the photo is a field of the asset,
+ * so it belongs with the asset's other fields. Putting it in the Files tab would hide it from any
+ * workspace that switches the `attachments` capability off, and the photo has nothing to do with
+ * that feature — it is `core`.
+ *
+ * The bytes go to core through `uploadFile`, exactly as an attachment's do; this module stores the
+ * id it is handed and asks core to sign a URL to read it back. `thumbnail: true`, because a
+ * full-size photograph in a 440px panel is a megabyte nobody looks at.
+ */
+interface Props {
+  workspaceId: string
+  asset: Asset
+  /** `inventory.asset.manage`. Without it the photo is shown and cannot be changed. */
+  canManage: boolean
+}
+const { workspaceId, asset, canManage }: Props = $props()
+
+const api = getInventoryApi()
+const core = coreApi<CoreApi>()
+const queryClient = useQueryClient()
+
+const photoQuery = createQuery(() => ({
+  // Keyed by the file rather than by the asset: replacing the photo changes the id, so the old
+  // signed URL is never served for the new photo.
+  queryKey: ['inventory', 'photo', asset.photoFileId ?? ''],
+  queryFn: () =>
+    core.files.downloadUrl({ id: asset.photoFileId as string, disposition: 'inline', thumbnail: true }),
+  enabled: Boolean(asset.photoFileId),
+  // Core signs these with a lifetime measured in minutes, so a panel left open all afternoon asks
+  // again rather than rendering a broken image.
+  staleTime: 4 * 60_000,
+}))
+
+/**
+ * A plain flag set in the same tick as the click, not `mutation.isPending`.
+ *
+ * The attribute reaches the button one render later and two quick clicks are one render apart.
+ */
+let busy = $state(false)
+let input = $state<HTMLInputElement | null>(null)
+
+const save = createMutation(() => ({
+  mutationFn: (photoFileId: string | null) =>
+    api.assets.update({ workspaceId, assetId: asset.id, photoFileId }),
+  onSuccess: (_saved: Asset, photoFileId: string | null) => {
+    toast.success(photoFileId ? t('photo_saved_toast') : t('photo_removed_toast'))
+    void queryClient.invalidateQueries({ queryKey: inventoryKeys.all })
+  },
+  // Translated rather than the server's English prose: see `errors.ts`.
+  onError: (error: unknown) => toast.error(errorMessage(error, t)),
+  onSettled: () => {
+    busy = false
+  },
+}))
+
+async function choose(list: FileList | null) {
+  const file = list?.[0]
+  if (!file || busy) return
+  busy = true
+  try {
+    const uploaded = await uploadFile({
+      workspaceId,
+      file,
+      name: file.name,
+      mimeType: file.type || undefined,
+      attachedTo: { module: 'inventory', type: 'asset', id: asset.id },
+    })
+    save.mutate(uploaded.id)
+  } catch {
+    toast.error(t('file_upload_failed', isolated({ name: file.name })))
+    busy = false
+  }
+}
+
+/**
+ * No confirmation, deliberately.
+ *
+ * Nothing is destroyed: the file stays in core's storage exactly where it was, and this clears one
+ * uuid on one row. A dialog asking whether you are sure about a thumbnail is a dialog people learn
+ * to dismiss without reading, which is what makes the ones that matter stop working.
+ */
+function remove() {
+  if (busy) return
+  busy = true
+  save.mutate(null)
+}
+</script>
+
+<div class="photo">
+  {#if canManage}
+    <input
+      bind:this={input}
+      type="file"
+      accept="image/*"
+      hidden
+      onchange={(e) => {
+        void choose(e.currentTarget.files)
+        e.currentTarget.value = ''
+      }}
+    />
+  {/if}
+
+  {#if asset.photoFileId}
+    {#if photoQuery.isPending}
+      <Skeleton height="120px" radius="10px" />
+    {:else if photoQuery.isError}
+      <!-- The field is set and the URL could not be signed. Saying so beats a broken image icon. -->
+      <p class="none">{t('files_error')}</p>
+    {:else}
+      <img src={photoQuery.data?.url} alt={t('photo_alt', isolated({ name: asset.name }))} />
+    {/if}
+  {:else}
+    <p class="none">{t('photo_none')}</p>
+  {/if}
+
+  {#if canManage}
+    <div class="acts">
+      <Button size="sm" variant="secondary" icon="image" loading={busy} onclick={() => input?.click()}>
+        {asset.photoFileId ? t('photo_replace') : t('photo_set')}
+      </Button>
+      {#if asset.photoFileId}
+        <Button size="sm" variant="ghost" onclick={remove}>{t('photo_remove')}</Button>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .photo {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  img {
+    display: block;
+    inline-size: 100%;
+    max-block-size: 200px;
+    object-fit: cover;
+    border-radius: var(--kern-r-lg);
+    border: 1px solid var(--kern-border-hairline);
+    /* Behind a photo with transparency, and while one loads. Not `--kern-surface-raised`: a `Sheet`
+       is already that colour, so it would be no ground at all. */
+    background: var(--kern-surface-chip);
+  }
+  .none {
+    margin: 0;
+    padding: 18px 0;
+    text-align: center;
+    font-size: 12.5px;
+    /* Muted with a colour, never opacity: a faded sentence is unreadable whatever its token. */
+    color: var(--kern-ink-500);
+    border: 1px dashed var(--kern-border);
+    border-radius: var(--kern-r-lg);
+  }
+  .acts {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+</style>