117 lines
6.1 KiB
JavaScript
117 lines
6.1 KiB
JavaScript
import { api } from '../../lib/api.mjs';
|
|
|
|
class PeopleForm extends HTMLElement {
|
|
#onSave = null;
|
|
|
|
connectedCallback() {
|
|
if (!this.shadowRoot) {
|
|
this.attachShadow({ mode: 'open' });
|
|
this.shadowRoot.innerHTML = `<style>:host{display:block}</style><dialog></dialog>`;
|
|
}
|
|
}
|
|
|
|
open(person, onSave) {
|
|
this.#onSave = onSave;
|
|
const isEdit = !!person;
|
|
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: 440px; max-width: 95vw; background: var(--surface); color: var(--text); }
|
|
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); }
|
|
.dlg-title { font-size: 1rem; font-weight: 700; }
|
|
.dlg-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: .25rem; display: flex; }
|
|
form { padding: 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
|
|
.field-label { font-size: .813rem; font-weight: 600; color: var(--text); display: block; margin-bottom: .3rem; }
|
|
.field-input, .field-select { 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; }
|
|
.field-input:focus, .field-select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10,126,164,.12); }
|
|
.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; }
|
|
.dlg-footer { padding: .875rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem; }
|
|
.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; }
|
|
</style>
|
|
<div class="dlg-header">
|
|
<span class="dlg-title">${isEdit ? 'Edit Person' : 'Add Person'}</span>
|
|
<button class="dlg-close" id="dlg-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
|
|
</div>
|
|
<form id="person-form" novalidate>
|
|
<div>
|
|
<label class="field-label" for="p-name">Name *</label>
|
|
<input class="field-input" id="p-name" type="text" value="${this.#esc(person?.name || '')}" placeholder="Full name" required maxlength="100">
|
|
</div>
|
|
<div>
|
|
<label class="field-label" for="p-role">Role / Title</label>
|
|
<input class="field-input" id="p-role" type="text" value="${this.#esc(person?.role || '')}" placeholder="e.g. Technician, Foreman" maxlength="100">
|
|
</div>
|
|
<div class="row-2">
|
|
<div>
|
|
<label class="field-label" for="p-email">Email</label>
|
|
<input class="field-input" id="p-email" type="email" value="${this.#esc(person?.email || '')}" placeholder="email@example.com" maxlength="200">
|
|
</div>
|
|
<div>
|
|
<label class="field-label" for="p-phone">Phone</label>
|
|
<input class="field-input" id="p-phone" type="tel" value="${this.#esc(person?.phone || '')}" placeholder="(555) 000-0000" maxlength="30">
|
|
</div>
|
|
</div>
|
|
${isEdit ? `
|
|
<div class="toggle-row">
|
|
<span class="toggle-label">Active</span>
|
|
<input type="checkbox" id="p-active" ${person.active ? 'checked' : ''}>
|
|
</div>` : ''}
|
|
<div class="error-msg" id="form-error"></div>
|
|
</form>
|
|
<div class="dlg-footer">
|
|
<button class="btn-ghost" id="dlg-cancel">Cancel</button>
|
|
<button class="btn-primary" id="dlg-save">${isEdit ? 'Save Changes' : 'Add Person'}</button>
|
|
</div>`;
|
|
|
|
if (window.lucide) lucide.createIcons({ nodes: [d] });
|
|
|
|
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,
|
|
role: d.querySelector('#p-role').value.trim(),
|
|
email: d.querySelector('#p-email').value.trim(),
|
|
phone: d.querySelector('#p-phone').value.trim(),
|
|
active: isEdit ? d.querySelector('#p-active').checked : true,
|
|
};
|
|
|
|
try {
|
|
if (isEdit) await api.put(`/registry/people/${person.id}`, payload);
|
|
else await api.post('/registry/people', payload);
|
|
d.close();
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: isEdit ? 'Person updated' : 'Person added', type: 'success' } }));
|
|
this.#onSave?.();
|
|
} catch (err) {
|
|
errEl.textContent = err.message;
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = isEdit ? 'Save Changes' : 'Add Person';
|
|
}
|
|
});
|
|
|
|
d.showModal();
|
|
d.querySelector('#p-name').focus();
|
|
}
|
|
|
|
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
|
}
|
|
|
|
customElements.define('people-form', PeopleForm);
|