TBNilles/workorders
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add step type support for work order profiles and steps, update database schema, APIs, and UI components to handle configurable step types.

Browse Source
This commit is contained in:
Thomas Nilles
2026-05-17 19:21:11 -04:00
parent 309f19520b
commit 6307babbfa
8 changed files with 481 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/api/handlers/profile.go
+17 -8
View File
@@ -178,14 +178,17 @@ func (h *ProfileHandler) CreateStep(w http.ResponseWriter, r *http.Request) {
respondError(w, http.StatusBadRequest, "title required") respondError(w, http.StatusBadRequest, "title required")
return return
} }
if body.StepType == "" {
body.StepType = "work_step"
}
var maxOrder int var maxOrder int
h.db.QueryRow(`SELECT ISNULL(MAX(step_order),0) FROM wo_profile_steps WHERE profile_id=@p1`, profileID).Scan(&maxOrder) h.db.QueryRow(`SELECT ISNULL(MAX(step_order),0) FROM wo_profile_steps WHERE profile_id=@p1`, profileID).Scan(&maxOrder)
var sid int var sid int
err = h.db.QueryRow(` err = h.db.QueryRow(`
INSERT INTO wo_profile_steps (profile_id, step_order, title, description, required) INSERT INTO wo_profile_steps (profile_id, step_order, title, description, required, step_type, type_config)
OUTPUT INSERTED.id VALUES (@p1, @p2, @p3, @p4, @p5)`, OUTPUT INSERTED.id VALUES (@p1, @p2, @p3, @p4, @p5, @p6, @p7)`,
profileID, maxOrder+1, body.Title, body.Description, body.Required, profileID, maxOrder+1, body.Title, body.Description, body.Required, body.StepType, body.TypeConfig,
).Scan(&sid) ).Scan(&sid)
if err != nil { if err != nil {
respondError(w, http.StatusInternalServerError, err.Error()) respondError(w, http.StatusInternalServerError, err.Error())
@@ -207,8 +210,11 @@ func (h *ProfileHandler) UpdateStep(w http.ResponseWriter, r *http.Request) {
respondError(w, http.StatusBadRequest, "title required") respondError(w, http.StatusBadRequest, "title required")
return return
} }
h.db.Exec(`UPDATE wo_profile_steps SET title=@p1, description=@p2, required=@p3, step_order=@p4 WHERE id=@p5`, if body.StepType == "" {
body.Title, body.Description, body.Required, body.StepOrder, sid) body.StepType = "work_step"
}
h.db.Exec(`UPDATE wo_profile_steps SET title=@p1, description=@p2, required=@p3, step_order=@p4, step_type=@p5, type_config=@p6 WHERE id=@p7`,
body.Title, body.Description, body.Required, body.StepOrder, body.StepType, body.TypeConfig, sid)
var step model.ProfileStep var step model.ProfileStep
h.db.Get(&step, `SELECT * FROM wo_profile_steps WHERE id=@p1`, sid) h.db.Get(&step, `SELECT * FROM wo_profile_steps WHERE id=@p1`, sid)
respond(w, http.StatusOK, step) respond(w, http.StatusOK, step)
@@ -262,10 +268,13 @@ func (h *ProfileHandler) Apply(w http.ResponseWriter, r *http.Request) {
h.db.QueryRow(`SELECT ISNULL(MAX(step_order),0) FROM wo_steps WHERE wo_id=@p1`, woID).Scan(&maxOrder) h.db.QueryRow(`SELECT ISNULL(MAX(step_order),0) FROM wo_steps WHERE wo_id=@p1`, woID).Scan(&maxOrder)
for _, s := range steps { for _, s := range steps {
if s.StepType == "" {
s.StepType = "work_step"
}
h.db.Exec(` h.db.Exec(`
INSERT INTO wo_steps (wo_id, step_order, title, description, required) INSERT INTO wo_steps (wo_id, step_order, title, description, required, step_type, type_config)
VALUES (@p1, @p2, @p3, @p4, @p5)`, VALUES (@p1, @p2, @p3, @p4, @p5, @p6, @p7)`,
woID, maxOrder+s.StepOrder, s.Title, s.Description, s.Required) woID, maxOrder+s.StepOrder, s.Title, s.Description, s.Required, s.StepType, s.TypeConfig)
} }
// Fill instructions if blank; update priority only on draft WOs // Fill instructions if blank; update priority only on draft WOs
internal/api/handlers/step.go
+6 -3
View File
@@ -41,11 +41,14 @@ func (h *StepHandler) Create(w http.ResponseWriter, r *http.Request) {
var maxOrder int var maxOrder int
h.db.QueryRow(`SELECT ISNULL(MAX(step_order),0) FROM wo_steps WHERE wo_id=@p1`, woID).Scan(&maxOrder) h.db.QueryRow(`SELECT ISNULL(MAX(step_order),0) FROM wo_steps WHERE wo_id=@p1`, woID).Scan(&maxOrder)
if body.StepType == "" {
body.StepType = "work_step"
}
var sid int var sid int
err = h.db.QueryRow(` err = h.db.QueryRow(`
INSERT INTO wo_steps (wo_id,step_order,title,description,required) INSERT INTO wo_steps (wo_id,step_order,title,description,required,step_type,type_config)
OUTPUT INSERTED.id VALUES (@p1,@p2,@p3,@p4,@p5)`, OUTPUT INSERTED.id VALUES (@p1,@p2,@p3,@p4,@p5,@p6,@p7)`,
woID, maxOrder+1, body.Title, body.Description, body.Required, woID, maxOrder+1, body.Title, body.Description, body.Required, body.StepType, body.TypeConfig,
).Scan(&sid) ).Scan(&sid)
if err != nil { if err != nil {
respondError(w, http.StatusInternalServerError, err.Error()) respondError(w, http.StatusInternalServerError, err.Error())
internal/model/models.go
+4
View File
@@ -56,6 +56,8 @@ type Step struct {
Title string `db:"title" json:"title"` Title string `db:"title" json:"title"`
Description string `db:"description" json:"description"` Description string `db:"description" json:"description"`
Required bool `db:"required" json:"required"` Required bool `db:"required" json:"required"`
StepType string `db:"step_type" json:"step_type"`
TypeConfig string `db:"type_config" json:"type_config"`
Completed bool `db:"completed" json:"completed"` Completed bool `db:"completed" json:"completed"`
CompletedBy *string `db:"completed_by" json:"completed_by"` CompletedBy *string `db:"completed_by" json:"completed_by"`
CompletedAt *time.Time `db:"completed_at" json:"completed_at"` CompletedAt *time.Time `db:"completed_at" json:"completed_at"`
@@ -166,6 +168,8 @@ type ProfileStep struct {
Title string `db:"title" json:"title"` Title string `db:"title" json:"title"`
Description string `db:"description" json:"description"` Description string `db:"description" json:"description"`
Required bool `db:"required" json:"required"` Required bool `db:"required" json:"required"`
StepType string `db:"step_type" json:"step_type"`
TypeConfig string `db:"type_config" json:"type_config"`
} }
// ── Users & Auth ────────────────────────────────────────────────────────────── // ── Users & Auth ──────────────────────────────────────────────────────────────
internal/repository/migrations/007_profiles.sql
+31
View File
@@ -0,0 +1,31 @@
-- Work Order Profiles
IF NOT EXISTS (SELECT 1 FROM sys.tables WHERE name = 'wo_profiles')
BEGIN
CREATE TABLE wo_profiles (
id INT IDENTITY PRIMARY KEY,
name NVARCHAR(200) NOT NULL,
description NVARCHAR(MAX),
category NVARCHAR(100),
default_priority NVARCHAR(10) NOT NULL DEFAULT 'normal',
default_duration_hours INT,
default_instructions NVARCHAR(MAX),
active BIT NOT NULL DEFAULT 1,
created_at DATETIME2 NOT NULL DEFAULT GETUTCDATE(),
updated_at DATETIME2 NOT NULL DEFAULT GETUTCDATE()
);
END
IF NOT EXISTS (SELECT 1 FROM sys.tables WHERE name = 'wo_profile_steps')
BEGIN
CREATE TABLE wo_profile_steps (
id INT IDENTITY PRIMARY KEY,
profile_id INT NOT NULL REFERENCES wo_profiles(id) ON DELETE CASCADE,
step_order INT NOT NULL,
title NVARCHAR(200) NOT NULL,
description NVARCHAR(MAX),
required BIT NOT NULL DEFAULT 1
);
CREATE INDEX ix_profile_steps ON wo_profile_steps (profile_id, step_order);
END
internal/repository/migrations/008_step_types.sql
+15
View File
@@ -0,0 +1,15 @@
-- Add step_type and type_config to profile steps and WO steps
IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_profile_steps') AND name = 'step_type')
ALTER TABLE wo_profile_steps ADD step_type NVARCHAR(30) NOT NULL DEFAULT 'work_step';
-- 'work_step' | 'photo' | 'inspection' | 'note'
IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_profile_steps') AND name = 'type_config')
ALTER TABLE wo_profile_steps ADD type_config NVARCHAR(MAX) NULL;
-- JSON; shape depends on step_type (see CLAUDE.md)
IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_steps') AND name = 'step_type')
ALTER TABLE wo_steps ADD step_type NVARCHAR(30) NOT NULL DEFAULT 'work_step';
IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_steps') AND name = 'type_config')
ALTER TABLE wo_steps ADD type_config NVARCHAR(MAX) NULL;
migrations/008_step_types.sql
+15
View File
@@ -0,0 +1,15 @@
-- Add step_type and type_config to profile steps and WO steps
IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_profile_steps') AND name = 'step_type')
ALTER TABLE wo_profile_steps ADD step_type NVARCHAR(30) NOT NULL DEFAULT 'work_step';
-- 'work_step' | 'photo' | 'inspection' | 'note'
IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_profile_steps') AND name = 'type_config')
ALTER TABLE wo_profile_steps ADD type_config NVARCHAR(MAX) NULL;
-- JSON; shape depends on step_type (see CLAUDE.md)
IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_steps') AND name = 'step_type')
ALTER TABLE wo_steps ADD step_type NVARCHAR(30) NOT NULL DEFAULT 'work_step';
IF NOT EXISTS (SELECT 1 FROM sys.columns WHERE object_id = OBJECT_ID('wo_steps') AND name = 'type_config')
ALTER TABLE wo_steps ADD type_config NVARCHAR(MAX) NULL;
web/components/registry/profile-form.mjs
+175 -30
View File
@@ -2,6 +2,13 @@ import { api } from '../../lib/api.mjs';
const PRIORITIES = ['low', 'normal', 'high', 'urgent']; 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 { class ProfileForm extends HTMLElement {
#onSave = null; #onSave = null;
@@ -19,7 +26,7 @@ class ProfileForm extends HTMLElement {
d.innerHTML = ` d.innerHTML = `
<style> <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); } 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-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; } .dlg-title { font-size:1rem; font-weight:700; }
@@ -34,19 +41,41 @@ class ProfileForm extends HTMLElement {
.toggle-label { font-size:.875rem; font-weight:500; } .toggle-label { font-size:.875rem; font-weight:500; }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--teal); cursor:pointer; } 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; } .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-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-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-order { font-size:.75rem; font-weight:700; color:var(--text-muted); min-width:1.5rem; text-align:center; } .step-row[data-type="photo"] { border-left-color:#8B5CF6; }
.step-title-input { flex:1; border:none; background:transparent; font-size:.875rem; color:var(--text); padding:.15rem .3rem; border-radius:4px; } .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-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-cfg-summary { font-size:.7rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.step-del { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.2rem; display:flex; border-radius:4px; } .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; } .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-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 { 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); } .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; } .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; } .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-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; } .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>' ? '<div class="empty-steps" id="empty-steps">No steps yet — add steps below</div>'
: (profile?.steps || []).map((s, i) => this.#stepRowHTML(s, i)).join('')} : (profile?.steps || []).map((s, i) => this.#stepRowHTML(s, i)).join('')}
</div> </div>
<div class="add-step-row">
<input class="add-step-input" id="new-step-title" placeholder="Step title…" maxlength="200"> <div class="add-step-area">
<button class="btn-add-step" id="add-step-btn">+ Add Step</button> <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>
<div class="error-msg" id="form-error"></div> <div class="error-msg" id="form-error"></div>
</div> </div>
@@ -112,19 +153,20 @@ class ProfileForm extends HTMLElement {
if (window.lucide) lucide.createIcons({ root: d }); if (window.lucide) lucide.createIcons({ root: d });
// Local step state (not saved until the profile save) const profileId = profile?.id || null;
const profileId = profile?.id || null; let pendingSteps = (profile?.steps || []).map(s => ({ ...s }));
let pendingSteps = (profile?.steps || []).map(s => ({ ...s })); let selectedType = 'work_step';
// ── Step list rendering ───────────────────────────────────────────────
const renderSteps = () => { const renderSteps = () => {
const list = d.querySelector('#step-list'); const list = d.querySelector('#step-list');
const empty = pendingSteps.length === 0; list.innerHTML = pendingSteps.length === 0
list.innerHTML = empty
? '<div class="empty-steps">No steps yet — add steps below</div>' ? '<div class="empty-steps">No steps yet — add steps below</div>'
: pendingSteps.map((s, i) => this.#stepRowHTML(s, i)).join(''); : pendingSteps.map((s, i) => this.#stepRowHTML(s, i)).join('');
if (window.lucide) lucide.createIcons({ root: list });
list.querySelectorAll('.step-title-input').forEach((inp, i) => { 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; }); inp.addEventListener('change', () => { pendingSteps[i].title = inp.value; });
}); });
list.querySelectorAll('.step-req-check').forEach((cb, i) => { list.querySelectorAll('.step-req-check').forEach((cb, i) => {
@@ -136,29 +178,113 @@ class ProfileForm extends HTMLElement {
}; };
renderSteps(); 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', () => { d.querySelector('#add-step-btn').addEventListener('click', () => {
const inp = d.querySelector('#new-step-title'); const inp = d.querySelector('#new-step-title');
const title = inp.value.trim(); const title = inp.value.trim();
if (!title) { inp.focus(); return; } 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 = ''; 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(); renderSteps();
}); });
d.querySelector('#new-step-title').addEventListener('keydown', e => { d.querySelector('#new-step-title').addEventListener('keydown', e => {
if (e.key === 'Enter') { e.preventDefault(); d.querySelector('#add-step-btn').click(); } 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-cancel').addEventListener('click', () => d.close());
d.querySelector('#dlg-save').addEventListener('click', async () => { 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'); const errEl = d.querySelector('#form-error');
if (!name) { errEl.textContent = 'Name is required'; d.querySelector('#p-name').focus(); return; } if (!name) { errEl.textContent = 'Name is required'; d.querySelector('#p-name').focus(); return; }
errEl.textContent = ''; errEl.textContent = '';
const saveBtn = d.querySelector('#dlg-save'); const saveBtn = d.querySelector('#dlg-save');
saveBtn.disabled = true; saveBtn.disabled = true;
saveBtn.textContent = 'Saving…'; saveBtn.textContent = 'Saving…';
const payload = { const payload = {
@@ -179,20 +305,26 @@ class ProfileForm extends HTMLElement {
savedProfile = await api.post('/profiles', payload); savedProfile = await api.post('/profiles', payload);
} }
// Sync steps: delete removed, update existing, create new
const savedId = savedProfile.id; const savedId = savedProfile.id;
const origIds = new Set((profile?.steps || []).map(s => s.id)); const origIds = new Set((profile?.steps || []).map(s => s.id));
// Delete removed // Delete removed steps
for (const orig of (profile?.steps || [])) { for (const orig of (profile?.steps || [])) {
if (!pendingSteps.find(s => s.id === orig.id)) { if (!pendingSteps.find(s => s.id === orig.id)) {
await api.delete(`/profiles/${savedId}/steps/${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++) { for (let i = 0; i < pendingSteps.length; i++) {
const s = pendingSteps[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)) { if (s.id && origIds.has(s.id)) {
await api.put(`/profiles/${savedId}/steps/${s.id}`, stepPayload); await api.put(`/profiles/${savedId}/steps/${s.id}`, stepPayload);
} else { } else {
@@ -201,12 +333,14 @@ class ProfileForm extends HTMLElement {
} }
d.close(); 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?.(); this.#onSave?.();
} catch (err) { } catch (err) {
errEl.textContent = err.message; errEl.textContent = err.message;
saveBtn.disabled = false; saveBtn.disabled = false;
saveBtn.textContent = isEdit ? 'Save Changes' : 'Create Profile'; saveBtn.textContent = isEdit ? 'Save Changes' : 'Create Profile';
} }
}); });
@@ -215,17 +349,28 @@ class ProfileForm extends HTMLElement {
} }
#stepRowHTML(s, i) { #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 ` return `
<div class="step-row"> <div class="step-row" data-type="${type}">
<span class="step-order">${i + 1}</span> <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…"> <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"> <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> </label>
<button class="step-del" title="Remove step"><i data-lucide="x" style="width:12px;height:12px"></i></button> <button class="step-del" title="Remove step"><i data-lucide="x" style="width:12px;height:12px"></i></button>
</div>`; </div>`;
} }
#parseCfg(str) { try { return JSON.parse(str || '{}'); } catch { return {}; } }
#esc(s) { return (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); } #esc(s) { return (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }
} }
web/components/work-orders/wo-checklist.mjs
+218 -48
View File
@@ -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 { class WoChecklist extends HTMLElement {
#woId = null; #woId = null;
@@ -26,9 +34,9 @@ class WoChecklist extends HTMLElement {
this.#render(); this.#render();
} }
async #complete(stepId) { async #complete(stepId, notes = '') {
try { 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(); await this.#load();
this.dispatchEvent(new CustomEvent('steps:updated', { bubbles: true, composed: true })); this.dispatchEvent(new CustomEvent('steps:updated', { bubbles: true, composed: true }));
} catch (err) { } catch (err) {
@@ -48,7 +56,7 @@ class WoChecklist extends HTMLElement {
async #addStep(title) { async #addStep(title) {
try { 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(); await this.#load();
} catch (err) { } catch (err) {
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } })); 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() { #render() {
const s = this.shadowRoot; const s = this.shadowRoot;
if (this.#loading) { if (this.#loading) {
@@ -89,21 +186,55 @@ class WoChecklist extends HTMLElement {
.step-row:hover { background: var(--surface-2); } .step-row:hover { background: var(--surface-2); }
.step-row.done { background: var(--surface-2); border-color: var(--border-lt); } .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-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 { 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-body { flex: 1; min-width: 0; }
.step-header { display: flex; align-items: baseline; gap: .4rem; } .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-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-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-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-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-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; } .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; } .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; } .step-row:hover .icon-btn { opacity: 1; }
.icon-btn:hover { color: var(--danger); background: #FEF2F2; } .icon-btn:hover { color: var(--danger); background: #FEF2F2; }
.icon-btn.undo-btn:hover { color: var(--teal); background: var(--surface-2); } .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; } .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 { 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; } .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-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 { 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; } .add-btn:hover { opacity: .88; }
@media (max-width: 768px) { @media (max-width: 768px) { .icon-btn { opacity: 1; } }
.icon-btn { opacity: 1; }
}
</style> </style>
${allDone ? ` ${allDone ? `
<div class="all-done"> <div class="all-done">
<i data-lucide="check-circle-2" style="width:18px;height:18px;flex-shrink:0"></i> <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>` : ''}
<div class="progress-wrap"> <div class="progress-wrap">
@@ -133,43 +262,53 @@ class WoChecklist extends HTMLElement {
<div class="steps-list"> <div class="steps-list">
${total === 0 ${total === 0
? '<div class="empty-steps">No steps yet — add your first step below</div>' ? '<div class="empty-steps">No steps yet — add your first step below</div>'
: this.#steps.map(st => ` : this.#steps.map(st => {
<div class="step-row${st.completed ? ' done' : ''}"> const type = st.step_type || 'work_step';
<div class="step-check-wrap"> const cfg = this.#cfg(st);
<input type="checkbox" class="step-check" data-id="${st.id}" // For note steps, the action takes flex:1 so body goes before it
${st.completed ? 'checked' : ''}> const noteType = type === 'note' && !st.completed;
</div> return `
<div class="step-body"> <div class="step-row${st.completed ? ' done' : ''} type-${type}">
<div class="step-header"> ${noteType ? '' : this.#typeActionHTML(st)}
<span class="step-num">${st.step_order}.</span> <div class="step-body" style="${noteType ? 'flex:0 0 auto;max-width:45%' : ''}">
<span class="step-title">${this.#esc(st.title)}</span> <div class="step-header">
</div> <span class="step-num">${st.step_order}.</span>
${st.description ? `<div class="step-desc">${this.#esc(st.description)}</div>` : ''} <span class="step-title">${this.#esc(st.title)}</span>
${st.completed && st.completed_by ? ` ${this.#typeBadgeHTML(st)}
<div class="step-meta"> </div>
<i data-lucide="user-check" style="width:12px;height:12px"></i> ${st.description ? `<div class="step-desc">${this.#esc(st.description)}</div>` : ''}
${this.#esc(st.completed_by)} ${type === 'inspection' && !st.completed && cfg.criteria ? `<div class="step-desc">${this.#esc(cfg.criteria)}</div>` : ''}
${st.completed_at ? '· ' + new Date(st.completed_at).toLocaleString() : ''} ${st.completed && st.completed_by ? `
</div>` : ''} <div class="step-meta">
${st.notes ? `<div class="step-note">"${this.#esc(st.notes)}"</div>` : ''} <i data-lucide="user-check" style="width:12px;height:12px"></i>
</div> ${this.#esc(st.completed_by)}
<div class="step-actions"> ${st.completed_at ? '· ' + new Date(st.completed_at).toLocaleString() : ''}
${st.completed </div>` : ''}
? `<button class="icon-btn undo-btn" data-undo="${st.id}" title="Mark incomplete"> ${st.notes && type !== 'note' ? `<div class="step-note">"${this.#esc(st.notes)}"</div>` : ''}
<i data-lucide="rotate-ccw" style="width:14px;height:14px"></i> </div>
</button>` ${noteType ? this.#typeActionHTML(st) : ''}
: `<button class="icon-btn" data-del="${st.id}" title="Remove step"> <div class="step-actions">
<i data-lucide="trash-2" style="width:14px;height:14px"></i> ${st.completed
</button>`} ? `<button class="icon-btn undo-btn" data-undo="${st.id}" title="Mark incomplete">
</div> <i data-lucide="rotate-ccw" style="width:14px;height:14px"></i>
</div>`).join('')} </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>
<div class="add-section"> <div class="add-section">
<div class="add-section-label">Add Step</div> <div class="add-section-label">Add Step</div>
<div class="add-row"> <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"> <button class="add-btn" id="add-step-btn">
<i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle"></i> Add <i data-lucide="plus" style="width:14px;height:14px;vertical-align:middle"></i> Add
</button> </button>
@@ -178,6 +317,7 @@ class WoChecklist extends HTMLElement {
if (window.lucide) lucide.createIcons({ root: s }); if (window.lucide) lucide.createIcons({ root: s });
// Work step checkboxes
s.querySelectorAll('.step-check').forEach(cb => { s.querySelectorAll('.step-check').forEach(cb => {
cb.addEventListener('change', () => { cb.addEventListener('change', () => {
if (cb.checked) this.#complete(+cb.dataset.id); 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 => s.querySelectorAll('[data-del]').forEach(btn =>
btn.addEventListener('click', () => this.#deleteStep(+btn.dataset.del))); btn.addEventListener('click', () => this.#deleteStep(+btn.dataset.del)));
s.querySelectorAll('[data-undo]').forEach(btn => s.querySelectorAll('[data-undo]').forEach(btn =>
btn.addEventListener('click', () => this.#uncomplete(+btn.dataset.undo))); btn.addEventListener('click', () => this.#uncomplete(+btn.dataset.undo)));
// Add step
const titleInput = s.querySelector('#new-step-title'); const titleInput = s.querySelector('#new-step-title');
const addBtn = s.querySelector('#add-step-btn'); const addBtn = s.querySelector('#add-step-btn');
addBtn.addEventListener('click', () => { addBtn.addEventListener('click', () => {