116 lines
4.8 KiB
JavaScript
116 lines
4.8 KiB
JavaScript
import { api } from '../lib/api.mjs';
|
|
|
|
class WoForm extends HTMLElement {
|
|
#woId = null;
|
|
#wo = null;
|
|
|
|
static get observedAttributes() { return ['wo-id']; }
|
|
attributeChangedCallback(_, __, val) { this.#woId = val ? +val : null; this.#load(); }
|
|
|
|
connectedCallback() {
|
|
this.attachShadow({ mode: 'open' });
|
|
this.#render();
|
|
if (this.#woId) this.#load();
|
|
}
|
|
|
|
async #load() {
|
|
if (!this.#woId) return;
|
|
this.#wo = await api.get(`/work-orders/${this.#woId}`);
|
|
this.#render();
|
|
}
|
|
|
|
#render() {
|
|
const wo = this.#wo ?? {};
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display: block; }
|
|
form { display: grid; gap: 1rem; }
|
|
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
|
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; color: #1a2e3b; }
|
|
input, select, textarea {
|
|
border: 1px solid #e2ebf0; border-radius: 8px;
|
|
padding: .5rem .75rem; font-size: .95rem; background: #fff; color: #1a2e3b;
|
|
}
|
|
input:focus, select:focus, textarea:focus { outline: none; border-color: #0a7ea4; }
|
|
textarea { resize: vertical; min-height: 80px; }
|
|
.actions { display: flex; gap: .75rem; justify-content: flex-end; }
|
|
button {
|
|
padding: .5rem 1.25rem; border: none; border-radius: 8px;
|
|
font-weight: 600; cursor: pointer;
|
|
}
|
|
.btn-primary { background: #0a7ea4; color: #fff; }
|
|
.btn-cancel { background: transparent; border: 1px solid #e2ebf0; color: #1a2e3b; }
|
|
.error { color: #c0392b; font-size: .85rem; }
|
|
</style>
|
|
<form>
|
|
<label>Title *<input name="title" required value="${wo.title || ''}"></label>
|
|
<div class="row">
|
|
<label>Priority
|
|
<select name="priority">
|
|
${['low','normal','high','urgent'].map(p =>
|
|
`<option value="${p}" ${wo.priority===p?'selected':''}>${p}</option>`).join('')}
|
|
</select>
|
|
</label>
|
|
<label>Site Name<input name="site_name" value="${wo.site_name || ''}"></label>
|
|
</div>
|
|
<label>Address<input name="address" value="${wo.address || ''}"></label>
|
|
<div class="row">
|
|
<label>Scheduled Start<input type="datetime-local" name="scheduled_start"
|
|
value="${wo.scheduled_start ? wo.scheduled_start.slice(0,16) : ''}"></label>
|
|
<label>Scheduled End<input type="datetime-local" name="scheduled_end"
|
|
value="${wo.scheduled_end ? wo.scheduled_end.slice(0,16) : ''}"></label>
|
|
</div>
|
|
<label>Description<textarea name="description">${wo.description || ''}</textarea></label>
|
|
<label>Instructions<textarea name="instructions">${wo.instructions || ''}</textarea></label>
|
|
<label>Access Notes<textarea name="access_notes">${wo.access_notes || ''}</textarea></label>
|
|
<div class="error" id="err"></div>
|
|
<div class="actions">
|
|
<button type="button" class="btn-cancel" id="cancel">Cancel</button>
|
|
<button type="submit" class="btn-primary">${this.#woId ? 'Save Changes' : 'Create Work Order'}</button>
|
|
</div>
|
|
</form>`;
|
|
|
|
this.shadowRoot.querySelector('#cancel').addEventListener('click', () =>
|
|
this.dispatchEvent(new CustomEvent('wo:cancel', { bubbles: true, composed: true })));
|
|
|
|
this.shadowRoot.querySelector('form').addEventListener('submit', async e => {
|
|
e.preventDefault();
|
|
|
|
// Read fields directly — Shadow DOM + FormData has unreliable browser support
|
|
const val = name => (this.shadowRoot.querySelector(`[name="${name}"]`)?.value ?? '').trim();
|
|
// datetime-local gives "YYYY-MM-DDTHH:MM"; convert to full ISO so Go can parse it
|
|
const dt = name => { const v = val(name); return v ? new Date(v).toISOString() : null; };
|
|
|
|
const body = {
|
|
title: val('title'),
|
|
priority: val('priority') || 'normal',
|
|
site_name: val('site_name'),
|
|
address: val('address'),
|
|
scheduled_start: dt('scheduled_start'),
|
|
scheduled_end: dt('scheduled_end'),
|
|
description: val('description'),
|
|
instructions: val('instructions'),
|
|
access_notes: val('access_notes'),
|
|
};
|
|
|
|
if (!body.title) {
|
|
this.shadowRoot.querySelector('#err').textContent = 'Title is required.';
|
|
return;
|
|
}
|
|
|
|
this.shadowRoot.querySelector('#err').textContent = '';
|
|
try {
|
|
const wo = this.#woId
|
|
? await api.put(`/work-orders/${this.#woId}`, body)
|
|
: await api.post('/work-orders', body);
|
|
this.dispatchEvent(new CustomEvent('wo:saved',
|
|
{ detail: { wo }, bubbles: true, composed: true }));
|
|
} catch (err) {
|
|
this.shadowRoot.querySelector('#err').textContent = err.message;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define('wo-form', WoForm);
|