JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: allowing users to delete images from lists

Browse Source
This commit is contained in:
John Costa
2025-08-30 21:38:01 +01:00
parent 94ee8bdb7e
commit 2dd9f33303
7 changed files with 188 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/pages/list/index.tsx
View File

@@ -1,12 +1,56 @@
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams } from "@solidjs/router";
import { Component, For, Show } from "solid-js";
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 } = useSearchImageContext();
const { lists, onDeleteImageFromStack } = useSearchImageContext();
const list = () => lists().find((l) => l.ID === listId);
@@ -24,14 +68,13 @@ export const List: Component = () => {
<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() <
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"
: ""
}`}
1
? "border-r border-neutral-200"
: ""
}`}
>
{item.Item}
</th>
@@ -43,17 +86,16 @@ export const List: Component = () => {
<For each={l().Images}>
{(image, rowIndex) => (
<tr
class={`hover:bg-neutral-50 transition-colors ${
rowIndex() % 2 === 0
? "bg-white"
: "bg-neutral-25"
}`}
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="w-32 h-24 overflow-hidden rounded-lg">
<div class="flex items-center gap-2">
<a
href={`/image/${image.ImageID}`}
class="w-full h-full flex justify-center"
class="w-32 h-24 flex justify-center rounded-lg overflow-hidden"
>
<img
class="w-full h-full object-cover rounded-lg"
@@ -61,18 +103,18 @@ export const List: Component = () => {
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() <
class={`px-6 py-4 text-sm text-neutral-700 ${colIndex() <
image.Items.length -
1
? "border-r border-neutral-200"
: ""
}`}
1
? "border-r border-neutral-200"
: ""
}`}
>
<div
class="max-w-xs truncate"