Add step type support for work order profiles and steps, update database schema, APIs, and UI components to handle configurable step types.
This commit is contained in:
@@ -2,6 +2,13 @@ import { api } from '../../lib/api.mjs';
|
||||
|
||||
const PRIORITIES = ['low', 'normal', 'high', 'urgent'];
|
||||
|
||||
const STEP_TYPES = [
|
||||
{ value: 'work_step', label: 'Work Step', icon: 'check-square', color: '#0A7EA4', hint: '' },
|
||||
{ value: 'photo', label: 'Photo', icon: 'camera', color: '#8B5CF6', hint: 'Requires a photo to complete' },
|
||||
{ value: 'inspection', label: 'Inspect', icon: 'clipboard-check', color: '#E07B39', hint: 'Pass / Fail / N/A' },
|
||||
{ value: 'note', label: 'Note', icon: 'file-text', color: '#64748B', hint: 'Free-text entry' },
|
||||
];
|
||||
|
||||
class ProfileForm extends HTMLElement {
|
||||
#onSave = null;
|
||||
|
||||
@@ -19,7 +26,7 @@ class ProfileForm extends HTMLElement {
|
||||
|
||||
d.innerHTML = `
|
||||
<style>
|
||||
dialog { border:1px solid var(--border); border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow-lg); width:600px; max-width:96vw; max-height:90vh; background:var(--surface); color:var(--text); display:flex; flex-direction:column; }
|
||||
dialog { border:1px solid var(--border); border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow-lg); width:640px; max-width:96vw; max-height:90vh; background:var(--surface); color:var(--text); display:flex; flex-direction:column; }
|
||||
dialog::backdrop { background:rgba(0,0,0,.45); }
|
||||
.dlg-header { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; }
|
||||
.dlg-title { font-size:1rem; font-weight:700; }
|
||||
@@ -34,19 +41,41 @@ class ProfileForm extends HTMLElement {
|
||||
.toggle-label { font-size:.875rem; font-weight:500; }
|
||||
input[type=checkbox] { width:18px; height:18px; accent-color:var(--teal); cursor:pointer; }
|
||||
.section-title { font-size:.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; padding-top:.25rem; border-top:1px solid var(--border); margin-top:.25rem; }
|
||||
/* Step list */
|
||||
.step-list { display:flex; flex-direction:column; gap:.4rem; }
|
||||
.step-row { display:flex; align-items:center; gap:.5rem; background:var(--surface-2); border-radius:var(--radius-sm); padding:.4rem .6rem; }
|
||||
.step-order { font-size:.75rem; font-weight:700; color:var(--text-muted); min-width:1.5rem; text-align:center; }
|
||||
.step-title-input { flex:1; border:none; background:transparent; font-size:.875rem; color:var(--text); padding:.15rem .3rem; border-radius:4px; }
|
||||
.step-row { display:flex; align-items:center; gap:.5rem; background:var(--surface-2); border-radius:var(--radius-sm); padding:.45rem .6rem; border-left:3px solid var(--border); }
|
||||
.step-row[data-type="photo"] { border-left-color:#8B5CF6; }
|
||||
.step-row[data-type="inspection"] { border-left-color:#E07B39; }
|
||||
.step-row[data-type="note"] { border-left-color:#64748B; }
|
||||
.step-row[data-type="work_step"] { border-left-color:var(--teal); }
|
||||
.step-order { font-size:.75rem; font-weight:700; color:var(--text-muted); min-width:1.5rem; text-align:center; flex-shrink:0; }
|
||||
.step-type-pill { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .4rem; border-radius:99px; white-space:nowrap; flex-shrink:0; cursor:pointer; }
|
||||
.step-title-input { flex:1; border:none; background:transparent; font-size:.875rem; color:var(--text); padding:.15rem .3rem; border-radius:4px; min-width:0; }
|
||||
.step-title-input:focus { outline:1px solid var(--teal); background:var(--surface); }
|
||||
.step-req { font-size:.7rem; color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; gap:.25rem; }
|
||||
.step-del { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.2rem; display:flex; border-radius:4px; }
|
||||
.step-cfg-summary { font-size:.7rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
|
||||
.step-req { font-size:.7rem; color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; gap:.25rem; flex-shrink:0; }
|
||||
.step-del { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.2rem; display:flex; border-radius:4px; flex-shrink:0; }
|
||||
.step-del:hover { color:var(--danger); background:#FEF2F2; }
|
||||
/* Add step area */
|
||||
.add-step-area { border:1px dashed var(--border); border-radius:var(--radius); padding:.875rem; display:flex; flex-direction:column; gap:.6rem; }
|
||||
.add-step-row { display:flex; gap:.5rem; }
|
||||
.add-step-input { flex:1; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.45rem .75rem; font-size:.875rem; background:var(--surface); color:var(--text); }
|
||||
.add-step-input:focus { outline:none; border-color:var(--teal); }
|
||||
.btn-add-step { background:var(--teal); color:#fff; border:none; border-radius:var(--radius-sm); padding:.45rem .85rem; font-size:.813rem; font-weight:600; cursor:pointer; white-space:nowrap; }
|
||||
/* Type picker */
|
||||
.type-picker { display:flex; gap:.35rem; flex-wrap:wrap; }
|
||||
.type-btn { display:flex; align-items:center; gap:.3rem; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.3rem .65rem; font-size:.75rem; font-weight:600; cursor:pointer; background:var(--surface); color:var(--text-muted); transition:all .15s; }
|
||||
.type-btn:hover { border-color:var(--teal); color:var(--teal); }
|
||||
.type-btn.active { border-color:var(--selected-color, var(--teal)); background:color-mix(in srgb, var(--selected-color, var(--teal)) 10%, transparent); color:var(--selected-color, var(--teal)); }
|
||||
.type-btn i { width:13px; height:13px; }
|
||||
/* Config fields */
|
||||
.cfg-fields { display:flex; flex-direction:column; gap:.45rem; padding:.5rem .6rem; background:var(--surface-2); border-radius:var(--radius-sm); }
|
||||
.cfg-field-label { font-size:.75rem; font-weight:600; color:var(--text-muted); display:block; margin-bottom:.2rem; }
|
||||
.cfg-input { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.4rem .6rem; font-size:.813rem; background:var(--surface); color:var(--text); box-sizing:border-box; }
|
||||
.cfg-input:focus { outline:none; border-color:var(--teal); }
|
||||
.cfg-select { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.4rem .6rem; font-size:.813rem; background:var(--surface); color:var(--text); }
|
||||
.btn-add-step { background:var(--teal); color:#fff; border:none; border-radius:var(--radius-sm); padding:.45rem .85rem; font-size:.813rem; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; }
|
||||
.btn-add-step:hover { opacity:.88; }
|
||||
/* Footer */
|
||||
.dlg-footer { padding:.875rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; flex-shrink:0; }
|
||||
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:.5rem 1rem; font-size:.875rem; font-weight:600; cursor:pointer; }
|
||||
.btn-primary { background:var(--teal); color:#fff; border:none; border-radius:var(--radius); padding:.5rem 1rem; font-size:.875rem; font-weight:600; cursor:pointer; }
|
||||
@@ -99,9 +128,21 @@ class ProfileForm extends HTMLElement {
|
||||
? '<div class="empty-steps" id="empty-steps">No steps yet — add steps below</div>'
|
||||
: (profile?.steps || []).map((s, i) => this.#stepRowHTML(s, i)).join('')}
|
||||
</div>
|
||||
<div class="add-step-row">
|
||||
<input class="add-step-input" id="new-step-title" placeholder="Step title…" maxlength="200">
|
||||
<button class="btn-add-step" id="add-step-btn">+ Add Step</button>
|
||||
|
||||
<div class="add-step-area">
|
||||
<div class="add-step-row">
|
||||
<input class="add-step-input" id="new-step-title" placeholder="Step title…" maxlength="200">
|
||||
<button class="btn-add-step" id="add-step-btn">+ Add Step</button>
|
||||
</div>
|
||||
<div class="type-picker" id="type-picker">
|
||||
${STEP_TYPES.map(t => `
|
||||
<button class="type-btn${t.value === 'work_step' ? ' active' : ''}" data-type="${t.value}"
|
||||
style="--selected-color:${t.color}" title="${t.hint}">
|
||||
<i data-lucide="${t.icon}" style="width:13px;height:13px"></i>
|
||||
${t.label}
|
||||
</button>`).join('')}
|
||||
</div>
|
||||
<div id="cfg-fields" style="display:none"></div>
|
||||
</div>
|
||||
<div class="error-msg" id="form-error"></div>
|
||||
</div>
|
||||
@@ -112,19 +153,20 @@ class ProfileForm extends HTMLElement {
|
||||
|
||||
if (window.lucide) lucide.createIcons({ root: d });
|
||||
|
||||
// Local step state (not saved until the profile save)
|
||||
const profileId = profile?.id || null;
|
||||
let pendingSteps = (profile?.steps || []).map(s => ({ ...s }));
|
||||
const profileId = profile?.id || null;
|
||||
let pendingSteps = (profile?.steps || []).map(s => ({ ...s }));
|
||||
let selectedType = 'work_step';
|
||||
|
||||
// ── Step list rendering ───────────────────────────────────────────────
|
||||
const renderSteps = () => {
|
||||
const list = d.querySelector('#step-list');
|
||||
const empty = pendingSteps.length === 0;
|
||||
list.innerHTML = empty
|
||||
list.innerHTML = pendingSteps.length === 0
|
||||
? '<div class="empty-steps">No steps yet — add steps below</div>'
|
||||
: pendingSteps.map((s, i) => this.#stepRowHTML(s, i)).join('');
|
||||
if (window.lucide) lucide.createIcons({ root: list });
|
||||
|
||||
list.querySelectorAll('.step-title-input').forEach((inp, i) => {
|
||||
inp.addEventListener('input', () => { pendingSteps[i].title = inp.value; });
|
||||
inp.addEventListener('input', () => { pendingSteps[i].title = inp.value; });
|
||||
inp.addEventListener('change', () => { pendingSteps[i].title = inp.value; });
|
||||
});
|
||||
list.querySelectorAll('.step-req-check').forEach((cb, i) => {
|
||||
@@ -136,29 +178,113 @@ class ProfileForm extends HTMLElement {
|
||||
};
|
||||
renderSteps();
|
||||
|
||||
// ── Type picker ───────────────────────────────────────────────────────
|
||||
const cfgDiv = d.querySelector('#cfg-fields');
|
||||
|
||||
const renderCfgFields = (type) => {
|
||||
if (type === 'work_step') {
|
||||
cfgDiv.style.display = 'none';
|
||||
cfgDiv.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
cfgDiv.style.display = 'block';
|
||||
if (type === 'photo') {
|
||||
cfgDiv.innerHTML = `
|
||||
<div class="cfg-fields">
|
||||
<div>
|
||||
<label class="cfg-field-label">Phase</label>
|
||||
<select class="cfg-select" id="cfg-phase">
|
||||
<option value="before">Before</option>
|
||||
<option value="during">During</option>
|
||||
<option value="after">After</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="cfg-field-label">Caption prompt (shown to field tech)</label>
|
||||
<input class="cfg-input" id="cfg-caption" type="text" placeholder="e.g. Photo of existing equipment before work begins" maxlength="200">
|
||||
</div>
|
||||
</div>`;
|
||||
} else if (type === 'inspection') {
|
||||
cfgDiv.innerHTML = `
|
||||
<div class="cfg-fields">
|
||||
<div>
|
||||
<label class="cfg-field-label">Criteria (what to inspect)</label>
|
||||
<input class="cfg-input" id="cfg-criteria" type="text" placeholder="e.g. All cable slack coiled and secured per spec" maxlength="300">
|
||||
</div>
|
||||
</div>`;
|
||||
} else if (type === 'note') {
|
||||
cfgDiv.innerHTML = `
|
||||
<div class="cfg-fields">
|
||||
<div>
|
||||
<label class="cfg-field-label">Prompt label</label>
|
||||
<input class="cfg-input" id="cfg-prompt" type="text" placeholder="e.g. Record any site hazards or access issues" maxlength="200">
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
};
|
||||
|
||||
const getCfgJSON = (type) => {
|
||||
if (type === 'photo') {
|
||||
const phase = cfgDiv.querySelector('#cfg-phase')?.value || 'during';
|
||||
const caption = cfgDiv.querySelector('#cfg-caption')?.value.trim() || '';
|
||||
return JSON.stringify({ phase, caption_prompt: caption });
|
||||
}
|
||||
if (type === 'inspection') {
|
||||
const criteria = cfgDiv.querySelector('#cfg-criteria')?.value.trim() || '';
|
||||
return criteria ? JSON.stringify({ criteria }) : '';
|
||||
}
|
||||
if (type === 'note') {
|
||||
const prompt = cfgDiv.querySelector('#cfg-prompt')?.value.trim() || '';
|
||||
return prompt ? JSON.stringify({ prompt }) : '';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
d.querySelectorAll('.type-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
selectedType = btn.dataset.type;
|
||||
d.querySelectorAll('.type-btn').forEach(b => b.classList.toggle('active', b === btn));
|
||||
renderCfgFields(selectedType);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Add step ──────────────────────────────────────────────────────────
|
||||
d.querySelector('#add-step-btn').addEventListener('click', () => {
|
||||
const inp = d.querySelector('#new-step-title');
|
||||
const title = inp.value.trim();
|
||||
if (!title) { inp.focus(); return; }
|
||||
pendingSteps.push({ id: null, step_order: pendingSteps.length + 1, title, description: '', required: true });
|
||||
pendingSteps.push({
|
||||
id: null,
|
||||
step_order: pendingSteps.length + 1,
|
||||
title,
|
||||
description: '',
|
||||
required: true,
|
||||
step_type: selectedType,
|
||||
type_config: getCfgJSON(selectedType),
|
||||
});
|
||||
inp.value = '';
|
||||
// Reset type picker to work_step after adding
|
||||
selectedType = 'work_step';
|
||||
d.querySelectorAll('.type-btn').forEach(b => b.classList.toggle('active', b.dataset.type === 'work_step'));
|
||||
renderCfgFields('work_step');
|
||||
renderSteps();
|
||||
});
|
||||
d.querySelector('#new-step-title').addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); d.querySelector('#add-step-btn').click(); }
|
||||
});
|
||||
|
||||
d.querySelector('#dlg-close').addEventListener('click', () => d.close());
|
||||
// ── Dialog controls ───────────────────────────────────────────────────
|
||||
d.querySelector('#dlg-close').addEventListener('click', () => d.close());
|
||||
d.querySelector('#dlg-cancel').addEventListener('click', () => d.close());
|
||||
|
||||
d.querySelector('#dlg-save').addEventListener('click', async () => {
|
||||
const name = d.querySelector('#p-name').value.trim();
|
||||
const name = d.querySelector('#p-name').value.trim();
|
||||
const errEl = d.querySelector('#form-error');
|
||||
if (!name) { errEl.textContent = 'Name is required'; d.querySelector('#p-name').focus(); return; }
|
||||
errEl.textContent = '';
|
||||
|
||||
const saveBtn = d.querySelector('#dlg-save');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Saving…';
|
||||
|
||||
const payload = {
|
||||
@@ -179,20 +305,26 @@ class ProfileForm extends HTMLElement {
|
||||
savedProfile = await api.post('/profiles', payload);
|
||||
}
|
||||
|
||||
// Sync steps: delete removed, update existing, create new
|
||||
const savedId = savedProfile.id;
|
||||
const origIds = new Set((profile?.steps || []).map(s => s.id));
|
||||
|
||||
// Delete removed
|
||||
// Delete removed steps
|
||||
for (const orig of (profile?.steps || [])) {
|
||||
if (!pendingSteps.find(s => s.id === orig.id)) {
|
||||
await api.delete(`/profiles/${savedId}/steps/${orig.id}`);
|
||||
}
|
||||
}
|
||||
// Update or create, re-assigning order
|
||||
// Update existing / create new
|
||||
for (let i = 0; i < pendingSteps.length; i++) {
|
||||
const s = pendingSteps[i];
|
||||
const stepPayload = { title: s.title, description: s.description || '', required: s.required !== false, step_order: i + 1 };
|
||||
const stepPayload = {
|
||||
title: s.title,
|
||||
description: s.description || '',
|
||||
required: s.required !== false,
|
||||
step_order: i + 1,
|
||||
step_type: s.step_type || 'work_step',
|
||||
type_config: s.type_config || '',
|
||||
};
|
||||
if (s.id && origIds.has(s.id)) {
|
||||
await api.put(`/profiles/${savedId}/steps/${s.id}`, stepPayload);
|
||||
} else {
|
||||
@@ -201,12 +333,14 @@ class ProfileForm extends HTMLElement {
|
||||
}
|
||||
|
||||
d.close();
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: isEdit ? 'Profile updated' : 'Profile created', type: 'success' } }));
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', {
|
||||
detail: { message: isEdit ? 'Profile updated' : 'Profile created', type: 'success' }
|
||||
}));
|
||||
this.#onSave?.();
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message;
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = isEdit ? 'Save Changes' : 'Create Profile';
|
||||
errEl.textContent = err.message;
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = isEdit ? 'Save Changes' : 'Create Profile';
|
||||
}
|
||||
});
|
||||
|
||||
@@ -215,17 +349,28 @@ class ProfileForm extends HTMLElement {
|
||||
}
|
||||
|
||||
#stepRowHTML(s, i) {
|
||||
const type = s.step_type || 'work_step';
|
||||
const tdef = { work_step: { color: '#0A7EA4', label: 'Step' }, photo: { color: '#8B5CF6', label: 'Photo' }, inspection: { color: '#E07B39', label: 'Inspect' }, note: { color: '#64748B', label: 'Note' } };
|
||||
const td = tdef[type] || tdef.work_step;
|
||||
const cfg = this.#parseCfg(s.type_config);
|
||||
const cfgSummary = type === 'photo' ? (cfg.phase ? cfg.phase + (cfg.caption_prompt ? ' · ' + cfg.caption_prompt : '') : '')
|
||||
: type === 'inspection' ? (cfg.criteria || '')
|
||||
: type === 'note' ? (cfg.prompt || '')
|
||||
: '';
|
||||
return `
|
||||
<div class="step-row">
|
||||
<div class="step-row" data-type="${type}">
|
||||
<span class="step-order">${i + 1}</span>
|
||||
<span class="step-type-pill" style="background:color-mix(in srgb,${td.color} 15%,transparent);color:${td.color}">${td.label}</span>
|
||||
<input class="step-title-input" value="${this.#esc(s.title)}" placeholder="Step title…">
|
||||
${cfgSummary ? `<span class="step-cfg-summary" title="${this.#esc(cfgSummary)}">${this.#esc(cfgSummary)}</span>` : ''}
|
||||
<label class="step-req">
|
||||
<input type="checkbox" class="step-req-check" ${s.required !== false ? 'checked' : ''}> Required
|
||||
<input type="checkbox" class="step-req-check" ${s.required !== false ? 'checked' : ''}> Req
|
||||
</label>
|
||||
<button class="step-del" title="Remove step"><i data-lucide="x" style="width:12px;height:12px"></i></button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#parseCfg(str) { try { return JSON.parse(str || '{}'); } catch { return {}; } }
|
||||
#esc(s) { return (s || '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); }
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
import { api } from '../../lib/api.mjs';
|
||||
import { api } from '../../lib/api.mjs';
|
||||
|
||||
// Step type constants
|
||||
const STEP_TYPES = {
|
||||
work_step: { label: 'Step', icon: 'check-square', color: 'var(--teal)' },
|
||||
photo: { label: 'Photo', icon: 'camera', color: '#8B5CF6' },
|
||||
inspection: { label: 'Inspect', icon: 'clipboard-check', color: '#E07B39' },
|
||||
note: { label: 'Note', icon: 'file-text', color: '#64748B' },
|
||||
};
|
||||
|
||||
class WoChecklist extends HTMLElement {
|
||||
#woId = null;
|
||||
@@ -26,9 +34,9 @@ class WoChecklist extends HTMLElement {
|
||||
this.#render();
|
||||
}
|
||||
|
||||
async #complete(stepId) {
|
||||
async #complete(stepId, notes = '') {
|
||||
try {
|
||||
await api.post(`/work-orders/${this.#woId}/steps/${stepId}/complete`, {});
|
||||
await api.post(`/work-orders/${this.#woId}/steps/${stepId}/complete`, { notes });
|
||||
await this.#load();
|
||||
this.dispatchEvent(new CustomEvent('steps:updated', { bubbles: true, composed: true }));
|
||||
} catch (err) {
|
||||
@@ -48,7 +56,7 @@ class WoChecklist extends HTMLElement {
|
||||
|
||||
async #addStep(title) {
|
||||
try {
|
||||
await api.post(`/work-orders/${this.#woId}/steps`, { title, description: '', required: true });
|
||||
await api.post(`/work-orders/${this.#woId}/steps`, { title, description: '', required: true, step_type: 'work_step' });
|
||||
await this.#load();
|
||||
} catch (err) {
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
||||
@@ -64,6 +72,95 @@ class WoChecklist extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
async #uploadPhoto(step, file) {
|
||||
const cfg = this.#cfg(step);
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
form.append('phase', cfg.phase || 'during');
|
||||
form.append('caption', cfg.caption_prompt || step.title);
|
||||
form.append('step_id', String(step.id));
|
||||
try {
|
||||
await api.upload(`/work-orders/${this.#woId}/attachments`, form);
|
||||
await this.#complete(step.id, 'Photo captured');
|
||||
} catch (err) {
|
||||
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
||||
}
|
||||
}
|
||||
|
||||
#cfg(step) {
|
||||
try { return JSON.parse(step.type_config || '{}'); } catch { return {}; }
|
||||
}
|
||||
|
||||
// ── Per-type action HTML ───────────────────────────────────────────────────
|
||||
|
||||
#workStepHTML(st) {
|
||||
return `
|
||||
<div class="step-check-wrap">
|
||||
<input type="checkbox" class="step-check" data-id="${st.id}" ${st.completed ? 'checked' : ''}>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#photoHTML(st) {
|
||||
const cfg = this.#cfg(st);
|
||||
const prompt = cfg.caption_prompt || 'Capture photo';
|
||||
const phase = cfg.phase ? `<span class="phase-badge phase-${cfg.phase}">${cfg.phase}</span>` : '';
|
||||
if (st.completed) {
|
||||
return `<div class="type-icon photo-done"><i data-lucide="image" style="width:18px;height:18px"></i></div>`;
|
||||
}
|
||||
return `
|
||||
<div class="photo-action">
|
||||
<button class="photo-btn" data-photo-id="${st.id}" title="${this.#esc(prompt)}">
|
||||
<i data-lucide="camera" style="width:16px;height:16px"></i>
|
||||
</button>
|
||||
${phase}
|
||||
<input type="file" accept="image/*" capture="environment" class="photo-file-input" data-photo-id="${st.id}" style="display:none">
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#inspectionHTML(st) {
|
||||
if (st.completed) {
|
||||
const result = st.notes || '';
|
||||
const cls = result === 'PASS' ? 'insp-pass' : result === 'FAIL' ? 'insp-fail' : 'insp-na';
|
||||
return `<div class="insp-result ${cls}">${result || 'Done'}</div>`;
|
||||
}
|
||||
return `
|
||||
<div class="insp-btns">
|
||||
<button class="insp-btn pass" data-insp="${st.id}" data-result="PASS">Pass</button>
|
||||
<button class="insp-btn fail" data-insp="${st.id}" data-result="FAIL">Fail</button>
|
||||
<button class="insp-btn na" data-insp="${st.id}" data-result="N/A">N/A</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#noteHTML(st) {
|
||||
const cfg = this.#cfg(st);
|
||||
const prompt = cfg.prompt || 'Add note…';
|
||||
if (st.completed) {
|
||||
return `<div class="type-icon note-done"><i data-lucide="check" style="width:16px;height:16px"></i></div>`;
|
||||
}
|
||||
return `
|
||||
<div class="note-action">
|
||||
<textarea class="note-input" data-note-id="${st.id}" placeholder="${this.#esc(prompt)}" rows="2">${this.#esc(st.notes || '')}</textarea>
|
||||
<button class="note-save-btn" data-note-id="${st.id}">Save</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
#typeActionHTML(st) {
|
||||
switch (st.step_type || 'work_step') {
|
||||
case 'photo': return this.#photoHTML(st);
|
||||
case 'inspection': return this.#inspectionHTML(st);
|
||||
case 'note': return this.#noteHTML(st);
|
||||
default: return this.#workStepHTML(st);
|
||||
}
|
||||
}
|
||||
|
||||
#typeBadgeHTML(st) {
|
||||
const t = STEP_TYPES[st.step_type] || STEP_TYPES.work_step;
|
||||
if (st.step_type === 'work_step' || !st.step_type) return '';
|
||||
return `<span class="type-badge" style="--badge-color:${t.color}">${t.label}</span>`;
|
||||
}
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────────────────
|
||||
|
||||
#render() {
|
||||
const s = this.shadowRoot;
|
||||
if (this.#loading) {
|
||||
@@ -89,21 +186,55 @@ class WoChecklist extends HTMLElement {
|
||||
.step-row:hover { background: var(--surface-2); }
|
||||
.step-row.done { background: var(--surface-2); border-color: var(--border-lt); }
|
||||
.step-row.done .step-title { text-decoration: line-through; color: var(--text-muted); }
|
||||
.step-check-wrap { display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin-top: .1rem; }
|
||||
.step-row.type-photo { border-left: 3px solid #8B5CF6; }
|
||||
.step-row.type-inspection { border-left: 3px solid #E07B39; }
|
||||
.step-row.type-note { border-left: 3px solid #64748B; }
|
||||
/* Work step checkbox */
|
||||
.step-check-wrap { display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin-top: .1rem; flex-shrink: 0; }
|
||||
.step-check { width: 20px; height: 20px; accent-color: var(--teal); cursor: pointer; }
|
||||
.step-check:disabled { cursor: not-allowed; opacity: .6; }
|
||||
/* Photo step */
|
||||
.photo-action { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
|
||||
.photo-btn { background: #8B5CF6; color: #fff; border: none; border-radius: var(--radius-sm); padding: .35rem .6rem; cursor: pointer; display: flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; transition: opacity .15s; }
|
||||
.photo-btn:hover { opacity: .85; }
|
||||
.photo-done { color: #8B5CF6; display: flex; align-items: center; min-width: 24px; flex-shrink: 0; }
|
||||
.phase-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .4rem; border-radius: 99px; flex-shrink: 0; }
|
||||
.phase-before { background: #FEF3C7; color: #92400E; }
|
||||
.phase-during { background: #DBEAFE; color: #1E40AF; }
|
||||
.phase-after { background: #DCFCE7; color: #15803D; }
|
||||
/* Inspection step */
|
||||
.insp-btns { display: flex; gap: .3rem; flex-shrink: 0; }
|
||||
.insp-btn { border: none; border-radius: var(--radius-sm); padding: .3rem .65rem; font-size: .75rem; font-weight: 700; cursor: pointer; transition: opacity .15s; }
|
||||
.insp-btn:hover { opacity: .8; }
|
||||
.insp-btn.pass { background: #DCFCE7; color: #15803D; }
|
||||
.insp-btn.fail { background: #FEE2E2; color: #991B1B; }
|
||||
.insp-btn.na { background: var(--surface-2); color: var(--text-muted); }
|
||||
.insp-result { font-size: .75rem; font-weight: 700; padding: .3rem .65rem; border-radius: var(--radius-sm); flex-shrink: 0; }
|
||||
.insp-pass { background: #DCFCE7; color: #15803D; }
|
||||
.insp-fail { background: #FEE2E2; color: #991B1B; }
|
||||
.insp-na { background: var(--surface-2); color: var(--text-muted); }
|
||||
/* Note step */
|
||||
.note-action { display: flex; flex-direction: column; gap: .35rem; flex: 1; min-width: 0; }
|
||||
.note-input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .6rem; font-size: .813rem; background: var(--surface); color: var(--text); resize: vertical; font-family: inherit; width: 100%; box-sizing: border-box; }
|
||||
.note-input:focus { outline: none; border-color: var(--teal); }
|
||||
.note-save-btn { align-self: flex-end; background: var(--teal); color: #fff; border: none; border-radius: var(--radius-sm); padding: .3rem .85rem; font-size: .813rem; font-weight: 600; cursor: pointer; transition: opacity .15s; }
|
||||
.note-save-btn:hover { opacity: .88; }
|
||||
.note-done { color: var(--teal); display: flex; align-items: center; min-width: 24px; flex-shrink: 0; }
|
||||
/* Step body */
|
||||
.step-body { flex: 1; min-width: 0; }
|
||||
.step-header { display: flex; align-items: baseline; gap: .4rem; }
|
||||
.step-num { font-size: .75rem; color: var(--text-muted); font-weight: 700; min-width: 1.5rem; }
|
||||
.step-header { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
|
||||
.step-num { font-size: .75rem; color: var(--text-muted); font-weight: 700; min-width: 1.5rem; }
|
||||
.step-title { font-weight: 500; font-size: .875rem; color: var(--text); line-height: 1.4; }
|
||||
.step-desc { font-size: .813rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.5; }
|
||||
.step-meta { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; display: flex; align-items: center; gap: .3rem; }
|
||||
.step-note { font-style: italic; margin-top: .2rem; font-size: .75rem; color: var(--text-muted); }
|
||||
.step-desc { font-size: .813rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.5; }
|
||||
.step-meta { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; display: flex; align-items: center; gap: .3rem; }
|
||||
.step-note { font-style: italic; margin-top: .2rem; font-size: .75rem; color: var(--text-muted); }
|
||||
.type-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .4rem; border-radius: 99px; background: color-mix(in srgb, var(--badge-color) 15%, transparent); color: var(--badge-color); flex-shrink: 0; }
|
||||
/* Step actions */
|
||||
.step-actions { display: flex; gap: .25rem; align-items: center; flex-shrink: 0; }
|
||||
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: .3rem; border-radius: var(--radius-sm); display: flex; align-items: center; transition: color .15s, background .15s; opacity: 0; }
|
||||
.step-row:hover .icon-btn { opacity: 1; }
|
||||
.icon-btn:hover { color: var(--danger); background: #FEF2F2; }
|
||||
.icon-btn.undo-btn:hover { color: var(--teal); background: var(--surface-2); }
|
||||
/* Add section */
|
||||
.empty-steps { text-align: center; padding: 2rem; color: var(--text-muted); font-size: .875rem; }
|
||||
.add-section { border-top: 1px solid var(--border); padding-top: 1.25rem; }
|
||||
.add-section-label { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
|
||||
@@ -112,15 +243,13 @@ class WoChecklist extends HTMLElement {
|
||||
.add-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10,126,164,.12); }
|
||||
.add-btn { background: var(--teal); color: #fff; border: none; border-radius: var(--radius); padding: .55rem 1.1rem; font-weight: 600; font-size: .875rem; cursor: pointer; white-space: nowrap; transition: opacity .15s; }
|
||||
.add-btn:hover { opacity: .88; }
|
||||
@media (max-width: 768px) {
|
||||
.icon-btn { opacity: 1; }
|
||||
}
|
||||
@media (max-width: 768px) { .icon-btn { opacity: 1; } }
|
||||
</style>
|
||||
|
||||
${allDone ? `
|
||||
<div class="all-done">
|
||||
<i data-lucide="check-circle-2" style="width:18px;height:18px;flex-shrink:0"></i>
|
||||
All ${total} steps complete — ready for review!
|
||||
All ${total} steps complete — ready for review!
|
||||
</div>` : ''}
|
||||
|
||||
<div class="progress-wrap">
|
||||
@@ -133,43 +262,53 @@ class WoChecklist extends HTMLElement {
|
||||
|
||||
<div class="steps-list">
|
||||
${total === 0
|
||||
? '<div class="empty-steps">No steps yet — add your first step below</div>'
|
||||
: this.#steps.map(st => `
|
||||
<div class="step-row${st.completed ? ' done' : ''}">
|
||||
<div class="step-check-wrap">
|
||||
<input type="checkbox" class="step-check" data-id="${st.id}"
|
||||
${st.completed ? 'checked' : ''}>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<div class="step-header">
|
||||
<span class="step-num">${st.step_order}.</span>
|
||||
<span class="step-title">${this.#esc(st.title)}</span>
|
||||
</div>
|
||||
${st.description ? `<div class="step-desc">${this.#esc(st.description)}</div>` : ''}
|
||||
${st.completed && st.completed_by ? `
|
||||
<div class="step-meta">
|
||||
<i data-lucide="user-check" style="width:12px;height:12px"></i>
|
||||
${this.#esc(st.completed_by)}
|
||||
${st.completed_at ? '· ' + new Date(st.completed_at).toLocaleString() : ''}
|
||||
</div>` : ''}
|
||||
${st.notes ? `<div class="step-note">"${this.#esc(st.notes)}"</div>` : ''}
|
||||
</div>
|
||||
<div class="step-actions">
|
||||
${st.completed
|
||||
? `<button class="icon-btn undo-btn" data-undo="${st.id}" title="Mark incomplete">
|
||||
<i data-lucide="rotate-ccw" style="width:14px;height:14px"></i>
|
||||
</button>`
|
||||
: `<button class="icon-btn" data-del="${st.id}" title="Remove step">
|
||||
<i data-lucide="trash-2" style="width:14px;height:14px"></i>
|
||||
</button>`}
|
||||
</div>
|
||||
</div>`).join('')}
|
||||
? '<div class="empty-steps">No steps yet — add your first step below</div>'
|
||||
: this.#steps.map(st => {
|
||||
const type = st.step_type || 'work_step';
|
||||
const cfg = this.#cfg(st);
|
||||
// For note steps, the action takes flex:1 so body goes before it
|
||||
const noteType = type === 'note' && !st.completed;
|
||||
return `
|
||||
<div class="step-row${st.completed ? ' done' : ''} type-${type}">
|
||||
${noteType ? '' : this.#typeActionHTML(st)}
|
||||
<div class="step-body" style="${noteType ? 'flex:0 0 auto;max-width:45%' : ''}">
|
||||
<div class="step-header">
|
||||
<span class="step-num">${st.step_order}.</span>
|
||||
<span class="step-title">${this.#esc(st.title)}</span>
|
||||
${this.#typeBadgeHTML(st)}
|
||||
</div>
|
||||
${st.description ? `<div class="step-desc">${this.#esc(st.description)}</div>` : ''}
|
||||
${type === 'inspection' && !st.completed && cfg.criteria ? `<div class="step-desc">${this.#esc(cfg.criteria)}</div>` : ''}
|
||||
${st.completed && st.completed_by ? `
|
||||
<div class="step-meta">
|
||||
<i data-lucide="user-check" style="width:12px;height:12px"></i>
|
||||
${this.#esc(st.completed_by)}
|
||||
${st.completed_at ? '· ' + new Date(st.completed_at).toLocaleString() : ''}
|
||||
</div>` : ''}
|
||||
${st.notes && type !== 'note' ? `<div class="step-note">"${this.#esc(st.notes)}"</div>` : ''}
|
||||
</div>
|
||||
${noteType ? this.#typeActionHTML(st) : ''}
|
||||
<div class="step-actions">
|
||||
${st.completed
|
||||
? `<button class="icon-btn undo-btn" data-undo="${st.id}" title="Mark incomplete">
|
||||
<i data-lucide="rotate-ccw" style="width:14px;height:14px"></i>
|
||||
</button>`
|
||||
: type === 'work_step' || !type
|
||||
? `<button class="icon-btn" data-del="${st.id}" title="Remove step">
|
||||
<i data-lucide="trash-2" style="width:14px;height:14px"></i>
|
||||
</button>`
|
||||
: `<button class="icon-btn" data-del="${st.id}" title="Remove step">
|
||||
<i data-lucide="trash-2" style="width:14px;height:14px"></i>
|
||||
</button>`}
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('')}
|
||||
</div>
|
||||
|
||||
<div class="add-section">
|
||||
<div class="add-section-label">Add Step</div>
|
||||
<div class="add-row">
|
||||
<input class="add-input" id="new-step-title" placeholder="Step title…" maxlength="200">
|
||||
<input class="add-input" id="new-step-title" placeholder="Step title…" maxlength="200">
|
||||
<button class="add-btn" id="add-step-btn">
|
||||
<i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle"></i> Add
|
||||
</button>
|
||||
@@ -178,6 +317,7 @@ class WoChecklist extends HTMLElement {
|
||||
|
||||
if (window.lucide) lucide.createIcons({ root: s });
|
||||
|
||||
// Work step checkboxes
|
||||
s.querySelectorAll('.step-check').forEach(cb => {
|
||||
cb.addEventListener('change', () => {
|
||||
if (cb.checked) this.#complete(+cb.dataset.id);
|
||||
@@ -185,12 +325,42 @@ class WoChecklist extends HTMLElement {
|
||||
});
|
||||
});
|
||||
|
||||
// Photo capture buttons
|
||||
s.querySelectorAll('.photo-btn').forEach(btn => {
|
||||
const stepId = +btn.dataset.photoId;
|
||||
const fileInput = s.querySelector(`.photo-file-input[data-photo-id="${stepId}"]`);
|
||||
btn.addEventListener('click', () => fileInput?.click());
|
||||
fileInput?.addEventListener('change', e => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const step = this.#steps.find(st => st.id === stepId);
|
||||
if (step) this.#uploadPhoto(step, file);
|
||||
});
|
||||
});
|
||||
|
||||
// Inspection buttons
|
||||
s.querySelectorAll('.insp-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => this.#complete(+btn.dataset.insp, btn.dataset.result));
|
||||
});
|
||||
|
||||
// Note save buttons
|
||||
s.querySelectorAll('.note-save-btn').forEach(btn => {
|
||||
const stepId = +btn.dataset.noteId;
|
||||
btn.addEventListener('click', () => {
|
||||
const textarea = s.querySelector(`.note-input[data-note-id="${stepId}"]`);
|
||||
const text = textarea?.value.trim() || '';
|
||||
if (!text) { textarea?.focus(); return; }
|
||||
this.#complete(stepId, text);
|
||||
});
|
||||
});
|
||||
|
||||
// Delete / undo
|
||||
s.querySelectorAll('[data-del]').forEach(btn =>
|
||||
btn.addEventListener('click', () => this.#deleteStep(+btn.dataset.del)));
|
||||
|
||||
s.querySelectorAll('[data-undo]').forEach(btn =>
|
||||
btn.addEventListener('click', () => this.#uncomplete(+btn.dataset.undo)));
|
||||
|
||||
// Add step
|
||||
const titleInput = s.querySelector('#new-step-title');
|
||||
const addBtn = s.querySelector('#add-step-btn');
|
||||
addBtn.addEventListener('click', () => {
|
||||
|
||||
Reference in New Issue
Block a user