Guardar y cambiar img al editar productos

apps/web/feactures/inventory/components/inventory/product-inventory-list.tsx

@@ -27,7 +27,7 @@ export default function UsersAdminList({
 
   const {data, isLoading} =  useProductQuery(filters)
 
-  // console.log(data?.data);
+  console.log(data?.data);
 
   if (isLoading) {
     return <DataTableSkeleton columnCount={6} rowCount={initialLimit} />;

apps/web/feactures/inventory/components/inventory/product-tables/columns.tsx

@@ -5,13 +5,16 @@ import { CellAction } from './cell-action';
 import { InventoryTable } from '../../../schemas/inventory';
 
 export const columns: ColumnDef<InventoryTable>[] = [
+  {
+    accessorKey: 'userId',
+    header: 'ID',
+  },
   {
     accessorKey: 'urlImg',
     header: 'img',
     cell: ({ row }) => {
-      const url = row.getValue("urlImg") as string | undefined;
         return (
-          <img src={`http://localhost:3000/${url}`} alt="" width={64} height={64} className="rounded"/> 
+          <img src={`http://localhost:3000/uploads/inventory/${row.original.userId}/${row.original.urlImg}`} alt="" width={64} height={64} className="rounded"/> 
         )
     },
   },

apps/web/feactures/inventory/components/inventory/update-product-form.tsx

@@ -22,7 +22,7 @@ import { useUpdateUser } from "@/feactures/inventory/hooks/use-mutation";
 import { editInventory, EditInventory } from '@/feactures/inventory/schemas/inventory'; // Renombrado EditInventory para claridad
 import { Textarea } from '@repo/shadcn/components/ui/textarea';
 import {STATUS} from '@/constants/status'
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {sizeFormate} from "@/feactures/inventory/utils/sizeFormate"
 import { z } from 'zod'; // Asegúrate de importar Zod
 
@@ -58,6 +58,13 @@ export function UpdateForm({
   } = useUpdateUser();
 
   const [sizeFile, setSizeFile] = useState('0 bytes'); 
+  const [previewUrls, setPreviewUrls] = useState<string[]>([]);
+
+  useEffect(() => {
+    return () => {
+      previewUrls.forEach(url => URL.revokeObjectURL(url));
+    };
+  }, [previewUrls]); 
 
   const defaultformValues: EditInventory = { // Usamos el nuevo tipo aquí
     id: defaultValues?.id, 
@@ -226,7 +233,7 @@ export function UpdateForm({
               render={({ field: { onChange, onBlur, name, ref } }) => (
                 <FormItem>
                   <FormLabel>Imagen</FormLabel>
-                  <p>Peso máximo: 5MB / {sizeFile}</p>
+                  <p>Peso máximo: 5MB / {sizeFile} <span className='text-xs text-destructive'>(Máximo 10 archivos)</span></p>
                   <FormControl>
                     <Input
                       type="file"
@@ -238,15 +245,31 @@ export function UpdateForm({
                         if (e.target.files) {
                           const files = Array.from(e.target.files);
                           let size = 0;
-                          files.forEach(element => size += element.size)
-                          const tamañoFormateado = sizeFormate(size)
+                          const newPreviewUrls: string[] = [];
+
+                          files.forEach(element => {
+                              size += element.size;
+                              newPreviewUrls.push(URL.createObjectURL(element));
+                          });
+
+                          const tamañoFormateado = sizeFormate(size);
                           setSizeFile(tamañoFormateado);
-                          onChange(e.target.files); // Esto ahora pasará FileList a react-hook-form
+                          setPreviewUrls(newPreviewUrls);
+                          onChange(e.target.files);
+                        } else {
+                            setPreviewUrls([]);
                         }
                       }}
                     />
                   </FormControl>
                   <FormMessage />
+                  {previewUrls.length > 0 && (
+                      <div className="mt-2 flex flex-wrap gap-2">
+                          {previewUrls.map((url, index) => (
+                              <img key={index} src={url} alt={`Preview ${index}`} className="w-24 h-24 object-cover rounded-md" />
+                          ))}
+                      </div>
+                  )}
                 </FormItem>
               )}
             />