import { api } from '../../lib/api.mjs'; import './material-form.mjs'; class MaterialList 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/materials?all=1${this.#search ? '&search=' + encodeURIComponent(this.#search) : ''}`) || []; } catch { this.#items = []; } this.#loading = false; this.#render(); } async #deactivate(id) { try { await api.delete(`/registry/materials/${id}`); window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Material 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 materials found

` : `

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

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

${m.unit ? `${this.#esc(m.unit)}` : ''} ${m.part_number ? `#${this.#esc(m.part_number)}` : ''}

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

${m.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('#material-form').open(null, () => this.#load())); s.querySelectorAll('[data-edit]').forEach(btn => { const m = this.#items.find(x => x.id === +btn.dataset.edit); btn.addEventListener('click', () => s.querySelector('#material-form').open(m, () => 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('material-list', MaterialList);