@unbrained/pm-web 1.0.0

package/public/src/views/templates.ts

@@ -0,0 +1,113 @@
+// ═══════════════════════════════════════════════════════════════
+// TEMPLATES VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml, typeIcon } from '../utils.js';
+import { toast } from '../components/toast.js';
+import { showView } from './router.js';
+
+export async function renderTemplatesView(): Promise<void> {
+  const el = document.getElementById('content-templates');
+  if (!el) return;
+  if (!state.currentProject) {
+    el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+    return;
+  }
+  el.innerHTML = `
+    <div class="page-header">
+      <div>
+        <div class="page-title">Templates</div>
+        <div class="page-subtitle">Reusable item templates for ${escHtml(state.currentProject.name)}</div>
+      </div>
+      <div class="page-actions">
+        <button class="btn btn-secondary btn-sm" onclick="window.__app.renderTemplatesView()">↺ Refresh</button>
+      </div>
+    </div>
+    <div id="templates-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+  await fetchAndRenderTemplates();
+}
+
+async function fetchAndRenderTemplates(): Promise<void> {
+  const pid = state.currentProject?.id;
+  if (!pid) return;
+  try {
+    const data = await api('GET', `/projects/${pid}/pm/templates`);
+    const templates: any[] = (data as any).templates || [];
+    const el = document.getElementById('templates-content');
+    if (!el) return;
+    if (templates.length === 0) {
+      el.innerHTML = `
+        <div class="card">
+          <div class="card-body">
+            <div style="color:var(--text-muted);font-size:13px;margin-bottom:16px">
+              No templates defined yet. Create templates using the <code style="font-family:var(--font-mono);background:var(--bg-input);padding:2px 6px;border-radius:4px">pm templates create</code> CLI command.
+            </div>
+            <div style="font-size:12px;color:var(--text-secondary)">
+              Templates allow you to pre-fill item fields (type, priority, tags, description, etc.) when creating new items.
+            </div>
+          </div>
+        </div>`;
+      return;
+    }
+    el.innerHTML = `
+      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px">
+        ${templates.map((t: any) => renderTemplateCard(t)).join('')}
+      </div>`;
+  } catch(err: unknown) {
+    const el = document.getElementById('templates-content');
+    if (el) el.innerHTML = `<div class="empty-state"><div class="empty-state-text">Failed to load templates: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}
+
+function renderTemplateCard(t: any): string {
+  const name = t.name || t.id || 'Unnamed';
+  const type = t.type || t.defaults?.type || '';
+  const priority = t.priority || t.defaults?.priority || '';
+  const tags = (t.tags || t.defaults?.tags || []).join(', ');
+  const desc = t.description || t.defaults?.description || '';
+  return `
+    <div class="card" style="cursor:default">
+      <div class="card-header" style="display:flex;align-items:center;justify-content:space-between">
+        <div class="card-title" style="display:flex;align-items:center;gap:6px">
+          ${type ? typeIcon(type) : ''}
+          <span>${escHtml(name)}</span>
+        </div>
+        ${priority ? `<span style="font-size:11px;color:var(--text-muted);background:var(--bg-input);padding:2px 8px;border-radius:4px">P${priority}</span>` : ''}
+      </div>
+      <div class="card-body" style="padding-top:0">
+        ${type ? `<div style="font-size:12px;color:var(--text-secondary);margin-bottom:6px">Type: <strong>${escHtml(type)}</strong></div>` : ''}
+        ${tags ? `<div style="font-size:12px;color:var(--text-secondary);margin-bottom:6px">Tags: ${escHtml(tags)}</div>` : ''}
+        ${desc ? `<div style="font-size:12px;color:var(--text-muted);margin-bottom:10px;line-height:1.4">${escHtml(desc)}</div>` : ''}
+        <button class="btn btn-primary btn-sm" style="width:100%" onclick="window.__app.createFromTemplate(${JSON.stringify(escHtml(name))}, ${JSON.stringify(t)})">
+          + Create from Template
+        </button>
+      </div>
+    </div>`;
+}
+
+export function createFromTemplate(name: string, template: any): void {
+  // Navigate to create view and pre-fill from template
+  showView('create');
+  // Give the create view time to render, then fill fields
+  setTimeout(() => {
+    const defaults = template.defaults || template;
+    const setVal = (id: string, val: string | undefined) => {
+      if (!val) return;
+      const el = document.getElementById(id) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null;
+      if (el) el.value = val;
+    };
+    setVal('ci-type', defaults.type || template.type);
+    setVal('ci-priority', String(defaults.priority || template.priority || ''));
+    setVal('ci-tags', (defaults.tags || template.tags || []).join(', '));
+    setVal('ci-desc', defaults.description || template.description || '');
+    setVal('ci-sprint', defaults.sprint || template.sprint || '');
+    setVal('ci-release', defaults.release || template.release || '');
+    setVal('ci-assignee', defaults.assignee || template.assignee || '');
+    if (defaults.acceptance_criteria || defaults.acceptanceCriteria) {
+      setVal('ci-acceptance-criteria', defaults.acceptance_criteria || defaults.acceptanceCriteria);
+    }
+    toast(`Template "${name}" applied`, 'success');
+    document.getElementById('ci-title')?.focus();
+  }, 100);
+}

package/public/src/views/validate.js

@@ -0,0 +1,54 @@
+// ═══════════════════════════════════════════════════════════════
+// VALIDATE VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+export async function renderValidateView() {
+    const el = document.getElementById('content-validate');
+    if (!el)
+        return;
+    if (!state.currentProject) {
+        el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
+        return;
+    }
+    el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Validate</div><div class="page-subtitle">Run metadata & lifecycle validation on ${escHtml(state.currentProject.name)}</div></div>
+      <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderValidateView()">↺ Refresh</button></div>
+    </div>
+    <div id="validate-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+    try {
+        const data = await api('GET', `/projects/${state.currentProject.id}/pm/validate`);
+        const issues = data.issues || data.errors || data.violations || [];
+        const warnings = data.warnings || [];
+        const el2 = document.getElementById('validate-content');
+        if (!el2)
+            return;
+        const allIssues = [...issues.map((i) => ({ ...i, level: 'error' })), ...warnings.map((w) => ({ ...w, level: 'warning' }))];
+        el2.innerHTML = `
+      <div class="card" style="margin-bottom:12px">
+        <div class="card-header"><div class="card-title">Validation Results</div></div>
+        <div class="card-body">
+          ${allIssues.length === 0
+            ? '<div style="color:var(--status-closed);font-size:13px">✓ All checks passed — no issues found!</div>'
+            : allIssues.map((i) => `
+              <div style="display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border)">
+                <span style="color:${i.level === 'error' ? 'var(--status-blocked)' : 'var(--priority-3)'};flex-shrink:0">${i.level === 'error' ? '✗' : '⚠'}</span>
+                <div>
+                  <div style="font-size:13px">${escHtml(i.message || i.description || JSON.stringify(i))}</div>
+                  ${i.id ? `<div style="font-size:11px;color:var(--text-muted);margin-top:2px"><a href="#" onclick="window.__app.openItemDetail('${escHtml(i.id)}');return false" style="color:var(--accent)">${escHtml(i.id)}</a></div>` : ''}
+                </div>
+              </div>`).join('')}
+        </div>
+      </div>
+      ${data.summary ? `<div class="card"><div class="card-header"><div class="card-title">Summary</div></div><div class="card-body"><div class="item-detail-desc">${escHtml(data.summary)}</div></div></div>` : ''}
+      ${data.ok !== undefined ? `<div style="margin-top:8px;font-size:12px;color:var(--text-muted)">Status: <span style="color:${data.ok ? 'var(--status-closed)' : 'var(--status-blocked)'}">${data.ok ? 'PASS' : 'FAIL'}</span></div>` : ''}`;
+    }
+    catch (err) {
+        const el2 = document.getElementById('validate-content');
+        if (el2)
+            el2.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+    }
+}
+//# sourceMappingURL=validate.js.map

package/public/src/views/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.js","sourceRoot":"","sources":["validate.ts"],"names":[],"mappings":"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"}

package/public/src/views/validate.ts

@@ -0,0 +1,48 @@
+// ═══════════════════════════════════════════════════════════════
+// VALIDATE VIEW
+// ═══════════════════════════════════════════════════════════════
+import { state } from '../state.js';
+import { api } from '../api.js';
+import { escHtml } from '../utils.js';
+
+export async function renderValidateView(): Promise<void> {
+  const el = document.getElementById('content-validate');
+  if (!el) return;
+  if (!state.currentProject) { el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>'; return; }
+  el.innerHTML = `
+    <div class="page-header">
+      <div><div class="page-title">Validate</div><div class="page-subtitle">Run metadata & lifecycle validation on ${escHtml(state.currentProject.name)}</div></div>
+      <div class="page-actions"><button class="btn btn-secondary btn-sm" onclick="window.__app.renderValidateView()">↺ Refresh</button></div>
+    </div>
+    <div id="validate-content"><div class="loading-state"><div class="loading-spinner"></div></div></div>`;
+  try {
+    const data = await api('GET', `/projects/${state.currentProject.id}/pm/validate`) as any;
+    const issues = data.issues || data.errors || data.violations || [];
+    const warnings = data.warnings || [];
+    const el2 = document.getElementById('validate-content');
+    if (!el2) return;
+    const allIssues = [...issues.map((i: any)=>({...i,level:'error'})), ...warnings.map((w: any)=>({...w,level:'warning'}))];
+    el2.innerHTML = `
+      <div class="card" style="margin-bottom:12px">
+        <div class="card-header"><div class="card-title">Validation Results</div></div>
+        <div class="card-body">
+          ${allIssues.length === 0
+            ? '<div style="color:var(--status-closed);font-size:13px">✓ All checks passed — no issues found!</div>'
+            : allIssues.map((i: any)=>`
+              <div style="display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border)">
+                <span style="color:${i.level==='error'?'var(--status-blocked)':'var(--priority-3)'};flex-shrink:0">${i.level==='error'?'✗':'⚠'}</span>
+                <div>
+                  <div style="font-size:13px">${escHtml(i.message||i.description||JSON.stringify(i))}</div>
+                  ${i.id?`<div style="font-size:11px;color:var(--text-muted);margin-top:2px"><a href="#" onclick="window.__app.openItemDetail('${escHtml(i.id)}');return false" style="color:var(--accent)">${escHtml(i.id)}</a></div>`:''}
+                </div>
+              </div>`).join('')
+          }
+        </div>
+      </div>
+      ${data.summary ? `<div class="card"><div class="card-header"><div class="card-title">Summary</div></div><div class="card-body"><div class="item-detail-desc">${escHtml(data.summary)}</div></div></div>` : ''}
+      ${data.ok !== undefined ? `<div style="margin-top:8px;font-size:12px;color:var(--text-muted)">Status: <span style="color:${data.ok?'var(--status-closed)':'var(--status-blocked)'}">${data.ok?'PASS':'FAIL'}</span></div>` : ''}`;
+  } catch(err: unknown) {
+    const el2 = document.getElementById('validate-content');
+    if (el2) el2.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
+  }
+}