import { api } from '../../lib/api.mjs'; import './equipment-form.mjs'; class EquipmentList extends HTMLElement { #items = []; #loading = true; #search = ''; connectedCallback() { if (!this.shadowRoot) this.attachShadow({ mode: 'open' }); this.#load(); } async #load() { this.#loading = true; this.#render(); try { this.#items = await api.get(`/registry/equipment?all=1${this.#search ? '&search=' + encodeURIComponent(this.#search) : ''}`) || []; } catch { this.#items = []; } this.#loading = false; this.#render(); } async #deactivate(id) { try { await api.delete(`/registry/equipment/${id}`); window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Equipment 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 = ` ${this.#loading ? '' : this.#items.length === 0 ? `

No equipment found

` : `

${this.#items.map(eq => `

${this.#esc(eq.name)}

${eq.asset_tag ? `${this.#esc(eq.asset_tag)}` : ''} ${eq.category ? `${this.#esc(eq.category)}` : ''}

${eq.active ? 'Active' : 'Inactive'}

${eq.active ? `` : ''}

`).join('')}

`} `; if (window.lucide) lucide.createIcons({ root: 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('#equipment-form').open(null, () => this.#load())); s.querySelectorAll('[data-edit]').forEach(btn => { const eq = this.#items.find(x => x.id === +btn.dataset.edit); btn.addEventListener('click', () => s.querySelector('#equipment-form').open(eq, () => this.#load())); }); s.querySelectorAll('[data-deactivate]').forEach(btn => btn.addEventListener('click', () => this.#deactivate(+btn.dataset.deactivate))); } #esc(s) { return (s || '').replace(/&/g,'&').replace(//g,'>'); } } customElements.define('equipment-list', EquipmentList);