Add checklist editing: rename, edit items, reorder with arrows
Deploy to LXC / deploy (push) Successful in 20s
Deploy to LXC / deploy (push) Successful in 20s
Templates page (/checklists): - Edit template name/description inline (pencil icon) - Edit item text and unit inline (pencil icon on hover) - Move items up/down with arrow buttons - Reorder swaps sort order values in the database Device checklists: - Rename checklist title inline (pencil icon) - Edit item text and unit inline (pencil icon on hover) - Move items up/down with arrow buttons - All item types (checkbox and input) support editing Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -351,6 +351,59 @@ export const actions: Actions = {
|
||||
return { valueSaved: true };
|
||||
},
|
||||
|
||||
editChecklistItem: async ({ request }) => {
|
||||
const formData = await request.formData();
|
||||
const itemId = formData.get('itemId') as string;
|
||||
const text = (formData.get('text') as string)?.trim();
|
||||
const unit = (formData.get('unit') as string)?.trim();
|
||||
if (!text) return fail(400, { error: 'Item text is required' });
|
||||
|
||||
await db
|
||||
.update(checklistItems)
|
||||
.set({ text, unit: unit || null })
|
||||
.where(eq(checklistItems.id, itemId));
|
||||
return { itemEdited: true };
|
||||
},
|
||||
|
||||
moveChecklistItem: async ({ request }) => {
|
||||
const formData = await request.formData();
|
||||
const itemId = formData.get('itemId') as string;
|
||||
const direction = formData.get('direction') as string;
|
||||
const checklistId = formData.get('checklistId') as string;
|
||||
|
||||
const items = await db
|
||||
.select({ id: checklistItems.id, sortOrder: checklistItems.sortOrder })
|
||||
.from(checklistItems)
|
||||
.where(eq(checklistItems.checklistId, checklistId))
|
||||
.orderBy(checklistItems.sortOrder);
|
||||
|
||||
const idx = items.findIndex((i) => i.id === itemId);
|
||||
if (idx < 0) return fail(400, { error: 'Item not found' });
|
||||
|
||||
const swapIdx = direction === 'up' ? idx - 1 : idx + 1;
|
||||
if (swapIdx < 0 || swapIdx >= items.length) return { moved: true };
|
||||
|
||||
const a = items[idx];
|
||||
const b = items[swapIdx];
|
||||
await db.update(checklistItems).set({ sortOrder: b.sortOrder }).where(eq(checklistItems.id, a.id));
|
||||
await db.update(checklistItems).set({ sortOrder: a.sortOrder }).where(eq(checklistItems.id, b.id));
|
||||
|
||||
return { moved: true };
|
||||
},
|
||||
|
||||
renameChecklist: async ({ request }) => {
|
||||
const formData = await request.formData();
|
||||
const checklistId = formData.get('checklistId') as string;
|
||||
const title = (formData.get('title') as string)?.trim();
|
||||
if (!title) return fail(400, { error: 'Title is required' });
|
||||
|
||||
await db
|
||||
.update(deviceChecklists)
|
||||
.set({ title })
|
||||
.where(eq(deviceChecklists.id, checklistId));
|
||||
return { checklistRenamed: true };
|
||||
},
|
||||
|
||||
deleteChecklistItem: async ({ request }) => {
|
||||
const formData = await request.formData();
|
||||
const itemId = formData.get('itemId') as string;
|
||||
|
||||
@@ -11,6 +11,8 @@
|
||||
let showLogForm = $state(false);
|
||||
let showNewChecklist = $state(false);
|
||||
let showImportChecklist = $state(false);
|
||||
let editingChecklistId = $state<string | null>(null);
|
||||
let editingChecklistItemId = $state<string | null>(null);
|
||||
function resetInput(formEl: HTMLFormElement) {
|
||||
const input = formEl.querySelector('input[name="text"]') as HTMLInputElement;
|
||||
const unit = formEl.querySelector('input[name="unit"]') as HTMLInputElement;
|
||||
@@ -390,11 +392,33 @@
|
||||
{#each data.checklists as checklist}
|
||||
<div class="rounded-md border border-gray-100 p-3 dark:border-gray-700">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium text-gray-900 dark:text-white">{checklist.title}</h3>
|
||||
{#if editingChecklistId === checklist.id}
|
||||
<form method="POST" action="?/renameChecklist" use:enhance={() => {
|
||||
return async ({ update, result }) => {
|
||||
await update();
|
||||
if (result.type === 'success') editingChecklistId = null;
|
||||
};
|
||||
}} class="flex flex-1 items-center gap-2">
|
||||
<input type="hidden" name="checklistId" value={checklist.id} />
|
||||
<input type="text" name="title" value={checklist.title} required
|
||||
class="flex-1 rounded-md border border-gray-300 px-2 py-1 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
|
||||
<button type="submit" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">Save</button>
|
||||
<button type="button" onclick={() => (editingChecklistId = null)} class="text-sm text-gray-500 dark:text-gray-400">Cancel</button>
|
||||
</form>
|
||||
{:else}
|
||||
<h3 class="text-sm font-medium text-gray-900 dark:text-white">{checklist.title}</h3>
|
||||
{/if}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">
|
||||
{checklist.items.filter((i: any) => i.itemType === 'input' ? !!i.value : i.checked).length}/{checklist.items.length}
|
||||
</span>
|
||||
{#if editingChecklistId !== checklist.id}
|
||||
<button type="button" onclick={() => (editingChecklistId = checklist.id)} class="text-gray-400 hover:text-blue-600 dark:text-gray-500 dark:hover:text-blue-400" title="Rename">
|
||||
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<form method="POST" action="?/deleteChecklist" use:enhance>
|
||||
<input type="hidden" name="checklistId" value={checklist.id} />
|
||||
<button type="submit" class="text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400" title="Delete checklist">
|
||||
@@ -417,65 +441,95 @@
|
||||
|
||||
<!-- Items -->
|
||||
<div class="space-y-1.5">
|
||||
{#each checklist.items as item}
|
||||
<div class="group grid grid-cols-[auto_1fr_auto] items-center gap-2">
|
||||
{#if item.itemType === 'input'}
|
||||
<!-- Input: filled = completed -->
|
||||
{@const filled = !!item.value}
|
||||
<span class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border
|
||||
{filled
|
||||
? 'border-green-500 bg-green-500 text-white dark:border-green-400 dark:bg-green-500'
|
||||
: 'border-gray-200 dark:border-gray-600'}
|
||||
">
|
||||
{#if filled}
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{/if}
|
||||
</span>
|
||||
<form method="POST" action="?/saveChecklistValue" use:enhance class="flex flex-1 items-center gap-2">
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<span class="truncate text-sm text-gray-700 dark:text-gray-300" title={item.text}>{item.text}</span>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<input type="text" name="value" value={item.value ?? ''}
|
||||
placeholder="—"
|
||||
class="w-24 rounded border border-gray-200 px-2 py-0.5 text-sm text-right font-mono focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
|
||||
{#if item.unit}
|
||||
<span class="w-10 flex-shrink-0 text-xs text-gray-400 dark:text-gray-500">{item.unit}</span>
|
||||
{/if}
|
||||
<button type="submit" class="rounded px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<!-- Checkbox -->
|
||||
<form method="POST" action="?/toggleChecklistItem" use:enhance class="flex items-center">
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<input type="hidden" name="checked" value={String(item.checked)} />
|
||||
<button type="submit" class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border
|
||||
{item.checked
|
||||
? 'border-green-500 bg-green-500 text-white dark:border-green-400 dark:bg-green-500'
|
||||
: 'border-gray-300 hover:border-blue-400 dark:border-gray-600 dark:hover:border-blue-500'}
|
||||
">
|
||||
{#if item.checked}
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
<span class="text-sm {item.checked ? 'text-gray-400 line-through dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}">
|
||||
{item.text}
|
||||
</span>
|
||||
{/if}
|
||||
<form method="POST" action="?/deleteChecklistItem" use:enhance>
|
||||
{#each checklist.items as item, idx}
|
||||
{#if editingChecklistItemId === item.id}
|
||||
<!-- Inline edit -->
|
||||
<form method="POST" action="?/editChecklistItem" use:enhance={() => {
|
||||
return async ({ update, result }) => {
|
||||
await update();
|
||||
if (result.type === 'success') editingChecklistItemId = null;
|
||||
};
|
||||
}} class="flex items-center gap-2 rounded-md bg-gray-50 p-2 dark:bg-gray-700/30">
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<button type="submit" class="hidden text-gray-400 hover:text-red-500 group-hover:block dark:text-gray-500 dark:hover:text-red-400" title="Remove">
|
||||
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<input type="text" name="text" value={item.text} required
|
||||
class="flex-1 rounded-md border border-gray-300 px-2 py-1 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
|
||||
{#if item.itemType === 'input'}
|
||||
<input type="text" name="unit" value={item.unit ?? ''} placeholder="Unit"
|
||||
class="w-16 rounded-md border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
|
||||
{/if}
|
||||
<button type="submit" class="text-sm text-blue-600 dark:text-blue-400">Save</button>
|
||||
<button type="button" onclick={() => (editingChecklistItemId = null)} class="text-sm text-gray-500 dark:text-gray-400">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="group grid grid-cols-[auto_auto_1fr_auto] items-center gap-2">
|
||||
<!-- Move arrows -->
|
||||
<div class="flex flex-col">
|
||||
{#if idx > 0}
|
||||
<form method="POST" action="?/moveChecklistItem" use:enhance>
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<input type="hidden" name="checklistId" value={checklist.id} />
|
||||
<input type="hidden" name="direction" value="up" />
|
||||
<button type="submit" class="text-gray-300 hover:text-gray-600 dark:text-gray-600 dark:hover:text-gray-400" title="Move up">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /></svg>
|
||||
</button>
|
||||
</form>
|
||||
{:else}<div class="h-3 w-3"></div>{/if}
|
||||
{#if idx < checklist.items.length - 1}
|
||||
<form method="POST" action="?/moveChecklistItem" use:enhance>
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<input type="hidden" name="checklistId" value={checklist.id} />
|
||||
<input type="hidden" name="direction" value="down" />
|
||||
<button type="submit" class="text-gray-300 hover:text-gray-600 dark:text-gray-600 dark:hover:text-gray-400" title="Move down">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
|
||||
</button>
|
||||
</form>
|
||||
{:else}<div class="h-3 w-3"></div>{/if}
|
||||
</div>
|
||||
|
||||
{#if item.itemType === 'input'}
|
||||
{@const filled = !!item.value}
|
||||
<span class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border
|
||||
{filled ? 'border-green-500 bg-green-500 text-white dark:border-green-400 dark:bg-green-500' : 'border-gray-200 dark:border-gray-600'}
|
||||
">
|
||||
{#if filled}<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>{/if}
|
||||
</span>
|
||||
<form method="POST" action="?/saveChecklistValue" use:enhance class="flex flex-1 items-center gap-2">
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<span class="truncate text-sm text-gray-700 dark:text-gray-300" title={item.text}>{item.text}</span>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<input type="text" name="value" value={item.value ?? ''} placeholder="—"
|
||||
class="w-24 rounded border border-gray-200 px-2 py-0.5 text-sm text-right font-mono focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
|
||||
{#if item.unit}<span class="w-10 flex-shrink-0 text-xs text-gray-400 dark:text-gray-500">{item.unit}</span>{/if}
|
||||
<button type="submit" class="rounded px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<form method="POST" action="?/toggleChecklistItem" use:enhance class="flex items-center">
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<input type="hidden" name="checked" value={String(item.checked)} />
|
||||
<button type="submit" class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border
|
||||
{item.checked ? 'border-green-500 bg-green-500 text-white dark:border-green-400 dark:bg-green-500' : 'border-gray-300 hover:border-blue-400 dark:border-gray-600 dark:hover:border-blue-500'}
|
||||
">
|
||||
{#if item.checked}<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>{/if}
|
||||
</button>
|
||||
</form>
|
||||
<span class="text-sm {item.checked ? 'text-gray-400 line-through dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}">{item.text}</span>
|
||||
{/if}
|
||||
|
||||
<!-- Edit + Delete -->
|
||||
<div class="flex items-center gap-1">
|
||||
<button type="button" onclick={() => (editingChecklistItemId = item.id)} class="hidden text-gray-400 hover:text-blue-600 group-hover:block dark:text-gray-500 dark:hover:text-blue-400" title="Edit">
|
||||
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
|
||||
</button>
|
||||
<form method="POST" action="?/deleteChecklistItem" use:enhance>
|
||||
<input type="hidden" name="itemId" value={item.id} />
|
||||
<button type="submit" class="hidden text-gray-400 hover:text-red-500 group-hover:block dark:text-gray-500 dark:hover:text-red-400" title="Remove">
|
||||
<svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user