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

59
frontend/src/Image.tsx
View File

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

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}`} />;
};