agregado Scroll infinito para las encuestas

apps/api/src/features/inventory/inventory.service.ts

@@ -3,7 +3,7 @@ import { Inject, Injectable, HttpException, HttpStatus } from '@nestjs/common';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import * as schema from 'src/database/index';
 import { products, viewProductsStore } from 'src/database/index';
-import { eq, like, or, SQL, sql, and, not } from 'drizzle-orm';
+import { eq, like, or, SQL, sql, and, not, ne } from 'drizzle-orm';
 import { CreateProductDto } from './dto/create-product.dto';
 import { UpdateProductDto } from './dto/update-product.dto';
 import { Product, Store, Inventory } from './entities/inventory.entity';
@@ -28,12 +28,21 @@ export class InventoryService {
     let searchCondition: SQL<unknown> | undefined;
 
     if (search) {
-      searchCondition = and(or(
+      searchCondition = and(
+        or(
           like(products.title, `%${search}%`),
           like(products.description, `%${search}%`),
-      ), eq(products.userId, id));
+        ), 
+        and(
+          eq(products.userId, id), 
+          ne(products.status, 'ELIMINADO')
+        )
+      )
     } else {
-      searchCondition = eq(products.userId, id);
+      searchCondition = and(
+        eq(products.userId, id), 
+        ne(products.status, 'ELIMINADO')
+      )
     }
 
     // Build sort condition
@@ -98,7 +107,7 @@ export class InventoryService {
           like(viewProductsStore.title, `%${search}%`),
           like(viewProductsStore.description, `%${search}%`)
         ),
-        or(eq(viewProductsStore.status, 'PUBLICADO'), eq(viewProductsStore.status, 'AGOTADO'))
+        and(ne(viewProductsStore.status, 'BORRADOR'), ne(viewProductsStore.status, 'ELIMINADO'))
       )
     } else if (search) {
       or(
@@ -106,7 +115,7 @@ export class InventoryService {
         like(viewProductsStore.description, `%${search}%`)
       )
     } else if (isStore) {
-      searchCondition = or(eq(viewProductsStore.status, 'PUBLICADO'), eq(viewProductsStore.status, 'AGOTADO'))
+      searchCondition = and(ne(viewProductsStore.status, 'BORRADOR'), ne(viewProductsStore.status, 'ELIMINADO'))
     }
 
     // Build sort condition
@@ -177,7 +186,7 @@ export class InventoryService {
         phone: viewProductsStore.phone
       })
       .from(viewProductsStore)
-      .where(eq(viewProductsStore.id, id));
+      .where(and(eq(viewProductsStore.id, id), ne(viewProductsStore.status, 'ELIMINADO')));
 
     if (find.length === 0) {
       throw new HttpException('Product does not exist', HttpStatus.NOT_FOUND);
@@ -290,23 +299,21 @@ export class InventoryService {
   }
 
   async remove(productId: number, userId: number): Promise<{ message: string }> {
-    const picturesPath = join(__dirname, '..', '..', '..', '..', 'web', 'public', 'uploads', 'inventory', userId.toString() , productId.toString());
+    // const picturesPath = join(__dirname, '..', '..', '..', '..', 'web', 'public', 'uploads', 'inventory', userId.toString() , productId.toString());
       
-    try {
+    // try {
-      // Borra el directorio y todos sus contenidos de forma recursiva y forzada.
+    //   // Borra el directorio y todos sus contenidos de forma recursiva y forzada.
-      await rm(picturesPath, { recursive: true, force: true });
+    //   await rm(picturesPath, { recursive: true, force: true });
-    } catch (error) {
+    // } catch (error) {
-      // Es buena práctica manejar el error, aunque `force: true` lo hace menos probable.
+    //   console.error(`No se pudo eliminar el directorio ${picturesPath}:`, error);
-      // Podrías registrar el error, pero no detener la ejecución.
+    // }
-      console.error(`No se pudo eliminar el directorio ${picturesPath}:`, error);
-    }
 
     // Check if exists
     await this.findOne(productId);
 
     // Delete user (this will cascade delete related records due to foreign key constraints)
-    await this.drizzle.delete(products).where(eq(products.id, productId));
+    // await this.drizzle.delete(products).where(eq(products.id, productId));
-    // await this.drizzle.update(products).set({ status: 'ELIMINADO' }).where(eq(products.id, productId));
+    await this.drizzle.update(products).set({ status: 'ELIMINADO' }).where(eq(products.id, productId));
 
     return { message: 'Product deleted successfully' };
   }

apps/api/src/features/surveys/surveys.service.ts

@@ -5,7 +5,7 @@ import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import * as schema from '@/database/index';
 import { CreateSurveyDto } from './dto/create-survey.dto';
 import { UpdateSurveyDto } from './dto/update-survey.dto';
-import { and, count, eq, ilike, isNull, or, sql } from 'drizzle-orm';
+import { and, count, eq, ilike, isNull, like, or, sql } from 'drizzle-orm';
 import { SurveyDetailDto, SurveyStatisticsResponseDto } from './dto/statistics-response.dto';
 import { PaginationDto } from '@/common/dto/pagination.dto';
 import { AnswersSurveyDto } from './dto/response-survey.dto';
@@ -92,7 +92,15 @@ export class SurveysService {
     // }
 
     if (findForUserDto.rol[0].rol !== 'superadmin' && findForUserDto.rol[0].rol !== 'admin') {
-      searchCondition = or(eq(surveys.targetAudience, findForUserDto.rol[0].rol), eq(surveys.targetAudience, 'all'))
+      searchCondition = and(
+        or(
+          eq(surveys.targetAudience, findForUserDto.rol[0].rol),
+          eq(surveys.targetAudience, 'all')
+        ),
+        like(surveys.title, `%${search}%`)
+      )
+    } else {
+      searchCondition = like(surveys.title, `%${search}%`)
     }
 
     // console.log(searchCondition);

apps/web/app/dashboard/productos/page.tsx

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

apps/web/constants/status.ts

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

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

@@ -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

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

@@ -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,24 +43,37 @@ 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">
+          <p className="text-muted-foreground">No hay productos disponibles en este momento.</p>
-            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;           
             return (

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

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

apps/web/feactures/inventory/components/products/productCard.tsx

@@ -17,13 +17,10 @@ interface cardProps {
 export function ProductCard({ product, onClick }: cardProps) {
 
   return (
-          <Card className="cursor-pointer flex flex-col" onClick={onClick}
+    <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"
@@ -34,10 +31,9 @@ export function ProductCard({ product, onClick }: cardProps) {
       <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>
-
   )
 }

apps/web/feactures/surveys/components/survey-card.tsx

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

apps/web/feactures/surveys/components/survey-list.tsx

@@ -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 { useAllSurveysInfiniteQuery } from '@/feactures/surveys/hooks/use-query-surveys';
+import { SurveyCard } from '@/feactures/surveys/components/survey-card';
+
 import { SurveyAnswerForUser } from '../schemas/survey';
-import { Badge } from '@repo/shadcn/badge';
+
-import { BadgeCheck } from 'lucide-react';
+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 ? (
+      <form onSubmit={formSubmit} action={''} className='col-span-full text-center py-3 flex gap-3'>
-        <div className="col-span-full text-center py-10">
+        <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) => (
+        <>
-          
+          {surveys.map((data: SurveyAnswerForUser, index) => {
-          <Card key={data.surveys.id} className="flex flex-col">
+            const isLastElement = index === surveys.length - 1;
-            <CardHeader>
+            return (
-              <CardTitle>{data.surveys.title}</CardTitle>
+              <div ref={isLastElement ? lastProductRef : null} key={data.surveys.id}>
-              <CardDescription>{data.surveys.description}</CardDescription>
+                <SurveyCard data={data} onClick={handleRespond}/>
-            </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>
+            )
+          })}
+          {isFetchingNextPage && (
+            <section className="col-span-full text-center py-10">
+              <p className="text-muted-foreground">Cargando más productos...</p>
+            </section>
+          )}
+        </>
       )}
     </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>
-        ))
-      )}
-    </div>
-  );
 }

apps/web/feactures/surveys/hooks/use-query-surveys.ts

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

apps/web/hooks/use-safe-query.ts

@@ -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,
@@ -26,19 +25,3 @@ export function useSafeInfiniteQuery<T, K = unknown>(
     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,
-//     })
-
-// }