agregado Scroll infinito para las encuestas

2025-09-11 12:33:36 -04:00
parent 5ed7f20b24
commit 1ab03ea10b
12 changed files with 236 additions and 202 deletions
--- a/apps/api/src/features/inventory/inventory.service.ts
+++ b/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 {
-      // Borra el directorio y todos sus contenidos de forma recursiva y forzada.
-      await rm(picturesPath, { recursive: true, force: true });
-    } catch (error) {
-      // Es buena práctica manejar el error, aunque `force: true` lo hace menos probable.
-      // Podrías registrar el error, pero no detener la ejecución.
-      console.error(`No se pudo eliminar el directorio ${picturesPath}:`, error);
-    }
+    // try {
+    //   // Borra el directorio y todos sus contenidos de forma recursiva y forzada.
+    //   await rm(picturesPath, { recursive: true, force: true });
+    // } catch (error) {
+    //   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.update(products).set({ status: 'ELIMINADO' }).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));

    return { message: 'Product deleted successfully' };
  }
--- a/apps/api/src/features/surveys/surveys.service.ts
+++ b/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);
--- a/apps/web/app/dashboard/productos/page.tsx
+++ b/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>
-   
  );
 }
--- a/apps/web/constants/status.ts
+++ b/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"
 }
--- a/apps/web/feactures/inventory/components/inventory/update-product-form.tsx
+++ b/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
--- a/apps/web/feactures/inventory/components/products/product-list-scroll.tsx
+++ b/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">
-            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;           
            return (
--- a/apps/web/feactures/inventory/components/products/product-list.tsx
+++ b/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>
-  );
-}
--- a/apps/web/feactures/inventory/components/products/productCard.tsx
+++ b/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}
-          >
-            {/* <CardHeader> */}
+    <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>
-            {/* </CardHeader> */}
      <CardContent className="p-0 flex-grow">
        <img
          className="object-cover w-full h-full aspect-square border"
@@ -38,6 +35,5 @@ export function ProductCard({ product, onClick }: cardProps) {
        <p className="font-semibold text-lg">$ {product.price}</p>
      </CardFooter>
    </Card>
-
  )
 }
--- a/apps/web/feactures/surveys/components/survey-card.tsx
+++ b/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>
+    )
+}
--- a/apps/web/feactures/surveys/components/survey-list.tsx
+++ b/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 ? (
-        <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>
+        <>
+          {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>
+            )
+          })}
+          {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>
-  );
+  )
 }
--- a/apps/web/feactures/surveys/hooks/use-query-surveys.ts
+++ b/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))
 }
--- a/apps/web/hooks/use-safe-query.ts
+++ b/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,
-//     })
-
-// }