domma-cms 1.6.56 → 1.6.57

package/plugins/shopping-cart/admin/views/orders.js

@@ -9,7 +9,7 @@
  * slip. A notification's link (#/plugins/shopping-cart/orders/<id>) opens one.
  */
 
-import {api, copy, entriesOf, esc, fmtDate, fmtDateTime, money, moneyIn, moneyOut, mountPanels, openPanel, refreshBadge, store, when, wireRows} from '../lib/kit.js';
+import {api, claims, copy, deferItems, entriesOf, esc, fmtDate, fmtDateTime, money, moneyIn, moneyOut, mountPanels, openPanel, refreshBadge, store, when, wireRows} from '../lib/kit.js';
 import {NEXT, STATUS_LABEL, STATUS_TONE, addressLines, orderLabel} from '/plugins/shopping-cart/public/lib/orders.js';
 
 const FILTERS = [
@@ -83,9 +83,9 @@ export async function mount(root, ctx) {
   <input type="search" class="form-input shp-search" placeholder="Search # , name, email, item…" aria-label="Search orders" data-model="query.value">
   <span data-help-title="Orders" data-help="Click an order to open it. Right-click (or ⋮, or Shift+F10) for its moves: mark it paid, fulfilled, refunded or cancelled. 'Started' are checkouts that never finished paying - they hold no stock and can be deleted."></span>
 </div>
-<p class="shp-note" data-bind-hidden="!loading.value">Loading…</p>
+<div class="shp-loading-slot" data-bind-hidden="!loading.value">Loading…</div>
 <p class="shp-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
-<p class="shp-note" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
+<p class="shp-note shp-empty" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
 <div class="shp-list" data-each="rows.value key=id"></div>`;
     root.appendChild(view);
     const list = view.querySelector('.shp-list');
@@ -98,16 +98,24 @@ export async function mount(root, ctx) {
         if (b) filter.value = b.dataset.filter;
     });
 
+    /** The first load, under a skeleton. */
     async function load() {
         try {
-            orders.value = entriesOf(await api.orders.list());
+            const res = await kit.whileLoading(view.querySelector('.shp-loading-slot'), api.orders.list(), kit.SHAPES.rows);
+            if (!here()) return;
+            orders.value = entriesOf(res);
             error.value = '';
         } catch (err) {
+            if (!here()) return;
             error.value = `Could not load the orders: ${err.message || err}`;
         } finally {
-            loading.value = false;
+            if (here()) loading.value = false;
         }
     }
+    // One panel per order and per action at a time (a double click, a row clicked while it is still opening).
+    const opening = claims();
+    // Fulfil and Refund panels: closed with the screen, so nothing can be sent from a view that has gone.
+    const actionPanels = new Set();
     const byId = (id) => orders.peek().find(o => o.id === id);
     const replace = (o) => { orders.value = orders.peek().map(x => (x.id === o.id ? o : x)); };
 
@@ -127,20 +135,29 @@ export async function mount(root, ctx) {
     }
 
     async function markPaid(o) {
-        if (!await E.confirm(`Mark ${orderLabel(o.data)} as paid (${esc(money(o.data.total))})? Stock is taken now.`)) return null;
+        if (!await E.confirm(`Mark ${orderLabel(o.data)} as paid (${esc(money(o.data.total))})? Stock is taken now.`,
+            {title: 'Mark paid', confirmText: 'Mark paid', cancelText: 'Not yet'})) return null;
+        if (!here()) return null;
         return move(o, 'paid', {note: 'Payment received'});
     }
 
     async function cancel(o) {
-        if (!await E.confirm(`Cancel ${orderLabel(o.data)}? Nothing was paid, so nothing is refunded.`)) return null;
+        if (!await E.confirm(`Cancel ${orderLabel(o.data)}? Nothing was paid, so nothing is refunded.`,
+            {title: 'Cancel order', confirmText: 'Cancel the order', cancelText: 'Keep it'})) return null;
+        if (!here()) return null;
         return move(o, 'cancelled');
     }
 
     /** Fulfil, with tracking if there is any - a small form of its own. */
     function fulfil(o) {
+        const release = opening.take(`fulfil:${o.id}`);
+        if (!release) return Promise.resolve(null);
         return new Promise((resolve) => {
             const t = o.data.tracking || {};
             const f = {carrier: M.observable(t.carrier || ''), number: M.observable(t.number || ''), url: M.observable(t.url || '')};
+            const typed = () => JSON.stringify([f.carrier.peek(), f.number.peek(), f.url.peek()]);
+            const opened = typed();
+            let saving = false;
             let panel = null;
             const collect = o.data.delivery === 'collect';
             openPanel({
@@ -157,15 +174,27 @@ export async function mount(root, ctx) {
     <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
     <button type="button" class="btn btn-sm btn-primary" data-on-click="save"><span data-icon="check" data-icon-size="13"></span> ${collect ? 'Collected' : 'Fulfilled'}</button></div>
 </div>`,
-                cleanup: () => resolve(null),
+                dirty: () => typed() !== opened,
+                busy: () => saving,
+                cleanup: () => { actionPanels.delete(panel); release(); resolve(null); },
                 methods: {
-                    cancel: () => panel?.close(true),
+                    cancel: () => panel?.close(),
                     async save() {
+                        if (saving || !panel?.isOpen() || !here()) return;
+                        // The panel closes once it is done, so the form is locked while the move runs.
+                        saving = true;
+                        panel.lock(true);
                         const next = await move(o, 'fulfilled', {tracking: {carrier: f.carrier.peek(), number: f.number.peek(), url: f.url.peek()}});
-                        if (next) { resolve(next); panel?.close(true); }
+                        saving = false;
+                        if (next) { resolve(next); panel.close(true); } else if (panel.isOpen()) panel.lock(false);
                     }
                 }
-            }).then(p => { panel = p; });
+            }).then(p => {
+                panel = p;
+                actionPanels.add(p);
+                if (!here()) p.close(true);
+                else p.panel.querySelector('input')?.focus();
+            }, (err) => { release(); resolve(null); E.toast(err.message || String(err), {type: 'error'}); });
         });
     }
 
@@ -177,6 +206,8 @@ export async function mount(root, ctx) {
      * sanitised, which strips inputs, so the amount, reason and restock box never showed and OK refunded it all.)
      */
     function refund(o) {
+        const release = opening.take(`refund:${o.id}`);
+        if (!release) return Promise.resolve(null);
         return new Promise((resolve) => {
             const d = o.data;
             const via = {stripe: 'through Stripe', paypal: 'through PayPal'}[d.provider];
@@ -185,6 +216,7 @@ export async function mount(root, ctx) {
             const f = {amount: M.observable(moneyIn(left)), note: M.observable(''), saving: M.observable(false)};
             let restock = Boolean(d.stockTaken);
             const full = () => moneyOut(f.amount.peek()) === left;
+            const opened = JSON.stringify([f.amount.peek(), f.note.peek()]);
             let panel = null;
             let box = null;
             // Stock only comes back when the whole order is refunded, so the box greys out on a part refund.
@@ -212,11 +244,13 @@ export async function mount(root, ctx) {
                     box.addEventListener('change', () => { restock = box.checked; });
                     syncBox();
                 },
-                cleanup: () => { stop?.(); resolve(null); },
+                dirty: () => JSON.stringify([f.amount.peek(), f.note.peek()]) !== opened,
+                busy: () => f.saving.peek(),
+                cleanup: () => { actionPanels.delete(panel); stop?.(); release(); resolve(null); },
                 methods: {
-                    cancel: () => panel?.close(true),
+                    cancel: () => panel?.close(),
                     async save() {
-                        if (f.saving.peek()) return;
+                        if (f.saving.peek() || !panel?.isOpen() || !here()) return;
                         const amount = moneyOut(f.amount.peek());
                         if (!Number.isInteger(amount) || amount <= 0 || amount > left) {
                             E.toast(`Enter an amount between ${money(1)} and ${money(left)}.`, {type: 'error'});
@@ -224,29 +258,40 @@ export async function mount(root, ctx) {
                         }
                         const all = amount === left;
                         f.saving.value = true;
+                        panel.lock(true);
                         try {
                             const r = await api.orders.refund(o.id, {amount: all ? undefined : amount, restock: all && restock, note: f.note.peek()});
                             replace(r.order);
                             refreshBadge();
                             E.toast(`${orderLabel(d)} ${r.how}.`, {type: 'success'});
                             resolve(r.order);
-                            panel?.close(true);
+                            f.saving.value = false;
+                            panel.close(true);
                         } catch (err) {
                             E.toast(err.message || String(err), {type: 'error'});
                         } finally {
                             f.saving.value = false;
+                            if (panel.isOpen()) panel.lock(false);
                         }
                     }
                 }
-            }).then(p => { panel = p; p.panel.querySelector('#shp-refund-amount')?.focus(); });
+            }).then(p => {
+                panel = p;
+                actionPanels.add(p);
+                if (!here()) p.close(true);
+                else p.panel.querySelector('#shp-refund-amount')?.focus();
+            }, (err) => { release(); resolve(null); E.toast(err.message || String(err), {type: 'error'}); });
         });
     }
 
     async function remove(o) {
-        if (!await E.confirm(`Delete ${orderLabel(o.data)}? It never took money; it cannot be brought back.`)) return false;
+        if (!await E.confirm(`Delete ${orderLabel(o.data)}? It never took money; it cannot be brought back.`,
+            {title: 'Delete order', confirmText: 'Delete', cancelText: 'Keep it'})) return false;
+        if (!here()) return false;
         try {
             await api.orders.remove(o.id);
             orders.value = orders.peek().filter(x => x.id !== o.id);
+            refreshBadge();
             E.toast(`${orderLabel(o.data)} deleted.`, {type: 'success'});
             return true;
         } catch (err) {
@@ -309,16 +354,49 @@ ${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l
 
     // ---- One order ----------------------------------------------------------------
 
-    const panels = new Set();
+    const panels = new Map();
+    /** Open an order - once: a second click on one already opening or open just goes to it. */
     async function openOrder(id) {
+        const open = panels.get(id);
+        if (open?.isOpen()) { open.panel.querySelector('button, textarea')?.focus(); return; }
+        const release = opening.take(`order:${id}`);
+        if (!release) return;
+        let owned = false;
+        try {
+            owned = await openOrderNow(id, release);
+        } catch (err) {
+            E.toast(`The order could not open: ${err.message || err}`, {type: 'error'});
+        } finally {
+            if (!owned) release();
+        }
+    }
+
+    async function openOrderNow(id, release) {
         let o = byId(id);
         if (!o) {
-            try { o = await api.orders.get(id); } catch { E.toast('That order is gone.', {type: 'warning'}); return; }
+            try { o = await api.orders.get(id); } catch { if (here()) E.toast('That order is gone.', {type: 'warning'}); return false; }
+            if (!here()) return false;
         }
         const d = o.data;
         const staffNote = M.observable(d.staffNote || '');
         const status = M.observable(d.status);
         let panel = null;
+        let menu = null;
+        // The note as last saved (or being saved): a blur and a close straight after it send it once.
+        let noteSent = d.staffNote || '';
+        const saveNote = async () => {
+            const text = staffNote.peek();
+            if (text === noteSent) return;
+            noteSent = text;
+            try {
+                const next = await api.orders.note(o.id, {staffNote: text});
+                replace(next);
+                E.toast('Note saved.', {type: 'success'});
+            } catch (err) {
+                noteSent = null;
+                E.toast(`Note not saved: ${err.message || err}`, {type: 'error'});
+            }
+        };
         let extPanels = null;
         const ext = Object.entries(d.ext || {}).flatMap(([owner, facts]) => Object.entries(facts || {}).map(([k, v]) => ({owner, k, v})))
             .filter(x => ['string', 'number', 'boolean'].includes(typeof x.v));
@@ -366,9 +444,17 @@ ${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l
             model: {staffNote, status},
             html,
             before: (el) => { const n = el.querySelector('.shp-callout p'); if (n) n.textContent = d.note; },
-            cleanup: () => { panels.delete(panel?.so); extPanels?.destroy(); }
+            cleanup: () => {
+                if (panels.get(o.id) === panel) panels.delete(o.id);
+                release();
+                extPanels?.destroy();
+                menu?.destroy?.();
+                // "Saved when you click away" - closing (or leaving the screen) with the note changed is clicking away.
+                saveNote();
+            }
         });
-        panels.add(panel.so);
+        panels.set(o.id, panel);
+        if (!here()) { panel.close(true); return true; }
         const el = panel.panel;
         // Extensions' sections (Shopping Cart Pro's Downloads). `changed` takes the order an extension
         // updated, so the list keeps up.
@@ -376,7 +462,7 @@ ${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l
             order: o,
             changed: (next) => { if (next?.id === o.id) replace(next); }
         }});
-        if (!el.isConnected) extPanels.destroy();
+        if (!panel.isOpen() || !here()) { extPanels.destroy(); return true; }
 
         // Main actions as buttons, the rest in ⋮.
         const renderActs = (cur) => {
@@ -389,8 +475,11 @@ ${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l
                 b.innerHTML = `<span data-icon="${a.icon}" data-icon-size="13"></span> `;
                 b.appendChild(document.createTextNode(a.label.replace('…', '')));
                 b.addEventListener('click', async () => {
+                    // After this event: an Enter on the button must not answer the question it asks (see kit soon()).
+                    await new Promise(r => setTimeout(r, 0));
+                    if (!panel.isOpen()) return;
                     const next = await a.run();
-                    if (next && typeof next === 'object') { panel.close(true); openOrder(next.id); }
+                    if (next && typeof next === 'object' && here()) { panel.close(true); openOrder(next.id); }
                 });
                 box.appendChild(b);
             }
@@ -398,24 +487,16 @@ ${(d.lines || []).map(l => `<tr><td class="q">${l.qty}</td><td>${esc(l.name)}${l
         };
         renderActs(o);
         const more = el.querySelector('[data-part="more"]');
-        const menu = E.contextMenu(more, {items: () => items(o.id).filter(x => x.label !== 'Open'), inherit: false, density: 'compact'});
+        menu = E.contextMenu(more, {items: () => deferItems(items(o.id).filter(x => x.label !== 'Open')), inherit: false, density: 'compact', keyboardTrigger: false});
         more.addEventListener('click', () => kit.openMenuAt(more));
-        panel.so.element.addEventListener('remove', () => menu?.destroy?.());
+        more.addEventListener('keydown', (e) => { if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); e.stopPropagation(); kit.openMenuAt(more); } });
 
-        const staff = el.querySelector('[data-part="staff"]');
-        staff.addEventListener('blur', async () => {
-            if (staffNote.peek() === (byId(o.id)?.data.staffNote || '')) return;
-            try {
-                replace(await api.orders.note(o.id, {staffNote: staffNote.peek()}));
-                E.toast('Note saved.', {type: 'success'});
-            } catch (err) {
-                E.toast(`Note not saved: ${err.message || err}`, {type: 'error'});
-            }
-        });
+        el.querySelector('[data-part="staff"]').addEventListener('blur', () => saveNote());
+        return true;
     }
 
     wireRows(list, {openMenuAt: kit.openMenuAt, scope, items, main: openOrder});
-    scope(() => [...panels].forEach(so => { try { so.close(true); } catch { /* gone */ } }));
+    scope(() => [...panels.values(), ...actionPanels].forEach(pn => { try { pn.close(true); } catch { /* gone */ } }));
 
     await load();
     if (!here()) return;

package/plugins/shopping-cart/admin/views/overview.js

@@ -8,7 +8,7 @@
  */
 
 import {barChart} from '../lib/chart.js';
-import {api, esc, fmtDate, money, when} from '../lib/kit.js';
+import {api, copy, esc, fmtDate, money, when, wireRows} from '../lib/kit.js';
 import {STATUS_LABEL, STATUS_TONE} from '/plugins/shopping-cart/public/lib/orders.js';
 
 export async function mount(root, ctx) {
@@ -21,7 +21,7 @@ export async function mount(root, ctx) {
     view.className = 'shp-overview';
     view.innerHTML = `
 <p class="shp-error" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
-<div class="shp-loading" data-bind-hidden="s.value || error.value">Loading…</div>
+<div class="shp-loading-slot" data-bind-hidden="s.value || error.value">Loading…</div>
 <div data-part="start" hidden></div>
 <div data-part="main" hidden>
   <div class="shp-tiles" data-part="tiles"></div>
@@ -54,12 +54,13 @@ export async function mount(root, ctx) {
     scope(() => bindings.dispose());
 
     try {
-        s.value = await api.summary();
+        const res = await kit.whileLoading(view.querySelector('.shp-loading-slot'), api.summary(), kit.SHAPES.tiles);
+        if (!here()) return;
+        s.value = res;
     } catch (err) {
-        error.value = `Could not load the figures: ${err.message || err}`;
+        if (here()) error.value = `Could not load the figures: ${err.message || err}`;
         return;
     }
-    if (!here()) return;
     const d = s.peek();
 
     // Nothing sold and nothing to sell: show the way in.
@@ -141,20 +142,49 @@ export async function mount(root, ctx) {
 
     // ---- Latest orders, best sellers ----
     part('recent').innerHTML = d.recent.length ? d.recent.map(o => `
-<a class="shp-mini" href="#/plugins/shopping-cart/orders/${esc(o.id)}">
+<a class="shp-mini" href="#/plugins/shopping-cart/orders/${esc(o.id)}" data-id="${esc(o.id)}">
   <span class="shp-mini-main"><span><strong>#${esc(o.number)}</strong> ${esc(o.name || '')}</span><small>${esc(when(o.at))} · ${o.items} item${o.items === 1 ? '' : 's'}</small></span>
   <span class="shp-chip is-${STATUS_TONE[o.status]}">${esc(STATUS_LABEL[o.status])}</span>
   <span class="shp-mini-amt">${esc(money(o.total))}</span>
+  <button type="button" class="shp-kebab" aria-label="Actions" title="Actions">⋮</button>
 </a>`).join('') : '<p class="shp-muted">No orders yet.</p>';
 
     const maxRev = Math.max(1, ...d.topProducts.map(p => p.revenue));
-    part('top').innerHTML = d.topProducts.length ? d.topProducts.map(p => `
-<div class="shp-top">
+    part('top').innerHTML = d.topProducts.length ? d.topProducts.map((p, i) => `
+<div class="shp-top${p.productId ? ' is-link' : ''}" data-id="${esc(p.productId || '')}" data-i="${i}"${p.productId ? ' tabindex="0"' : ''}>
   <span class="shp-top-name">${esc(p.name)}<small>${p.qty} sold</small></span>
   <span class="shp-top-bar"><span style="width:${Math.round(p.revenue / maxRev * 100)}%"></span></span>
   <span class="shp-mini-amt">${esc(money(p.revenue))}</span>
 </div>`).join('') : '<p class="shp-muted">Nothing sold in the last 30 days.</p>';
 
+    // Menus on both lists: right-click, ⋮ or Shift+F10; click (or Enter) opens.
+    const recent = part('recent');
+    const byOrder = (id) => d.recent.find(o => o.id === id);
+    // The rows are links (open in a new tab works); the ⋮ inside one must not follow it.
+    recent.addEventListener('click', (e) => { if (e.target.closest('.shp-kebab')) e.preventDefault(); });
+    // main: nothing - the row is a link and follows itself (click or Enter).
+    wireRows(recent, {match: '.shp-mini', openMenuAt: kit.openMenuAt, scope, main: () => {}, items: (id) => {
+        const o = byOrder(id);
+        if (!o) return [];
+        return [
+            {header: `#${o.number}${o.name ? ` · ${o.name}` : ''}`},
+            {label: 'Open', icon: 'eye', action: () => go('orders', id)},
+            {label: 'Copy the order number', icon: 'copy', action: () => copy(`#${o.number}`, 'Order number copied')},
+            {type: 'divider'},
+            {label: 'All orders', icon: 'receipt', action: () => go('orders')}
+        ];
+    }});
+    const top = part('top');
+    wireRows(top, {match: '.shp-top.is-link', openMenuAt: kit.openMenuAt, scope, main: (id) => go('products', id), items: (id) => {
+        const p = d.topProducts.find(x => x.productId === id);
+        if (!p) return [];
+        return [
+            {header: p.name},
+            {label: 'Edit the product', icon: 'edit', action: () => go('products', id)},
+            {label: 'All products', icon: 'package', action: () => go('products')}
+        ];
+    }});
+
     I.scan(view);
 }