domma-cms 1.6.55 → 1.6.57

package/plugins/feedback/admin/views/inbox.js

@@ -8,10 +8,11 @@
  * Right-click (or the row's kebab, or Shift+F10) for the quick moves.
  */
 
-import {FILES, api, esc, openPanel, refreshBadge, showFiles, stamp, store, when} from '../lib/kit.js';
+import {FILES, api, copyText, esc, guardPanel, offerDraft, openPanel, panelSet, refreshBadge, rowKeys, showFiles, stamp, store, when} from '../lib/kit.js';
+import {DRAFT_KEYS, draftQuestion, draftText, draftValues, reportForm, reportPrint} from '../lib/drafts.js';
 
 const ROW = `
-<div class="fb-row" data-id="{{id}}" tabindex="0" role="button">
+<div class="fb-row" data-id="{{id}}" tabindex="0" role="button" aria-haspopup="menu">
   <span class="fb-type" data-bind-title="typeLabel"><span data-icon="{{icon}}" data-icon-size="16"></span></span>
   <span class="fb-main"><strong data-bind-text="title"></strong><small data-bind-text="meta"></small></span>
   <span class="fb-key" data-bind-hidden="!issueKey" data-bind-text="issueKey"></span>
@@ -32,6 +33,8 @@ export async function mount(root, ctx) {
     const statusOf = (s) => statuses.find(x => x.key === s)?.label || s;
 
     const reports = M.observable([]);
+    const panels = panelSet();
+    scope(() => panels.leave());
     const sites = M.observable({});
     const loading = M.observable(true);
     const error = M.observable('');
@@ -82,7 +85,7 @@ export async function mount(root, ctx) {
     view.innerHTML = `
 <div class="fb-bar">
   <div class="fb-seg" role="group" aria-label="Show">
-    ${FILTERS.map(f => `<button type="button" data-filter="${esc(f.key)}" data-bind-class="filter.value === '${esc(f.key)}' && 'is-on'">${esc(f.label)} <b data-bind-text="counts.value['${esc(f.key)}']"></b></button>`).join('')}
+    ${FILTERS.map(f => `<button type="button" data-filter="${esc(f.key)}" data-bind-class="filter.value === '${esc(f.key)}' && 'is-on'" data-bind-aria-pressed="filter.value === '${esc(f.key)}' ? 'true' : 'false'">${esc(f.label)} <b data-bind-text="counts.value['${esc(f.key)}']"></b></button>`).join('')}
   </div>
   <span data-help-title="Feedback inbox" data-help="Everything the sites' admins sent. Open a report to set its status, reply (the site sees the reply and the status, never the internal notes) or make a Waypoint issue from it - once linked, the report follows the issue: planned, in progress, done. Right-click a row for quick moves."></span>
 </div>
@@ -95,8 +98,9 @@ export async function mount(root, ctx) {
     ${types.map(t => `<option value="${esc(t.key)}">${esc(t.short)}</option>`).join('')}
   </select>
   <input type="search" class="form-input fb-search" placeholder="Search title, text, person, site..." aria-label="Search feedback" data-model="query.value">
+  <span data-help-title="Narrowing the list" data-help="The chips above pick a status (Open is everything not Done or Not planned); these narrow it further to one site or one kind of report. The search looks in the title, the text, who sent it, the site and the Waypoint key. The chip counts are for every site and type."></span>
 </div>
-<p class="fb-note" data-bind-hidden="!loading.value">Loading...</p>
+<div class="fb-loading dm-loading-slot" data-bind-hidden="!loading.value">Loading...</div>
 <p class="fb-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
 <p class="fb-note" data-bind-hidden="loading.value || error.value || rows.value.length" data-bind-text="emptyText.value"></p>
 <div class="fb-list" data-each="rows.value key=id"></div>`;
@@ -129,23 +133,29 @@ export async function mount(root, ctx) {
 
     async function load() {
         try {
-            const res = await api.reports();
+            const res = await kit.whileLoading(view.querySelector('.fb-loading'), api.reports(), kit.SHAPES.iconRows);
             if (!here()) return;
             sites.value = res.sites || {};
             reports.value = Array.isArray(res.reports) ? res.reports : [];
             error.value = '';
         } catch (err) {
-            error.value = `Could not load the feedback: ${err.message || err}`;
+            if (here()) error.value = `Could not load the feedback: ${err.message || err}`;
         } finally {
-            loading.value = false;
-            I.scan(view);
+            if (here()) { loading.value = false; I.scan(view); }
         }
     }
-    const replace = (r) => { reports.value = reports.peek().map(x => (x.id === r.id ? {...x, ...r} : x)); };
+    /** A report changed: the list, and the open panel when it shows that report. */
+    const replace = (r) => {
+        reports.value = reports.peek().map(x => (x.id === r.id ? {...x, ...r} : x));
+        const showing = panels.get('detail');
+        if (showing?.key === r.id) showing.changed?.(r);
+    };
 
     async function setStatus(r, status) {
         try {
-            replace(await api.update(r.id, {status}));
+            const next = await api.update(r.id, {status});
+            if (!here()) return;
+            replace(next);
             refreshBadge();
             E.toast(`${statusOf(status)}.`, {type: 'success'});
         } catch (err) {
@@ -157,6 +167,11 @@ export async function mount(root, ctx) {
         if (!await E.confirm(`Delete "${esc(r.title)}"? The site will no longer see it either. This cannot be undone.`)) return;
         try {
             await api.remove(r.id);
+            // Deleted on purpose: its panel goes without asking, and so does any draft on it.
+            const showing = panels.get('detail');
+            if (showing?.key === r.id) showing.close?.(true);
+            store.remove(DRAFT_KEYS.report(r.id));
+            if (!here()) return;
             reports.value = reports.peek().filter(x => x.id !== r.id);
             refreshBadge();
             E.toast('Deleted.', {type: 'success'});
@@ -165,15 +180,50 @@ export async function mount(root, ctx) {
         }
     }
 
+    /** One report open at a time: opening another closes (and may ask about) the one showing. */
     async function open(reportId) {
+        const showing = panels.get('detail');
+        if (showing?.key === reportId) return;
+        if (showing) { await showing.close?.(); if (panels.get('detail')) return; }
+        if (!here() || !panels.claim('detail')) return;
+        let opened = false;
+        try { opened = await openReport(reportId); } catch (err) { E.toast(err.message || String(err), {type: 'error'}); }
+        if (!opened) panels.release('detail');
+    }
+
+    async function openReport(reportId) {
+        const key = DRAFT_KEYS.report(reportId);
         let r;
-        try { r = await api.report(reportId); } catch (err) { E.toast(err.message || String(err), {type: 'error'}); return; }
+        try { r = await api.report(reportId); } catch (err) {
+            if (!here()) return false;
+            // Gone - and with unsaved work on it: say so, and offer the words back.
+            if (err?.status === 404 || /not found|no such/i.test(err?.message || '')) {
+                const offer = await offerDraft(key, {here, question: (d) => draftQuestion(d, null, {what: 'a report'})});
+                if (offer.state === 'keep' && await copyText(draftText(offer.draft), 'Your unsaved reply and notes are copied')) store.remove(key);
+                if (offer.state === 'none') E.toast('That report is no longer here.', {type: 'warning'});
+                return false;
+            }
+            E.toast(err.message || String(err), {type: 'error'});
+            return false;
+        }
+        if (!here()) return false;
         replace(r);
+        // Opening a new report is seeing it - before the draft question, so the question and
+        // the form both see the status the site will.
+        if (r.status === 'new') {
+            try { r = await api.update(r.id, {status: 'acknowledged'}); if (here()) { replace(r); refreshBadge(); } } catch { /* stays new */ }
+            if (!here()) return false;
+        }
+        const offer = await offerDraft(key, {here, question: (d) => draftQuestion(d, reportPrint(r), {what: `the report “${r.title}”`, changedAt: r.updatedAt})});
+        if (offer.state === 'gone') return false;
         let wp = {available: false, projects: []};
         if (!r.issueId) { try { wp = await api.waypoint(); } catch { /* no Waypoint */ } }
+        if (!here()) return false;
 
+        const saved = reportForm(r);
+        const start = offer.state === 'keep' ? draftValues(offer.draft, saved) : saved;
         const f = {
-            status: M.observable(r.status), reply: M.observable(r.reply || ''), notes: M.observable(r.notes || ''),
+            status: M.observable(start.status), reply: M.observable(start.reply), notes: M.observable(start.notes),
             busy: M.observable(false),
             project: M.observable(wp.projects?.[0]?.id || ''),
             itype: M.observable(r.type === 'bug' ? 'bug' : r.type === 'feature' ? 'story' : 'task'),
@@ -189,13 +239,14 @@ export async function mount(root, ctx) {
             ...(r.where ? [['Where', r.where]] : []),
             ...(r.cmsVersion ? [['CMS', r.cmsVersion]] : [])
         ];
-        let panel = null;
+        let guard = null;
         let filesView = null;
-        panel = await openPanel({
+        let base = saved;
+        const panel = await openPanel({
             title: r.title,
             size: 'lg',
             model: f,
-            cleanup: () => filesView?.dispose(),
+            cleanup: () => { filesView?.dispose(); panels.release('detail'); },
             html: `<div class="fb-detail">
   <dl class="fb-facts">${facts.map(([a, b]) => `<div><dt>${esc(a)}</dt><dd>${esc(b)}</dd></div>`).join('')}</dl>
   <h4>What they sent</h4>
@@ -207,11 +258,12 @@ export async function mount(root, ctx) {
     <select id="fb-status" class="form-select" data-model="status.value">
       ${statuses.map(s => `<option value="${esc(s.key)}">${esc(s.label)}</option>`).join('')}
     </select>
-    <label class="form-label" for="fb-reply">Reply to the site <span data-help="The site's admins see this in their Feedback screen, and are told there is a reply."></span></label>
+    <label class="form-label" for="fb-reply">Reply to the site <span data-help="The site's admins see this in their Feedback screen, and are told there is a reply. Unsaved typing is kept if you close the browser or leave this screen, and offered back next time you open the report."></span></label>
     <textarea id="fb-reply" class="form-textarea" rows="5" maxlength="8000" data-model="reply.value"></textarea>
     <label class="form-label" for="fb-notes">Internal notes <span data-help="Only here. Never sent to the site."></span></label>
     <textarea id="fb-notes" class="form-textarea" rows="3" maxlength="8000" data-model="notes.value"></textarea>
     <div class="fb-actions"><span class="fb-spacer"></span>
+      <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" data-bind-disabled="busy.value"><span data-icon="check" data-icon-size="13"></span> Save</button>
     </div>
   </div>
@@ -236,26 +288,34 @@ export async function mount(root, ctx) {
   <ul class="fb-history">${(r.history || []).slice().reverse().map(h => `<li><span>${esc(h.what)}</span><small>${esc(h.by || '')} · ${esc(stamp(h.at))}</small></li>`).join('')}</ul>
 </div>`,
             methods: {
+                cancel: () => guard?.close(),
                 async save() {
                     if (f.busy.peek()) return;
                     f.busy.value = true;
+                    // The panel closes once saved: locked meanwhile, so nothing typed during the request is lost.
+                    guard?.lock(true);
                     try {
                         const next = await api.update(r.id, {status: f.status.peek(), reply: f.reply.peek(), notes: f.notes.peek()});
+                        guard?.settle();
+                        guard?.close(true);
+                        if (!here()) return;
                         replace(next);
                         refreshBadge();
                         E.toast('Saved.', {type: 'success'});
-                        panel?.close();
                     } catch (err) {
+                        guard?.lock(false);
                         E.toast(err.message || String(err), {type: 'error'});
                     } finally {
                         f.busy.value = false;
                     }
                 },
-                openIssue(e) {
+                async openIssue(e) {
                     e?.preventDefault?.();
                     const key = f.issueKey.peek();
                     if (!key) return;
-                    panel?.close();
+                    // Unsaved typing asks first; Keep editing stays here.
+                    await guard?.close();
+                    if (panels.get('detail')?.key === r.id) return;
                     location.hash = `#/plugins/waypoint-pro/i/${encodeURIComponent(key)}`;
                 },
                 async promote() {
@@ -263,9 +323,8 @@ export async function mount(root, ctx) {
                     f.busy.value = true;
                     try {
                         const next = await api.promote(r.id, {projectId: f.project.peek(), type: f.itype.peek(), priority: f.priority.peek()});
+                        if (!here()) return;
                         replace(next);
-                        f.issueKey.value = next.issueKey || '';
-                        f.status.value = next.status;
                         refreshBadge();
                         E.toast(`Filed as ${next.issueKey || 'a Waypoint issue'}.`, {type: 'success'});
                     } catch (err) {
@@ -276,24 +335,40 @@ export async function mount(root, ctx) {
                 }
             }
         });
+        guard = guardPanel(panel, {
+            key,
+            values: () => ({status: f.status.value, reply: f.reply.value, notes: f.notes.value}),
+            baseline: saved,
+            // A picked-up draft keeps its own `was`: the question next time still measures from when the edits began.
+            was: offer.state === 'keep' ? offer.draft.was : reportPrint(r)
+        });
+        panels.set('detail', {
+            key: r.id,
+            close: (how) => guard.close(how),
+            // The report moved elsewhere (a row-menu status, a Waypoint issue): what was not edited here follows it.
+            changed(next) {
+                const now = reportForm(next);
+                for (const k of Object.keys(now)) if (f[k].peek() === base[k]) f[k].value = now[k];
+                base = now;
+                f.issueKey.value = next.issueKey || '';
+                f.issueStatus.value = next.issueStatus || '';
+                guard.rebase(now, reportPrint(next));
+            }
+        });
         const host = panel.panel.querySelector('[data-files]');
         if (host) {
             host.innerHTML = FILES;
             filesView = showFiles(host, r.attachments, (a) => api.reportFileUrl(r.id, a.id), 'on its way from the site');
         }
-        // Opening a new report is seeing it.
-        if (r.status === 'new') {
-            try { const next = await api.update(r.id, {status: 'acknowledged'}); replace(next); f.status.value = next.status; refreshBadge(); }
-            catch { /* stays new */ }
-        }
+        return true;
     }
 
     const bindings = M.applyBindings({loading, error, filter, site, type, query, rows, counts, emptyText}, view);
     scope(() => bindings.dispose());
-    view.querySelector('.fb-seg').addEventListener('click', (e) => {
-        const b = e.target.closest('[data-filter]');
-        if (b) filter.value = b.dataset.filter;
-    });
+    const seg = view.querySelector('.fb-seg');
+    const onFilter = (e) => { const b = e.target.closest('[data-filter]'); if (b) filter.value = b.dataset.filter; };
+    seg.addEventListener('click', onFilter);
+    scope(() => seg.removeEventListener('click', onFilter));
 
     // Rows: click or Enter opens; right-click, the kebab or Shift+F10 = the menu.
     const list = view.querySelector('.fb-list');
@@ -308,26 +383,15 @@ export async function mount(root, ctx) {
                 {type: 'divider'},
                 ...statuses.filter(s => s.key !== r.status).map(s => ({label: `Mark ${s.label.toLowerCase()}`, icon: 'flag', action: () => setStatus(r, s.key)})),
                 {type: 'divider'},
+                ...(r.userEmail ? [{label: 'Copy sender\'s email', icon: 'copy', action: () => copyText(r.userEmail, 'Email copied')}] : []),
+                ...(r.issueKey ? [{label: `Open ${r.issueKey} in Waypoint`, icon: 'external-link', action: () => { location.hash = `#/plugins/waypoint-pro/i/${encodeURIComponent(r.issueKey)}`; }}] : []),
+                ...(r.userEmail || r.issueKey ? [{type: 'divider'}] : []),
                 {label: 'Delete', icon: 'trash', danger: true, action: () => remove(r)}
             ];
         }
     });
-    const onClick = (e) => {
-        const row = e.target.closest('.fb-row');
-        if (!row) return;
-        const kebab = e.target.closest('.fb-kebab');
-        if (kebab) { kit.openMenuAt(kebab); return; }
-        open(row.dataset.id);
-    };
-    const onKey = (e) => {
-        const row = e.target.closest('.fb-row');
-        if (!row) return;
-        if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); kit.openMenuAt(row); }
-        else if (e.key === 'Enter' && e.target === row) open(row.dataset.id);
-    };
-    list.addEventListener('click', onClick);
-    list.addEventListener('keydown', onKey);
-    scope(() => { list.removeEventListener('click', onClick); list.removeEventListener('keydown', onKey); menu?.destroy?.(); });
+    scope(() => menu?.destroy?.());
+    scope(rowKeys(list, {rowSel: '.fb-row', kebabSel: '.fb-kebab', openMenuAt: kit.openMenuAt, primary: open}));
 
     await load();
     if (id && here()) open(id);