129 lines
6.6 KiB
JavaScript
129 lines
6.6 KiB
JavaScript
import { api } from '../../lib/api.mjs';
|
|
import './vehicle-form.mjs';
|
|
|
|
class VehicleList extends HTMLElement {
|
|
#vehicles = [];
|
|
#loading = true;
|
|
#search = '';
|
|
|
|
connectedCallback() {
|
|
if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
|
|
this.#load();
|
|
}
|
|
|
|
async #load() {
|
|
this.#loading = true;
|
|
this.#render();
|
|
try {
|
|
this.#vehicles = await api.get(`/registry/vehicles?all=1${this.#search ? '&search=' + encodeURIComponent(this.#search) : ''}`) || [];
|
|
} catch { this.#vehicles = []; }
|
|
this.#loading = false;
|
|
this.#render();
|
|
}
|
|
|
|
async #deactivate(id) {
|
|
try {
|
|
await api.delete(`/registry/vehicles/${id}`);
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Vehicle deactivated', type: 'success' } }));
|
|
await this.#load();
|
|
} catch (err) {
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
|
}
|
|
}
|
|
|
|
#render() {
|
|
const s = this.shadowRoot;
|
|
s.innerHTML = `
|
|
<style>
|
|
:host { display: block; }
|
|
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; }
|
|
h1 { font-size: 1.2rem; font-weight: 700; color: var(--text); }
|
|
.toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
|
|
.search-input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .75rem; font-size: .875rem; background: var(--surface); color: var(--text); width: 200px; }
|
|
.search-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10,126,164,.12); }
|
|
.btn-primary { display: inline-flex; align-items: center; gap: .35rem; background: var(--teal); color: #fff; border: none; border-radius: var(--radius); padding: .5rem 1rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
|
|
.btn-primary:hover { opacity: .88; }
|
|
.list { display: flex; flex-direction: column; gap: .5rem; }
|
|
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .875rem 1rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-sm); }
|
|
.card:hover { box-shadow: var(--shadow-md); }
|
|
.vehicle-icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--teal); flex-shrink: 0; }
|
|
.info { flex: 1; min-width: 0; }
|
|
.unit-num { font-weight: 700; color: var(--text); font-family: monospace; font-size: .938rem; }
|
|
.meta { font-size: .813rem; color: var(--text-muted); margin-top: .15rem; display: flex; gap: .75rem; flex-wrap: wrap; }
|
|
.status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
|
|
.status-active { background: #DCFCE7; color: #15803D; }
|
|
.status-inactive { background: var(--surface-2); color: var(--text-muted); }
|
|
.actions { display: flex; gap: .35rem; flex-shrink: 0; }
|
|
.icon-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .35rem .5rem; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; transition: background .15s; }
|
|
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
|
|
.icon-btn.danger:hover { background: #FEF2F2; color: var(--danger); border-color: var(--danger); }
|
|
.empty { text-align: center; padding: 3rem; color: var(--text-muted); }
|
|
</style>
|
|
|
|
<div class="page-header">
|
|
<h1>Vehicles</h1>
|
|
<div class="toolbar">
|
|
<input class="search-input" id="search" placeholder="Search vehicles…" value="${this.#esc(this.#search)}">
|
|
<button class="btn-primary" id="new-btn">
|
|
<i data-lucide="plus" style="width:14px;height:14px"></i> Add Vehicle
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
${this.#loading ? '<ui-spinner></ui-spinner>' :
|
|
this.#vehicles.length === 0
|
|
? `<div class="empty">
|
|
<i data-lucide="truck" style="width:32px;height:32px;opacity:.3;display:block;margin:0 auto .5rem"></i>
|
|
No vehicles found
|
|
</div>`
|
|
: `<div class="list">
|
|
${this.#vehicles.map(v => `
|
|
<div class="card">
|
|
<div class="vehicle-icon"><i data-lucide="truck" style="width:18px;height:18px"></i></div>
|
|
<div class="info">
|
|
<div class="unit-num">${this.#esc(v.unit_number)}</div>
|
|
<div class="meta">
|
|
${v.description ? `<span>${this.#esc(v.description)}</span>` : ''}
|
|
${v.vehicle_type ? `<span>${this.#esc(v.vehicle_type)}</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<span class="status-badge ${v.active ? 'status-active' : 'status-inactive'}">${v.active ? 'Active' : 'Inactive'}</span>
|
|
<div class="actions">
|
|
<button class="icon-btn" data-edit="${v.id}" title="Edit">
|
|
<i data-lucide="pencil" style="width:14px;height:14px"></i>
|
|
</button>
|
|
${v.active ? `<button class="icon-btn danger" data-deactivate="${v.id}" title="Deactivate">
|
|
<i data-lucide="ban" style="width:14px;height:14px"></i>
|
|
</button>` : ''}
|
|
</div>
|
|
</div>`).join('')}
|
|
</div>`}
|
|
|
|
<vehicle-form id="vehicle-form"></vehicle-form>`;
|
|
|
|
if (window.lucide) lucide.createIcons({ nodes: [s] });
|
|
|
|
const searchEl = s.querySelector('#search');
|
|
let debounce;
|
|
searchEl.addEventListener('input', () => {
|
|
clearTimeout(debounce);
|
|
debounce = setTimeout(() => { this.#search = searchEl.value; this.#load(); }, 350);
|
|
});
|
|
|
|
s.querySelector('#new-btn').addEventListener('click', () =>
|
|
s.querySelector('#vehicle-form').open(null, () => this.#load()));
|
|
|
|
s.querySelectorAll('[data-edit]').forEach(btn => {
|
|
const v = this.#vehicles.find(x => x.id === +btn.dataset.edit);
|
|
btn.addEventListener('click', () => s.querySelector('#vehicle-form').open(v, () => this.#load()));
|
|
});
|
|
|
|
s.querySelectorAll('[data-deactivate]').forEach(btn =>
|
|
btn.addEventListener('click', () => this.#deactivate(+btn.dataset.deactivate)));
|
|
}
|
|
|
|
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
|
}
|
|
|
|
customElements.define('vehicle-list', VehicleList);
|