fix: template literal quotes in fetch calls; a11y roles on drag elements

This commit is contained in:
Falkan
2026-03-17 20:52:44 -04:00
parent 3598a2dd25
commit 5ed392a2d4

View File

@@ -115,7 +115,7 @@
dragGroupId = null; dragGroupId = null;
dragOverGroupId = null; dragOverGroupId = null;
// Persist // Persist
fetch('${api}/order', { fetch(`${api}/order`, {
method: 'PUT', method: 'PUT',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ groups: groups.map((g) => g.id) }) body: JSON.stringify({ groups: groups.map((g) => g.id) })
@@ -169,7 +169,7 @@
// Build ordered IDs for this group // Build ordered IDs for this group
const groupKey = groupId ?? 'null'; const groupKey = groupId ?? 'null';
const groupUnitIds = units.filter((u) => (u.group ?? null) === groupId).map((u) => u.id); const groupUnitIds = units.filter((u) => (u.group ?? null) === groupId).map((u) => u.id);
fetch('${api}/order', { fetch(`${api}/order`, {
method: 'PUT', method: 'PUT',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ units: { [groupKey]: groupUnitIds } }) body: JSON.stringify({ units: { [groupKey]: groupUnitIds } })
@@ -185,8 +185,8 @@
// ── Load data ──────────────────────────────────────────────────────────────── // ── Load data ────────────────────────────────────────────────────────────────
async function loadData() { async function loadData() {
const [res, gres] = await Promise.all([ const [res, gres] = await Promise.all([
fetch('${api}/units'), fetch(`${api}/units`),
fetch('${api}/groups') fetch(`${api}/groups`)
]); ]);
if (!res.ok) return; if (!res.ok) return;
const units: Unit[] = await res.json(); const units: Unit[] = await res.json();
@@ -291,7 +291,7 @@
} }
try { try {
const res = unitFormNew const res = unitFormNew
? await fetch('${api}/units', { ? await fetch(`${api}/units`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(unitForm) body: JSON.stringify(unitForm)
@@ -322,7 +322,7 @@
} }
try { try {
const res = groupFormNew const res = groupFormNew
? await fetch('${api}/groups', { ? await fetch(`${api}/groups`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(groupForm) body: JSON.stringify(groupForm)
@@ -459,7 +459,7 @@
} }
try { try {
const res = unitFormNew const res = unitFormNew
? await fetch('${api}/units', { ? await fetch(`${api}/units`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(unitForm) body: JSON.stringify(unitForm)
@@ -509,7 +509,7 @@
} }
try { try {
const res = groupFormNew const res = groupFormNew
? await fetch('${api}/groups', { ? await fetch(`${api}/groups`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(groupForm) body: JSON.stringify(groupForm)
@@ -666,6 +666,7 @@
<div <div
class="tree-group" class="tree-group"
class:drag-over-group={dragOverGroupId === group.id} class:drag-over-group={dragOverGroupId === group.id}
role="listitem"
draggable="true" draggable="true"
ondragstart={(e) => onGroupDragStart(e, group.id)} ondragstart={(e) => onGroupDragStart(e, group.id)}
ondragover={(e) => onGroupDragOver(e, group.id)} ondragover={(e) => onGroupDragOver(e, group.id)}
@@ -713,6 +714,7 @@
class="tree-unit-row" class="tree-unit-row"
class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'} class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}
class:drag-over-unit={dragOverUnitId === unit.id} class:drag-over-unit={dragOverUnitId === unit.id}
role="listitem"
draggable="false" draggable="false"
ondragover={(e) => onUnitDragOver(e, unit.id, unit.group ?? null)} ondragover={(e) => onUnitDragOver(e, unit.id, unit.group ?? null)}
ondragleave={() => onUnitDragLeave(unit.id)} ondragleave={() => onUnitDragLeave(unit.id)}
@@ -721,6 +723,8 @@
<!-- Drag handle --> <!-- Drag handle -->
<span <span
class="drag-handle" class="drag-handle"
role="button"
tabindex="0"
draggable="true" draggable="true"
ondragstart={(e) => onUnitDragStart(e, unit.id, unit.group ?? null)} ondragstart={(e) => onUnitDragStart(e, unit.id, unit.group ?? null)}
ondragend={onUnitDragEnd} ondragend={onUnitDragEnd}
@@ -769,12 +773,15 @@
class="tree-unit-row" class="tree-unit-row"
class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'} class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}
class:drag-over-unit={dragOverUnitId === unit.id} class:drag-over-unit={dragOverUnitId === unit.id}
role="listitem"
ondragover={(e) => onUnitDragOver(e, unit.id, null)} ondragover={(e) => onUnitDragOver(e, unit.id, null)}
ondragleave={() => onUnitDragLeave(unit.id)} ondragleave={() => onUnitDragLeave(unit.id)}
ondrop={(e) => onUnitDrop(e, unit.id, null)} ondrop={(e) => onUnitDrop(e, unit.id, null)}
> >
<span <span
class="drag-handle" class="drag-handle"
role="button"
tabindex="0"
draggable="true" draggable="true"
ondragstart={(e) => onUnitDragStart(e, unit.id, null)} ondragstart={(e) => onUnitDragStart(e, unit.id, null)}
ondragend={onUnitDragEnd} ondragend={onUnitDragEnd}