67 lines
2.5 KiB
JavaScript
67 lines
2.5 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: #64748b; text-align: center; padding: 3rem; }
|
|
.grid { display: grid; gap: .75rem; }
|
|
.card {
|
|
background: #fff; border: 1px solid #e2ebf0;
|
|
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: 0 4px 12px rgba(0,0,0,.08); }
|
|
.wo-num { font-size: .75rem; color: #64748b; }
|
|
.title { font-weight: 600; }
|
|
.meta { font-size: .8rem; color: #64748b; }
|
|
.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:#e2e8f0; color:#475569; }
|
|
.assigned { background:#dbeafe; color:#1d4ed8; }
|
|
.scheduled { background:#fef3c7; color:#92400e; }
|
|
.in_progress { background:#d1fae5; color:#065f46; }
|
|
.pending_review { background:#ede9fe; color:#5b21b6; }
|
|
.closed { background:#f3f4f6; color:#6b7280; }
|
|
</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);
|