251 lines
13 KiB
JavaScript
251 lines
13 KiB
JavaScript
import { api } from '../../lib/api.mjs';
|
|
import { formatDateTime, formatDate } from '../../lib/format.mjs';
|
|
|
|
const TABS = ['Overview', 'Checklist', 'Resources', 'Photos', 'Accounting', 'Activity'];
|
|
const STATUS_TRANSITIONS = {
|
|
draft: ['assigned','scheduled'],
|
|
assigned: ['scheduled','in_progress'],
|
|
scheduled: ['in_progress'],
|
|
in_progress: ['pending_review','closed'],
|
|
pending_review: ['in_progress','closed'],
|
|
closed: [],
|
|
};
|
|
|
|
class WoDetail extends HTMLElement {
|
|
#woId = null;
|
|
#wo = null;
|
|
#tab = 'Overview';
|
|
#loading = true;
|
|
|
|
static get observedAttributes() { return ['wo-id']; }
|
|
attributeChangedCallback(_, __, val) { this.#woId = val ? +val : null; if (this.shadowRoot) this.#load(); }
|
|
|
|
connectedCallback() {
|
|
this.attachShadow({ mode: 'open' });
|
|
if (this.#woId) this.#load();
|
|
}
|
|
|
|
async #load() {
|
|
this.#loading = true;
|
|
this.#render();
|
|
try { this.#wo = await api.get(`/work-orders/${this.#woId}`); } catch { this.#wo = null; }
|
|
this.#loading = false;
|
|
this.#render();
|
|
}
|
|
|
|
#render() {
|
|
const s = this.shadowRoot;
|
|
s.innerHTML = `<style>${this.#css()}</style>${this.#html()}`;
|
|
this.#bind();
|
|
if (window.lucide) lucide.createIcons({ nodes: [s] });
|
|
}
|
|
|
|
#css() { return `
|
|
:host { display: block; }
|
|
.page-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
|
|
.back-btn { background:none; border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:.4rem .75rem; font-size:.813rem; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:.3rem; transition:background .15s; flex-shrink:0; }
|
|
.back-btn:hover { background:var(--surface-2); }
|
|
.header-info { flex:1; min-width:0; }
|
|
.wo-number { font-family:monospace; font-size:.813rem; color:var(--text-muted); margin-bottom:.15rem; }
|
|
h1 { font-size:1.2rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.header-badges { display:flex; align-items:center; gap:.5rem; margin-top:.35rem; flex-wrap:wrap; }
|
|
.header-actions { display:flex; gap:.5rem; flex-shrink:0; }
|
|
.btn { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .9rem; border:none; border-radius:var(--radius); font-size:.813rem; font-weight:600; cursor:pointer; transition:opacity .15s,background .15s; white-space:nowrap; }
|
|
.btn-primary { background:var(--teal); color:#fff; }
|
|
.btn-primary:hover { opacity:.88; }
|
|
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
|
|
.btn-ghost:hover { background:var(--surface-2); }
|
|
.meta-strip { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.25rem; margin-bottom:1rem; display:flex; gap:2rem; flex-wrap:wrap; box-shadow:var(--shadow-sm); }
|
|
.meta-item { display:flex; flex-direction:column; gap:.15rem; }
|
|
.meta-label { font-size:.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
|
|
.meta-value { font-size:.875rem; color:var(--text); font-weight:500; }
|
|
.tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1rem; overflow-x:auto; }
|
|
.tab { padding:.65rem 1rem; font-size:.875rem; font-weight:500; color:var(--text-muted); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; transition:color .15s,border-color .15s; }
|
|
.tab.active { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }
|
|
.tab:hover:not(.active) { color:var(--text); }
|
|
.tab-content { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow-sm); }
|
|
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
|
|
.detail-field { display:flex; flex-direction:column; gap:.25rem; }
|
|
.field-label { font-size:.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
|
|
.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; } }
|
|
`; }
|
|
|
|
#html() {
|
|
if (this.#loading) return `
|
|
<div style="display:flex;align-items:center;justify-content:center;padding:4rem">
|
|
<ui-spinner size="lg"></ui-spinner>
|
|
</div>`;
|
|
|
|
if (!this.#wo) return `
|
|
<ui-empty icon="alert-circle" heading="Work order not found" body="This work order may have been deleted.">
|
|
<button class="btn btn-ghost" id="back" style="margin-top:.5rem">
|
|
<i data-lucide="arrow-left" style="width:14px;height:14px"></i> Back to list
|
|
</button>
|
|
</ui-empty>`;
|
|
|
|
const wo = this.#wo;
|
|
const transitions = STATUS_TRANSITIONS[wo.status] || [];
|
|
const STATUS_COLORS = { draft:'var(--status-draft)', assigned:'var(--status-assigned)', scheduled:'var(--status-scheduled)', in_progress:'var(--status-in_progress)', pending_review:'var(--status-pending_review)', closed:'var(--status-closed)' };
|
|
|
|
return `
|
|
<div class="page-header">
|
|
<button class="back-btn" id="back"><i data-lucide="chevron-left" style="width:15px;height:15px"></i> Work Orders</button>
|
|
<div class="header-info">
|
|
<div class="wo-number">${wo.wo_number}</div>
|
|
<h1>${this.#esc(wo.title)}</h1>
|
|
<div class="header-badges">
|
|
<ui-badge type="status" value="${wo.status}"></ui-badge>
|
|
<ui-badge type="priority" value="${wo.priority}"></ui-badge>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn btn-ghost" id="edit-btn">
|
|
<i data-lucide="pencil" style="width:14px;height:14px"></i> Edit
|
|
</button>
|
|
${transitions.length ? `
|
|
<div class="status-menu" id="status-menu">
|
|
<button class="btn btn-primary" id="status-btn">
|
|
<i data-lucide="refresh-cw" style="width:14px;height:14px"></i> Change Status
|
|
</button>
|
|
<div class="status-dropdown" id="status-dropdown" style="display:none">
|
|
${transitions.map(s => `
|
|
<button class="status-opt" data-status="${s}">
|
|
<span class="status-dot" style="background:${STATUS_COLORS[s]}"></span>
|
|
${s.replace('_',' ')}
|
|
</button>`).join('')}
|
|
</div>
|
|
</div>` : ''}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meta-strip">
|
|
<div class="meta-item">
|
|
<span class="meta-label">Site</span>
|
|
<span class="meta-value">${this.#esc(wo.site_name) || '—'}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Scheduled Start</span>
|
|
<span class="meta-value">${formatDateTime(wo.scheduled_start)}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Scheduled End</span>
|
|
<span class="meta-value">${formatDateTime(wo.scheduled_end)}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Created By</span>
|
|
<span class="meta-value">${this.#esc(wo.created_by) || '—'}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-label">Created</span>
|
|
<span class="meta-value">${formatDate(wo.created_at)}</span>
|
|
</div>
|
|
${wo.parent_type ? `<div class="meta-item">
|
|
<span class="meta-label">Parent</span>
|
|
<span class="meta-value">${wo.parent_type} #${wo.parent_id}</span>
|
|
</div>` : ''}
|
|
</div>
|
|
|
|
<div class="tab-bar">
|
|
${TABS.map(t => `<button class="tab${this.#tab===t?' active':''}" data-tab="${t}">${t}</button>`).join('')}
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-content">
|
|
${this.#tabContent(wo)}
|
|
</div>`;
|
|
}
|
|
|
|
#tabContent(wo) {
|
|
switch (this.#tab) {
|
|
case 'Overview': return `
|
|
<div class="detail-grid">
|
|
<div class="detail-field" style="grid-column:1/-1">
|
|
<div class="field-label">Description</div>
|
|
${wo.description
|
|
? `<div class="text-block">${this.#esc(wo.description)}</div>`
|
|
: '<div class="field-value empty">No description provided</div>'}
|
|
</div>
|
|
<div class="detail-field" style="grid-column:1/-1">
|
|
<div class="field-label">Instructions</div>
|
|
${wo.instructions
|
|
? `<div class="text-block">${this.#esc(wo.instructions)}</div>`
|
|
: '<div class="field-value empty">No instructions provided</div>'}
|
|
</div>
|
|
<div class="detail-field">
|
|
<div class="field-label">Address</div>
|
|
<div class="field-value${wo.address?'':' empty'}">${this.#esc(wo.address) || 'Not set'}</div>
|
|
</div>
|
|
<div class="detail-field">
|
|
<div class="field-label">Access Notes</div>
|
|
${wo.access_notes
|
|
? `<div class="text-block" style="font-size:.813rem">${this.#esc(wo.access_notes)}</div>`
|
|
: '<div class="field-value empty">No access notes</div>'}
|
|
</div>
|
|
</div>`;
|
|
case 'Checklist':
|
|
case 'Resources':
|
|
case 'Photos':
|
|
case '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>`;
|
|
default: return '';
|
|
}
|
|
}
|
|
|
|
#bind() {
|
|
const s = this.shadowRoot;
|
|
s.querySelector('#back')?.addEventListener('click', () =>
|
|
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: '/work-orders' } })));
|
|
|
|
s.querySelector('#edit-btn')?.addEventListener('click', () =>
|
|
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}/edit` } })));
|
|
|
|
// Tab switching
|
|
s.querySelectorAll('.tab').forEach(tab =>
|
|
tab.addEventListener('click', () => {
|
|
this.#tab = tab.dataset.tab;
|
|
s.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === this.#tab));
|
|
s.querySelector('#tab-content').innerHTML = this.#tabContent(this.#wo);
|
|
if (window.lucide) lucide.createIcons({ nodes: [s.querySelector('#tab-content')] });
|
|
}));
|
|
|
|
// Status dropdown
|
|
const statusBtn = s.querySelector('#status-btn');
|
|
const dropdown = s.querySelector('#status-dropdown');
|
|
statusBtn?.addEventListener('click', e => {
|
|
e.stopPropagation();
|
|
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
|
|
});
|
|
document.addEventListener('click', () => { if (dropdown) dropdown.style.display = 'none'; }, { once: false });
|
|
|
|
s.querySelectorAll('.status-opt').forEach(opt =>
|
|
opt.addEventListener('click', async () => {
|
|
dropdown.style.display = 'none';
|
|
try {
|
|
await api.put(`/work-orders/${this.#woId}/status`, { status: opt.dataset.status });
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: `Status changed to ${opt.dataset.status.replace('_',' ')}`, type: 'success' } }));
|
|
this.#load();
|
|
} catch (err) {
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
|
}
|
|
}));
|
|
}
|
|
|
|
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
|
}
|
|
customElements.define('wo-detail', WoDetail);
|