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

19
apps/web/app/dashboard/productos/page.tsx
View File

@@ -1,28 +1,11 @@
'use client';
// import PageContainer from '@/components/layout/page-container';
// import { ProductList } from '@/feactures/inventory/components/products/product-list';
import { ProductList } from '@/feactures/inventory/components/products/product-list-scroll';
import { Button } from '@repo/shadcn/components/ui/button';
// import { Metadata } from 'next';
import { useAllProductQuery } from '@/feactures/inventory/hooks/use-query-products';
import { allProducts } from '@/feactures/inventory/schemas/inventory';
// export const metadata: Metadata = {
// title: 'Productos - Fondemi',
// description: 'Listado de productos disponibles',
// };
export default function SurveysPage() {
// const { data } = useAllProductQuery();
// let products: allProducts[] = []
// if (data?.data) {
// products = data.data
// }
return (
// <PageContainer>
<main className='p-4 md:px-6'>
<header className="w-full flex flex-col sm:flex-row sm:justify-between">
<h1 className="text-2xl font-bold mb-1">Productos disponibles</h1>
@@ -32,7 +15,5 @@ export default function SurveysPage() {
</header>
<ProductList/>
</main>
// </PageContainer>
);
}

8
apps/web/constants/status.ts
View File

@@ -1,5 +1,13 @@
export const STATUS = {
PUBLICADO:"Publicado",
AGOTADO:"Agotado",
BORRADOR:"Borrador"
}
export const PRIVATESTATUS = {
PUBLICADO:"Publicado",
AGOTADO:"Agotado",
BORRADOR:"Borrador",
ELIMINADO:"Eliminado",
BLOQUEADO:"Bloqueado"
}

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>
)
}

55
apps/web/feactures/surveys/components/survey-card.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Button } from '@repo/shadcn/button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@repo/shadcn/card';
import { Badge } from '@repo/shadcn/badge';
import { BadgeCheck } from 'lucide-react';
import { SurveyAnswerForUser } from '../schemas/survey';
interface cardProps {
data: SurveyAnswerForUser;
onClick: (id: number) => void;
}
export function SurveyCard ({ data, onClick }: cardProps) {
return (
<Card key={data.surveys.id} className="flex flex-col">
<CardHeader>
<CardTitle>{data.surveys.title}</CardTitle>
<CardDescription>{data.surveys.description}</CardDescription>
</CardHeader>
<CardContent className="flex-grow">
<section className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-muted-foreground">Fecha de creación:</span>
<span>{new Date(data.surveys.created_at).toLocaleDateString()}</span>
</div>
{data.surveys.closingDate && (
<div className="flex justify-between">
<span className="text-muted-foreground">Fecha de cierre:</span>
<span>{new Date(data.surveys.closingDate).toLocaleDateString()}</span>
</div>
)}
</section>
</CardContent>
<CardFooter className="flex justify-center">
{data.answers_surveys === null ? (
<Button className="w-full" onClick={() => onClick(Number(data.surveys.id))}>
Responder
</Button>
) : (
<Badge className="px-4 py-2 w-full bg-green-600 text-black">
<BadgeCheck size={28} />
Realizada
</Badge>
)}
</CardFooter>
</Card>
)
}

136
apps/web/feactures/surveys/components/survey-list.tsx
View File

@@ -4,83 +4,99 @@
// - Permite editar encuestas existentes
// - Permite eliminar encuestas con confirmación
// - Muestra el estado (publicada/borrador), fechas y conteo de respuestas
'use client';
import { Button } from '@repo/shadcn/button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@repo/shadcn/card';
import { useRouter } from 'next/navigation';
import { useSurveysForUserQuery } from '@/feactures/surveys/hooks/use-query-surveys';
import { SurveyAnswerForUser } from '../schemas/survey';
import { Badge } from '@repo/shadcn/badge';
import { BadgeCheck } from 'lucide-react';
import { useAllSurveysInfiniteQuery } from '@/feactures/surveys/hooks/use-query-surveys';
import { SurveyCard } from '@/feactures/surveys/components/survey-card';
import { SurveyAnswerForUser } from '../schemas/survey';
import { useEffect, useRef, useState } from 'react';
import { Input } from '@repo/shadcn/components/ui/input';
export function SurveyList() {
const router = useRouter();
const {data: surveys} = useSurveysForUserQuery()
const lastProductRef = useRef(null);
const [search, setSearch] = useState("")
const {
data,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
isLoading
} = useAllSurveysInfiniteQuery(search)
useEffect(() => {
if (!lastProductRef.current || !hasNextPage || isFetchingNextPage) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
fetchNextPage();
}
},
{
root: null,
rootMargin: '200px',
threshold: 1.0,
}
);
observer.observe(lastProductRef.current);
return () => {
observer.disconnect();
};
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
const surveys = data?.pages.flatMap(page => page.data) || [];
// 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 handleRespond = (surveyId: number) => {
router.push(`/dashboard/encuestas/${surveyId}/responder`);
};
// console.log(surveys?.data)
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{surveys?.meta.totalPages === 0 ? (
<div className="col-span-full text-center py-10">
<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>
) : surveys.length === 0 ? (
<section className="col-span-full text-center py-10">
<p className="text-muted-foreground">No hay encuestas disponibles en este momento.</p>
</div>
</section>
) : (
surveys?.data.map((data: SurveyAnswerForUser) => (
<Card key={data.surveys.id} className="flex flex-col">
<CardHeader>
<CardTitle>{data.surveys.title}</CardTitle>
<CardDescription>{data.surveys.description}</CardDescription>
</CardHeader>
<CardContent className="flex-grow">
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-muted-foreground">Fecha de creación:</span>
{/* <span>{data.surveys.created_at.toLocaleDateString()}</span> */}
<span>{new Date(data.surveys.created_at).toLocaleDateString()}</span>
</div>
{data.surveys.closingDate && (
<div className="flex justify-between">
<span className="text-muted-foreground">Fecha de cierre:</span>
{/* <span>{data.surveys.closingDate.toLocaleDateString()}</span> */}
<span>{new Date(data.surveys.closingDate).toLocaleDateString()}</span>
</div>
)}
<>
{surveys.map((data: SurveyAnswerForUser, index) => {
const isLastElement = index === surveys.length - 1;
return (
<div ref={isLastElement ? lastProductRef : null} key={data.surveys.id}>
<SurveyCard data={data} onClick={handleRespond}/>
</div>
</CardContent>
<CardFooter className="flex justify-center">
{data.answers_surveys === null ? (
<Button
className="w-full"
onClick={() => handleRespond(Number(data.surveys.id))}
>
Responder
</Button>
) : (
<Badge className="px-4 py-2 w-full bg-green-600 text-black">
<BadgeCheck size={28} />
Realizada
</Badge>
)}
</CardFooter>
</Card>
))
)
})}
{isFetchingNextPage && (
<section className="col-span-full text-center py-10">
<p className="text-muted-foreground">Cargando más productos...</p>
</section>
)}
</>
)}
</div>
);
)
}

20
apps/web/feactures/surveys/hooks/use-query-surveys.ts
View File

@@ -1,5 +1,5 @@
'use client'
import { useSafeQuery } from "@/hooks/use-safe-query";
import { useSafeInfiniteQuery, useSafeQuery } from "@/hooks/use-safe-query";
import { getSurveyByIdAction, getSurveysAction, getSurveysForUserAction } from "../actions/surveys-actions";
@@ -8,13 +8,25 @@ export function useSurveysQuery(params = {}) {
return useSafeQuery(['surveys',params], () => getSurveysAction(params))
}
export function useAllSurveysInfiniteQuery(search: string = '') {
return useSafeInfiniteQuery(
['surveys', search],
// pageParam + 1 para evitar duplicación de datos
({ pageParam = 0 }) => getSurveysForUserAction({ page: pageParam + 1, limit: 10, search }),
(lastPage, allPages) => {
// Esta lógica determina el 'pageParam' para la siguiente página
const nextPage = allPages.length;
// Puedes añadir una condición para saber si hay más páginas
if (lastPage.data.length < 10) return undefined;
return nextPage;
}
)
}
export function useSurveysForUserQuery(params = {}) {
return useSafeQuery(['surveys',params], () => getSurveysForUserAction(params))
}
export function useSurveysByIdQuery(id: number) {
return useSafeQuery(['surveys',id], () => getSurveyByIdAction(id))
}

19
apps/web/hooks/use-safe-query.ts
View File

@@ -17,7 +17,6 @@ export function useSafeInfiniteQuery<T, K = unknown>(
queryKey: [string, K?],
queryFn: ({ pageParam }: { pageParam: number }) => Promise<T>,
getNextPageParam: (lastPage: T, allPages: T[]) => number | undefined,
// options?: Omit<UseQueryOptions<T>, 'queryKey' | 'queryFn'>
) {
return useInfiniteQuery({
queryKey,
@@ -25,20 +24,4 @@ export function useSafeInfiniteQuery<T, K = unknown>(
getNextPageParam,
initialPageParam: 0,
})
}
// export function useAllProductInfiniteQuery(){
// return useInfiniteQuery({
// queryKey:['product'],
// queryFn: ({ pageParam = 0 }) => getAllProducts({ page: pageParam + 1, limit: 10 }),
// getNextPageParam: (lastPage, allPages) => {
// // Esta lógica determina el 'pageParam' para la siguiente página
// const nextPage = allPages.length;
// // Puedes añadir una condición para saber si hay más páginas
// if (lastPage.data.length < 10) return undefined;
// return nextPage;
// },
// initialPageParam: 0,
// })
// }
}