Fondemi/sistema_base
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

agregado Scroll infinito para las encuestas

Browse Source
This commit is contained in:
Sergio Ramirez
2025-09-11 12:33:36 -04:00
parent 5ed7f20b24
commit 1ab03ea10b
12 changed files with 236 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,7 @@ import { Textarea } from '@repo/shadcn/components/ui/textarea';
import {STATUS} from '@/constants/status'
import { useState, useEffect } from 'react';
import {sizeFormate} from "@/feactures/inventory/utils/sizeFormate"
import { z } from 'zod'; // Asegúrate de importar Zod
// import { z } from 'zod'; // Asegúrate de importar Zod
// --- MODIFICACIÓN CLAVE ---
// Extiende tu esquema para incluir el campo de imagen como FileList para el frontend

46
apps/web/feactures/inventory/components/products/product-list-scroll.tsx
View File

@@ -2,7 +2,7 @@
import { useRouter } from 'next/navigation';
import { useAllProductInfiniteQuery } from '@/feactures/inventory/hooks/use-query-products';
import { ProductCard } from '@/feactures/inventory/components/products/productCard';
import { allProducts } from '@/feactures/inventory/schemas/inventory';
// import { allProducts } from '@/feactures/inventory/schemas/inventory';
import { useRef, useEffect, useState } from 'react';
import { Input } from '@repo/shadcn/components/ui/input';
import { Button } from '@repo/shadcn/components/ui/button';
@@ -20,21 +20,6 @@ export function ProductList() {
isLoading
} = useAllProductInfiniteQuery(search);
// Funcion al hacer click en un producto
const goTo = (id: number) => {
router.push(`/dashboard/productos/${id}`);
};
// funcion para el buscador
const formSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formdata = new FormData(e.currentTarget)
setSearch(formdata.get('search') as string)
console.log('submit')
}
const products = data?.pages.flatMap(page => page.data) || [];
useEffect(() => {
if (!lastProductRef.current || !hasNextPage || isFetchingNextPage) return;
@@ -58,26 +43,39 @@ export function ProductList() {
};
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
// Funcion al hacer click en un producto
const goTo = (id: number) => {
router.push(`/dashboard/productos/${id}`);
};
// funcion para el buscador
const formSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formdata = new FormData(e.currentTarget)
setSearch(formdata.get('search') as string)
console.log('submit')
}
const products = data?.pages.flatMap(page => page.data) || [];
return (
<div className="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
<form onSubmit={formSubmit} action={''} className='col-span-full text-center py-3 flex gap-3'>
<Input name='search' type='text' placeholder='Buscar...' className='' defaultValue={search}/>
<Button variant={'outline'} className=''>Buscar</Button>
</form>
{isLoading ? (
<section className="col-span-full text-center py-10">
<p className="text-muted-foreground">Cargando productos...</p>
</section>
) : products.length === 0 ? (
<section className="col-span-full text-center py-10">
<p className="text-muted-foreground">
No hay productos disponibles en este momento.
</p>
<p className="text-muted-foreground">No hay productos disponibles en este momento.</p>
</section>
) : (
<>
<form onSubmit={formSubmit} action={''} className='col-span-full text-center py-3 flex gap-3'>
<Input name='search' type='text' placeholder='Buscar...' className='' defaultValue={search}/>
<Button variant={'outline'} className=''>Buscar</Button>
</form>
{products.map((item, index) => {
const isLastElement = index === products.length - 1;
const isLastElement = index === products.length - 1;
return (
<div ref={isLastElement ? lastProductRef : null} key={item.id}>
<ProductCard product={item} onClick={() => goTo(Number(item.id))} />

30
apps/web/feactures/inventory/components/products/product-list.tsx
View File

@@ -1,30 +0,0 @@
'use client';
import { useRouter } from 'next/navigation';
import { useAllProductQuery } from '@/feactures/inventory/hooks/use-query-products';
import { allProducts } from '../../schemas/inventory';
import { ProductCard } from '@/feactures/inventory/components/products/productCard'
export function ProductList() {
const router = useRouter();
const { data: produts } = useAllProductQuery();
const handle = (id: number) => {
router.push(`/dashboard/productos/${id}`);
};
return (
<div className="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
{produts?.meta.totalPages === 0 ? (
<section className="col-span-full text-center py-10">
<p className="text-muted-foreground">
No hay productos disponibles en este momento.
</p>
</section>
) : (
produts?.data.map((data: allProducts) => (
<ProductCard product={data} onClick={() => handle(Number(data.id))} key={data.id} />
))
)}
</div>
);
}

44
apps/web/feactures/inventory/components/products/productCard.tsx
View File

@@ -10,34 +10,30 @@ import {
import { allProducts } from '../../schemas/inventory';
interface cardProps {
product: allProducts;
onClick?: () => void;
product: allProducts;
onClick?: () => void;
}
export function ProductCard({ product, onClick }: cardProps) {
return (
<Card className="cursor-pointer flex flex-col" onClick={onClick}
>
{/* <CardHeader> */}
<CardTitle className="text-base font-bold truncate p-3 text-primary">
{product.title.charAt(0).toUpperCase() + product.title.slice(1)}
</CardTitle>
{/* </CardHeader> */}
<CardContent className="p-0 flex-grow">
<img
className="object-cover w-full h-full aspect-square border"
src={`/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`}
alt=""
/>
</CardContent>
<CardFooter className="flex-col items-start p-4">
{product.status === 'AGOTADO' ? (
<p className="font-semibold text-lg text-red-900">AGOTADO</p>
): ('')}
<p className="font-semibold text-lg">$ {product.price}</p>
</CardFooter>
</Card>
<Card className="cursor-pointer flex flex-col" onClick={onClick}>
<CardTitle className="text-base font-bold truncate p-3 text-primary">
{product.title.charAt(0).toUpperCase() + product.title.slice(1)}
</CardTitle>
<CardContent className="p-0 flex-grow">
<img
className="object-cover w-full h-full aspect-square border"
src={`/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`}
alt=""
/>
</CardContent>
<CardFooter className="flex-col items-start p-4">
{product.status === 'AGOTADO' ? (
<p className="font-semibold text-lg text-red-900">AGOTADO</p>
) : ('')}
<p className="font-semibold text-lg">$ {product.price}</p>
</CardFooter>
</Card>
)
}