fix: template literal quotes in fetch calls; a11y roles on drag elements
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user