almacenar img (sin terminar)

2025-07-21 15:39:27 -04:00
parent c377ab69da
commit a15505ff2c
8 changed files with 153 additions and 50 deletions
--- a/apps/web/feactures/inventory/components/inventory/create-product-form.tsx
+++ b/apps/web/feactures/inventory/components/inventory/create-product-form.tsx
@@ -20,7 +20,7 @@ import { Textarea } from '@repo/shadcn/textarea';
 import { Input } from '@repo/shadcn/input';
 import { useForm } from 'react-hook-form';
 import { useCreateUser } from "@/feactures/inventory/hooks/use-mutation";
-import { EditInventory, editInventory, formDataInput } from '@/feactures/inventory/schemas/inventory';
+import { EditInventory, editInventory } from '@/feactures/inventory/schemas/inventory';
 import {STATUS} from '@/constants/status'

 interface CreateFormProps {
@@ -44,12 +44,12 @@ export function CreateForm({
    description: '',
    address: '',
    price: '',
-    stock: '',
+    stock: 0,
    urlImg: '',
    status: ''
  }

-  const form = useForm<formDataInput>({
+  const form = useForm<EditInventory>({
    resolver: zodResolver(editInventory),
    defaultValues: defaultformValues,
    mode: 'onChange', // Enable real-time validation
@@ -145,7 +145,7 @@ export function CreateForm({
              <FormItem>
                <FormLabel>Cantidad/Stock</FormLabel>
                <FormControl>
-                  <Input {...field} type='number' />
+                  <Input {...field} type='number' onChange={(e) => field.onChange(Number(e.target.value))}/>
                </FormControl>
                <FormMessage />
              </FormItem>
@@ -201,4 +201,4 @@ export function CreateForm({
      </form>
    </Form>
  );
-}
+}
--- a/apps/web/feactures/inventory/components/inventory/update-product-form.tsx
+++ b/apps/web/feactures/inventory/components/inventory/update-product-form.tsx
@@ -19,7 +19,7 @@ import {
 import { Input } from '@repo/shadcn/input';
 import { useForm } from 'react-hook-form';
 import { useUpdateUser } from "@/feactures/inventory/hooks/use-mutation";
-import { editInventory, formDataInput, EditInventory } from '@/feactures/inventory/schemas/inventory'; // Renombrado EditInventory para claridad
+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'

@@ -40,25 +40,25 @@ export function UpdateForm({
    isError, // isError no se usa en el template, podrías usarlo para mostrar un mensaje global
  } = useUpdateUser();

-  const defaultformValues: formDataInput = {
+  const defaultformValues: EditInventory = {
    id: defaultValues?.id, 
    title: defaultValues?.title || '',
    description: defaultValues?.description || '',
    price: defaultValues?.price || '',
    address: defaultValues?.address || '',
    status: defaultValues?.status || 'BORRADOR',
-    stock: (defaultValues?.stock ?? '').toString(),
-    urlImg: defaultValues?.urlImg || '',
+    stock: defaultValues?.stock ?? 0,
+    urlImg: [], 
    userId: defaultValues?.userId 
  };

-  const form = useForm<formDataInput>({ 
+  const form = useForm<EditInventory>({ 
    resolver: zodResolver(editInventory),
    defaultValues: defaultformValues,
    mode: 'onChange', // Enable real-time validation
  });

-  const onSubmit = async (data: formDataInput) => {
+  const onSubmit = async (data: EditInventory) => {
    console.log(data);
    
    saveAccountingAccounts(data, {
@@ -106,7 +106,6 @@ export function UpdateForm({
              <FormItem >
                <FormLabel>Precio</FormLabel>
                <FormControl>
-                  {/* Simplificado. price es z.string(), field.value ya es string o undefined. */}
                  <Input {...field} />
                </FormControl>
                <FormMessage />
@@ -121,7 +120,6 @@ export function UpdateForm({
              <FormItem className='col-span-2'>
                <FormLabel>Dirección</FormLabel>
                <FormControl>
-                  {/* Simplificado. price es z.string(), field.value ya es string o undefined. */}
                  <Input {...field} />
                </FormControl>
                <FormMessage />
@@ -150,7 +148,7 @@ export function UpdateForm({
              <FormItem>
                <FormLabel>Cantidad/Stock</FormLabel>
                <FormControl>
-                  <Input {...field} type="number" />
+                  <Input {...field} type="number" onChange={(e) => field.onChange(Number(e.target.value))}/>
                </FormControl>
                <FormMessage />
              </FormItem>
@@ -180,19 +178,30 @@ export function UpdateForm({
            )}
          />

-          <FormField
-            control={form.control}
-            name="urlImg"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Imagen</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+          <div className="col-span-2">
+            <FormField
+              control={form.control}
+              name="urlImg"
+              render={({ field: { onChange, onBlur, name, ref } }) => (
+                <FormItem>
+                  <FormLabel>Imagen</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="file"
+                      multiple
+                      onBlur={onBlur}
+                      name={name}
+                      ref={ref}
+                      onChange={(e) => {
+                        onChange(e.target.files);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
        </div>

        <div className="flex justify-end gap-4">
--- a/apps/web/feactures/inventory/schemas/inventory.ts
+++ b/apps/web/feactures/inventory/schemas/inventory.ts
@@ -1,13 +1,38 @@
-import { user } from '@/feactures/auth/schemas/register';
-import { all } from 'axios';
+// import { user } from '@/feactures/auth/schemas/register';
+// import { all } from 'axios';
 import { z } from 'zod';

 export type InventoryTable = z.infer<typeof product>;
-export type EditInventory = z.infer<typeof editInventory>; //output
-export type formDataInput = z.input<typeof editInventory>;
+export type EditInventory = z.infer<typeof editInventory>;
 export type ProductApiResponseSchema = z.infer<typeof productApiResponseSchema>;
 export type allProducts = z.infer<typeof productDetails>;

+// --- Esquemas de validación para archivos ---
+
+// Esquema básico para un solo archivo
+const fileSchema = z.object({
+  name: z.string().min(1, 'El nombre del archivo no puede estar vacío.'),
+  size: z.number().int().positive('El tamaño del archivo debe ser positivo.'),
+  type: z.string().refine(
+    (type) => type.startsWith('image/'),
+    'Solo se permiten archivos de imagen.'
+  ),
+  // Puedes añadir más validaciones personalizadas aquí
+  // Por ejemplo, limitar el tamaño máximo a 5MB (5 * 1024 * 1024 bytes)
+}).refine(
+  (file) => file.size <= 5 * 1024 * 1024,
+  'El tamaño del archivo no debe exceder los 5MB.'
+);
+
+// Esquema para un array de archivos (cuando el input es multiple)
+const filesArraySchema = z.array(fileSchema).max(5, 'Solo se permiten hasta 5 archivos.');
+
+// const formSchema = z.object({
+//   file: z
+//     .instanceof(FileList)
+//     .refine((file) => file?.length == 1, 'File is required.')
+// });
+
 export const product = z.object({
  id: z.number().optional(),
  title: z.string(),
@@ -16,7 +41,8 @@ export const product = z.object({
  // category: z.string(),
  stock: z.number(),
  price: z.string(),
-  urlImg: z.string(),
+  urlImg: z.any(),
+  // urlImg: z.string(),
  status: z.string(),
  userId: z.number().optional()
 })
@@ -31,12 +57,10 @@ export const editInventory = z.object({
  id: z.number().optional(),
  title: z.string().min(5, { message: "Debe de tener 5 o más caracteres" }),
  description: z.string().min(10, { message: "Debe de tener 10 o más caracteres" }),
-  stock: z.string().transform(val => Number(val)).pipe(z.number(
-    { invalid_type_error: 'El stock debe ser un número' }).min(0, { message: "El stock debe ser mayor a 0" })
-  ),
+  stock: z.number(),
  address: z.string().min(5, { message: "Debe de tener 5 o más caracteres" }),
  price: z.string(),
-  urlImg: z.string(),
+  urlImg: z.any(),
  status: z.string().min(1, { message: "Debe de seleccionar un valor" }),
  userId: z.number().optional(),
 })