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

feat: images showing up in entity page

Browse Source
This commit is contained in:
John Costa
2025-07-18 13:51:52 +01:00
parent 00e530df4b
commit d4b14605c1
3 changed files with 33 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/Entity.tsx
View File

@ -2,6 +2,7 @@ import { useParams } from "@solidjs/router";
import { Component, For, Show } from "solid-js";
import { ConcreteItemModal } from "./components/item-modal/ItemModal";
import { useSearchImageContext } from "./contexts/SearchImageContext";
import { Image } from "./components/image";
export const Entity: Component = () => {
const params = useParams<{ entityId: string }>();
@ -19,7 +20,9 @@ export const Entity: Component = () => {
{(e) => (
<div>
<ConcreteItemModal item={e()} />
<For each={e().data.Images}>{(imageId) => <p>{imageId}</p>}</For>
<For each={e().data.Images}>
{(imageId) => <Image ID={imageId} />}
</For>
</div>
)}
</Show>

59
frontend/src/Image.tsx
View File

@ -4,45 +4,32 @@ import { base, type UserImage } from "./network";
import { useSearchImageContext } from "./contexts/SearchImageContext";
import { SearchCard } from "./components/search-card/SearchCard";
import { IconArrowLeft } from "@tabler/icons-solidjs";
import { useSetEntity } from "./WithEntityDialog";
export const Image: Component = () => {
const { imageId } = useParams<{ imageId: string }>();
const { imageId } = useParams<{ imageId: string }>();
const { imagesWithProperties } = useSearchImageContext();
const { imagesWithProperties } = useSearchImageContext();
const imageProperties = (): UserImage[] | undefined =>
Object.entries(imagesWithProperties()).find(
([id]) => id === imageId,
)?.[1];
const imageProperties = (): UserImage[] | undefined =>
Object.entries(imagesWithProperties()).find(([id]) => id === imageId)?.[1];
const setEntity = useSetEntity();
return (
<main class="flex flex-col items-center">
<nav class="self-start">
<A href="/">
<IconArrowLeft />
</A>
</nav>
<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
<div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
<Show when={imageProperties()}>
{(image) => (
<For each={image()}>
{(property) => (
<div
onKeyDown={() => setEntity(property)}
onClick={() => setEntity(property)}
class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
>
<SearchCard item={property} />
</div>
)}
</For>
)}
</Show>
</div>
</main>
);
return (
<main class="flex flex-col items-center">
<nav class="self-start">
<A href="/">
<IconArrowLeft />
</A>
</nav>
<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
<div class="w-3/4 grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
<Show when={imageProperties()}>
{(image) => (
<For each={image()}>
{(property) => <SearchCard item={property} />}
</For>
)}
</Show>
</div>
</main>
);
};

6
frontend/src/components/image/index.tsx Normal file
View File

@ -0,0 +1,6 @@
import { Component } from "solid-js";
import { base } from "../../network";
export const Image: Component<{ ID: string }> = (props) => {
return <img src={`${base}/image/${props.ID}`} />;
};