341 lines
18 KiB
JavaScript
341 lines
18 KiB
JavaScript
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; } }
|
|
.lp-dialog { border:1px solid var(--border); border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow-lg); width:440px; max-width:96vw; background:var(--surface); color:var(--text); }
|
|
.lp-dialog::backdrop { background:rgba(0,0,0,.45); }
|
|
.lp-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
|
|
.lp-title { font-size:.938rem; font-weight:700; }
|
|
.lp-close { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.25rem; display:flex; }
|
|
.lp-body { padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.75rem; }
|
|
.lp-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; }
|
|
.lp-search:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.12); }
|
|
.lp-list { max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.35rem; }
|
|
.lp-item { padding:.55rem .75rem; border-radius:var(--radius-sm); cursor:pointer; display:flex; flex-direction:column; gap:.15rem; transition:background .12s; border:2px solid transparent; }
|
|
.lp-item:hover { background:var(--surface-2); }
|
|
.lp-item.selected { border-color:var(--teal); background:rgba(10,126,164,.06); }
|
|
.lp-item-name { font-size:.875rem; font-weight:500; color:var(--text); }
|
|
.lp-item-meta { font-size:.75rem; color:var(--text-muted); }
|
|
.lp-footer { padding:.875rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; }
|
|
.lp-empty { text-align:center; padding:1.5rem; color:var(--text-muted); font-size:.875rem; }
|
|
`; }
|
|
|
|
#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 style="display:flex;align-items:center;justify-content:space-between;padding-bottom:.75rem;border-bottom:1px solid var(--border);">
|
|
<span class="card-title" style="border:none;padding:0;margin:0">Details</span>
|
|
${(isNew || wo.status === 'draft') ? `<button type="button" class="btn btn-ghost" id="load-profile-btn" style="padding:.3rem .7rem;font-size:.75rem;">
|
|
<i data-lucide="layout-template" style="width:13px;height:13px"></i> Load Profile
|
|
</button>` : ''}
|
|
</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>
|
|
|
|
<dialog class="lp-dialog" id="lp-dialog">
|
|
<div class="lp-header">
|
|
<span class="lp-title">Load Work Order Profile</span>
|
|
<button class="lp-close" id="lp-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
|
|
</div>
|
|
<div class="lp-body">
|
|
<input class="lp-search" id="lp-search" placeholder="Search profiles…" autocomplete="off">
|
|
<div class="lp-list" id="lp-list"><div class="lp-empty">Loading…</div></div>
|
|
</div>
|
|
<div class="lp-footer">
|
|
<button class="btn btn-ghost" id="lp-cancel">Cancel</button>
|
|
<button class="btn btn-primary" id="lp-confirm" disabled>Load Profile</button>
|
|
</div>
|
|
</dialog>`;
|
|
}
|
|
|
|
#bind() {
|
|
const s = this.shadowRoot;
|
|
|
|
s.querySelector('#back')?.addEventListener('click', () => this.#goBack());
|
|
s.querySelector('#cancel-btn')?.addEventListener('click', () => this.#goBack());
|
|
|
|
// Load Profile dialog
|
|
this.#bindLoadProfile(s);
|
|
|
|
// 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;
|
|
}
|
|
});
|
|
}
|
|
|
|
#bindLoadProfile(s) {
|
|
const lpBtn = s.querySelector('#load-profile-btn');
|
|
const dialog = s.querySelector('#lp-dialog');
|
|
if (!lpBtn || !dialog) return;
|
|
|
|
const listEl = s.querySelector('#lp-list');
|
|
const searchEl = s.querySelector('#lp-search');
|
|
const confirmBtn = s.querySelector('#lp-confirm');
|
|
let allProfiles = [];
|
|
let selectedProfile = null;
|
|
|
|
const renderList = (items) => {
|
|
if (items.length === 0) { listEl.innerHTML = '<div class="lp-empty">No profiles found</div>'; return; }
|
|
listEl.innerHTML = items.map(p => `
|
|
<div class="lp-item${selectedProfile?.id === p.id ? ' selected' : ''}" data-id="${p.id}">
|
|
<div class="lp-item-name">${this.#esc(p.name)}</div>
|
|
<div class="lp-item-meta">${p.category ? `${p.category} · ` : ''}${p.step_count} step${p.step_count !== 1 ? 's' : ''} · ${p.default_priority} priority${p.default_duration_hours ? ` · ${p.default_duration_hours}h` : ''}</div>
|
|
</div>`).join('');
|
|
listEl.querySelectorAll('.lp-item').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
selectedProfile = allProfiles.find(p => p.id === +item.dataset.id);
|
|
listEl.querySelectorAll('.lp-item').forEach(i => i.classList.toggle('selected', +i.dataset.id === selectedProfile?.id));
|
|
confirmBtn.disabled = !selectedProfile;
|
|
});
|
|
});
|
|
};
|
|
|
|
lpBtn.addEventListener('click', async () => {
|
|
selectedProfile = null;
|
|
confirmBtn.disabled = true;
|
|
searchEl.value = '';
|
|
listEl.innerHTML = '<div class="lp-empty">Loading…</div>';
|
|
dialog.showModal();
|
|
try {
|
|
allProfiles = await api.get('/profiles') || [];
|
|
renderList(allProfiles);
|
|
} catch (err) {
|
|
listEl.innerHTML = `<div class="lp-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);
|
|
});
|
|
|
|
s.querySelector('#lp-close').addEventListener('click', () => dialog.close());
|
|
s.querySelector('#lp-cancel').addEventListener('click', () => dialog.close());
|
|
|
|
confirmBtn.addEventListener('click', async () => {
|
|
if (!selectedProfile) return;
|
|
// Fetch full profile to get instructions
|
|
let full = selectedProfile;
|
|
try { full = await api.get(`/profiles/${selectedProfile.id}`); } catch { /* use list data */ }
|
|
|
|
dialog.close();
|
|
|
|
// Pre-fill form fields (only if currently empty)
|
|
const priEl = s.querySelector('[name="priority"]');
|
|
const instrEl = s.querySelector('[name="instructions"]');
|
|
|
|
if (priEl) { priEl.value = full.default_priority || 'normal'; priEl.dispatchEvent(new Event('change')); }
|
|
if (instrEl && !instrEl.value.trim() && full.default_instructions) {
|
|
instrEl.value = full.default_instructions;
|
|
}
|
|
// Compute scheduled_end from duration if start is filled and end is empty
|
|
const startEl = s.querySelector('[name="scheduled_start"]');
|
|
const endEl = s.querySelector('[name="scheduled_end"]');
|
|
if (full.default_duration_hours && startEl?.value && !endEl?.value) {
|
|
const startMs = new Date(startEl.value).getTime();
|
|
const endDate = new Date(startMs + full.default_duration_hours * 3600000);
|
|
// Format back to datetime-local value (YYYY-MM-DDTHH:MM)
|
|
endEl.value = endDate.toISOString().slice(0, 16);
|
|
}
|
|
|
|
this.#dirty = true;
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: `Profile "${full.name}" loaded`, type: 'success' } }));
|
|
});
|
|
}
|
|
|
|
#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);
|