150 lines
7.9 KiB
TypeScript
150 lines
7.9 KiB
TypeScript
import { useSearchImageContext } from "@contexts/SearchImageContext";
|
||
import { useParams } from "@solidjs/router";
|
||
import { Component, For, Show, createSignal } from "solid-js";
|
||
import { base } from "../../network";
|
||
import { Dialog } from "@kobalte/core";
|
||
|
||
const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
|
||
const [isOpen, setIsOpen] = createSignal(false);
|
||
|
||
return (
|
||
<>
|
||
<button
|
||
aria-label="Delete image from list"
|
||
class="text-white bg-red-600 hover:bg-red-700 rounded px-2 py-1 text-sm"
|
||
onClick={() => setIsOpen(true)}
|
||
>
|
||
×
|
||
</button>
|
||
|
||
<Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
|
||
<Dialog.Portal>
|
||
<Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
|
||
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||
<Dialog.Content class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
|
||
<Dialog.Title class="text-lg font-bold mb-2">
|
||
Confirm Delete
|
||
</Dialog.Title>
|
||
<Dialog.Description class="mb-4">
|
||
Are you sure you want to delete this image from
|
||
this list?
|
||
</Dialog.Description>
|
||
<div class="flex justify-end gap-2">
|
||
<Dialog.CloseButton>
|
||
<button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
|
||
Cancel
|
||
</button>
|
||
</Dialog.CloseButton>
|
||
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={props.onDelete}>
|
||
Confirm
|
||
</button>
|
||
</div>
|
||
</Dialog.Content>
|
||
</div>
|
||
</Dialog.Portal>
|
||
</Dialog.Root>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export const List: Component = () => {
|
||
const { listId } = useParams();
|
||
|
||
const { lists, onDeleteImageFromStack } = useSearchImageContext();
|
||
|
||
const list = () => lists().find((l) => l.ID === listId);
|
||
|
||
return (
|
||
<Show when={list()} fallback="List could not be found">
|
||
{(l) => (
|
||
<div class="w-full h-full bg-white rounded-lg shadow-sm border border-neutral-200 overflow-hidden">
|
||
<div class="overflow-x-auto overflow-y-auto h-full">
|
||
<table class="w-full min-w-full">
|
||
<thead class="bg-neutral-50 border-b border-neutral-200 sticky top-0 z-10">
|
||
<tr>
|
||
<th class="px-6 py-4 text-left text-sm font-semibold text-neutral-900 border-r border-neutral-200 min-w-40">
|
||
Image
|
||
</th>
|
||
<For each={l().Schema.SchemaItems}>
|
||
{(item, index) => (
|
||
<th
|
||
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
|
||
l().Schema.SchemaItems
|
||
.length -
|
||
1
|
||
? "border-r border-neutral-200"
|
||
: ""
|
||
}`}
|
||
>
|
||
{item.Item}
|
||
</th>
|
||
)}
|
||
</For>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-neutral-200">
|
||
<For each={l().Images}>
|
||
{(image, rowIndex) => (
|
||
<tr
|
||
class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
|
||
? "bg-white"
|
||
: "bg-neutral-25"
|
||
}`}
|
||
>
|
||
<td class="px-6 py-4 border-r border-neutral-200">
|
||
<div class="flex items-center gap-2">
|
||
<a
|
||
href={`/image/${image.ImageID}`}
|
||
class="w-32 h-24 flex justify-center rounded-lg overflow-hidden"
|
||
>
|
||
<img
|
||
class="w-full h-full object-cover rounded-lg"
|
||
src={`${base}/images/${image.ImageID}`}
|
||
alt="List item"
|
||
/>
|
||
</a>
|
||
<DeleteButton onDelete={() => onDeleteImageFromStack(l().ID, image.ImageID)} />
|
||
</div>
|
||
</td>
|
||
<For each={image.Items}>
|
||
{(item, colIndex) => (
|
||
<td
|
||
class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
|
||
image.Items.length -
|
||
1
|
||
? "border-r border-neutral-200"
|
||
: ""
|
||
}`}
|
||
>
|
||
<div
|
||
class="max-w-xs truncate"
|
||
title={item.Value}
|
||
>
|
||
{item.Value}
|
||
</div>
|
||
</td>
|
||
)}
|
||
</For>
|
||
</tr>
|
||
)}
|
||
</For>
|
||
</tbody>
|
||
</table>
|
||
<Show when={l().Images.length === 0}>
|
||
<div class="px-6 py-12 text-center text-neutral-500">
|
||
<p class="text-lg">
|
||
No images in this list yet
|
||
</p>
|
||
<p class="text-sm mt-1">
|
||
Images will appear here once added to the
|
||
list
|
||
</p>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Show>
|
||
);
|
||
};
|