67 lines
2.8 KiB
JavaScript
67 lines
2.8 KiB
JavaScript
import { api } from '../lib/api.mjs';
|
|
|
|
class WoList extends HTMLElement {
|
|
#data = [];
|
|
|
|
connectedCallback() {
|
|
this.attachShadow({ mode: 'open' });
|
|
this.#load();
|
|
}
|
|
|
|
async #load() {
|
|
const status = this.getAttribute('filter-status') || '';
|
|
this.#data = await api.get(`/work-orders?status=${status}`) ?? [];
|
|
this.#render();
|
|
}
|
|
|
|
refresh() { this.#load(); }
|
|
|
|
#render() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display: block; }
|
|
.empty { color: var(--muted); text-align: center; padding: 3rem; }
|
|
.grid { display: grid; gap: .75rem; }
|
|
.card {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 8px; padding: 1rem 1.25rem;
|
|
cursor: pointer; display: grid;
|
|
grid-template-columns: 1fr auto; gap: .25rem 1rem;
|
|
transition: box-shadow .15s;
|
|
}
|
|
.card:hover { box-shadow: var(--shadow); }
|
|
.wo-num { font-size: .75rem; color: var(--muted); }
|
|
.title { font-weight: 600; color: var(--text); }
|
|
.meta { font-size: .8rem; color: var(--muted); }
|
|
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px;
|
|
font-size:.7rem; font-weight:700; text-transform:uppercase;
|
|
align-self: start; margin-top:.25rem; }
|
|
.draft { background:var(--badge-draft-bg); color:var(--badge-draft-text); }
|
|
.assigned { background:var(--badge-assigned-bg); color:var(--badge-assigned-text); }
|
|
.scheduled { background:var(--badge-scheduled-bg); color:var(--badge-scheduled-text); }
|
|
.in_progress { background:var(--badge-in_progress-bg); color:var(--badge-in_progress-text); }
|
|
.pending_review { background:var(--badge-pending_review-bg); color:var(--badge-pending_review-text); }
|
|
.closed { background:var(--badge-closed-bg); color:var(--badge-closed-text); }
|
|
</style>
|
|
${this.#data.length === 0
|
|
? '<div class="empty">No work orders found.</div>'
|
|
: `<div class="grid">${this.#data.map(wo => `
|
|
<div class="card" data-id="${wo.id}">
|
|
<div>
|
|
<div class="wo-num">${wo.wo_number}</div>
|
|
<div class="title">${wo.title}</div>
|
|
<div class="meta">${wo.site_name || '—'} · ${wo.steps_done}/${wo.step_count} steps</div>
|
|
</div>
|
|
<span class="badge ${wo.status}">${wo.status.replace('_',' ')}</span>
|
|
</div>`).join('')}
|
|
</div>`}`;
|
|
|
|
this.shadowRoot.querySelectorAll('.card').forEach(c =>
|
|
c.addEventListener('click', () =>
|
|
this.dispatchEvent(new CustomEvent('wo:select',
|
|
{ detail: { id: +c.dataset.id }, bubbles: true, composed: true }))));
|
|
}
|
|
}
|
|
|
|
customElements.define('wo-list', WoList);
|