144 lines
7.3 KiB
JavaScript
144 lines
7.3 KiB
JavaScript
import { api } from '../../lib/api.mjs';
|
|
import './people-form.mjs';
|
|
|
|
class PeopleList extends HTMLElement {
|
|
#people = [];
|
|
#loading = true;
|
|
#search = '';
|
|
|
|
connectedCallback() {
|
|
if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
|
|
this.#load();
|
|
}
|
|
|
|
async #load() {
|
|
this.#loading = true;
|
|
this.#render();
|
|
try {
|
|
this.#people = await api.get(`/registry/people?all=1${this.#search ? '&search=' + encodeURIComponent(this.#search) : ''}`) || [];
|
|
} catch { this.#people = []; }
|
|
this.#loading = false;
|
|
this.#render();
|
|
}
|
|
|
|
async #deactivate(id) {
|
|
try {
|
|
await api.delete(`/registry/people/${id}`);
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Person deactivated', type: 'success' } }));
|
|
await this.#load();
|
|
} catch (err) {
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
|
}
|
|
}
|
|
|
|
#initials(name) {
|
|
return (name || '?').split(' ').slice(0,2).map(w => w[0]).join('').toUpperCase();
|
|
}
|
|
|
|
#avatarColor(name) {
|
|
const colors = ['#0A7EA4','#8B5CF6','#E07B39','#1D9D6C','#D97706','#C0392B','#64748B'];
|
|
let h = 0;
|
|
for (const c of name || '') h = (h * 31 + c.charCodeAt(0)) & 0xffffffff;
|
|
return colors[Math.abs(h) % colors.length];
|
|
}
|
|
|
|
#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; }
|
|
.people-grid { display: flex; flex-direction: column; gap: .5rem; }
|
|
.person-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); transition: box-shadow .15s; }
|
|
.person-card:hover { box-shadow: var(--shadow-md); }
|
|
.avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; color: #fff; flex-shrink: 0; }
|
|
.person-info { flex: 1; min-width: 0; }
|
|
.person-name { font-weight: 600; color: var(--text); font-size: .938rem; }
|
|
.person-meta { font-size: .813rem; color: var(--text-muted); margin-top: .15rem; display: flex; gap: .75rem; flex-wrap: wrap; }
|
|
.person-meta span { display: flex; align-items: center; gap: .25rem; }
|
|
.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); }
|
|
@media (max-width: 768px) { .person-meta { display: none; } }
|
|
</style>
|
|
|
|
<div class="page-header">
|
|
<h1>People</h1>
|
|
<div class="toolbar">
|
|
<input class="search-input" id="search" placeholder="Search people…" value="${this.#esc(this.#search)}">
|
|
<button class="btn-primary" id="new-btn">
|
|
<i data-lucide="user-plus" style="width:14px;height:14px"></i> Add Person
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
${this.#loading ? '<ui-spinner></ui-spinner>' :
|
|
this.#people.length === 0
|
|
? `<div class="empty">
|
|
<i data-lucide="users" style="width:32px;height:32px;opacity:.3;display:block;margin:0 auto .5rem"></i>
|
|
No people found
|
|
</div>`
|
|
: `<div class="people-grid">
|
|
${this.#people.map(p => `
|
|
<div class="person-card">
|
|
<div class="avatar" style="background:${this.#avatarColor(p.name)}">${this.#initials(p.name)}</div>
|
|
<div class="person-info">
|
|
<div class="person-name">${this.#esc(p.name)}</div>
|
|
<div class="person-meta">
|
|
${p.role ? `<span><i data-lucide="briefcase" style="width:12px;height:12px"></i>${this.#esc(p.role)}</span>` : ''}
|
|
${p.phone ? `<span><i data-lucide="phone" style="width:12px;height:12px"></i>${this.#esc(p.phone)}</span>` : ''}
|
|
${p.email ? `<span><i data-lucide="mail" style="width:12px;height:12px"></i>${this.#esc(p.email)}</span>` : ''}
|
|
</div>
|
|
</div>
|
|
<span class="status-badge ${p.active ? 'status-active' : 'status-inactive'}">${p.active ? 'Active' : 'Inactive'}</span>
|
|
<div class="actions">
|
|
<button class="icon-btn" data-edit="${p.id}" title="Edit">
|
|
<i data-lucide="pencil" style="width:14px;height:14px"></i>
|
|
</button>
|
|
${p.active ? `<button class="icon-btn danger" data-deactivate="${p.id}" title="Deactivate">
|
|
<i data-lucide="user-x" style="width:14px;height:14px"></i>
|
|
</button>` : ''}
|
|
</div>
|
|
</div>`).join('')}
|
|
</div>`}
|
|
|
|
<people-form id="people-form"></people-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('#people-form').open(null, () => this.#load());
|
|
});
|
|
|
|
s.querySelectorAll('[data-edit]').forEach(btn => {
|
|
const p = this.#people.find(x => x.id === +btn.dataset.edit);
|
|
btn.addEventListener('click', () => s.querySelector('#people-form').open(p, () => 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('people-list', PeopleList);
|