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

fix: delete schema column button

Browse Source
This commit is contained in:
John Costa
2025-10-05 15:54:46 +01:00
parent 38bda46dcf
commit 6880811236
2 changed files with 82 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/image/index.tsx
View File

@ -22,7 +22,7 @@ export const ImagePage: Component = () => {
}} />
</div>
<div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
<h2 class="font-bold text-2xl">Description</h2>
<h2 class="font-bold text-2xl">Stacks</h2>
<div class="grid grid-cols-3 gap-4">
<For each={image()?.ImageStacks}>
{(imageList) => (

101
frontend/src/pages/stack/index.tsx
View File

@ -1,4 +1,3 @@
import { useSearchImageContext } from "@contexts/SearchImageContext";
import { useParams, useNavigate } from "@solidjs/router";
import {
Component,
@ -10,6 +9,7 @@ import {
} from "solid-js";
import { base, getAccessToken } from "../../network";
import { Dialog } from "@kobalte/core";
import { useSearchImageContext } from "@contexts/SearchImageContext";
const DeleteButton: Component<{ onDelete: () => void }> = (props) => {
const [isOpen, setIsOpen] = createSignal(false);
@ -103,11 +103,58 @@ const DeleteStackButton: Component<{ onDelete: () => void }> = (props) => {
);
};
const DeleteStackItemButton: Component<{ onDelete: () => void }> = (props) => {
const [isOpen, setIsOpen] = createSignal(false);
return (
<>
<button
aria-label="Delete schema item"
class="text-gray-500 hover:text-red-700 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 column 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 Stack: Component = () => {
const { stackID } = useParams();
const nav = useNavigate();
const { stacks, onDeleteImageFromStack, onDeleteStack } = useSearchImageContext();
const { stacks, onDeleteImageFromStack, onDeleteStack, onDeleteStackItem } =
useSearchImageContext();
const [accessToken] = createResource(getAccessToken);
@ -135,7 +182,9 @@ export const Stack: Component = () => {
</p>
</Show>
</div>
<DeleteStackButton onDelete={handleDeleteStack} />
<DeleteStackButton
onDelete={handleDeleteStack}
/>
</div>
</div>
<div
@ -151,15 +200,25 @@ export const Stack: Component = () => {
<For each={s().SchemaItems}>
{(item, index) => (
<th
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${index() <
s().SchemaItems
.length -
1
? "border-r border-neutral-200"
: ""
}`}
class={`px-6 py-4 text-left text-sm font-semibold text-neutral-900 min-w-32 ${
index() <
s().SchemaItems.length -
1
? "border-r border-neutral-200"
: ""
}`}
>
{item.Item}
<div class="flex items-center gap-2">
{item.Item}
<DeleteStackItemButton
onDelete={() =>
onDeleteStackItem(
s().ID,
item.ID,
)
}
/>
</div>
</th>
)}
</For>
@ -169,10 +228,11 @@ export const Stack: Component = () => {
<For each={s().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="flex items-center gap-2">
@ -199,13 +259,14 @@ export const Stack: Component = () => {
<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"