Add user database migration, core reusable components, and layout structure
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
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);
|
||||
@@ -0,0 +1,221 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
import { toLocalDatetime } from '../../lib/format.mjs';
|
||||
|
||||
const STATUSES = ['draft','assigned','scheduled','in_progress','pending_review','closed'];
|
||||
const PRI_COLOR = { low:'var(--priority-low)', normal:'var(--priority-normal)', high:'var(--priority-high)', urgent:'var(--priority-urgent)' };
|
||||
|
||||
class WoForm extends HTMLElement {
|
||||
#woId = null;
|
||||
#wo = null;
|
||||
#dirty = false;
|
||||
|
||||
static get observedAttributes() { return ['wo-id']; }
|
||||
attributeChangedCallback(_, __, val) { this.#woId = val ? +val : null; if (this.shadowRoot) this.#load(); }
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#render();
|
||||
if (this.#woId) this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
if (!this.#woId) return;
|
||||
try { this.#wo = await api.get(`/work-orders/${this.#woId}`); } catch { /* ignore */ }
|
||||
this.#render();
|
||||
}
|
||||
|
||||
#render() {
|
||||
const wo = this.#wo || {};
|
||||
const isNew = !this.#woId;
|
||||
const s = this.shadowRoot;
|
||||
s.innerHTML = `<style>${this.#css()}</style>${this.#html(wo, isNew)}`;
|
||||
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; }
|
||||
.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; }
|
||||
.back-btn:hover { background:var(--surface-2); }
|
||||
h1 { font-size:1.25rem; font-weight:700; color:var(--text); }
|
||||
.layout { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; align-items:start; }
|
||||
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow-sm); }
|
||||
.card-title { font-size:.813rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
|
||||
label { display:flex; flex-direction:column; gap:.3rem; font-size:.813rem; font-weight:600; color:var(--text); }
|
||||
input, select, textarea { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .75rem; background:var(--surface); color:var(--text); font-size:.875rem; width:100%; transition:border-color .15s,box-shadow .15s; color-scheme:inherit; }
|
||||
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.15); }
|
||||
textarea { resize:vertical; min-height:80px; line-height:1.6; font-family:inherit; }
|
||||
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
|
||||
select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; padding-right:2rem; }
|
||||
.priority-select-wrap { position:relative; }
|
||||
.pri-dot { width:8px; height:8px; border-radius:50%; position:absolute; left:.75rem; top:50%; transform:translateY(-50%); pointer-events:none; }
|
||||
.priority-select { padding-left:1.75rem; }
|
||||
.footer { display:flex; justify-content:flex-end; gap:.75rem; margin-top:.5rem; }
|
||||
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border:none; border-radius:var(--radius); font-size:.875rem; font-weight:600; cursor:pointer; transition:opacity .15s; }
|
||||
.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); }
|
||||
.btn:disabled { opacity:.5; cursor:not-allowed; }
|
||||
.err { color:var(--danger); font-size:.813rem; text-align:right; }
|
||||
@media (max-width:768px) { .layout { grid-template-columns:1fr; } .row2 { grid-template-columns:1fr; } }
|
||||
`; }
|
||||
|
||||
#html(wo, isNew) {
|
||||
const v = (field, fallback = '') => this.#esc(wo[field] ?? fallback);
|
||||
return `
|
||||
<div class="page-header">
|
||||
<button class="back-btn" id="back"><i data-lucide="chevron-left" style="width:15px;height:15px"></i> Back</button>
|
||||
<h1>${isNew ? 'New Work Order' : `Edit ${wo.wo_number || 'Work Order'}`}</h1>
|
||||
</div>
|
||||
<form id="wo-form">
|
||||
<div class="layout">
|
||||
<!-- Left: main fields -->
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;">
|
||||
<div class="card">
|
||||
<div class="card-title">Details</div>
|
||||
<label>Title *<input name="title" required value="${v('title')}" placeholder="Brief description of the work"></label>
|
||||
<label>Description<textarea name="description" rows="3" placeholder="What needs to be done…">${v('description')}</textarea></label>
|
||||
<label>Instructions<textarea name="instructions" rows="5" placeholder="Step-by-step instructions for the field crew…">${v('instructions')}</textarea></label>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Location</div>
|
||||
<label>Site Name<input name="site_name" value="${v('site_name')}" placeholder="e.g. Downtown Office"></label>
|
||||
<label>Address<input name="address" value="${v('address')}" placeholder="Street address"></label>
|
||||
<label>Access Notes<textarea name="access_notes" rows="2" placeholder="Gate codes, road conditions, parking info…">${v('access_notes')}</textarea></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: metadata -->
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;">
|
||||
<div class="card">
|
||||
<div class="card-title">Status & Priority</div>
|
||||
${!isNew ? `<label>Status
|
||||
<select name="status">
|
||||
${STATUSES.map(s => `<option value="${s}" ${wo.status===s?'selected':''}>${s.replace('_',' ')}</option>`).join('')}
|
||||
</select>
|
||||
</label>` : ''}
|
||||
<label>Priority
|
||||
<div class="priority-select-wrap">
|
||||
<span class="pri-dot" id="pri-dot" style="background:${PRI_COLOR[wo.priority||'normal']}"></span>
|
||||
<select name="priority" class="priority-select">
|
||||
${['low','normal','high','urgent'].map(p =>
|
||||
`<option value="${p}" ${(wo.priority||'normal')===p?'selected':''}>${p.charAt(0).toUpperCase()+p.slice(1)}</option>`
|
||||
).join('')}
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Schedule</div>
|
||||
<label>Scheduled Start<input type="datetime-local" name="scheduled_start" value="${toLocalDatetime(wo.scheduled_start)}"></label>
|
||||
<label>Scheduled End<input type="datetime-local" name="scheduled_end" value="${toLocalDatetime(wo.scheduled_end)}"></label>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Parent</div>
|
||||
<label>Parent Type
|
||||
<select name="parent_type">
|
||||
<option value="">None</option>
|
||||
<option value="project" ${wo.parent_type==='project'?'selected':''}>Project</option>
|
||||
<option value="ticket" ${wo.parent_type==='ticket'?'selected':''}>Trouble Ticket</option>
|
||||
<option value="service_order" ${wo.parent_type==='service_order'?'selected':''}>Service Order</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Parent ID<input name="parent_id" type="number" value="${wo.parent_id ?? ''}" placeholder="Reference ID"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="err" id="form-err"></div>
|
||||
<button type="button" class="btn btn-ghost" id="cancel-btn">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" id="save-btn">
|
||||
<i data-lucide="save" style="width:14px;height:14px"></i>
|
||||
${isNew ? 'Create Work Order' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
#bind() {
|
||||
const s = this.shadowRoot;
|
||||
|
||||
s.querySelector('#back')?.addEventListener('click', () => this.#goBack());
|
||||
s.querySelector('#cancel-btn')?.addEventListener('click', () => this.#goBack());
|
||||
|
||||
// Update priority dot colour on change
|
||||
s.querySelector('[name="priority"]')?.addEventListener('change', e => {
|
||||
const dot = s.querySelector('#pri-dot');
|
||||
if (dot) dot.style.background = PRI_COLOR[e.target.value] || PRI_COLOR.normal;
|
||||
});
|
||||
|
||||
// Dirty tracking
|
||||
s.querySelectorAll('input, select, textarea').forEach(el =>
|
||||
el.addEventListener('input', () => { this.#dirty = true; }));
|
||||
|
||||
s.querySelector('#wo-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const val = n => (s.querySelector(`[name="${n}"]`)?.value ?? '').trim();
|
||||
const dt = n => { const v = val(n); return v ? new Date(v).toISOString() : null; };
|
||||
|
||||
if (!val('title')) {
|
||||
s.querySelector('#form-err').textContent = 'Title is required.';
|
||||
return;
|
||||
}
|
||||
|
||||
const body = {
|
||||
title: val('title'),
|
||||
description: val('description'),
|
||||
instructions: val('instructions'),
|
||||
priority: val('priority') || 'normal',
|
||||
site_name: val('site_name'),
|
||||
address: val('address'),
|
||||
access_notes: val('access_notes'),
|
||||
scheduled_start: dt('scheduled_start'),
|
||||
scheduled_end: dt('scheduled_end'),
|
||||
parent_type: val('parent_type') || null,
|
||||
parent_id: val('parent_id') ? +val('parent_id') : null,
|
||||
};
|
||||
|
||||
const btn = s.querySelector('#save-btn');
|
||||
btn.disabled = true;
|
||||
s.querySelector('#form-err').textContent = '';
|
||||
|
||||
try {
|
||||
if (this.#woId) {
|
||||
// Also update status if changed
|
||||
const newStatus = val('status');
|
||||
if (newStatus && this.#wo?.status !== newStatus) {
|
||||
await api.put(`/work-orders/${this.#woId}/status`, { status: newStatus });
|
||||
}
|
||||
await api.put(`/work-orders/${this.#woId}`, body);
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Work order saved', type: 'success' } }));
|
||||
} else {
|
||||
const created = await api.post('/work-orders', body);
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Work order created', type: 'success' } }));
|
||||
this.#dirty = false;
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${created.id}` } }));
|
||||
return;
|
||||
}
|
||||
this.#dirty = false;
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}` } }));
|
||||
} catch (err) {
|
||||
s.querySelector('#form-err').textContent = err.message;
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#goBack() {
|
||||
if (this.#dirty && !confirm('You have unsaved changes. Leave anyway?')) return;
|
||||
if (this.#woId) {
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${this.#woId}` } }));
|
||||
} else {
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: '/work-orders' } }));
|
||||
}
|
||||
}
|
||||
|
||||
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); }
|
||||
}
|
||||
customElements.define('wo-form', WoForm);
|
||||
@@ -0,0 +1,127 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
|
||||
const COLUMNS = [
|
||||
{ key: 'draft', label: 'Draft', color: 'var(--status-draft)' },
|
||||
{ key: 'assigned', label: 'Assigned', color: 'var(--status-assigned)' },
|
||||
{ key: 'scheduled', label: 'Scheduled', color: 'var(--status-scheduled)' },
|
||||
{ key: 'in_progress', label: 'In Progress', color: 'var(--status-in_progress)' },
|
||||
{ key: 'pending_review', label: 'Pending Review', color: 'var(--status-pending_review)' },
|
||||
{ key: 'closed', label: 'Closed', color: 'var(--status-closed)' },
|
||||
];
|
||||
|
||||
const PRI_COLOR = { low:'var(--priority-low)', normal:'var(--priority-normal)', high:'var(--priority-high)', urgent:'var(--priority-urgent)' };
|
||||
|
||||
class WoKanban extends HTMLElement {
|
||||
#data = [];
|
||||
#dragging = null;
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
try { this.#data = await api.get('/work-orders') ?? []; } catch { this.#data = []; }
|
||||
this.#render();
|
||||
}
|
||||
|
||||
#render() {
|
||||
const s = this.shadowRoot;
|
||||
const byStatus = Object.fromEntries(COLUMNS.map(c => [c.key, this.#data.filter(w => w.status === c.key)]));
|
||||
|
||||
s.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; }
|
||||
.board { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
|
||||
.col { background: var(--surface-2); border-radius: var(--radius); min-height: 400px; display: flex; flex-direction: column; }
|
||||
.col-header { padding: .75rem 1rem; display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--border); }
|
||||
.col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.col-label { font-size: .813rem; font-weight: 700; color: var(--text); }
|
||||
.col-count { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .45rem; }
|
||||
.col-body { flex: 1; padding: .5rem; display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; max-height: calc(100vh - 220px); }
|
||||
.wo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; cursor: pointer; transition: box-shadow .15s, opacity .15s; }
|
||||
.wo-card:hover { box-shadow: var(--shadow-md); }
|
||||
.wo-card[draggable] { cursor: grab; }
|
||||
.wo-card.dragging { opacity: .4; }
|
||||
.drop-zone { border: 2px dashed var(--teal); border-radius: var(--radius-sm); min-height: 60px; background: rgba(10,126,164,.05); }
|
||||
.wo-num { font-size: .7rem; font-family: monospace; color: var(--text-muted); margin-bottom: .2rem; }
|
||||
.wo-title { font-size: .813rem; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: .4rem; }
|
||||
.wo-site { font-size: .75rem; color: var(--text-muted); margin-bottom: .4rem; }
|
||||
.card-footer { display: flex; align-items: center; gap: .4rem; }
|
||||
.pri-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
||||
.pri-label { font-size: .7rem; color: var(--text-muted); flex: 1; }
|
||||
.step-prog { font-size: .7rem; color: var(--text-muted); }
|
||||
@media (max-width: 768px) { .board { grid-template-columns: repeat(6, 240px); } }
|
||||
</style>
|
||||
<div class="board">
|
||||
${COLUMNS.map(col => `
|
||||
<div class="col" data-status="${col.key}" id="col-${col.key}">
|
||||
<div class="col-header">
|
||||
<span class="col-dot" style="background:${col.color}"></span>
|
||||
<span class="col-label">${col.label}</span>
|
||||
<span class="col-count">${byStatus[col.key].length}</span>
|
||||
</div>
|
||||
<div class="col-body" data-status="${col.key}">
|
||||
${byStatus[col.key].map(wo => `
|
||||
<div class="wo-card" draggable="true" data-id="${wo.id}" data-status="${wo.status}">
|
||||
<div class="wo-num">${wo.wo_number}</div>
|
||||
<div class="wo-title">${this.#esc(wo.title)}</div>
|
||||
${wo.site_name ? `<div class="wo-site">${this.#esc(wo.site_name)}</div>` : ''}
|
||||
<div class="card-footer">
|
||||
<span class="pri-dot" style="background:${PRI_COLOR[wo.priority]}"></span>
|
||||
<span class="pri-label">${wo.priority}</span>
|
||||
${wo.step_count ? `<span class="step-prog">${wo.steps_done}/${wo.step_count}</span>` : ''}
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
|
||||
this.#bindDragDrop();
|
||||
this.#bindClicks();
|
||||
}
|
||||
|
||||
#bindClicks() {
|
||||
this.shadowRoot.querySelectorAll('.wo-card').forEach(card => {
|
||||
card.addEventListener('click', () =>
|
||||
window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path: `/work-orders/${card.dataset.id}` } })));
|
||||
});
|
||||
}
|
||||
|
||||
#bindDragDrop() {
|
||||
const s = this.shadowRoot;
|
||||
s.querySelectorAll('.wo-card').forEach(card => {
|
||||
card.addEventListener('dragstart', e => {
|
||||
this.#dragging = card;
|
||||
card.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
card.addEventListener('dragend', () => {
|
||||
card.classList.remove('dragging');
|
||||
this.#dragging = null;
|
||||
});
|
||||
});
|
||||
|
||||
s.querySelectorAll('.col-body').forEach(zone => {
|
||||
zone.addEventListener('dragover', e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; zone.classList.add('drop-zone'); });
|
||||
zone.addEventListener('dragleave', () => zone.classList.remove('drop-zone'));
|
||||
zone.addEventListener('drop', async e => {
|
||||
e.preventDefault();
|
||||
zone.classList.remove('drop-zone');
|
||||
if (!this.#dragging) return;
|
||||
const newStatus = zone.dataset.status;
|
||||
const id = this.#dragging.dataset.id;
|
||||
if (this.#dragging.dataset.status === newStatus) return;
|
||||
try {
|
||||
await api.put(`/work-orders/${id}/status`, { status: newStatus });
|
||||
await 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-kanban', WoKanban);
|
||||
@@ -0,0 +1,259 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
import { formatDateTime } from '../../lib/format.mjs';
|
||||
|
||||
const STATUSES = ['draft','assigned','scheduled','in_progress','pending_review','closed'];
|
||||
const PRIORITIES = ['low','normal','high','urgent'];
|
||||
|
||||
const STATUS_LABEL = { draft:'Draft', assigned:'Assigned', scheduled:'Scheduled', in_progress:'In Progress', pending_review:'Pending Review', closed:'Closed' };
|
||||
const PRI_COLOR = { low:'var(--priority-low)', normal:'var(--priority-normal)', high:'var(--priority-high)', urgent:'var(--priority-urgent)' };
|
||||
|
||||
class WoList extends HTMLElement {
|
||||
#data = [];
|
||||
#loading = true;
|
||||
#view = localStorage.getItem('wo-view') || 'list';
|
||||
#filters = { status: '', search: '', priority: '' };
|
||||
#debounce = null;
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#render();
|
||||
this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
this.#loading = true;
|
||||
this.#render();
|
||||
try {
|
||||
const p = new URLSearchParams();
|
||||
if (this.#filters.status) p.set('status', this.#filters.status);
|
||||
if (this.#filters.search) p.set('search', this.#filters.search);
|
||||
if (this.#filters.priority) p.set('priority', this.#filters.priority);
|
||||
this.#data = await api.get(`/work-orders?${p}`) ?? [];
|
||||
} catch { this.#data = []; }
|
||||
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; justify-content:space-between; margin-bottom:1.25rem; }
|
||||
h1 { font-size:1.25rem; font-weight:700; color:var(--text); }
|
||||
.filter-bar { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
|
||||
.search-wrap { position:relative; flex:1; min-width:200px; }
|
||||
.search-wrap i { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:var(--text-muted); width:15px; height:15px; pointer-events:none; }
|
||||
.search-input { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem .75rem .45rem 2.1rem; background:var(--surface); color:var(--text); font-size:.875rem; width:100%; transition:border-color .15s; }
|
||||
.search-input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.15); }
|
||||
select.filter { border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem 2rem .45rem .65rem; background:var(--surface); color:var(--text); font-size:.875rem; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; }
|
||||
.view-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
|
||||
.view-btn { background:var(--surface); border:none; padding:.4rem .6rem; cursor:pointer; color:var(--text-muted); display:flex; transition:background .15s,color .15s; }
|
||||
.view-btn.active { background:var(--teal); color:#fff; }
|
||||
.new-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; background:var(--teal); color:#fff; border:none; border-radius:var(--radius); font-size:.875rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:opacity .15s; }
|
||||
.new-btn:hover { opacity:.88; }
|
||||
|
||||
/* Table */
|
||||
table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
|
||||
thead { background:var(--surface-2); }
|
||||
th { text-align:left; padding:.65rem 1rem; font-size:.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); white-space:nowrap; }
|
||||
td { padding:.75rem 1rem; border-bottom:1px solid var(--border-lt); font-size:.875rem; color:var(--text); vertical-align:middle; }
|
||||
tr:last-child td { border-bottom:none; }
|
||||
tr:hover td { background:var(--surface-2); cursor:pointer; }
|
||||
.wo-num { font-family:var(--font-mono,monospace); font-size:.813rem; color:var(--text-muted); }
|
||||
.wo-title { font-weight:600; }
|
||||
.priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.35rem; }
|
||||
.progress-bar { height:4px; background:var(--border); border-radius:2px; width:80px; }
|
||||
.progress-fill { height:100%; border-radius:2px; background:var(--teal); transition:width .3s; }
|
||||
.actions { display:flex; gap:.35rem; }
|
||||
.action-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.3rem; border-radius:4px; display:flex; transition:color .15s,background .15s; }
|
||||
.action-btn:hover { color:var(--text); background:var(--surface-2); }
|
||||
.action-btn.del:hover { color:var(--danger); }
|
||||
|
||||
/* Mobile cards */
|
||||
.card-list { display:none; flex-direction:column; gap:.6rem; }
|
||||
.wo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1rem; cursor:pointer; transition:box-shadow .15s; }
|
||||
.wo-card:hover { box-shadow:var(--shadow-sm); }
|
||||
.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; }
|
||||
.card-meta { font-size:.75rem; color:var(--text-muted); margin-top:.25rem; }
|
||||
|
||||
/* Skeleton */
|
||||
.skeleton { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
|
||||
.skel-row { display:flex; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--border-lt); align-items:center; }
|
||||
.skel-row:last-child { border-bottom:none; }
|
||||
.skel { background:linear-gradient(90deg,var(--surface-2) 25%,var(--border-lt) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:4px; }
|
||||
@keyframes shimmer { to { background-position:-200% 0; } }
|
||||
|
||||
@media (max-width:768px) {
|
||||
.filter-bar { gap:.5rem; }
|
||||
table { display:none; }
|
||||
.card-list { display:flex; }
|
||||
}
|
||||
`; }
|
||||
|
||||
#html() {
|
||||
if (this.#loading) return `
|
||||
${this.#headerHTML()}
|
||||
${this.#filterBarHTML()}
|
||||
<div class="skeleton">
|
||||
${[1,2,3,4,5].map(() => `<div class="skel-row">
|
||||
<div class="skel" style="width:80px;height:14px"></div>
|
||||
<div class="skel" style="flex:1;height:14px"></div>
|
||||
<div class="skel" style="width:60px;height:14px"></div>
|
||||
<div class="skel" style="width:70px;height:20px;border-radius:999px"></div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
|
||||
if (this.#data.length === 0) return `
|
||||
${this.#headerHTML()}
|
||||
${this.#filterBarHTML()}
|
||||
<ui-empty icon="clipboard-list"
|
||||
heading="No work orders found"
|
||||
body="${this.#hasFilters() ? 'Try adjusting your filters.' : 'Create your first work order to get started.'}">
|
||||
${!this.#hasFilters() ? '<button class="new-btn" id="empty-new"><i data-lucide="plus" style="width:15px;height:15px"></i> New Work Order</button>' : ''}
|
||||
</ui-empty>`;
|
||||
|
||||
return `
|
||||
${this.#headerHTML()}
|
||||
${this.#filterBarHTML()}
|
||||
${this.#view === 'kanban'
|
||||
? '<wo-kanban></wo-kanban>'
|
||||
: `${this.#tableHTML()}${this.#cardListHTML()}`}`;
|
||||
}
|
||||
|
||||
#headerHTML() {
|
||||
return `<div class="page-header">
|
||||
<h1>Work Orders</h1>
|
||||
<button class="new-btn" id="new-wo">
|
||||
<i data-lucide="plus" style="width:15px;height:15px"></i> New Work Order
|
||||
</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#filterBarHTML() {
|
||||
const viewActive = v => this.#view === v ? ' active' : '';
|
||||
return `<div class="filter-bar">
|
||||
<div class="search-wrap">
|
||||
<i data-lucide="search"></i>
|
||||
<input class="search-input" id="search" type="search" placeholder="Search work orders…" value="${this.#filters.search}">
|
||||
</div>
|
||||
<select class="filter" id="filter-status">
|
||||
<option value="">All statuses</option>
|
||||
${STATUSES.map(s => `<option value="${s}" ${this.#filters.status===s?'selected':''}>${STATUS_LABEL[s]}</option>`).join('')}
|
||||
</select>
|
||||
<select class="filter" id="filter-priority">
|
||||
<option value="">All priorities</option>
|
||||
${PRIORITIES.map(p => `<option value="${p}" ${this.#filters.priority===p?'selected':''}>${p.charAt(0).toUpperCase()+p.slice(1)}</option>`).join('')}
|
||||
</select>
|
||||
<div class="view-toggle">
|
||||
<button class="view-btn${viewActive('list')}" data-view="list" title="List view"> <i data-lucide="list" style="width:15px;height:15px"></i></button>
|
||||
<button class="view-btn${viewActive('kanban')}" data-view="kanban" title="Kanban view"> <i data-lucide="columns-3" style="width:15px;height:15px"></i></button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#tableHTML() {
|
||||
return `<table>
|
||||
<thead><tr>
|
||||
<th>WO #</th><th>Title</th><th>Site</th>
|
||||
<th>Status</th><th>Priority</th><th>Scheduled</th><th>Steps</th><th></th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
${this.#data.map(wo => `
|
||||
<tr class="wo-row" data-id="${wo.id}">
|
||||
<td class="wo-num">${wo.wo_number}</td>
|
||||
<td class="wo-title">${this.#esc(wo.title)}</td>
|
||||
<td>${this.#esc(wo.site_name) || '<span style="color:var(--text-muted)">—</span>'}</td>
|
||||
<td><ui-badge type="status" value="${wo.status}"></ui-badge></td>
|
||||
<td>
|
||||
<span class="priority-dot" style="background:${PRI_COLOR[wo.priority]}"></span>
|
||||
${wo.priority.charAt(0).toUpperCase()+wo.priority.slice(1)}
|
||||
</td>
|
||||
<td style="color:var(--text-muted)">${formatDateTime(wo.scheduled_start)}</td>
|
||||
<td>
|
||||
<div class="progress-bar"><div class="progress-fill" style="width:${wo.step_count ? Math.round(wo.steps_done/wo.step_count*100) : 0}%"></div></div>
|
||||
<span style="font-size:.75rem;color:var(--text-muted)">${wo.steps_done}/${wo.step_count}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="actions">
|
||||
<button class="action-btn edit-btn" data-id="${wo.id}" title="Edit"><i data-lucide="pencil" style="width:14px;height:14px"></i></button>
|
||||
<button class="action-btn del del-btn" data-id="${wo.id}" title="Delete"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>`).join('')}
|
||||
</tbody>
|
||||
</table>`;
|
||||
}
|
||||
|
||||
#cardListHTML() {
|
||||
return `<div class="card-list">
|
||||
${this.#data.map(wo => `
|
||||
<div class="wo-card" data-id="${wo.id}">
|
||||
<div class="card-top">
|
||||
<div>
|
||||
<div class="wo-num">${wo.wo_number}</div>
|
||||
<div class="wo-title">${this.#esc(wo.title)}</div>
|
||||
</div>
|
||||
<ui-badge type="status" value="${wo.status}"></ui-badge>
|
||||
</div>
|
||||
<div class="card-meta">${this.#esc(wo.site_name) || '—'} · ${wo.steps_done}/${wo.step_count} steps</div>
|
||||
</div>`).join('')}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#hasFilters() { return !!(this.#filters.status || this.#filters.search || this.#filters.priority); }
|
||||
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||||
|
||||
#nav(path) { window.dispatchEvent(new CustomEvent('wo:navigate', { detail: { path } })); }
|
||||
|
||||
#bind() {
|
||||
const s = this.shadowRoot;
|
||||
|
||||
s.querySelector('#new-wo')?.addEventListener('click', () => this.#nav('/work-orders/new'));
|
||||
s.querySelector('#empty-new')?.addEventListener('click', () => this.#nav('/work-orders/new'));
|
||||
|
||||
s.querySelector('#search')?.addEventListener('input', e => {
|
||||
clearTimeout(this.#debounce);
|
||||
this.#debounce = setTimeout(() => { this.#filters.search = e.target.value; this.#load(); }, 350);
|
||||
});
|
||||
s.querySelector('#filter-status')?.addEventListener('change', e => { this.#filters.status = e.target.value; this.#load(); });
|
||||
s.querySelector('#filter-priority')?.addEventListener('change', e => { this.#filters.priority = e.target.value; this.#load(); });
|
||||
|
||||
s.querySelectorAll('.view-btn').forEach(btn =>
|
||||
btn.addEventListener('click', () => {
|
||||
this.#view = btn.dataset.view;
|
||||
localStorage.setItem('wo-view', this.#view);
|
||||
this.#render();
|
||||
}));
|
||||
|
||||
s.querySelectorAll('.wo-row').forEach(row =>
|
||||
row.addEventListener('click', e => {
|
||||
if (e.target.closest('.actions')) return;
|
||||
this.#nav(`/work-orders/${row.dataset.id}`);
|
||||
}));
|
||||
|
||||
s.querySelectorAll('.wo-card').forEach(card =>
|
||||
card.addEventListener('click', () => this.#nav(`/work-orders/${card.dataset.id}`)));
|
||||
|
||||
s.querySelectorAll('.edit-btn').forEach(btn =>
|
||||
btn.addEventListener('click', e => { e.stopPropagation(); this.#nav(`/work-orders/${btn.dataset.id}/edit`); }));
|
||||
|
||||
s.querySelectorAll('.del-btn').forEach(btn =>
|
||||
btn.addEventListener('click', async e => {
|
||||
e.stopPropagation();
|
||||
if (!confirm('Delete this work order?')) return;
|
||||
try {
|
||||
await api.delete(`/work-orders/${btn.dataset.id}`);
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Work order deleted', type: 'success' } }));
|
||||
this.#load();
|
||||
} catch (err) {
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
customElements.define('wo-list', WoList);
|
||||
Reference in New Issue
Block a user