TBNilles/workorders
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Lucide icon rendering by replacing nodes with root across components and fix unintended character encoding issues in placeholders and text.

Browse Source
This commit is contained in:
Thomas Nilles
2026-05-17 17:30:04 -04:00
parent 17e05cb61d
commit 309f19520b
27 changed files with 694 additions and 1622 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/work-orders/wo-form.mjs
+9 -9
View File
@@ -1,4 +1,4 @@
import { api } from '../../lib/api.mjs';
import { api } from '../../lib/api.mjs';
import { toLocalDatetime } from '../../lib/format.mjs';
const STATUSES = ['draft','assigned','scheduled','in_progress','pending_review','closed'];
@@ -30,7 +30,7 @@ class WoForm extends HTMLElement {
const s = this.shadowRoot;
s.innerHTML = `<style>${this.#css()}</style>${this.#html(wo, isNew)}`;
this.#bind();
if (window.lucide) lucide.createIcons({ nodes: [s] });
if (window.lucide) lucide.createIcons({ root: s });
}
#css() { return `
@@ -97,14 +97,14 @@ class WoForm extends HTMLElement {
</button>` : ''}
</div>
<label>Title *<input name="title" required value="${v('title')}" placeholder="Brief description of the work"></label>
<label>Description<textarea name="description" rows="3" placeholder="What needs to be done…">${v('description')}</textarea></label>
<label>Instructions<textarea name="instructions" rows="5" placeholder="Step-by-step instructions for the field crew…">${v('instructions')}</textarea></label>
<label>Description<textarea name="description" rows="3" placeholder="What needs to be done…">${v('description')}</textarea></label>
<label>Instructions<textarea name="instructions" rows="5" placeholder="Step-by-step instructions for the field crew…">${v('instructions')}</textarea></label>
</div>
<div class="card">
<div class="card-title">Location</div>
<label>Site Name<input name="site_name" value="${v('site_name')}" placeholder="e.g. Downtown Office"></label>
<label>Address<input name="address" value="${v('address')}" placeholder="Street address"></label>
<label>Access Notes<textarea name="access_notes" rows="2" placeholder="Gate codes, road conditions, parking info…">${v('access_notes')}</textarea></label>
<label>Access Notes<textarea name="access_notes" rows="2" placeholder="Gate codes, road conditions, parking info…">${v('access_notes')}</textarea></label>
</div>
</div>
@@ -164,8 +164,8 @@ class WoForm extends HTMLElement {
<button class="lp-close" id="lp-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
</div>
<div class="lp-body">
<input class="lp-search" id="lp-search" placeholder="Search profiles…" autocomplete="off">
<div class="lp-list" id="lp-list"><div class="lp-empty">Loading…</div></div>
<input class="lp-search" id="lp-search" placeholder="Search profiles…" autocomplete="off">
<div class="lp-list" id="lp-list"><div class="lp-empty">Loading…</div></div>
</div>
<div class="lp-footer">
<button class="btn btn-ghost" id="lp-cancel">Cancel</button>
@@ -262,7 +262,7 @@ class WoForm extends HTMLElement {
listEl.innerHTML = items.map(p => `
<div class="lp-item${selectedProfile?.id === p.id ? ' selected' : ''}" data-id="${p.id}">
<div class="lp-item-name">${this.#esc(p.name)}</div>
<div class="lp-item-meta">${p.category ? `${p.category} · ` : ''}${p.step_count} step${p.step_count !== 1 ? 's' : ''} · ${p.default_priority} priority${p.default_duration_hours ? ` · ${p.default_duration_hours}h` : ''}</div>
<div class="lp-item-meta">${p.category ? `${p.category} · ` : ''}${p.step_count} step${p.step_count !== 1 ? 's' : ''} · ${p.default_priority} priority${p.default_duration_hours ? ` · ${p.default_duration_hours}h` : ''}</div>
</div>`).join('');
listEl.querySelectorAll('.lp-item').forEach(item => {
item.addEventListener('click', () => {
@@ -277,7 +277,7 @@ class WoForm extends HTMLElement {
selectedProfile = null;
confirmBtn.disabled = true;
searchEl.value = '';
listEl.innerHTML = '<div class="lp-empty">Loading…</div>';
listEl.innerHTML = '<div class="lp-empty">Loading…</div>';
dialog.showModal();
try {
allProfiles = await api.get('/profiles') || [];