Upgrade OFF lookup UX and stock detail identifier editing

2026-04-11 10:14:49 +02:00
parent ea8a95b95d
commit 977c62818c
12 changed files with 645 additions and 8 deletions
@@ -77,6 +77,26 @@ function normalizeIdentifierLookupResponse(payload) {
    identifierType: payload?.identifier_type || null,
    item: payload?.item || null,
    payloadFetchedAt: payload?.payload_fetched_at || null,
+    retryAfterSeconds:
+      Number.isInteger(payload?.retry_after_seconds) ? payload.retry_after_seconds : null,
+    staleCache: Boolean(payload?.stale_cache),
+  };
+}
+
+function normalizeItemLookupResponse(payload) {
+  return {
+    status: payload?.status || null,
+    found: Boolean(payload?.found),
+    update: Boolean(payload?.update),
+    identifierCode: payload?.identifier_code || null,
+    identifierType: payload?.identifier_type || null,
+    preview: payload?.preview || null,
+    updatedFields: Array.isArray(payload?.updated_fields) ? payload.updated_fields : [],
+    offPayloadFetchedAt: payload?.off_payload_fetched_at || null,
+    retryAfterSeconds:
+      Number.isInteger(payload?.retry_after_seconds) ? payload.retry_after_seconds : null,
+    staleCache: Boolean(payload?.stale_cache),
+    item: payload?.item || null,
  };
 }

@@ -111,6 +131,23 @@ export async function lookupItemByIdentifier(store, identifierCode) {
  return normalizeIdentifierLookupResponse(payload);
 }

+export async function lookupItemDetails(store, uuidB64, { update = false } = {}) {
+  const payload = await apiRequest(store, `${getPath('items')}/${uuidB64}/lookup`, {
+    method: 'POST',
+    query: { update: update ? 1 : 0 },
+  });
+
+  return normalizeItemLookupResponse(payload);
+}
+
+export async function patchStockItem(store, uuidB64, body) {
+  const payload = await apiRequest(store, `${getPath('items')}/${uuidB64}`, {
+    method: 'PATCH',
+    body,
+  });
+  return unwrapEntryPayload(payload);
+}
+
 export async function updateStockItem(store, uuidB64, body) {
  const payload = await apiRequest(store, `${getPath('items')}/${uuidB64}/stock`, {
    method: 'POST',
@@ -1,5 +1,5 @@
 export const APP_NAME = 'Lonc';
-export const APP_VERSION = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.1.2';
+export const APP_VERSION = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.2.0';
 export const TRYTON_APPLICATION = 'kitchen';

 export const CONNECTION_STATES = {
@@ -739,8 +739,67 @@ export function labelCreatePageData(store) {
        return 'Lookup failed on the server. You can still fill the form manually.';
      }

+      if (status === 'rate_limited') {
+        return 'Lookup is temporarily rate-limited. Try again shortly.';
+      }
+
      return 'Lookup response could not be applied to this form.';
    },
+    lookupStatusMessageWithDetails(response, identifierCode) {
+      const base = this.lookupStatusMessage(response?.status, identifierCode);
+      if (response?.status !== 'rate_limited') {
+        return base;
+      }
+
+      if (!Number.isInteger(response?.retryAfterSeconds) || response.retryAfterSeconds <= 0) {
+        return base;
+      }
+
+      return `${base} Retry in ${response.retryAfterSeconds}s.`;
+    },
+    lookupSourceLabel(source) {
+      if (!source) {
+        return '';
+      }
+
+      const labels = {
+        item: 'existing item',
+        cache: 'cache',
+        openfoodfacts: 'OpenFoodFacts',
+      };
+
+      return labels[source] || source;
+    },
+    lookupSuccessMessage(response) {
+      const parts = ['Lookup applied product details'];
+      const metadata = [];
+
+      if (response?.source) {
+        metadata.push(`source: ${this.lookupSourceLabel(response.source)}`);
+      }
+      if (response?.cacheHit) {
+        metadata.push('cache hit');
+      }
+      if (response?.staleCache) {
+        metadata.push('stale cache');
+      }
+      if (response?.payloadFetchedAt) {
+        const fetchedAt = new Date(response.payloadFetchedAt);
+        metadata.push(
+          `fetched: ${
+            Number.isNaN(fetchedAt.getTime())
+              ? response.payloadFetchedAt
+              : fetchedAt.toLocaleString()
+          }`,
+        );
+      }
+
+      if (metadata.length) {
+        parts.push(`(${metadata.join(', ')})`);
+      }
+
+      return `${parts.join(' ')}.`;
+    },
    normalizeScannerError(error) {
      const message = String(error?.message || '');
      const normalized = message.toLowerCase();
@@ -875,7 +934,7 @@ export function labelCreatePageData(store) {
      await runAsyncState(this.lookupState, async () => {
        const response = await lookupItemByIdentifier(store, identifierCode);
        if (response.status !== 'ok') {
-          const message = this.lookupStatusMessage(response.status, identifierCode);
+          const message = this.lookupStatusMessageWithDetails(response, identifierCode);
          this.lookupState.error = message;
          store.addAlert({
            type: response.status === 'not_found' ? 'info' : 'warning',
@@ -932,11 +991,9 @@ export function labelCreatePageData(store) {
        this.suggestions = [];
        this.persistDraft();

-        const sourceSuffix = response.source ? ` (${response.source})` : '';
-        const cacheSuffix = response.cacheHit ? ', cache hit' : '';
        store.addAlert({
          type: 'success',
-          message: `Lookup applied product details${sourceSuffix}${cacheSuffix}.`,
+          message: this.lookupSuccessMessage(response),
        });
      }).catch((error) => {
        store.addAlert({
@@ -1,6 +1,8 @@
 import {
  adjustStockEntry,
  getStockEntry,
+  lookupItemDetails,
+  patchStockItem,
  useStockItem,
 } from '../../api/stock.js';
 import { formatPrintErrorMessage, printItemLabel } from '../../api/labels.js';
@@ -27,6 +29,10 @@ function parseDateValue(value) {
  return new Date(year, month - 1, day);
 }

+function normalizeIdentifierCode(value) {
+  return String(value || '').replace(/\s+/g, '').trim();
+}
+
 function expirationInfo(entry) {
  if (!entry?.expire_date) {
    return {
@@ -134,6 +140,67 @@ export function renderStockDetailPage() {
                  <dd class="col-7" x-text="entry.stock_type || 'Stored'"></dd>
                </dl>

+                <div class="mt-4">
+                  <h3 class="h6 mb-3">Identifier</h3>
+                  <div class="input-group">
+                    <input
+                      class="form-control"
+                      type="text"
+                      x-model="identifierDraft"
+                      inputmode="numeric"
+                      autocomplete="off"
+                      placeholder="EAN / UPC / GTIN"
+                    />
+                    <button
+                      class="btn btn-outline-primary"
+                      type="button"
+                      @click="saveIdentifierCode()"
+                      :disabled="identifierState.isLoading"
+                    >
+                      <span x-show="!identifierState.isLoading">Save identifier</span>
+                      <span x-show="identifierState.isLoading">Saving...</span>
+                    </button>
+                  </div>
+                  <div class="form-text">Used for OpenFoodFacts lookups and product metadata refresh.</div>
+                  <template x-if="identifierState.error">
+                    <div class="small text-danger mt-1" x-text="identifierState.error"></div>
+                  </template>
+                </div>
+
+                <div class="mt-4">
+                  <h3 class="h6 mb-2">OpenFoodFacts</h3>
+                  <div class="d-flex flex-wrap gap-2">
+                    <button
+                      class="btn btn-outline-secondary"
+                      type="button"
+                      @click="runItemLookup(false)"
+                      :disabled="lookupDetailsState.isLoading || !hasIdentifierCode()"
+                    >
+                      <span x-show="!lookupDetailsState.isLoading">Refresh details</span>
+                      <span x-show="lookupDetailsState.isLoading">Refreshing...</span>
+                    </button>
+                    <button
+                      class="btn btn-outline-primary"
+                      type="button"
+                      @click="runItemLookup(true)"
+                      :disabled="lookupDetailsState.isLoading || !hasIdentifierCode()"
+                    >
+                      <span x-show="!lookupDetailsState.isLoading">Apply missing fields</span>
+                      <span x-show="lookupDetailsState.isLoading">Applying...</span>
+                    </button>
+                  </div>
+                  <template x-if="!hasIdentifierCode()">
+                    <div class="small text-body-secondary mt-2">Save an identifier code first to enable lookup refresh.</div>
+                  </template>
+                  <template x-if="offLookupFeedback.message">
+                    <div
+                      class="alert mt-3 mb-0"
+                      :class="offLookupFeedback.type === 'success' ? 'alert-success' : 'alert-warning'"
+                      x-text="offLookupFeedback.message"
+                    ></div>
+                  </template>
+                </div>
+
                <div class="mt-4">
                  <h3 class="h6 mb-3">Nutrition</h3>
                  <dl class="row mb-0 detail-grid">
@@ -298,12 +365,19 @@ export function stockDetailPageData(store) {
    state: createAsyncState(),
    adjustmentState: createAsyncState(),
    printState: createAsyncState(),
+    identifierState: createAsyncState(),
+    lookupDetailsState: createAsyncState(),
    printFeedback: {
      type: '',
      message: '',
    },
+    offLookupFeedback: {
+      type: '',
+      message: '',
+    },
    entry: null,
    locationPathByUuid: {},
+    identifierDraft: '',
    adjustment: {
      mode: 'increment',
      quantity: '1',
@@ -321,6 +395,7 @@ export function stockDetailPageData(store) {
          fetchLocations(store).catch(() => ({ flat: [] })),
        ]);
        this.entry = entry;
+        this.identifierDraft = normalizeIdentifierCode(entry?.identifier_code);
        this.locationPathByUuid = Object.fromEntries(
          (locations.flat || [])
            .filter((location) => location.uuid_b64)
@@ -329,6 +404,149 @@ export function stockDetailPageData(store) {
        this.adjustment.level = this.entry?.level || 'plenty';
      }).catch(() => {});
    },
+    normalizedIdentifierDraft() {
+      return normalizeIdentifierCode(this.identifierDraft);
+    },
+    hasIdentifierCode() {
+      return Boolean(this.normalizedIdentifierDraft());
+    },
+    async reloadEntry(uuidB64) {
+      const refreshed = await getStockEntry(store, uuidB64);
+      this.entry = refreshed;
+      this.identifierDraft = normalizeIdentifierCode(refreshed?.identifier_code);
+      this.adjustment.level = this.entry?.level || 'plenty';
+    },
+    itemLookupStatusMessage(response) {
+      const retryAfter = Number.isInteger(response?.retryAfterSeconds) && response.retryAfterSeconds > 0
+        ? ` Retry in ${response.retryAfterSeconds}s.`
+        : '';
+
+      if (response?.status === 'missing_identifier') {
+        return 'Save an identifier code before running lookup.';
+      }
+      if (response?.status === 'not_found') {
+        return `No OpenFoodFacts result found for code ${this.normalizedIdentifierDraft() || 'unknown'}.`;
+      }
+      if (response?.status === 'rate_limited') {
+        return `OpenFoodFacts lookup is temporarily rate-limited.${retryAfter}`;
+      }
+      if (response?.status === 'lookup_failed') {
+        return 'OpenFoodFacts lookup failed. Try again shortly or continue manually.';
+      }
+
+      return 'Lookup response could not be applied.';
+    },
+    itemLookupSuccessMessage(response) {
+      const parts = [
+        response?.update
+          ? 'Applied missing fields from OpenFoodFacts.'
+          : 'Fetched OpenFoodFacts details preview.',
+      ];
+      const source = response?.item?.external_source || this.entry?.external_source;
+
+      if (source) {
+        parts.push(`Source: ${source}.`);
+      }
+
+      if (Array.isArray(response?.updatedFields) && response.updatedFields.length) {
+        parts.push(`Updated: ${response.updatedFields.join(', ')}.`);
+      }
+
+      if (response?.staleCache) {
+        parts.push('Using stale cache data.');
+      } else {
+        parts.push('Cache freshness: current.');
+      }
+
+      if (response?.offPayloadFetchedAt) {
+        const fetchedAt = new Date(response.offPayloadFetchedAt);
+        parts.push(
+          `Fetched at: ${
+            Number.isNaN(fetchedAt.getTime())
+              ? response.offPayloadFetchedAt
+              : fetchedAt.toLocaleString()
+          }.`,
+        );
+      }
+
+      return parts.join(' ');
+    },
+    async saveIdentifierCode() {
+      if (!this.entry?.uuid_b64) {
+        return;
+      }
+
+      this.identifierState.error = '';
+      await runAsyncState(this.identifierState, async () => {
+        const identifierCode = this.normalizedIdentifierDraft();
+        const updated = await patchStockItem(store, this.entry.uuid_b64, {
+          identifier_code: identifierCode || null,
+        });
+
+        this.entry = updated;
+        this.identifierDraft = normalizeIdentifierCode(updated?.identifier_code || identifierCode);
+        this.offLookupFeedback = {
+          type: '',
+          message: '',
+        };
+        store.addAlert({
+          type: 'success',
+          message: identifierCode
+            ? `Identifier code saved for ${this.entry.name}.`
+            : `Identifier code cleared for ${this.entry.name}.`,
+        });
+      }).catch(() => {});
+    },
+    async runItemLookup(update) {
+      if (!this.entry?.uuid_b64) {
+        return;
+      }
+
+      const identifierCode = this.normalizedIdentifierDraft();
+      if (!identifierCode) {
+        this.offLookupFeedback = {
+          type: 'warning',
+          message: 'Save an identifier code before running lookup refresh.',
+        };
+        return;
+      }
+
+      this.lookupDetailsState.error = '';
+      await runAsyncState(this.lookupDetailsState, async () => {
+        const response = await lookupItemDetails(store, this.entry.uuid_b64, { update });
+        if (response.status !== 'ok') {
+          const message = this.itemLookupStatusMessage(response);
+          this.offLookupFeedback = {
+            type: 'warning',
+            message,
+          };
+          store.addAlert({ type: 'warning', message });
+          return;
+        }
+
+        if (update) {
+          await this.reloadEntry(this.entry.uuid_b64);
+        } else if (response.item) {
+          this.entry = response.item;
+          this.identifierDraft = normalizeIdentifierCode(response.item.identifier_code || identifierCode);
+        }
+
+        const message = this.itemLookupSuccessMessage(response);
+        this.offLookupFeedback = {
+          type: 'success',
+          message,
+        };
+        store.addAlert({
+          type: 'success',
+          message,
+        });
+      }).catch((error) => {
+        this.offLookupFeedback = {
+          type: 'warning',
+          message: error?.message || 'OpenFoodFacts lookup failed.',
+        };
+      });
+    },
    async submitMeasuredAdjustment() {
      if (!this.entry) {
        return;
@@ -351,6 +569,7 @@ export function stockDetailPageData(store) {
        this.entry = await adjustStockEntry(store, this.entry.uuid_b64, {
          quantity: exactQuantity,
        });
+        this.identifierDraft = normalizeIdentifierCode(this.entry?.identifier_code);
        store.addAlert({ type: 'success', message: 'Stock quantity updated.' });
      }).catch(() => {});
    },
@@ -371,6 +590,7 @@ export function stockDetailPageData(store) {
        this.entry = await adjustStockEntry(store, this.entry.uuid_b64, {
          level: this.adjustment.level,
        });
+        this.identifierDraft = normalizeIdentifierCode(this.entry?.identifier_code);
        store.addAlert({ type: 'success', message: 'Stock level updated.' });
      }).catch(() => {});
    },