Div refactor

src/actions/images/updateImage.ts

@@ -1,5 +1,6 @@
 "use server"
 
+import prisma from "@/lib/prisma";
 import { imageSchema } from "@/schemas/images/imageSchema";
 import * as z from "zod/v4";
 
@@ -7,16 +8,69 @@ export async function updateImage(
   values: z.infer<typeof imageSchema>, 
   id: string
 ) {
-  console.log(values, id)
+  const validated = imageSchema.safeParse(values);
-  // return await prisma.image.update({
+  if (!validated.success) {
-  //   where: {
+    throw new Error("Invalid image data");
-  //     id: id
+  }
-  //   },
+
-  //   data: {
+  const {
-  //     name: values.name,
+    imageName,
-  //     slug: values.slug,
+    originalFile,
-  //     description: values.description,
+    uploadDate,
-  //   }
+    altText,
-  // })
+    description,
-  return null
+    fileType,
+    imageData,
+    creationMonth,
+    creationYear,
+    fileSize,
+    creationDate,
+    albumId,
+    artistId,
+    tagIds,
+    categoryIds
+  } = validated.data;
+
+  const updatedImage = await prisma.image.update({
+    where: { id: id },
+    data: {
+      imageName,
+      originalFile,
+      uploadDate,
+      altText,
+      description,
+      fileType,
+      imageData,
+      creationMonth,
+      creationYear,
+      fileSize,
+      creationDate,
+      albumId,
+      artistId,
+    }
+  });
+
+  if (tagIds) {
+    await prisma.image.update({
+      where: { id: id },
+      data: {
+        tags: {
+          set: tagIds.map(id => ({ id }))
+        }
+      }
+    });
+  }
+
+  if (categoryIds) {
+    await prisma.image.update({
+      where: { id: id },
+      data: {
+        categories: {
+          set: categoryIds.map(id => ({ id }))
+        }
+      }
+    });
+  }
+
+  return updatedImage
 }

src/app/albums/page.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 export default async function AlbumsPage() {
   const albums = await prisma.album.findMany(
     {
-      include: { gallery: true },
+      include: { gallery: true, images: { select: { id: true } } },
       orderBy: { createdAt: "asc" }
     }
   );

src/app/images/edit/[id]/page.tsx

@@ -34,7 +34,7 @@ export default async function ImagesEditPage({ params }: { params: { id: string
   });
 
   const artists = await prisma.artist.findMany({ orderBy: { createdAt: "asc" } });
-  const albums = await prisma.album.findMany({ orderBy: { createdAt: "asc" } });
+  const albums = await prisma.album.findMany({ orderBy: { createdAt: "asc" }, include: { gallery: true } });
   const tags = await prisma.tag.findMany({ orderBy: { createdAt: "asc" } });
   const categories = await prisma.category.findMany({ orderBy: { createdAt: "asc" } });
 

src/components/albums/list/ListAlbums.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 
 type AlbumWithGallery = Album & {
   gallery: Gallery | null;
+  images: { id: string }[];
 };
 
 export default function ListAlbums({ albums }: { albums: AlbumWithGallery[] }) {
@@ -30,7 +31,7 @@ export default function ListAlbums({ albums }: { albums: AlbumWithGallery[] }) {
                   </div>
                 )}
                 <p className="text-sm text-muted-foreground">
-                  Total images in this album: <span className="font-semibold">0</span>
+                  Total images in this album: <span className="font-semibold">{album.images.length}</span>
                 </p>
               </div>
             </CardFooter>

src/components/images/edit/EditImageForm.tsx

@@ -9,7 +9,7 @@ import MultipleSelector from "@/components/ui/multiselect";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import { Album, Artist, Category, ColorPalette, ColorPaletteItem, ExtractColor, Image, ImageColor, ImageMetadata, ImageStats, ImageVariant, PixelSummary, Tag, ThemeSeed } from "@/generated/prisma";
+import { Album, Artist, Category, ColorPalette, ColorPaletteItem, ExtractColor, Gallery, Image, ImageColor, ImageMetadata, ImageStats, ImageVariant, PixelSummary, Tag, ThemeSeed } from "@/generated/prisma";
 import { cn } from "@/lib/utils";
 import { imageSchema } from "@/schemas/images/imageSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -38,11 +38,15 @@ type ImageWithItems = Image & {
   )[]
 };
 
+type AlbumsWithGallery = Album & {
+  gallery: Gallery | null
+}
+
 export default function EditImageForm({ image, artists, albums, tags, categories }:
   {
     image: ImageWithItems,
     artists: Artist[],
-    albums: Album[],
+    albums: AlbumsWithGallery[],
     tags: Tag[],
     categories: Category[]
   }) {
@@ -347,7 +351,7 @@ export default function EditImageForm({ image, artists, albums, tags, categories
                   </FormControl>
                   <SelectContent>
                     {albums.map((album) => (
-                      <SelectItem key={album.id} value={album.id}>{album.name}</SelectItem>
+                      <SelectItem key={album.id} value={album.id}>{album.name} ({album.gallery?.name})</SelectItem>
                     ))}
                   </SelectContent>
                 </Select>

src/components/images/list/ListImages.tsx

@@ -2,6 +2,7 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Image } from "@/generated/prisma";
+import NetImage from "next/image";
 import Link from "next/link";
 
 export default function ListImages({ images }: { images: Image[] }) {
@@ -14,6 +15,7 @@ export default function ListImages({ images }: { images: Image[] }) {
               <CardTitle className="text-base truncate">{image.imageName}</CardTitle>
             </CardHeader>
             <CardContent>
+              <NetImage src={`/api/image/thumbnails/${image.fileKey}.webp`} alt={image.altText ? image.altText : "Image"} width={200} height={200} />
             </CardContent>
           </Card>
         </Link>