Compare commits
2 Commits
38bda46dcf
...
eaff553dc9
| Author | SHA1 | Date | |
|---|---|---|---|
| eaff553dc9 | |||
| 6880811236 |
@ -60,7 +60,7 @@ func (m UserModel) GetUserImages(ctx context.Context, userId uuid.UUID) ([]UserI
|
||||
).
|
||||
FROM(
|
||||
Image.
|
||||
LEFT_JOIN(ImageStacks, ImageStacks.ImageID.EQ(ImageStacks.ID)),
|
||||
LEFT_JOIN(ImageStacks, ImageStacks.ImageID.EQ(Image.ID)),
|
||||
).
|
||||
WHERE(Image.UserID.EQ(UUID(userId)))
|
||||
|
||||
|
||||
@ -194,7 +194,7 @@ const userImageValidator = strictObject({
|
||||
strictObject({
|
||||
ID: pipe(string(), uuid()),
|
||||
ImageID: pipe(string(), uuid()),
|
||||
ListID: pipe(string(), uuid()),
|
||||
StackID: pipe(string(), uuid()),
|
||||
}),
|
||||
)), transform(l => l ?? [])),
|
||||
});
|
||||
|
||||
@ -22,12 +22,12 @@ 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) => (
|
||||
<StackCard
|
||||
stack={stacks().find((l) => l.ID === imageList.ListID)!}
|
||||
stack={stacks().find((l) => l.ID === imageList.StackID)!}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
|
||||
@ -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 -
|
||||
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"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
{item.Item}
|
||||
<DeleteStackItemButton
|
||||
onDelete={() =>
|
||||
onDeleteStackItem(
|
||||
s().ID,
|
||||
item.ID,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
)}
|
||||
</For>
|
||||
@ -169,7 +228,8 @@ export const Stack: Component = () => {
|
||||
<For each={s().Images}>
|
||||
{(image, rowIndex) => (
|
||||
<tr
|
||||
class={`hover:bg-neutral-50 transition-colors ${rowIndex() % 2 === 0
|
||||
class={`hover:bg-neutral-50 transition-colors ${
|
||||
rowIndex() % 2 === 0
|
||||
? "bg-white"
|
||||
: "bg-neutral-25"
|
||||
}`}
|
||||
@ -199,7 +259,8 @@ 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
|
||||
|
||||
Reference in New Issue
Block a user