Versie 0.2.0

client/ui/label-combobox.js

@@ -0,0 +1,83 @@
+// Generated, do not edit. sha256:9856275bb06c64defb28cac958ae6f3ea1416a635a680ca0739edd9bad0379ee
+import * as dialog from './dialog.js';
+import { esc } from './escape.js';
+
+let _seq = 0;
+
+export function labelComboMarkup(fieldKey, currentId) {
+  const id = currentId == null ? '' : currentId;
+  const dl = `lc-dl-${++_seq}`;
+  return `<span class="label-combo" data-field="${esc(fieldKey)}" data-label-combo>
+    <input type="hidden" data-label-id value="${esc(id)}">
+    <input class="input label-combo-input" data-label-input list="${dl}" placeholder="label…" autocomplete="off">
+    <datalist id="${dl}"></datalist>
+    <button type="button" class="label-combo-btn" data-label-add title="Label maken/koppelen">+</button>
+    <button type="button" class="label-combo-btn" data-label-del title="Label ontkoppelen">−</button>
+  </span>`;
+}
+
+export function labelComboRead(host) {
+  if (!host) return null;
+  const v = host.querySelector('[data-label-id]').value;
+  return v === '' ? null : Number(v);
+}
+
+export function labelComboMount(host, labelApi, onChange) {
+  const hidden = host.querySelector('[data-label-id]');
+  const input = host.querySelector('[data-label-input]');
+  const datalist = host.querySelector('datalist');
+  const addBtn = host.querySelector('[data-label-add]');
+  const delBtn = host.querySelector('[data-label-del]');
+
+  let cache = [];
+  const byName = name => {
+    const n = name.trim().toLowerCase();
+    return cache.find(l => l.name.toLowerCase() === n) || null;
+  };
+
+  function refreshList() {
+    datalist.innerHTML = cache.map(l => `<option value="${esc(l.name)}"></option>`).join('');
+  }
+  function setId(id) {
+    hidden.value = id == null ? '' : id;
+    const cur = cache.find(l => String(l.id) === String(id));
+    input.value = cur ? cur.name : '';
+    delBtn.disabled = !cur;
+  }
+  async function load() {
+    cache = (await labelApi.listLabels()) || [];
+    refreshList();
+  }
+
+  input.onfocus = () => { input.value = ''; load(); };
+  input.onblur = () => setTimeout(() => {
+    if (document.activeElement === input) return;
+    if (!input.value.trim()) {
+      const cur = cache.find(l => String(l.id) === String(hidden.value));
+      input.value = cur ? cur.name : '';
+    }
+  }, 150);
+
+  input.onchange = () => {
+    const name = input.value.trim();
+    if (!name) { setId(''); onChange?.(null); return; }
+    const m = byName(name);
+    if (m) { setId(m.id); onChange?.(m.id); }
+    else { hidden.value = ''; delBtn.disabled = true; }
+  };
+
+  addBtn.onclick = async () => {
+    const name = input.value.trim();
+    if (!name) { input.focus(); return; }
+    const m = byName(name);
+    if (m) { setId(m.id); onChange?.(m.id); return; }
+    try {
+      const id = await labelApi.createLabel({ name });
+      await load(); setId(id); onChange?.(id);
+    } catch (e) { dialog.alert({ message: e.message }); }
+  };
+
+  delBtn.onclick = () => { setId(''); onChange?.(null); };
+
+  return load().then(() => setId(hidden.value || ''));
+}