378 lines
21 KiB
JavaScript
378 lines
21 KiB
JavaScript
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;
|
|
|
|
connectedCallback() {
|
|
if (!this.shadowRoot) {
|
|
this.attachShadow({ mode: 'open' });
|
|
this.shadowRoot.innerHTML = `<style>:host{display:block}</style><dialog></dialog>`;
|
|
}
|
|
}
|
|
|
|
open(profile, onSave) {
|
|
this.#onSave = onSave;
|
|
const isEdit = !!profile;
|
|
const d = this.shadowRoot.querySelector('dialog');
|
|
|
|
d.innerHTML = `
|
|
<style>
|
|
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; }
|
|
.dlg-close { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.25rem; display:flex; }
|
|
.dlg-body { padding:1.25rem; display:flex; flex-direction:column; gap:.875rem; overflow-y:auto; flex:1; }
|
|
.field-label { font-size:.813rem; font-weight:600; color:var(--text); display:block; margin-bottom:.3rem; }
|
|
.field-input,.field-select,.field-textarea { width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.55rem .75rem; font-size:.875rem; background:var(--surface); color:var(--text); box-sizing:border-box; transition:border-color .15s; font-family:inherit; }
|
|
.field-input:focus,.field-select:focus,.field-textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(10,126,164,.12); }
|
|
.field-textarea { resize:vertical; min-height:80px; line-height:1.5; }
|
|
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
|
|
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; }
|
|
.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:.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-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); }
|
|
/* 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; }
|
|
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
|
|
.error-msg { color:var(--danger); font-size:.813rem; min-height:1.2em; }
|
|
.empty-steps { font-size:.813rem; color:var(--text-muted); font-style:italic; text-align:center; padding:.5rem 0; }
|
|
</style>
|
|
<div class="dlg-header">
|
|
<span class="dlg-title">${isEdit ? 'Edit Profile' : 'New Profile'}</span>
|
|
<button class="dlg-close" id="dlg-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
|
|
</div>
|
|
<div class="dlg-body">
|
|
<div>
|
|
<label class="field-label" for="p-name">Name *</label>
|
|
<input class="field-input" id="p-name" type="text" value="${this.#esc(profile?.name || '')}" placeholder="e.g. Preventive Maintenance" required maxlength="200">
|
|
</div>
|
|
<div>
|
|
<label class="field-label" for="p-desc">Description</label>
|
|
<textarea class="field-textarea" id="p-desc" rows="2" placeholder="What type of work does this profile cover?">${this.#esc(profile?.description || '')}</textarea>
|
|
</div>
|
|
<div class="row-2">
|
|
<div>
|
|
<label class="field-label" for="p-cat">Category</label>
|
|
<input class="field-input" id="p-cat" type="text" value="${this.#esc(profile?.category || '')}" placeholder="e.g. Preventive, Emergency" maxlength="100">
|
|
</div>
|
|
<div>
|
|
<label class="field-label" for="p-pri">Default Priority</label>
|
|
<select class="field-select" id="p-pri">
|
|
${PRIORITIES.map(p => `<option value="${p}" ${(profile?.default_priority || 'normal') === p ? 'selected' : ''}>${p.charAt(0).toUpperCase() + p.slice(1)}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="field-label" for="p-dur">Default Duration (hours)</label>
|
|
<input class="field-input" id="p-dur" type="number" min="0" step="0.5" value="${profile?.default_duration_hours ?? ''}" placeholder="e.g. 4">
|
|
</div>
|
|
<div>
|
|
<label class="field-label" for="p-instr">Default Instructions</label>
|
|
<textarea class="field-textarea" id="p-instr" rows="4" placeholder="Instructions that will be copied to each work order using this profile.">${this.#esc(profile?.default_instructions || '')}</textarea>
|
|
</div>
|
|
${isEdit ? `
|
|
<div class="toggle-row">
|
|
<span class="toggle-label">Active</span>
|
|
<input type="checkbox" id="p-active" ${profile.active ? 'checked' : ''}>
|
|
</div>` : ''}
|
|
|
|
<div class="section-title">Default Steps</div>
|
|
<div class="step-list" id="step-list">
|
|
${(profile?.steps || []).length === 0
|
|
? '<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-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>
|
|
<div class="dlg-footer">
|
|
<button class="btn-ghost" id="dlg-cancel">Cancel</button>
|
|
<button class="btn-primary" id="dlg-save">${isEdit ? 'Save Changes' : 'Create Profile'}</button>
|
|
</div>`;
|
|
|
|
if (window.lucide) lucide.createIcons({ root: d });
|
|
|
|
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');
|
|
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('change', () => { pendingSteps[i].title = inp.value; });
|
|
});
|
|
list.querySelectorAll('.step-req-check').forEach((cb, i) => {
|
|
cb.addEventListener('change', () => { pendingSteps[i].required = cb.checked; });
|
|
});
|
|
list.querySelectorAll('.step-del').forEach((btn, i) => {
|
|
btn.addEventListener('click', () => { pendingSteps.splice(i, 1); 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', () => {
|
|
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,
|
|
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(); }
|
|
});
|
|
|
|
// ── 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 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.textContent = 'Saving…';
|
|
|
|
const payload = {
|
|
name,
|
|
description: d.querySelector('#p-desc').value.trim(),
|
|
category: d.querySelector('#p-cat').value.trim(),
|
|
default_priority: d.querySelector('#p-pri').value,
|
|
default_duration_hours: d.querySelector('#p-dur').value ? +d.querySelector('#p-dur').value : null,
|
|
default_instructions: d.querySelector('#p-instr').value.trim(),
|
|
active: isEdit ? d.querySelector('#p-active').checked : true,
|
|
};
|
|
|
|
try {
|
|
let savedProfile;
|
|
if (isEdit) {
|
|
savedProfile = await api.put(`/profiles/${profile.id}`, payload);
|
|
} else {
|
|
savedProfile = await api.post('/profiles', payload);
|
|
}
|
|
|
|
const savedId = savedProfile.id;
|
|
const origIds = new Set((profile?.steps || []).map(s => s.id));
|
|
|
|
// 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 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,
|
|
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 {
|
|
await api.post(`/profiles/${savedId}/steps`, stepPayload);
|
|
}
|
|
}
|
|
|
|
d.close();
|
|
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';
|
|
}
|
|
});
|
|
|
|
d.showModal();
|
|
d.querySelector('#p-name').focus();
|
|
}
|
|
|
|
#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" 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' : ''}> 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, '"'); }
|
|
}
|
|
|
|
customElements.define('profile-form', ProfileForm);
|