feat: showing table on frontend for pages

backend/models/user.go

@@ -256,7 +256,7 @@ func (m UserModel) GetUserImages(ctx context.Context, userId uuid.UUID) ([]UserI
 type ListsWithImages struct {
 	model.Lists
 
-	Scheme struct {
+	Schema struct {
 		model.Schemas
 
 		SchemaItems []model.SchemaItems

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import {
 	Entity,
 	SearchPage,
 	AllImages,
+	List,
 } from "./pages";
 import { SearchImageContextProvider } from "@contexts/SearchImageContext";
 import { WithNotifications } from "@contexts/Notifications";
@@ -34,6 +35,7 @@ export const App = () => {
 								<Route path="/search" component={SearchPage} />
 								<Route path="/all-images" component={AllImages} />
 								<Route path="/image/:imageId" component={ImagePage} />
+								<Route path="/list/:listId" component={List} />
 								<Route path="/entity/:entityId" component={Entity} />
 								<Route path="/gallery/:entity" component={Gallery} />
 								<Route path="/settings" component={Settings} />

frontend/src/contexts/SearchImageContext.tsx

@@ -11,6 +11,7 @@ import {
 	CategoryUnion,
 	getUserImages,
 	JustTheImageWhatAreTheseNames,
+	List,
 	UserImage,
 } from "../network";
 import { groupPropertiesWithImage } from "../utils/groupPropertiesWithImage";

frontend/src/network/index.ts

@@ -182,10 +182,34 @@ const listValidator = strictObject({
 			ID: pipe(string(), uuid()),
 			ImageID: pipe(string(), uuid()),
 			ListID: pipe(string(), uuid()),
+			Items: array(
+				strictObject({
+					ID: pipe(string(), uuid()),
+					ImageID: pipe(string(), uuid()),
+					SchemaItemID: pipe(string(), uuid()),
+					Value: string(),
+				}),
+			),
 		}),
 	),
+
+	Schema: strictObject({
+		ID: pipe(string(), uuid()),
+		ListID: pipe(string(), uuid()),
+		SchemaItems: array(
+			strictObject({
+				ID: pipe(string(), uuid()),
+				SchemaID: pipe(string(), uuid()),
+				Item: string(),
+				Value: nullable(string()),
+				Description: string(),
+			}),
+		),
+	}),
 });
 
+export type List = InferOutput<typeof listValidator>;
+
 const imageRequestValidator = strictObject({
 	UserImages: array(userImageValidator),
 	ImageProperties: array(dataTypeValidator),

frontend/src/pages/front/gallery.tsx

@@ -60,7 +60,7 @@ export const Categories: Component = () => {
 				<For each={lists()}>
 					{(list) => (
 						<A
-							href="/"
+							href={`/list/${list.ID}`}
 							class={
 								"flex flex-col p-4 border border-neutral-200 rounded-lg " +
 								colors[

frontend/src/pages/index.ts

@@ -6,3 +6,4 @@ export * from "./login";
 export * from "./entity";
 export * from "./search";
 export * from "./all-images";
+export * from "./list";

frontend/src/pages/list/index.tsx

@@ -0,0 +1,43 @@
+import { ImageComponent } from "@components/image";
+import { useSearchImageContext } from "@contexts/SearchImageContext";
+import { useParams } from "@solidjs/router";
+import { Component, For, Show } from "solid-js";
+
+export const List: Component = () => {
+	const { listId } = useParams();
+
+	const { lists } = useSearchImageContext();
+
+	const list = () => lists().find((l) => l.ID === listId);
+
+	return (
+		<Show when={list()} fallback="List could not be found">
+			{(l) => (
+				<table>
+					<thead>
+						<tr>
+							<th>Image</th>
+							<For each={l().Schema.SchemaItems}>
+								{(item) => <th>{item.Item}</th>}
+							</For>
+						</tr>
+					</thead>
+					<tbody>
+						<For each={l().Images}>
+							{(image) => (
+								<tr>
+									<td>
+										<ImageComponent ID={image.ImageID} />
+									</td>
+									<For each={image.Items}>
+										{(item) => <td>{item.Value}</td>}
+									</For>
+								</tr>
+							)}
+						</For>
+					</tbody>
+				</table>
+			)}
+		</Show>
+	);
+};