144 lines
7.5 KiB
JavaScript
144 lines
7.5 KiB
JavaScript
import { api } from '../../lib/api.mjs';
|
|
import './profile-form.mjs';
|
|
|
|
const PRIORITY_COLORS = { low: '#64748B', normal: '#0A7EA4', high: '#E07B39', urgent: '#C0392B' };
|
|
|
|
class ProfileList 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(`/profiles?all=1${this.#search ? '&search=' + encodeURIComponent(this.#search) : ''}`) || [];
|
|
} catch { this.#items = []; }
|
|
this.#loading = false;
|
|
this.#render();
|
|
}
|
|
|
|
async #deactivate(id) {
|
|
try {
|
|
await api.delete(`/profiles/${id}`);
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: 'Profile 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:220px; }
|
|
.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); transition:box-shadow .15s; }
|
|
.card:hover { box-shadow:var(--shadow-md); }
|
|
.profile-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; }
|
|
.profile-name { font-weight:600; color:var(--text); font-size:.938rem; }
|
|
.meta { font-size:.813rem; color:var(--text-muted); margin-top:.15rem; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
|
|
.cat-pill { background:var(--surface-2); border-radius:var(--radius-sm); padding:.1rem .5rem; font-size:.75rem; font-weight:600; color:var(--text-muted); }
|
|
.step-count { font-size:.75rem; color:var(--text-muted); }
|
|
.pri-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
|
|
.status-badge { display:inline-flex; 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>Work Order Profiles</h1>
|
|
<div class="toolbar">
|
|
<input class="search-input" id="search" placeholder="Search profiles…" value="${this.#esc(this.#search)}">
|
|
<button class="btn-primary" id="new-btn">
|
|
<i data-lucide="plus" style="width:14px;height:14px"></i> New Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
${this.#loading ? '<ui-spinner></ui-spinner>' :
|
|
this.#items.length === 0
|
|
? `<div class="empty">
|
|
<i data-lucide="layout-template" style="width:32px;height:32px;opacity:.3;display:block;margin:0 auto .5rem"></i>
|
|
No profiles found
|
|
</div>`
|
|
: `<div class="list">
|
|
${this.#items.map(p => `
|
|
<div class="card">
|
|
<div class="profile-icon"><i data-lucide="layout-template" style="width:18px;height:18px"></i></div>
|
|
<div class="info">
|
|
<div class="profile-name">${this.#esc(p.name)}</div>
|
|
<div class="meta">
|
|
${p.category ? `<span class="cat-pill">${this.#esc(p.category)}</span>` : ''}
|
|
<span class="pri-dot" style="background:${PRIORITY_COLORS[p.default_priority] || PRIORITY_COLORS.normal}"></span>
|
|
<span>${p.default_priority}</span>
|
|
<span class="step-count"><i data-lucide="list-checks" style="width:11px;height:11px;vertical-align:middle"></i> ${p.step_count} step${p.step_count !== 1 ? 's' : ''}</span>
|
|
${p.default_duration_hours ? `<span>⏱ ${p.default_duration_hours}h</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="ban" style="width:14px;height:14px"></i>
|
|
</button>` : ''}
|
|
</div>
|
|
</div>`).join('')}
|
|
</div>`}
|
|
|
|
<profile-form id="profile-form"></profile-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('#profile-form').open(null, () => this.#load()));
|
|
|
|
s.querySelectorAll('[data-edit]').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const id = +btn.dataset.edit;
|
|
try {
|
|
const full = await api.get(`/profiles/${id}`);
|
|
s.querySelector('#profile-form').open(full, () => this.#load());
|
|
} catch (err) {
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
|
}
|
|
});
|
|
});
|
|
|
|
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('profile-list', ProfileList);
|