kempo-inventory 0.5.9 → 0.6.0

package/README.md

@@ -128,7 +128,7 @@ Items and categories can be **tagged**: short labels such as `acrylic`, `red`, `
 
 Reading the inventory needs the `items:read` permission. Turn on the `public_read` setting (off by default) and **anyone can read it, signed in or not**, so it can be shared as a catalogue. Public reading covers items, categories and fields (and photos, see below); writing always needs the matching permission.
 
-**Quantity counts are only for people who manage quantity.** A caller without `quantity:adjust` or `items:update`, whether signed out, signed in with only `items:read`, or reading publicly, gets items **without `quantity`** and no stock history (`GET /inventory/api/movements` is refused). Callers who do manage quantity get everything as before.
+**The item page shows the count to everyone who can read it.** `GET /inventory/api/items/[id]` returns the `quantity` and the stock history to any reader, signed in or not, so the item page's Quantity tab looks the same for everyone (only people with `quantity:adjust` get the form to change it). Who made a change (`userId`) is only sent to callers with `quantity:adjust` or `items:update`. Lists and searches (`GET /inventory/api/items`) and `GET /inventory/api/movements` still leave the count out for those without `quantity:adjust` or `items:update`.
 
 ## Who can see photos
 

package/kempo-config.json

@@ -103,7 +103,7 @@
       "name": "public_read",
       "value": false,
       "type": "boolean",
-      "description": "Let anyone, signed in or not, browse the inventory (items, categories, photos). They never see quantity counts. Off by default: reading otherwise needs the items:read permission."
+      "description": "Let anyone, signed in or not, browse the inventory (items, categories, photos). The item page shows them the quantity and its history, but they cannot change it. Off by default: reading otherwise needs the items:read permission."
     },
     {
       "name": "public_photos",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-inventory",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "description": "A basic inventory management system for kempo cms",
   "license": "MIT",
   "author": "Dustin Poissant <dustinpoissant@gmail.com>",
@@ -41,7 +41,7 @@
   },
   "peerDependencies": {
     "kempo": ">=4.11.0",
-    "kempo-ui": ">=1.0.0",
+    "kempo-ui": ">=1.5.0",
     "kempo-media": ">=0.3.0",
     "kempo-files": ">=0.1.3",
     "kempo-thumbs": ">=0.1.3"

package/public/api/items/[id]/GET.js

@@ -1,4 +1,4 @@
-import { authorizeRead, forCaller } from '../../../../server/utils/access.js';
+import { authorizeRead } from '../../../../server/utils/access.js';
 import { getItem, getMovements, getLinked, getMedia } from '../../../../server/utils/items.js';
 
 export default async (request, response) => {
@@ -7,9 +7,10 @@ export default async (request, response) => {
 
   const [error, item] = await getItem(request.params.id);
   if(error) return response.status(error.code).json({ error: error.msg });
-  /* The quantity history is all counts, so it is only for people who manage quantity. */
-  const [, movements] = access.canSeeQuantity ? await getMovements({ itemId: item.id, limit: 100 }) : [null, []];
+  /* The item page shows the count and history to everyone who can read it; who made a change is only for people who manage quantity. */
+  const [, found] = await getMovements({ itemId: item.id, limit: 100 });
+  const movements = (found || []).map(({ userId, ...movement }) => access.canSeeQuantity ? { ...movement, userId } : movement);
   const [, linked] = await getLinked(item);
   const [, media] = await getMedia(item);
-  response.json({ item: forCaller(item, access), movements: movements || [], linked: linked || {}, media: media || {} });
+  response.json({ item, movements, linked: linked || {}, media: media || {} });
 };

package/public/components/ItemFields.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from '/kempo-ui/lit-all.min.js';
 import Toast from '/kempo-ui/components/Toast.js';
+import PhotoViewer from '/kempo-ui/components/PhotoViewer.js';
 import '/kempo-ui/components/Toggle.js';
 import '/kempo-ui/components/Combobox.js';
 import '/kempo-ui/components/Icon.js';
@@ -112,6 +113,7 @@ export class InventoryMediaField extends LitElement {
     assets: { type: Object },
     uploading: { type: Number, state: true },
     max: { type: Number },
+    readOnly: { type: Boolean, attribute: 'readonly' },   // show the files only: no adding, removing or reordering, and a click opens the photo viewer
     ratioFor: { type: String, attribute: 'ratio-for' }, // 'item' (default) or 'category': whose aspect ratio the previews use
     ratio: { type: String, state: true },
     cropRatio: { type: String, attribute: 'crop-ratio' },   // force photos to this shape as they are added, e.g. '1 / 1'
@@ -175,28 +177,38 @@ export class InventoryMediaField extends LitElement {
     this.ratio = ratios[this.ratioFor || 'item'] ?? '4 / 3';
   }
 
+  /* Read only: the photo viewer opens over the page, with arrows and keys to move between this field's photos. */
+  openPhoto = id => {
+    const images = this.value.map(v => this.assets[v]).filter(asset => asset?.kind === 'image');
+    PhotoViewer.open(images.map(asset => ({ src: asset.path, caption: asset.alt || asset.name })), images.indexOf(this.assets[id]));
+  };
+
   render(){
     return html`
       <div class="d-f" style="flex-wrap: wrap; gap: var(--spacer_h); align-items: center;">
         ${this.value.map((id, index) => {
           const asset = this.assets[id];
-          const ordered = this.max > 1 && this.value.length > 1;
+          const ordered = !this.readOnly && this.max > 1 && this.value.length > 1;
           return html`
             <div class="media-tile" style="position: relative; width: 5rem; aspect-ratio: ${this.ratio ?? '4 / 3'}; border: 1px solid var(--c_border); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center;" title=${asset?.name ?? 'Missing file'}>
               ${asset?.thumbnail || asset?.kind === 'image'
                 ? html`<img src=${asset.thumbnail ?? asset.path} alt=${asset.alt || asset.name} style="width: 100%; height: 100%; object-fit: cover;">`
                 : html`<small style="padding: 2px; text-align: center; word-break: break-all;">${asset?.name ?? 'Missing'}</small>`}
-              <button type="button" class="no-btn" style="position: absolute; top: 0; right: 0; background: var(--c_bg); line-height: 1; padding: 2px;" aria-label="Remove" @click=${() => this.remove(id)}><k-icon name="close"></k-icon></button>
+              ${this.readOnly
+                ? (asset?.kind === 'image'
+                  ? html`<a href=${asset.path} style="position: absolute; inset: 0;" aria-label=${`View ${asset.alt || asset.name}`} @click=${e => { e.preventDefault(); this.openPhoto(id); }}></a>`
+                  : asset ? html`<a href=${asset.path} target="_blank" rel="noopener" style="position: absolute; inset: 0;" aria-label=${`Open ${asset.name}`}></a>` : '')
+                : html`<button type="button" class="no-btn" style="position: absolute; top: 0; right: 0; background: var(--c_bg); line-height: 1; padding: 2px;" aria-label="Remove" @click=${() => this.remove(id)}><k-icon name="close"></k-icon></button>`}
               ${ordered ? (index === 0
                 ? html`<span class="media-primary" style="position: absolute; left: 0; bottom: 0; right: 0; background: var(--c_bg); font-size: 0.7rem; text-align: center; line-height: 1.4;"><k-icon name="star_filled"></k-icon> Primary</span>`
                 : html`<button type="button" class="no-btn media-make-primary" style="position: absolute; left: 0; bottom: 0; right: 0; background: var(--c_bg); font-size: 0.7rem; line-height: 1.4; cursor: pointer;" aria-label="Make this the primary photo" title="Make this the primary photo" @click=${() => this.makePrimary(id)}><k-icon name="star"></k-icon> Make primary</button>`) : ''}
             </div>`;
         })}
-        <label class="btn" style="margin: 0; cursor: pointer;">
+        ${this.readOnly ? '' : html`<label class="btn" style="margin: 0; cursor: pointer;">
           <k-icon name="add"></k-icon> ${this.uploading ? `Uploading ${this.uploading}…` : 'Add files'}
           <input type="file" multiple accept=${MEDIA_ACCEPT} style="display: none;"
             @change=${e => { const files = [...e.target.files]; e.target.value = ''; this.addFiles(files); }}>
-        </label>
+        </label>`}
       </div>`;
   }
 }
@@ -281,6 +293,7 @@ export const readTags = $tags => {
 class InventoryColorField extends LitElement {
   static properties = {
     value: { type: String },
+    readOnly: { type: Boolean, attribute: 'readonly' },
   };
 
   constructor(){
@@ -296,6 +309,12 @@ class InventoryColorField extends LitElement {
   }
 
   render(){
+    if(this.readOnly) return this.value
+      ? html`<div class="d-f" style="align-items: center; gap: var(--spacer_h);">
+          <span style="display: inline-block; width: 4rem; height: 4rem; border: 1px solid var(--c_border); border-radius: var(--radius); background: ${this.value};"></span>
+          <span class="tc-muted">${this.value}</span>
+        </div>`
+      : '';
     return this.value
       ? html`<div class="d-f" style="align-items: center; gap: var(--spacer_h);">
           <k-color-picker format="hex" .value=${this.value} @change=${e => {
@@ -345,58 +364,73 @@ const preloadSuggestions = ($combobox, field) => {
 /*
   The form control for one field, with its label, a required marker and its description.
 */
-export const fieldTemplate = (field, value, { linked = {}, media = {}, ownId = null } = {}) => {
+export const fieldTemplate = (field, value, { linked = {}, media = {}, ownId = null, readOnly = false } = {}) => {
   const id = inputId(field);
   const link = field.type === 'item' && value ? linked[value] : null;
   const linkLabel = link ? `${link.name} (${link.sku})` : '';
+  /* Read only, a box that only offers choices (a list, a search) is a plain read-only input holding its text, so every box looks alike. */
+  const plain = text => html`<input type="text" id=${id} class="full" readonly .value=${text}>`;
   let control;
   switch(field.type){
     case 'longtext':
-      control = html`<textarea id=${id} class="full" rows="3" .value=${value ?? ''}></textarea>`;
+      control = html`<textarea id=${id} class="full" rows="3" ?readonly=${readOnly} .value=${value ?? ''}></textarea>`;
       break;
     case 'url':
-      control = html`<input type="url" id=${id} class="full" placeholder="https://" .value=${value ?? ''}>`;
+      control = html`<input type="url" id=${id} class="full" placeholder=${readOnly ? '' : 'https://'} ?readonly=${readOnly} .value=${value ?? ''}>`;
       break;
     case 'number':
-      control = html`<input type="number" step="any" id=${id} class="full" .value=${value ?? ''}>`;
+      control = html`<input type="number" step="any" id=${id} class="full" ?readonly=${readOnly} .value=${value ?? ''}>`;
       break;
     case 'date':
-      control = html`<input type="date" id=${id} class="full" .value=${value ?? ''}>`;
+      control = html`<input type="date" id=${id} class="full" ?readonly=${readOnly} .value=${value ?? ''}>`;
       break;
     case 'color':
-      control = html`<k-inventory-color-field id=${id} .value=${value ?? ''}></k-inventory-color-field>`;
+      control = html`<k-inventory-color-field id=${id} ?readonly=${readOnly} .value=${value ?? ''}></k-inventory-color-field>`;
       break;
     case 'rating':
       control = html`<div class="d-f" style="align-items: center; gap: var(--spacer_h);">
-        <k-rating id=${id} .value=${Number(value) || 0}></k-rating>
-        <button type="button" class="no-btn tc-muted" style="cursor: pointer;" aria-label="Clear the rating" @click=${e => { e.currentTarget.previousElementSibling.value = 0; }}>clear</button>
+        <k-rating id=${id} ?disabled=${readOnly} .value=${Number(value) || 0}></k-rating>
+        ${readOnly ? '' : html`<button type="button" class="no-btn tc-muted" style="cursor: pointer;" aria-label="Clear the rating" @click=${e => { e.currentTarget.previousElementSibling.value = 0; }}>clear</button>`}
       </div>`;
       break;
     case 'boolean':
-      control = html`<k-toggle id=${id} .value=${Boolean(value)}></k-toggle>`;
+      control = html`<k-toggle id=${id} ?disabled=${readOnly} .value=${Boolean(value)}></k-toggle>`;
       break;
     case 'select':
-      control = html`<select id=${id} class="full">
+      control = readOnly ? plain(value ?? '') : html`<select id=${id} class="full">
         <option value="">${field.required ? 'Choose…' : 'None'}</option>
         ${field.options.map(o => html`<option value=${o} ?selected=${o === value}>${o}</option>`)}
       </select>`;
       break;
     case 'item':
-      control = html`<k-combobox id=${id} class="full" placeholder="Search items…"
+      control = readOnly ? plain(linkLabel || (value ? '(deleted item)' : '')) : html`<k-combobox id=${id} class="full" placeholder="Search items…"
         .value=${linkLabel} data-item-id=${value ?? ''} data-label=${linkLabel}
         @search=${e => searchItems(e, ownId)}
         @select=${e => { e.currentTarget.dataset.itemId = e.detail.value; e.currentTarget.dataset.label = e.detail.label; }}></k-combobox>`;
       break;
     case 'media':
-      control = html`<k-inventory-media-field id=${id} .value=${value ?? []} .assets=${media} .cropRatio=${field.imageRatio ?? ''} .cropMax=${field.imageMax ?? 0}></k-inventory-media-field>`;
+      control = html`<k-inventory-media-field id=${id} ?readonly=${readOnly} .value=${value ?? []} .assets=${media} .cropRatio=${field.imageRatio ?? ''} .cropMax=${field.imageMax ?? 0}></k-inventory-media-field>`;
       break;
     default:
-      control = field.type === 'text' && field.suggest
+      control = field.type === 'text' && field.suggest && !readOnly
         ? html`<k-combobox id=${id} class="full" debounce-ms="150" .value=${value ?? ''}
             empty-message="Nothing saved yet. Type to add one." no-results-message="New value"
             @focusin=${e => preloadSuggestions(e.currentTarget, field)}
             @search=${e => loadSuggestions(e.currentTarget, field, e.detail.value)}></k-combobox>`
-        : html`<input type="text" id=${id} class="full" .value=${value ?? ''}>`;
+        : html`<input type="text" id=${id} class="full" ?readonly=${readOnly} .value=${value ?? ''}>`;
+  }
+  if(readOnly && field.type === 'url' && /^https?:\/\//i.test(String(value ?? '').trim())){
+    /* Only web addresses get a link; anything else (a javascript: or data: address, say) stays plain text. */
+    control = html`<div class="d-f" style="gap: var(--spacer_h);">
+      <div class="flex">${control}</div>
+      <a class="btn" href=${String(value).trim()} target="_blank" rel="noopener" aria-label="Open in a new tab" title="Open in a new tab"><k-icon name="open_in_browser"></k-icon></a>
+    </div>`;
+  }
+  if(readOnly && link){
+    control = html`<div class="d-f" style="gap: var(--spacer_h);">
+      <div class="flex">${control}</div>
+      <a class="btn" href="/items/${value}" aria-label="Open this item" title="Open this item"><k-icon name="arrow" direction="right"></k-icon></a>
+    </div>`;
   }
   return html`<div class="mb">
     <label class="d-b mb-sm" for=${id}>${field.label}${field.required ? ' *' : ''}</label>

package/public/components/ItemForm.js

@@ -31,7 +31,7 @@ const offerCategories = async $combobox => {
   if(!error) $combobox.setOptions(data.categories.map(c => c.name));
 };
 
-export const createItemForm = ({ item = null, fields = [], defaults = {}, askQuantity = true, context = { linked: {}, media: {} }, inDialog = false } = {}) => {
+export const createItemForm = ({ item = null, fields = [], defaults = {}, askQuantity = true, context = { linked: {}, media: {} }, inDialog = false, readOnly = false } = {}) => {
   const editing = Boolean(item);
   /* An item an extension owns keeps its SKU, name and category: the server refuses changes to them, so the boxes are not offered. */
   const locked = editing && Boolean(item.owner);
@@ -89,40 +89,42 @@ export const createItemForm = ({ item = null, fields = [], defaults = {}, askQua
       whenever the category's fields changed the order.
     */
     render(nothing, $box);
-    render(html`${shown.map(f => fieldTemplate(f, f.key in kept ? kept[f.key] : (item?.fields[f.key] ?? defaults.fields?.[f.key]), context))}`, $box);
+    render(html`${shown.map(f => fieldTemplate(f, f.key in kept ? kept[f.key] : (item?.fields[f.key] ?? defaults.fields?.[f.key]), { ...context, readOnly }))}`, $box);
   };
 
   render(html`
-    ${locked ? html`<p class="mb tc-muted">Managed by the ${item.owner} extension. Its SKU, name and category can only be changed there; everything else you can edit here, and quantity in the Quantity tab.</p>` : ''}
+    ${locked && !readOnly ? html`<p class="mb tc-muted">Managed by the ${item.owner} extension. Its SKU, name and category can only be changed there; everything else you can edit here, and quantity in the Quantity tab.</p>` : ''}
     <div class="d-f mb" style="gap: var(--spacer);">
       <div class="flex">
         <label class="d-b mb-sm" for="dlg-sku">SKU *</label>
         <div class="d-f" style="gap: var(--spacer_h);">
           <input type="text" id="dlg-sku" class="flex" style="width: auto; min-width: 0;" autocapitalize="off" autocomplete="off"
-            .value=${item?.sku ?? defaults.sku ?? ''} ?disabled=${locked} @keydown=${skuKeydown}>
-          <button type="button" class="btn" id="dlg-scan" ?disabled=${locked} @click=${scan}>Scan</button>
+            .value=${item?.sku ?? defaults.sku ?? ''} ?disabled=${locked && !readOnly} ?readonly=${readOnly} @keydown=${skuKeydown}>
+          ${readOnly ? '' : html`<button type="button" class="btn" id="dlg-scan" aria-label="Scan a barcode" title="Scan a barcode" ?disabled=${locked} @click=${scan}><k-icon src="/inventory/icons/barcode_scanner.svg"></k-icon></button>`}
         </div>
       </div>
     </div>
-    <div class="mb"><label class="d-b mb-sm" for="dlg-name">Name *</label><input type="text" id="dlg-name" class="full" ?disabled=${locked} .value=${item?.name ?? defaults.name ?? ''}></div>
+    <div class="mb"><label class="d-b mb-sm" for="dlg-name">Name *</label><input type="text" id="dlg-name" class="full" ?disabled=${locked && !readOnly} ?readonly=${readOnly} .value=${item?.name ?? defaults.name ?? ''}></div>
     <div class="mb">
       <label class="d-b mb-sm" for="dlg-category">Category</label>
-      <k-combobox id="dlg-category" class="full" debounce-ms="150" ?disabled=${locked} .value=${item?.category ?? defaults.category ?? ''}
+      ${readOnly ? html`<input type="text" id="dlg-category" class="full" readonly .value=${item?.category ?? ''}>` : html`<k-combobox id="dlg-category" class="full" debounce-ms="150" ?disabled=${locked} .value=${item?.category ?? defaults.category ?? ''}
         empty-message="No categories yet. Type to add one." no-results-message="New category"
         @focusin=${e => offerCategories(e.currentTarget)}
-        @search=${showFields} @select=${() => setTimeout(showFields)} @change=${() => setTimeout(showFields)} @focusout=${() => setTimeout(showFields, 150)}></k-combobox>
+        @search=${showFields} @select=${() => setTimeout(showFields)} @change=${() => setTimeout(showFields)} @focusout=${() => setTimeout(showFields, 150)}></k-combobox>`}
     </div>
     <div class="d-f mb" style="align-items: flex-end; gap: var(--spacer);">
       <div class="flex">
         <label class="d-b mb-sm" for="dlg-unit">Unit
           <small class="d-b tc-muted">What the quantity counts, such as oz or g. Leave empty to use the category's unit.</small>
         </label>
-        <input type="text" id="dlg-unit" class="full" maxlength="20" .value=${item?.unit ?? defaults.unit ?? ''}>
+        <input type="text" id="dlg-unit" class="full" maxlength="20" ?readonly=${readOnly} .value=${item?.unit ?? defaults.unit ?? ''}>
       </div>
       ${editing || !askQuantity ? '' : html`<div style="width: 9rem;"><label class="d-b mb-sm" for="dlg-qty">Starting quantity</label><input type="number" id="dlg-qty" class="full" min="0" step="1" .value=${String(defaults.quantity ?? 0)}></div>`}
     </div>
-    <div class="mb"><label class="d-b mb-sm" for="dlg-tags">Tags</label><k-tags id="dlg-tags" .value=${tagsValue(item?.tags ?? defaults.tags)} .getSuggestions=${suggestTags} @input=${lowerTagInput} @change=${lowerTagChips}></k-tags></div>
-    <div class="mb"><label class="d-b mb-sm" for="dlg-description">Description</label><textarea id="dlg-description" class="full" rows="2" .value=${item?.description ?? ''}></textarea></div>
+    <div class="mb"><label class="d-b mb-sm" for="dlg-tags">Tags</label>${readOnly
+      ? html`<input type="text" id="dlg-tags" class="full" readonly .value=${(item?.tags ?? []).join(', ')}>`
+      : html`<k-tags id="dlg-tags" .value=${tagsValue(item?.tags ?? defaults.tags)} .getSuggestions=${suggestTags} @input=${lowerTagInput} @change=${lowerTagChips}></k-tags>`}</div>
+    <div class="mb"><label class="d-b mb-sm" for="dlg-description">Description</label><textarea id="dlg-description" class="full" rows="2" ?readonly=${readOnly} .value=${item?.description ?? ''}></textarea></div>
     <div id="dlg-fields"></div>
   `, $root);
   showFields();

package/public/components/ItemQuantity.js

@@ -108,38 +108,30 @@ export default class ItemQuantity extends ShadowComponent {
     const setting = this.mode === 'set';
     return html`
       <h4>${setting ? 'Set the count' : 'Add or remove'}</h4>
-      <div class="d-f" style="align-items: flex-end;">
+      <div class="d-f">
         <div class="mb mrq">
-          <label class="d-b mbq" for="qtyMode">How
-            <small class="d-b tc-muted">Set the count, or add and remove.</small>
-          </label>
+          <label class="d-b mbq" for="qtyMode">How</label>
           <select id="qtyMode" class="m0" @change=${event => { this.mode = event.target.value; this.amount = ''; }}>
             <option value="change" ?selected=${!setting}>Add or remove</option>
             <option value="set" ?selected=${setting}>Set to</option>
           </select>
         </div>
-        <div class="mb mrq" style="width: 16rem;">
-          <label class="d-b mbq" for="qtyAmount">${setting ? 'Count' : 'Change'}${this.unit ? ` (${this.unit})` : ''}
-            <small class="d-b tc-muted">${setting
-              ? 'The count it should be now. The change is worked out for you.'
-              : 'Add a number to receive stock, or use a minus sign to remove it.'}</small>
-          </label>
+        <div class="mb mrq" style="width: 12rem;">
+          <label class="d-b mbq" for="qtyAmount">${setting ? 'Count' : 'Change'}${this.unit ? ` (${this.unit})` : ''} <span class="tc-danger">*</span></label>
           <input id="qtyAmount" type="number" step="any" class="full m0" .value=${this.amount}
             @input=${event => { this.amount = event.target.value; }}>
         </div>
+      </div>
+      <div class="d-f">
         <div class="mb mrq">
-          <label class="d-b mbq" for="qtyReason">Reason
-            <small class="d-b tc-muted">Optional. Why it changed, if you want it recorded.</small>
-          </label>
+          <label class="d-b mbq" for="qtyReason">Reason</label>
           <select id="qtyReason" class="m0" @change=${event => { this.reason = event.target.value; }}>
             <option value="" ?selected=${this.reason === ''}>No reason</option>
             ${Object.entries(REASONS).map(([value, label]) => html`<option value=${value} ?selected=${value === this.reason}>${label}</option>`)}
           </select>
         </div>
         <div class="flex mb mrq" style="min-width: 12rem;">
-          <label class="d-b mbq" for="qtyNote">Note
-            <small class="d-b tc-muted">Optional. Shown in the history.</small>
-          </label>
+          <label class="d-b mbq" for="qtyNote">Note</label>
           <input id="qtyNote" type="text" class="full m0" maxlength="200" .value=${this.note}
             @input=${event => { this.note = event.target.value; }}>
         </div>

package/public/icons/barcode_scanner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M40-120v-182h60v122h122v60H40Zm697 0v-60h122v-122h60v182H737ZM153-231v-499h80v499h-80Zm121 0v-499h42v499h-42Zm122 0v-499h83v499h-83Zm125 0v-499h121v499H521Zm163 0v-499h42v499h-42Zm83 0v-499h38v499h-38ZM40-658v-182h182v60H100v122H40Zm819 0v-122H737v-60h182v182h-60Z"/></svg>

package/public-items/[id]/index.page.html

@@ -1,6 +1,6 @@
 <!--
   title: Item
-  description: A single inventory item
+  description: A single inventory item, to read or, with permission, to edit
 -->
 <page template="default" title="Item">
 <content>
@@ -8,126 +8,162 @@
 		<k-tabs active="details" hash-routing>
 			<k-tab for="details">Details</k-tab>
 			<k-tab-content name="details" class="pt">
-				<div id="detail"></div>
+				<div id="itemHeader"></div>
+				<div id="itemBody"></div>
+			</k-tab-content>
+			<k-tab for="quantity">Quantity</k-tab>
+			<k-tab-content name="quantity" class="pt">
+				<k-inventory-item-quantity id="itemQuantity"></k-inventory-item-quantity>
 			</k-tab-content>
 			<location name="inventory-item-tabs" />
 		</k-tabs>
 	</div>
 </content>
 <content location="scripts">
-	<script type="module" src="/kempo-ui/components/Tabs.js"></script>	<script type="module">
+	<script type="module" src="/kempo-ui/components/Tabs.js"></script>
+	<script type="module">
 		import { html, render } from '/kempo-ui/lit-all.min.js';
 		import Dialog from '/kempo-ui/components/Dialog.js';
 		import Toast from '/kempo-ui/components/Toast.js';
-		import PhotoViewer from '/kempo-ui/components/PhotoViewer.js';
-		import '/kempo-ui/components/Rating.js';
 		import { getSession, getAllCurrentUserPermissions } from '/kempo/sdk.js';
 		import { getItem, deleteItem, getFields } from '/inventory/sdk.js';
-		import { displayValue, applicableFields } from '/inventory/components/ItemFields.js';
+		import { createItemForm } from '/inventory/components/ItemForm.js';
+		import '/inventory/components/ItemQuantity.js';
 
+		/*
+		  One page for an item, the same for everyone: Details, Quantity and whatever extensions add to the
+		  inventory-item-tabs location (Barcodes, say). Details is the item form: editable for people who may
+		  update items, the same form with every box read only for everyone else.
+		*/
 		const id = location.pathname.split('/').filter(Boolean).pop();
 		const $app = document.getElementById('app');
-		const $detail = document.getElementById('detail');
+		const $header = document.getElementById('itemHeader');
+		const $body = document.getElementById('itemBody');
 
 		const [, session] = await getSession();
-		const signedIn = Boolean(session?.user);
-		const [, permissionData] = signedIn ? await getAllCurrentUserPermissions() : [null, null];
+		const [, permissionData] = session?.user ? await getAllCurrentUserPermissions() : [null, null];
 		const permissions = new Set(permissionData?.permissions ?? []);
 		const can = name => permissions.has(`kempo-inventory:${name}`);
+		const canEdit = can('items:update');
+
+		/* Everyone sees the count and its history; only people who may adjust it get the form (the component checks). */
+		document.getElementById('itemQuantity').itemId = id;
+
+		let fields = [];
+		let current = null;
+		let form = null;
+		let dirty = false;
+		let saving = false;
+
 		const [fieldsError, fieldData] = await getFields();
 		if(fieldsError){
 			$app.innerHTML = '<p class="tc-danger">You need to sign in to view this item.</p>';
 			$app.hidden = false;
 			Toast.error(fieldsError.msg || 'Failed to load the inventory fields');
 		} else {
+			fields = fieldData.fields;
 			$app.hidden = false;
-			await draw(fieldData);
+			$body.style.maxWidth = '44rem';
+			await show();
 		}
 
 		/* The category is a built-in property of every item; '' means uncategorised. */
-		/* Only web addresses become links; anything else (a javascript: or data: address, say) shows as plain text. */
-		function isWebLink(value){
-			try {
-				const { protocol } = new URL(String(value).trim());
-				return protocol === 'http:' || protocol === 'https:';
-			} catch {
-				return false;
-			}
-		}
 		function categoryOf(item){ return (item.category ?? '').trim(); }
 		function categoryHref(name){ return name ? `/category?name=${encodeURIComponent(name)}` : '/category?uncategorised=1'; }
 		function tagChips(tags){ return tags?.length ? html`<div class="tag-list">${tags.map(tag => html`<a class="tag-chip" href="/search?tag=${encodeURIComponent(tag)}">${tag}</a>`)}</div>` : ''; }
 
-		async function draw(fieldData){
-			const fields = fieldData.fields;
+		/* Loads the item and draws the page from it: the first time, and again after a save. */
+		async function show(){
 			const [error, data] = await getItem(id);
 			if(error){
 				render(html`<a href="/" class="btn mb"><k-icon name="arrow" direction="left"></k-icon> Home</a>
-					<h1>${error.code === 404 ? 'Item not found' : 'Something went wrong'}</h1><p>${error.msg}</p>`, $detail);
+					<h1>${error.code === 404 ? 'Item not found' : 'Something went wrong'}</h1><p>${error.msg}</p>`, $header);
 				return;
 			}
-			const { item, linked, media } = data;
-			document.title = `${item.name} · Inventory`;
+			current = data;
+			document.title = `${data.item.name} · Inventory`;
+			dirty = false;
+			mountForm();
+			drawHeader();
+		}
+
+		/* The form is a fresh one each time: that is what Reset does, and what a save leaves behind. */
+		function mountForm(){
+			const { item, linked, media } = current;
+			form = createItemForm({ item, fields, readOnly: !canEdit, context: { linked, media, ownId: item.id } });
+			$body.replaceChildren(form.$root);
+		}
+
+		function drawHeader(){
+			if(!current) return;
+			const { item } = current;
 			const category = categoryOf(item);
 			const backHref = category ? categoryHref(category) : '/';
-			const context = { linked, media };
+			render(html`
+				<div class="d-f" style="align-items: center;">
+					<a href=${backHref} class="btn mb mrq" id="backBtn"><k-icon name="arrow" direction="left"></k-icon> ${category || 'Home'}</a>
+					<div class="flex"></div>
+					${canEdit ? html`
+						<button type="button" class="btn mb mrq" id="resetBtn" ?disabled=${!dirty || saving} @click=${reset}>Reset</button>
+						<button type="button" class="btn success mb mrq" id="saveBtn" ?disabled=${!dirty || saving} @click=${save}>${saving ? 'Saving…' : 'Save'}</button>` : ''}
+					${can('items:delete') ? html`<button type="button" class="btn danger mb" id="deleteBtn" @click=${remove}><k-icon name="delete"></k-icon> Delete</button>` : ''}
+				</div>
+				<h1 class="mb" id="itemName">${item.name}</h1>
+			`, $header);
+		}
+
+		function reset(){
+			mountForm();
+			dirty = false;
+			drawHeader();
+		}
 
-			/* Clicking a photo opens Kempo UI's photo viewer over the page (arrows and keys move between the item's photos). */
-			const openPhoto = photo => {
-				const images = photos.filter(p => p.kind === 'image');
-				PhotoViewer.open(images.map(p => ({ src: p.path, caption: p.alt || p.name })), images.indexOf(photo));
-			};
-			const shown = applicableFields(fields, item.category);
-			const photos = shown.filter(f => f.type === 'media').flatMap(f => (item.fields[f.key] ?? []).map(mediaId => media[mediaId]).filter(Boolean));
-			const rows = shown.filter(f => f.type !== 'media' && item.fields[f.key] !== undefined && item.fields[f.key] !== null);
+		async function save(){
+			if(saving || !form) return;
+			saving = true;
+			drawHeader();
+			const saved = await form.save();
+			saving = false;
+			if(!saved){
+				drawHeader();
+				return;
+			}
+			Toast.success(`Saved ${saved.name}`, { position: 'bottom right' });
+			await show();
+		}
 
-			const remove = () => Dialog.confirm(`Delete "${item.name}" and its stock history? This action cannot be undone.`, async confirmed => {
+		function remove(){
+			const { item } = current;
+			const category = categoryOf(item);
+			Dialog.confirm(`Delete "${item.name}" and its stock history? This action cannot be undone.`, async confirmed => {
 				if(!confirmed) return;
 				const [deleteError] = await deleteItem(item.id);
 				if(deleteError){
 					Toast.error(deleteError.msg || 'Failed to delete item');
 					return;
 				}
-				location.href = backHref;
+				location.href = category ? categoryHref(category) : '/';
 			});
+		}
 
-			render(html`
-				<div class="d-f mb" style="align-items: center; gap: var(--spacer); flex-wrap: wrap;">
-					<a href=${backHref} class="btn" id="backBtn"><k-icon name="arrow" direction="left"></k-icon> ${category || 'Home'}</a>
-					<div class="flex"></div>
-					${can('items:update') ? html`<a class="btn" id="editBtn" href=${`/items/${item.id}/edit?next=${encodeURIComponent(`/items/${item.id}`)}`}><k-icon name="edit"></k-icon> Edit</a>` : ''}
-					${can('items:delete') ? html`<button class="btn danger" id="deleteBtn" @click=${remove}><k-icon name="delete"></k-icon> Delete</button>` : ''}
-				</div>
-
-				<h1 class="mb0" id="itemName">${item.name}</h1>
-				<p class="tc-muted mb-sm">${item.sku}</p>
-				${tagChips(item.tags)}
-
-				${photos.length ? html`
-					<div class="gallery mb-lg" id="gallery">
-						${photos.map(p => p.kind === 'image'
-							? html`<a href=${p.path} @click=${e => { e.preventDefault(); openPhoto(p); }}><img src=${p.thumbnail ?? p.path} alt=${p.alt || p.name}></a>`
-							: html`<a href=${p.path} target="_blank" rel="noopener" class="btn">${p.name}</a>`)}
-					</div>` : ''}
-
-				${item.description ? html`<p style="white-space: pre-wrap;">${item.description}</p>` : ''}
-
-				${rows.length ? html`
-					<dl id="fields" style="display: grid; grid-template-columns: max-content 1fr; gap: var(--spacer_q) var(--spacer);">
-						${rows.map(f => html`<dt class="tc-muted">${f.label}</dt>
-							<dd class="m0">${f.type === 'rating'
-								? html`<k-rating disabled .value=${item.fields[f.key]} aria-label=${`${item.fields[f.key]} out of 5`}></k-rating>`
-								: f.type === 'color'
-								? html`<span style="display: inline-block; width: 4rem; height: 4rem; vertical-align: middle; margin-right: var(--spacer_h); border: 1px solid var(--c_border); border-radius: var(--radius); background: ${item.fields[f.key]};"></span>${item.fields[f.key]}`
-								: f.type === 'item' && linked[item.fields[f.key]]
-								? html`<a href="/items/${item.fields[f.key]}">${displayValue(f, item.fields[f.key], context)}</a>`
-								: f.type === 'url' && isWebLink(item.fields[f.key])
-									? html`<a href=${item.fields[f.key]} target="_blank" rel="noopener">${item.fields[f.key]}</a>`
-									: f.type === 'longtext'
-									? html`<span style="white-space: pre-wrap;">${item.fields[f.key]}</span>`
-									: displayValue(f, item.fields[f.key], context)}</dd>`)}
-					</dl>` : ''}
-			`, $detail);
+		/* Save and Reset wake up when anything in the form differs from how it opened. Some boxes keep their value inside their own shadow DOM, so this checks on a short timer too. */
+		function checkDirty(){
+			const next = Boolean(form?.isDirty());
+			if(next === dirty) return;
+			dirty = next;
+			drawHeader();
+		}
+		if(canEdit){
+			$body.addEventListener('input', () => setTimeout(checkDirty));
+			$body.addEventListener('change', () => setTimeout(checkDirty));
+			setInterval(checkDirty, 400);
+			/* The browser's own "Leave site?" prompt while there are unsaved changes. */
+			window.addEventListener('beforeunload', event => {
+				if(!dirty) return;
+				event.preventDefault();
+				event.returnValue = '';
+			});
+			window.hasUnsavedInventoryWork = () => dirty;
 		}
 	</script>
 </content>