Add images support to manufacturers

app/api/v2/barometers/[slug]/getters.ts

@@ -36,6 +36,7 @@ export const getBarometer = withPrisma(async (prisma, slug: string) => {
               slug: true,
             },
           },
+          images: true,
         },
       },
       images: {

app/api/v2/manufacturers/getters.ts

@@ -16,6 +16,15 @@ export const getManufacturers = withPrisma(async (prisma, page: number, pageSize
       take: pageSize || undefined,
       include: {
         countries: true,
+        images: {
+          select: {
+            url: true,
+            id: true,
+            blurData: true,
+            order: true,
+            name: true,
+          },
+        },
         predecessors: {
           select: {
             id: true,

app/api/v2/manufacturers/route.ts

@@ -11,6 +11,7 @@ import { FrontRoutes } from '@/utils/routes-front'
 interface ManufacturerDTO extends Manufacturer {
   successors?: { id: string }[]
   countries?: { id: number }[]
+  images?: { id: string; url: string; blurData: string }[]
 }
 /**
  * Retrieve a list of all Manufacturers
@@ -35,7 +36,7 @@ export async function GET(req: NextRequest) {
  */
 export const POST = withPrisma(async (prisma, req: NextRequest) => {
   try {
-    const { successors, countries, ...manufData }: ManufacturerDTO = await req
+    const { successors, countries, images, ...manufData }: ManufacturerDTO = await req
       .json()
       .then(cleanObject)
 
@@ -57,6 +58,13 @@ export const POST = withPrisma(async (prisma, req: NextRequest) => {
               },
             }
           : {}),
+        ...(images
+          ? {
+              images: {
+                create: images,
+              },
+            }
+          : {}),
       },
     })
 
@@ -77,12 +85,14 @@ export const POST = withPrisma(async (prisma, req: NextRequest) => {
  */
 export const PUT = withPrisma(async (prisma, req: NextRequest) => {
   try {
-    const { successors, countries, ...manufData }: ManufacturerDTO = await req.json().then(data =>
-      // replace empty strings with NULLs
-      traverse.map(data, function map(node) {
-        if (node === '') this.update(null)
-      }),
-    )
+    const { successors, countries, images, ...manufData }: ManufacturerDTO = await req
+      .json()
+      .then(data =>
+        // replace empty strings with NULLs
+        traverse.map(data, function map(node) {
+          if (node === '') this.update(null)
+        }),
+      )
     const manufacturer = await prisma.manufacturer.findUnique({ where: { id: manufData.id } })
     if (!manufacturer) {
       return NextResponse.json({ message: 'Manufacturer not found' }, { status: 404 })
@@ -91,32 +101,46 @@ export const PUT = withPrisma(async (prisma, req: NextRequest) => {
     const slug = manufData.name
       ? getBrandSlug(manufData.name, manufData.firstName)
       : manufacturer.slug
-    const updatedManufacturer = await prisma.manufacturer.update({
-      where: { id: manufacturer.id },
-      data: {
-        ...manufData,
-        ...(successors
-          ? {
-              successors: {
-                set: successors,
-              },
-            }
-          : {}),
-        ...(countries
-          ? {
-              countries: {
-                set: countries,
-              },
-            }
-          : {}),
-        slug,
-      },
+    await prisma.$transaction(async tx => {
+      await Promise.all([
+        // delete old images if the new ones are provided
+        images
+          ? tx.image.deleteMany({ where: { barometers: { some: { id: manufacturer.id } } } })
+          : Promise.resolve(),
+        await tx.manufacturer.update({
+          where: { id: manufacturer.id },
+          data: {
+            ...manufData,
+            ...(successors
+              ? {
+                  successors: {
+                    set: successors,
+                  },
+                }
+              : {}),
+            ...(countries
+              ? {
+                  countries: {
+                    set: countries,
+                  },
+                }
+              : {}),
+            images: images
+              ? {
+                  deleteMany: {},
+                  create: images,
+                }
+              : {},
+            slug,
+          },
+        }),
+      ])
     })
 
     revalidatePath(trimTrailingSlash(FrontRoutes.Brands))
     revalidatePath(FrontRoutes.Brands + slug)
     await revalidateSuccessors(successors)
-    return NextResponse.json(updatedManufacturer, { status: 200 })
+    return NextResponse.json({ slug }, { status: 200 })
   } catch (error) {
     console.error(error)
     return NextResponse.json(

app/collection/items/[slug]/components/edit-fields/images-edit.tsx

@@ -26,7 +26,6 @@ import {
 import { useEffect, useMemo, useState } from 'react'
 import { useDisclosure } from '@mantine/hooks'
 import { BarometerDTO } from '@/app/types'
-import sx from './styles.module.scss'
 import { googleStorageImagesFolder } from '@/utils/constants'
 import { FrontRoutes } from '@/utils/routes-front'
 import { showError, showInfo } from '@/utils/notification'
@@ -76,7 +75,7 @@ function SortableImage({
       />
       <Box {...listeners}>
         <NextImage
-          className={sx.thumbnail}
+          className="h-auto w-auto"
           alt="Barometer"
           key={image}
           src={googleStorageImagesFolder + image}
@@ -113,7 +112,7 @@ export function ImagesEdit({ barometer, size, ...props }: ImagesEditProps) {
       form.setFieldValue('images', newOrder)
     }
   }
-  const updateBarometerWithImages = async (values: FormProps) => {
+  const update = async (values: FormProps) => {
     // exit if no image was changed
     if (isEqual(values.images, barometer.images)) {
       close()
@@ -227,16 +226,16 @@ export function ImagesEdit({ barometer, size, ...props }: ImagesEditProps) {
         centered
         opened={opened}
         onClose={onClose}
-        classNames={{ title: sx.imageEditModalTitle }}
+        styles={{ title: { fontWeight: 500, fontSize: '22px' } }}
       >
-        <Box pos="relative" component="form" onSubmit={form.onSubmit(updateBarometerWithImages)}>
+        <Box pos="relative" component="form" onSubmit={form.onSubmit(update)}>
           <LoadingOverlay visible={isUploading} zIndex={100} />
           <Stack>
             <FileButton multiple onChange={uploadImages} accept="image/**">
               {fbProps => (
                 <Button
                   color="dark.4"
-                  className={sx.addImageBtn}
+                  className="self-start"
                   leftSection={<IconPhotoPlus />}
                   {...fbProps}
                 >
@@ -262,7 +261,7 @@ export function ImagesEdit({ barometer, size, ...props }: ImagesEditProps) {
         </Box>
       </Modal>
       <Tooltip label="Edit images">
-        <UnstyledButton className={sx.imageEdit} {...props} onClick={open}>
+        <UnstyledButton className="absolute right-20 top-0 z-10" {...props} onClick={open}>
           <IconEdit color="brown" size={size} />
         </UnstyledButton>
       </Tooltip>