@unbrained/pm-web 2026.9.18 → 2026.9.26

package/public/src/views/items.js

@@ -3,7 +3,7 @@
 // ═══════════════════════════════════════════════════════════════
 import { state } from '../state.js';
 import { api } from '../api.js';
-import { escHtml, statusBadge, priorityDot, typeIcon } from '../utils.js';
+import { escHtml, statusBadge, priorityDot, typeIcon, relTime, fmtDate, setFormValue } from '../utils.js';
 import { showModal, hideModal, createModal, confirmDialog } from '../components/modals.js';
 import { toast } from '../components/toast.js';
 import { getTypes, getStatuses, PRIORITY_LABELS } from '../constants.js';
@@ -11,11 +11,71 @@ import { showView } from './router.js';
 import { loadItemsBadge } from './projects.js';
 import { renderLocalGraph, destroyLocalGraph } from './graph.js';
 import { EMPTY_FILTERS, filtersToQueryString, filtersFromSearchParams, hasActiveFilters } from '../filters.js';
+/** Store the fetched item list outside the async loader. */
+function rememberItems(items) {
+    state.items = items;
+}
 // Stash the bulk-update / bulk-close payloads on the apply buttons without
 // mutating the DOM nodes. A module-scoped WeakMap per modal keeps the payload
 // alive across the Preview → Apply call pair and is GC-friendly.
 const bulkUpdatePayloads = new WeakMap();
 const bulkClosePayloads = new WeakMap();
+// ─── Shared item-action helpers ───────────────────────────────
+/** Toasts a standardized error message extracted from a caught error value. */
+function toastError(err) {
+    toast(err instanceof Error ? err.message : String(err), 'error');
+}
+/** Performs a POST item action (start, pause, release) and refreshes the
+ * view, optionally reopening the detail modal and refreshing the badge. */
+async function postItemAction(endpoint, itemId, successMsg, withBadge) {
+    try {
+        await api('POST', `/projects/${state.currentProject.id}/pm/${endpoint}/${itemId}`, {});
+        toast(successMsg, 'success');
+        openItemDetail(itemId);
+        if (state.currentView === 'items')
+            fetchAndRenderItems();
+        if (withBadge)
+            loadItemsBadge();
+    }
+    catch (err) {
+        toastError(err);
+    }
+}
+/** Refreshes the items view after a successful item action, optionally
+ * reopening the detail modal or hiding it first, and refreshing the badge. */
+function refreshAfterItemAction(opts) {
+    toast(opts.toastMsg, 'success');
+    if (opts.hideDetail)
+        hideModal('item-detail-modal');
+    if (opts.reopenDetail)
+        openItemDetail(opts.reopenDetail);
+    if (state.currentView === 'items')
+        fetchAndRenderItems();
+    if (opts.withBadge)
+        loadItemsBadge();
+}
+/** Renders the "no items match" preview placeholder and disables the apply
+ * button. */
+function renderNoMatchPreview(previewEl, applyBtn) {
+    previewEl.innerHTML = `<div style="color:var(--text-muted);font-size:13px;padding:10px 0">No items match the filter criteria.</div>`;
+    if (applyBtn)
+        applyBtn.disabled = true;
+}
+/** Toasts the result of a bulk operation, noting failures when present. */
+function toastBulkResult(action, count, failed) {
+    if (failed > 0) {
+        toast(`${action} ${count} item${count !== 1 ? 's' : ''} (${failed} failed)`, 'info');
+    }
+    else {
+        toast(`${action} ${count} item${count !== 1 ? 's' : ''}`, 'success');
+    }
+}
+/** Renders a preview list of matched items with their changes, capped at 8
+ * entries with an overflow note. */
+function renderMatchedPreview(matched, displayCount) {
+    return `${matched.slice(0, 8).map((it) => `<div style="color:var(--text-secondary);font-size:12px">· ${escHtml(it.id)}${it.changes?.length ? ` — ${escHtml(it.changes.map((c) => `${c.field}: ${String(c.before)} → ${String(c.after)}`).join(', '))}` : ''}</div>`).join('')}
+            ${displayCount > 8 ? `<div style="color:var(--text-muted);font-size:12px;margin-top:4px">… and ${displayCount - 8} more</div>` : ''}`;
+}
 /**
  * Mirrors the current item filters into the page URL query string when the
  * items view is active, using history.replaceState so the filtered view is
@@ -261,17 +321,14 @@ export async function previewBulkUpdate() {
                 updateParts.push(`assignee → ${uAssignee}`);
             const updateDesc = updateParts.map(p => `<strong>${escHtml(p)}</strong>`).join(', ');
             if (count === 0 && matched.length === 0) {
-                previewEl.innerHTML = `<div style="color:var(--text-muted);font-size:13px;padding:10px 0">No items match the filter criteria.</div>`;
-                if (applyBtn)
-                    applyBtn.disabled = true;
+                renderNoMatchPreview(previewEl, applyBtn);
             }
             else {
                 const displayCount = count || matched.length;
                 previewEl.innerHTML = `
           <div style="background:rgba(99,102,241,0.08);border:1px solid rgba(99,102,241,0.25);border-radius:var(--radius);padding:10px 14px;font-size:13px">
             <div style="margin-bottom:8px">Will update <strong>${displayCount}</strong> item${displayCount !== 1 ? 's' : ''}: ${updateDesc}</div>
-            ${matched.slice(0, 8).map((it) => `<div style="color:var(--text-secondary);font-size:12px">· ${escHtml(it.id)}${it.changes?.length ? ` — ${escHtml(it.changes.map((c) => `${c.field}: ${String(c.before)} → ${String(c.after)}`).join(', '))}` : ''}</div>`).join('')}
-            ${displayCount > 8 ? `<div style="color:var(--text-muted);font-size:12px;margin-top:4px">… and ${displayCount - 8} more</div>` : ''}
+            ${renderMatchedPreview(matched, displayCount)}
           </div>`;
                 if (applyBtn)
                     applyBtn.disabled = false;
@@ -312,19 +369,14 @@ export async function applyBulkUpdate() {
         const data = await api('POST', `/projects/${pid}/pm/update-many`, payload);
         const updated = data.updated_count ?? 'some';
         const failed = data.failed_count ?? 0;
-        if (failed > 0) {
-            toast(`Updated ${updated} item${updated !== 1 ? 's' : ''} (${failed} failed)`, 'info');
-        }
-        else {
-            toast(`Updated ${updated} item${updated !== 1 ? 's' : ''}`, 'success');
-        }
+        toastBulkResult('Updated', updated, failed);
         hideModal('bulk-update-modal');
         if (state.currentView === 'items')
             fetchAndRenderItems();
         loadItemsBadge();
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
         if (applyBtn) {
             applyBtn.disabled = false;
             applyBtn.textContent = 'Apply Update';
@@ -447,17 +499,14 @@ export async function previewBulkClose() {
         const applyBtn = document.getElementById('bc-apply-btn');
         if (previewEl) {
             if (count === 0 && matched.length === 0) {
-                previewEl.innerHTML = `<div style="color:var(--text-muted);font-size:13px;padding:10px 0">No items match the filter criteria.</div>`;
-                if (applyBtn)
-                    applyBtn.disabled = true;
+                renderNoMatchPreview(previewEl, applyBtn);
             }
             else {
                 const displayCount = count || matched.length;
                 previewEl.innerHTML = `
           <div style="background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.25);border-radius:var(--radius);padding:10px 14px;font-size:13px">
             <div style="margin-bottom:8px">Will <strong>${targetStatus}</strong> <strong>${displayCount}</strong> item${displayCount !== 1 ? 's' : ''}. Reason: <em>${escHtml(reason)}</em></div>
-            ${matched.slice(0, 8).map((it) => `<div style="color:var(--text-secondary);font-size:12px">· ${escHtml(it.id)}${it.changes?.length ? ` — ${escHtml(it.changes.map((c) => `${c.field}: ${String(c.before)} → ${String(c.after)}`).join(', '))}` : ''}</div>`).join('')}
-            ${displayCount > 8 ? `<div style="color:var(--text-muted);font-size:12px;margin-top:4px">… and ${displayCount - 8} more</div>` : ''}
+            ${renderMatchedPreview(matched, displayCount)}
           </div>`;
                 if (applyBtn) {
                     applyBtn.disabled = false;
@@ -510,19 +559,14 @@ export async function applyBulkClose() {
         const data = await api('POST', `/projects/${pid}/pm/close-many`, payload);
         const closed = data.closed_count ?? 'some';
         const failed = data.failed_count ?? 0;
-        if (failed > 0) {
-            toast(`Closed ${closed} item${closed !== 1 ? 's' : ''} (${failed} failed)`, 'info');
-        }
-        else {
-            toast(`Closed ${closed} item${closed !== 1 ? 's' : ''}`, 'success');
-        }
+        toastBulkResult('Closed', closed, failed);
         hideModal('bulk-close-modal');
         if (state.currentView === 'items')
             fetchAndRenderItems();
         loadItemsBadge();
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
         if (applyBtn) {
             applyBtn.disabled = false;
             applyBtn.textContent = 'Close Items';
@@ -572,7 +616,7 @@ export async function renderItemsView() {
       </select>
       <select class="filter-select" id="filter-priority" onchange="window.__app.applyItemFilters()">
         <option value="">All Priorities</option>
-        ${[0, 1, 2, 3, 4].map(p => `<option value="${p}"${state.itemFilters.priority == String(p) ? ' selected' : ''}>P${p}: ${PRIORITY_LABELS[p]}</option>`).join('')}
+        ${[0, 1, 2, 3, 4].map(p => `<option value="${p}"${state.itemFilters.priority === String(p) ? ' selected' : ''}>P${p}: ${PRIORITY_LABELS[p]}</option>`).join('')}
       </select>
       <input class="filter-select" id="filter-sprint" type="text" placeholder="Sprint…" value="${escHtml(state.itemFilters.sprint)}" oninput="window.__app.applyItemFilters()" style="width:100px">
       <input class="filter-select" id="filter-release" type="text" placeholder="Release…" value="${escHtml(state.itemFilters.release)}" oninput="window.__app.applyItemFilters()" style="width:100px">
@@ -618,7 +662,7 @@ export async function fetchAndRenderItems() {
         if (tag) {
             items = items.filter((i) => (i.tags || []).some((t) => t.toLowerCase() === tag));
         }
-        state.items = items;
+        rememberItems(items);
         const sub = document.getElementById('items-subtitle');
         if (sub)
             sub.textContent = `${state.items.length} item${state.items.length !== 1 ? 's' : ''}`;
@@ -889,7 +933,7 @@ export async function openItemDetail(itemId) {
           <div class="form-group">
             <label class="form-label">Priority</label>
             <select class="form-select" id="edit-priority">
-              ${[0, 1, 2, 3, 4].map(p => `<option value="${p}"${item.priority == p ? ' selected' : ''}>P${p}: ${PRIORITY_LABELS[p]}</option>`).join('')}
+              ${[0, 1, 2, 3, 4].map(p => `<option value="${p}"${item.priority === p ? ' selected' : ''}>P${p}: ${PRIORITY_LABELS[p]}</option>`).join('')}
             </select>
           </div>
         </div>
@@ -1070,32 +1114,6 @@ export async function openItemDetail(itemId) {
             bodyEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Failed to load: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
     }
 }
-/**
- * Formats a timestamp as a human-readable relative age string (just now,
- * Nm/Nh/Nd ago) for recent times, or a localized date for anything older than
- * a week. Returns an empty string when the timestamp is missing.
- */
-function relTime(ts) {
-    if (!ts)
-        return '';
-    const d = new Date(ts);
-    const diff = Date.now() - d.getTime();
-    const s = Math.floor(diff / 1000);
-    if (s < 60)
-        return 'just now';
-    if (s < 3600)
-        return `${Math.floor(s / 60)}m ago`;
-    if (s < 86400)
-        return `${Math.floor(s / 3600)}h ago`;
-    if (s < 604800)
-        return `${Math.floor(s / 86400)}d ago`;
-    return d.toLocaleDateString();
-}
-function fmtDate(ts) {
-    if (!ts)
-        return '';
-    return new Date(ts).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
-}
 /**
  * Switches the item detail modal to the selected tab: toggles the active class
  * on the tabs, shows the target tab panel while hiding the others, tears down
@@ -1150,7 +1168,7 @@ export async function addComment(itemId) {
         openItemDetail(itemId);
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 /**
@@ -1172,7 +1190,7 @@ export async function addNote(itemId) {
         el.value = '';
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 /**
@@ -1195,7 +1213,7 @@ export async function appendItem(itemId) {
         el.value = '';
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 /**
@@ -1253,14 +1271,10 @@ export async function updateItem(itemId) {
         if (blockedReason)
             payload.blockedReason = blockedReason;
         await api('PATCH', `/projects/${state.currentProject.id}/pm/update/${itemId}`, payload);
-        toast('Item updated', 'success');
-        openItemDetail(itemId);
-        if (state.currentView === 'items')
-            fetchAndRenderItems();
-        loadItemsBadge();
+        refreshAfterItemAction({ toastMsg: 'Item updated', reopenDetail: itemId, withBadge: true });
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 /**
@@ -1284,14 +1298,10 @@ export async function closeItem(itemId, targetStatus) {
         else {
             await api('POST', `/projects/${state.currentProject.id}/pm/close/${itemId}`, { reason });
         }
-        toast(`Item ${targetStatus}`, 'success');
-        hideModal('item-detail-modal');
-        if (state.currentView === 'items')
-            fetchAndRenderItems();
-        loadItemsBadge();
+        refreshAfterItemAction({ toastMsg: `Item ${targetStatus}`, hideDetail: true, withBadge: true });
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 /**
@@ -1302,14 +1312,10 @@ export function confirmDeleteItem(itemId) {
     confirmDialog('Delete Item?', 'This action cannot be undone. The item and all its data will be permanently removed.', async () => {
         try {
             await api('DELETE', `/projects/${state.currentProject.id}/pm/delete/${itemId}`);
-            toast('Item deleted', 'success');
-            hideModal('item-detail-modal');
-            if (state.currentView === 'items')
-                fetchAndRenderItems();
-            loadItemsBadge();
+            refreshAfterItemAction({ toastMsg: 'Item deleted', hideDetail: true, withBadge: true });
         }
         catch (err) {
-            toast(err instanceof Error ? err.message : String(err), 'error');
+            toastError(err);
         }
     }, true);
 }
@@ -1334,7 +1340,7 @@ export async function claimItem(itemId) {
             fetchAndRenderItems();
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
         if (row)
             row.style.opacity = '';
     }
@@ -1344,50 +1350,21 @@ export async function claimItem(itemId) {
  * reopens the detail and refreshes the items list.
  */
 export async function releaseItem(itemId) {
-    try {
-        await api('POST', `/projects/${state.currentProject.id}/pm/release/${itemId}`, {});
-        toast('Item released', 'success');
-        openItemDetail(itemId);
-        if (state.currentView === 'items')
-            fetchAndRenderItems();
-    }
-    catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
-    }
+    await postItemAction('release', itemId, 'Item released', false);
 }
 /**
  * Starts the item (moving it into in_progress) via the start-task endpoint,
  * then reopens the detail and refreshes the items list and project badge.
  */
 export async function startItem(itemId) {
-    try {
-        await api('POST', `/projects/${state.currentProject.id}/pm/start-task/${itemId}`, {});
-        toast('Item started', 'success');
-        openItemDetail(itemId);
-        if (state.currentView === 'items')
-            fetchAndRenderItems();
-        loadItemsBadge();
-    }
-    catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
-    }
+    await postItemAction('start-task', itemId, 'Item started', true);
 }
 /**
  * Pauses the in-progress item via the pause-task endpoint, then reopens the
  * detail and refreshes the items list and project badge.
  */
 export async function pauseItem(itemId) {
-    try {
-        await api('POST', `/projects/${state.currentProject.id}/pm/pause-task/${itemId}`, {});
-        toast('Item paused', 'success');
-        openItemDetail(itemId);
-        if (state.currentView === 'items')
-            fetchAndRenderItems();
-        loadItemsBadge();
-    }
-    catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
-    }
+    await postItemAction('pause-task', itemId, 'Item paused', true);
 }
 // ═══════════════════════════════════════════════════════════════
 // DEPS / LEARNINGS / TESTS / FILES
@@ -1417,7 +1394,7 @@ export async function addDep(itemId) {
         openItemDetail(itemId);
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 /**
@@ -1438,7 +1415,7 @@ export async function removeDep(itemId, targetId, relation) {
             openItemDetail(itemId);
         }
         catch (err) {
-            toast(err instanceof Error ? err.message : String(err), 'error');
+            toastError(err);
         }
     }, true);
 }
@@ -1460,7 +1437,7 @@ export async function addLearning(itemId) {
         openItemDetail(itemId);
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 /**
@@ -1483,7 +1460,7 @@ export async function addTest(itemId) {
         openItemDetail(itemId);
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 /**
@@ -1503,7 +1480,7 @@ export async function addFileLink(itemId) {
         openItemDetail(itemId);
     }
     catch (err) {
-        toast(err instanceof Error ? err.message : String(err), 'error');
+        toastError(err);
     }
 }
 // ═══════════════════════════════════════════════════════════════
@@ -1521,29 +1498,22 @@ export function useItemAsTemplate(item) {
     showView('create');
     // Give the create view time to render, then fill fields
     setTimeout(() => {
-        const setVal = (id, val) => {
-            if (!val)
-                return;
-            const el = document.getElementById(id);
-            if (el)
-                el.value = val;
-        };
         // Pre-fill create form from item fields (title gets "Copy of …" prefix)
         const origTitle = String(item['title'] || '');
-        setVal('ci-title', origTitle ? `Copy of ${origTitle}` : '');
-        setVal('ci-type', String(item['type'] || ''));
-        setVal('ci-priority', String(item['priority'] || ''));
+        setFormValue('ci-title', origTitle ? `Copy of ${origTitle}` : '');
+        setFormValue('ci-type', String(item['type'] || ''));
+        setFormValue('ci-priority', String(item['priority'] || ''));
         const tags = Array.isArray(item['tags']) ? item['tags'].join(', ') : String(item['tags'] || '');
-        setVal('ci-tags', tags);
-        setVal('ci-desc', String(item['description'] || ''));
-        setVal('ci-sprint', String(item['sprint'] || ''));
-        setVal('ci-release', String(item['release'] || ''));
-        setVal('ci-assignee', String(item['assignee'] || ''));
+        setFormValue('ci-tags', tags);
+        setFormValue('ci-desc', String(item['description'] || ''));
+        setFormValue('ci-sprint', String(item['sprint'] || ''));
+        setFormValue('ci-release', String(item['release'] || ''));
+        setFormValue('ci-assignee', String(item['assignee'] || ''));
         if (item['acceptance_criteria'] || item['acceptanceCriteria']) {
-            setVal('ci-acceptance-criteria', String(item['acceptance_criteria'] || item['acceptanceCriteria'] || ''));
+            setFormValue('ci-acceptance-criteria', String(item['acceptance_criteria'] || item['acceptanceCriteria'] || ''));
         }
         if (item['body']) {
-            setVal('ci-body', String(item['body']));
+            setFormValue('ci-body', String(item['body']));
         }
         document.getElementById('ci-title')?.focus();
         // Select all title text so user can immediately replace or refine