Add migration scripts, activity handler, and registry components for equipment, materials, and people
This commit is contained in:
@@ -1,5 +1,11 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
import { formatDateTime, formatDate } from '../../lib/format.mjs';
|
||||
import './wo-checklist.mjs';
|
||||
import './wo-resource-panel.mjs';
|
||||
import './wo-photo-panel.mjs';
|
||||
import './wo-map.mjs';
|
||||
import './wo-accounting.mjs';
|
||||
import './wo-timeline.mjs';
|
||||
|
||||
const TABS = ['Overview', 'Checklist', 'Resources', 'Photos', 'Accounting', 'Activity'];
|
||||
const STATUS_TRANSITIONS = {
|
||||
@@ -70,15 +76,36 @@ class WoDetail extends HTMLElement {
|
||||
.field-value { font-size:.875rem; color:var(--text); line-height:1.5; }
|
||||
.field-value.empty { color:var(--text-muted); font-style:italic; }
|
||||
.text-block { background:var(--surface-2); border-radius:var(--radius-sm); padding:.75rem 1rem; font-size:.875rem; line-height:1.6; color:var(--text); white-space:pre-wrap; }
|
||||
.phase-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:999px; font-size:.7rem; font-weight:700; background:var(--surface-2); color:var(--text-muted); }
|
||||
.status-menu { position:relative; }
|
||||
.status-dropdown { position:absolute; top:calc(100% + .25rem); right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md); z-index:50; min-width:160px; overflow:hidden; }
|
||||
.status-opt { display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; font-size:.875rem; cursor:pointer; border:none; background:none; width:100%; text-align:left; transition:background .15s; color:var(--text); }
|
||||
.status-opt:hover { background:var(--surface-2); }
|
||||
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
|
||||
.placeholder { text-align:center; padding:3rem; color:var(--text-muted); }
|
||||
.placeholder i { margin-bottom:.75rem; }
|
||||
@media (max-width:768px) { .detail-grid { grid-template-columns:1fr; } .meta-strip { gap:1rem; } }
|
||||
.ap-dialog { border:1px solid var(--border); border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow-lg); width:460px; max-width:96vw; background:var(--surface); color:var(--text); }
|
||||
.ap-dialog::backdrop { background:rgba(0,0,0,.45); }
|
||||
.ap-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
|
||||
.ap-title { font-size:.938rem; font-weight:700; }
|
||||
.ap-close { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.25rem; display:flex; }
|
||||
.ap-body { padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.75rem; }
|
||||
.ap-search { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .75rem; font-size:.875rem; background:var(--surface); color:var(--text); box-sizing:border-box; }
|
||||
.ap-search:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.12); }
|
||||
.ap-list { max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.35rem; background:var(--surface); }
|
||||
.ap-item { padding:.55rem .75rem; border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; gap:.6rem; transition:background .12s; border:2px solid transparent; }
|
||||
.ap-item:hover { background:var(--surface-2); }
|
||||
.ap-item.selected { border-color:var(--teal); background:rgba(10,126,164,.06); }
|
||||
.ap-item-name { font-size:.875rem; font-weight:500; color:var(--text); }
|
||||
.ap-item-meta { font-size:.75rem; color:var(--text-muted); }
|
||||
.ap-mode { display:flex; flex-direction:column; gap:.4rem; }
|
||||
.ap-mode-label { font-size:.813rem; font-weight:600; color:var(--text); }
|
||||
.ap-mode-opts { display:flex; gap:.5rem; }
|
||||
.ap-mode-opt { flex:1; border:2px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .75rem; cursor:pointer; background:var(--surface); transition:border-color .12s,background .12s; }
|
||||
.ap-mode-opt.selected { border-color:var(--teal); background:rgba(10,126,164,.06); }
|
||||
.ap-mode-opt-title { font-size:.813rem; font-weight:600; color:var(--text); }
|
||||
.ap-mode-opt-desc { font-size:.75rem; color:var(--text-muted); margin-top:.15rem; }
|
||||
.ap-footer { padding:.875rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; align-items:center; }
|
||||
.ap-err { font-size:.813rem; color:var(--danger); flex:1; }
|
||||
.ap-empty { text-align:center; padding:1.5rem; color:var(--text-muted); font-size:.875rem; }
|
||||
`; }
|
||||
|
||||
#html() {
|
||||
@@ -113,6 +140,9 @@ class WoDetail extends HTMLElement {
|
||||
<button class="btn btn-ghost" id="edit-btn">
|
||||
<i data-lucide="pencil" style="width:14px;height:14px"></i> Edit
|
||||
</button>
|
||||
<button class="btn btn-ghost" id="apply-profile-btn">
|
||||
<i data-lucide="layout-template" style="width:14px;height:14px"></i> Apply Profile
|
||||
</button>
|
||||
${transitions.length ? `
|
||||
<div class="status-menu" id="status-menu">
|
||||
<button class="btn btn-primary" id="status-btn">
|
||||
@@ -162,7 +192,36 @@ class WoDetail extends HTMLElement {
|
||||
|
||||
<div class="tab-content" id="tab-content">
|
||||
${this.#tabContent(wo)}
|
||||
</div>`;
|
||||
</div>
|
||||
|
||||
<dialog class="ap-dialog" id="ap-dialog">
|
||||
<div class="ap-header">
|
||||
<span class="ap-title">Apply Work Order Profile</span>
|
||||
<button class="ap-close" id="ap-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
|
||||
</div>
|
||||
<div class="ap-body" id="ap-body">
|
||||
<input class="ap-search" id="ap-search" placeholder="Search profiles…" autocomplete="off">
|
||||
<div class="ap-list" id="ap-profile-list"><div class="ap-empty">Loading profiles…</div></div>
|
||||
<div class="ap-mode" id="ap-mode" style="display:none">
|
||||
<div class="ap-mode-label">Existing steps detected — how should we proceed?</div>
|
||||
<div class="ap-mode-opts">
|
||||
<div class="ap-mode-opt selected" data-mode="append">
|
||||
<div class="ap-mode-opt-title">Append</div>
|
||||
<div class="ap-mode-opt-desc">Add profile steps after existing steps</div>
|
||||
</div>
|
||||
<div class="ap-mode-opt" data-mode="replace">
|
||||
<div class="ap-mode-opt-title">Replace</div>
|
||||
<div class="ap-mode-opt-desc">Delete existing steps, load from profile</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ap-footer">
|
||||
<span class="ap-err" id="ap-err"></span>
|
||||
<button class="btn btn-ghost" id="ap-cancel">Cancel</button>
|
||||
<button class="btn btn-primary" id="ap-confirm" disabled>Apply Profile</button>
|
||||
</div>
|
||||
</dialog>`;
|
||||
}
|
||||
|
||||
#tabContent(wo) {
|
||||
@@ -191,17 +250,35 @@ class WoDetail extends HTMLElement {
|
||||
? `<div class="text-block" style="font-size:.813rem">${this.#esc(wo.access_notes)}</div>`
|
||||
: '<div class="field-value empty">No access notes</div>'}
|
||||
</div>
|
||||
${wo.lat && wo.lng ? `
|
||||
<div class="detail-field" style="grid-column:1/-1">
|
||||
<div class="field-label">Location</div>
|
||||
<wo-map
|
||||
lat="${wo.lat}"
|
||||
lng="${wo.lng}"
|
||||
site-name="${this.#esc(wo.site_name)}"
|
||||
access-notes="${this.#esc(wo.access_notes)}"
|
||||
wo-number="${this.#esc(wo.wo_number)}"
|
||||
wo-id="${wo.id}"
|
||||
></wo-map>
|
||||
</div>` : ''}
|
||||
</div>`;
|
||||
|
||||
case 'Checklist':
|
||||
return `<wo-checklist wo-id="${wo.id}"></wo-checklist>`;
|
||||
|
||||
case 'Resources':
|
||||
return `<wo-resource-panel wo-id="${wo.id}"></wo-resource-panel>`;
|
||||
|
||||
case 'Photos':
|
||||
return `<wo-photo-panel wo-id="${wo.id}"></wo-photo-panel>`;
|
||||
|
||||
case 'Accounting':
|
||||
return `<wo-accounting wo-id="${wo.id}"></wo-accounting>`;
|
||||
|
||||
case 'Activity':
|
||||
return `<div class="placeholder">
|
||||
<i data-lucide="construction" style="width:40px;height:40px;margin:0 auto .75rem;color:var(--text-muted)"></i>
|
||||
<p style="font-weight:600;margin-bottom:.35rem">${this.#tab} — Coming in Phase 2</p>
|
||||
<p style="font-size:.875rem">This section will be available in the next phase of development.</p>
|
||||
</div>`;
|
||||
return `<wo-timeline wo-id="${wo.id}"></wo-timeline>`;
|
||||
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
@@ -243,6 +320,113 @@ class WoDetail extends HTMLElement {
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
||||
}
|
||||
}));
|
||||
|
||||
// Apply Profile dialog
|
||||
this.#bindApplyProfile(s);
|
||||
}
|
||||
|
||||
#bindApplyProfile(s) {
|
||||
const apBtn = s.querySelector('#apply-profile-btn');
|
||||
const dialog = s.querySelector('#ap-dialog');
|
||||
const closeBtn = s.querySelector('#ap-close');
|
||||
const cancelBtn = s.querySelector('#ap-cancel');
|
||||
const confirmBtn = s.querySelector('#ap-confirm');
|
||||
const searchEl = s.querySelector('#ap-search');
|
||||
const listEl = s.querySelector('#ap-profile-list');
|
||||
const modeEl = s.querySelector('#ap-mode');
|
||||
const errEl = s.querySelector('#ap-err');
|
||||
|
||||
if (!apBtn) return;
|
||||
|
||||
let allProfiles = [];
|
||||
let selectedId = null;
|
||||
let selectedMode = 'append';
|
||||
|
||||
const renderList = (items) => {
|
||||
if (items.length === 0) {
|
||||
listEl.innerHTML = '<div class="ap-empty">No profiles found</div>';
|
||||
return;
|
||||
}
|
||||
listEl.innerHTML = items.map(p => `
|
||||
<div class="ap-item${selectedId === p.id ? ' selected' : ''}" data-id="${p.id}">
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="ap-item-name">${this.#esc(p.name)}</div>
|
||||
<div class="ap-item-meta">${p.category ? `${p.category} · ` : ''}${p.step_count} step${p.step_count !== 1 ? 's' : ''} · ${p.default_priority} priority</div>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
|
||||
listEl.querySelectorAll('.ap-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
selectedId = +item.dataset.id;
|
||||
listEl.querySelectorAll('.ap-item').forEach(i => i.classList.toggle('selected', +i.dataset.id === selectedId));
|
||||
confirmBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
apBtn.addEventListener('click', async () => {
|
||||
selectedId = null;
|
||||
selectedMode = 'append';
|
||||
confirmBtn.disabled = true;
|
||||
errEl.textContent = '';
|
||||
searchEl.value = '';
|
||||
|
||||
// Show/hide mode selector based on whether WO already has steps
|
||||
try {
|
||||
const steps = await api.get(`/work-orders/${this.#woId}/steps`) || [];
|
||||
modeEl.style.display = steps.length > 0 ? '' : 'none';
|
||||
} catch { modeEl.style.display = 'none'; }
|
||||
|
||||
// Select append by default
|
||||
modeEl.querySelectorAll('.ap-mode-opt').forEach(o => o.classList.toggle('selected', o.dataset.mode === 'append'));
|
||||
|
||||
listEl.innerHTML = '<div class="ap-empty">Loading…</div>';
|
||||
dialog.showModal();
|
||||
|
||||
try {
|
||||
allProfiles = await api.get('/profiles') || [];
|
||||
renderList(allProfiles);
|
||||
} catch (err) {
|
||||
listEl.innerHTML = `<div class="ap-empty">${err.message}</div>`;
|
||||
}
|
||||
});
|
||||
|
||||
searchEl.addEventListener('input', () => {
|
||||
const q = searchEl.value.toLowerCase();
|
||||
renderList(q ? allProfiles.filter(p => p.name.toLowerCase().includes(q) || (p.category || '').toLowerCase().includes(q)) : allProfiles);
|
||||
});
|
||||
|
||||
modeEl.querySelectorAll('.ap-mode-opt').forEach(opt => {
|
||||
opt.addEventListener('click', () => {
|
||||
selectedMode = opt.dataset.mode;
|
||||
modeEl.querySelectorAll('.ap-mode-opt').forEach(o => o.classList.toggle('selected', o.dataset.mode === selectedMode));
|
||||
});
|
||||
});
|
||||
|
||||
closeBtn.addEventListener('click', () => dialog.close());
|
||||
cancelBtn.addEventListener('click', () => dialog.close());
|
||||
|
||||
confirmBtn.addEventListener('click', async () => {
|
||||
if (!selectedId) return;
|
||||
confirmBtn.disabled = true;
|
||||
confirmBtn.textContent = 'Applying…';
|
||||
errEl.textContent = '';
|
||||
try {
|
||||
const result = await api.post(`/work-orders/${this.#woId}/apply-profile/${selectedId}`, { mode: selectedMode });
|
||||
dialog.close();
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: {
|
||||
message: `Profile applied — ${result.steps_added} step${result.steps_added !== 1 ? 's' : ''} ${selectedMode === 'replace' ? 'loaded' : 'added'}`,
|
||||
type: 'success'
|
||||
}}));
|
||||
// Reload WO and switch to Checklist tab
|
||||
this.#tab = 'Checklist';
|
||||
this.#load();
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message;
|
||||
confirmBtn.disabled = false;
|
||||
confirmBtn.textContent = 'Apply Profile';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||||
|
||||
Reference in New Issue
Block a user