catalogo hecho

src/App.jsx

@@ -3,6 +3,7 @@ import { NavBar } from "./NavBar";
 import { Prescripcion } from "./Prescripcion";
 import { Catalogo } from "./Catalogo";
 import { useState } from "react";
+import { Carrito } from "./Carrito";
 
 const Home = () => {
   return <div>Home</div>;
@@ -14,6 +15,8 @@ const Pedidos = () => {
 
 export default function App() {
 
+  const [carrito, setCarrito] = useState([])
+
   return (
     <div className="flex flex-col items-center h-screen">
       <NavBar />
@@ -21,7 +24,8 @@ export default function App() {
         <Route path="/" element={<Home />} />
         <Route path="/pedidos" element={<Pedidos />} />
         <Route path="/prescripcion" element={<Prescripcion />} />
-        <Route path="/catalogo" element={<Catalogo />} />
+        <Route path="/catalogo" element={<Catalogo setCarrito={setCarrito} carrito={carrito}/>} />
+        <Route path="/carrito" element={<Carrito setCarrito={setCarrito} carrito={carrito}/>} />
       </Routes>
     </div>
   );

src/Carrito.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const Carrito = () => {
+  return (
+    <div>Carrito</div>
+  )
+}

src/Catalogo.jsx

@@ -1,8 +1,84 @@
-import React from 'react'
-import CatalogoMonturaCard from './components/CatalogoMonturaCard'
+import React, { useEffect, useState } from "react";
+import CatalogoMonturaCard from "./components/CatalogoMonturaCard";
+import {
+  actualizarPut,
+  cargarApi,
+  obtenerEspecifico,
+  registrarPost,
+  obtenerGet,
+} from "./lib/conexionApi";
+import ModalVerCarrito from "./components/ModalVerCarrito";
+
+export const Catalogo = ({ setCarrito, carrito }) => {
+  // Se obtienen primero los detalles de cada montura
+  const [monturas, setMonturas] = useState([]);
+  // se obtienen los datos de precio, stock y código
+  const [monturasInventario, setmonturasInventario] = useState([]);
+
+  const [montura, setMontura] = useState({})
+  const [monturaInventario, setMonturaInventario] = useState({})
+
+  const [errorConsultaMonturas, setsetErrorConsultaMonturas] = useState(false);
+  const [errorConsultaMonturasInv, setsetErrorConsultaMonturasInv] =
+    useState(false);
+
+  const [btnBuscarMonturaCodigo, setbtnBuscarMonturaCodigo] = useState(false);
+
+  const [modalVerCarrito, setModalVerCarrito] = useState(false)
+
+  // obtener detalle de monturas
+  useEffect(() => {
+    obtenerGet("monturas", setMonturas, setsetErrorConsultaMonturas);
+  }, []);
+  // obtener catalogo de monturas
+  useEffect(() => {
+    obtenerGet(
+      "monturas_inventario",
+      setmonturasInventario,
+      setsetErrorConsultaMonturasInv
+    );
+  }, []);
 
-export  const Catalogo = () => {
   return (
-    <CatalogoMonturaCard/>
-  )
-}
+    <div className="mx-20 mt-5">
+      
+      <div className="flex flex-col justify-center items-center">
+        <h1 className="my-10 text-5xl font-semibold text-center">Catálogo de monturas</h1>
+        <div className="flex flex-row gap-2 mb-2 w-1/3">
+          <input
+            className="border w-3/4 py-2 px-3 rounded-md"
+            id="input-buscar-cliente "
+            type="text"
+            placeholder="Código de  montura"
+          />
+          <button className="rounded-md w-1/4 bg-slate-700 hover:bg-slate-800 text-white font-semibold px-2 text-center">
+            Buscar
+          </button>
+        </div>
+      </div>
+      <div className="mt-5 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+        {monturasInventario.map((monturaInventario) => {
+          const montura = monturas.find(
+            (montura) =>
+              montura["id_montura"] === monturaInventario["id_montura"]
+          );
+          return (
+            <CatalogoMonturaCard
+              key={montura["id_montura"]}
+              montura={montura}
+              monturaInventario={monturaInventario}
+              setModalVerCarrito={setModalVerCarrito}
+              setMontura={setMontura}
+              setMonturaInventario={setMonturaInventario}
+              setCarrito={setCarrito}
+              carrito={carrito}
+            />
+          );
+        })}
+      </div>
+      {modalVerCarrito && (
+        <ModalVerCarrito montura={montura} monturaInventario={monturaInventario} setModalVerCarrito={setModalVerCarrito} setMontura={setMontura} setMonturaInventario={setMonturaInventario} />
+      )}
+    </div>
+  );
+};

src/NavBar.jsx

@@ -5,31 +5,36 @@ export const NavBar = () => {
   return (
     <header className="w-full ">
       <div className="bg-slate-500 text-white text-center pt-20 pb-10">
-        <h1 className="text-5xl font-semibold ">Óptica Arte Visual</h1>
+        <h1 className="text-4xl font-semibold ">Óptica Arte Visual</h1>
         <p className="mt-5">La mejor calidad en monturas con modelos exclusivos y resinas de alta calidad</p>
       </div>
       <nav className="bg-slate-700">
         <ul id="nav-ul" className="flex flex-row justify-center text-xl">
-          <NavLink className="w-1/4 text-center" to="/">
+          <NavLink className="w-1/5 text-center" to="/">
             <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
               Home
             </li>
           </NavLink>
-          <NavLink className="w-1/4 text-center" to="/pedidos">
+          <NavLink className="w-1/5 text-center" to="/pedidos">
             <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
               Pedidos
             </li>
           </NavLink>
-          <NavLink className="w-1/4 text-center" to="/prescripcion">
+          <NavLink className="w-1/5 text-center" to="/prescripcion">
             <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
               Emitir Prescripción
             </li>
           </NavLink>
-          <NavLink className="w-1/4 text-center" to="/catalogo">
+          <NavLink className="w-1/5 text-center" to="/catalogo">
             <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
               Catálogo
             </li>
           </NavLink>
+          <NavLink className="w-1/5 text-center" to="/carrito">
+            <li className="hover:bg-slate-800 text-white py-2 hover:font-semibold">
+              Carrito de compras
+            </li>
+          </NavLink>
         </ul>
       </nav>
     </header>

src/Prescripcion.jsx

@@ -222,7 +222,7 @@ export const Prescripcion = () => {
   return (
     <div className=" w-3/5 flex flex-row my-5 p-5 h-auto">
       <div className="w-2/5">
-        {btnBuscarClick && error && <ErrorMessage mensaje={'No se encontraron resultados'}/>}
+        {(btnBuscarClick && error) && <ErrorMessage mensaje={'No se encontraron resultados'}/>}
         <div className=" flex flex-row">
           <div className="w-full pr-5">
             {/* BARRA DE BÚSQUEDA DE CLIENTE */}
@@ -366,6 +366,8 @@ export const Prescripcion = () => {
           setTelefono={setTelefono}
           direccion={direccion}
           setDireccion={setDireccion}
+          setError={setError}
+          setClienteBusqueda={setClienteBusqueda}
         />
       )}
       {openModalPrescripcion && (

src/components/CatalogoMonturaCard.jsx

@@ -1,8 +1,80 @@
+import { formatearStringUrlImagen } from "../lib/funciones";
+
+const CatalogoMonturaCard = ({
+  montura = {
+    "id_montura": 10,
+    "nombre_montura": "Nombre monturaaaaaaaaaaaaaaaaaaa",
+    "imagen":
+      '<img src="https://i.ibb.co/jHWcz8B/EBJ8-NK3-Ko81-301-C5-Frontal.png" alt="EBJ8-NK3-Ko81-301-C5-Frontal" border="0">',
+    "marca": "Marca montura",
+    "color": "Color montura",
+    "material": "Material Montura",
+  },
+  monturaInventario = {
+    "id_montura_inventario": 10,
+    "id_montura": 8,
+    "precio_unit": 90,
+    "stock": 20,
+    "codigo": "montura8",
+  },
+  setModalVerCarrito,
+  setMontura,
+  setMonturaInventario,
+  setCarrito,
+  carrito
+}) => {
+  const { src, alt, border } = formatearStringUrlImagen(montura["imagen"]);
 
-const CatalogoMonturaCard = () => {
   return (
-    <div>montura</div>
-  )
-}
+    <div className="p-5 hover:bg-slate-50 w-[360px]">
+      <div className="w-30 h-[150px] p-5">
+        <img src={src} alt={alt} border={border} className="  mb-5" />
+      </div>
+      <div className="flex flex-col items-center">
+        <h3 className="text-center px-6 w-full uppercase text-xl font-semibold truncate ">{montura["nombre_montura"]}</h3>
+        <div className="flex flex-row gap-2 items-center">
+          <p className="text-sm ">S/.
+            <span className="text-2xl">
+              {monturaInventario["precio_unit"]}
+            </span>
+          </p>
+          <div className="hover:bg-slate-300 rounded-full p-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="icon icon-tabler icon-tabler-shopping-cart-plus"
+              width="30"
+              height="30"
+              viewBox="0 0 24 24"
+              strokeWidth="1.5"
+              stroke="#000000"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              onClick={(e) => {
+                e.preventDefault();
+                setMontura(montura);
+                setMonturaInventario(monturaInventario);
+                setModalVerCarrito(true)
+                setCarrito([...carrito, {
+                  "id_montura_inventario":monturaInventario["id_montura_inventario"],
+                  "cantidad":1,
+                  "precio":monturaInventario["precio_unit"],
+                  "id_boleta": NaN
+                }])
+              }}
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M4 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+              <path d="M12.5 17h-6.5v-14h-2" />
+              <path d="M6 5l14 1l-.86 6.017m-2.64 .983h-10.5" />
+              <path d="M16 19h6" />
+              <path d="M19 16v6" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default CatalogoMonturaCard
+export default CatalogoMonturaCard;

src/components/Modal.jsx

@@ -12,6 +12,8 @@ const Modal = ({
   setTelefono,
   direccion,
   setDireccion,
+  setError,
+  setClienteBusqueda
 }) => {
   return (
     <div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
@@ -93,6 +95,8 @@ const Modal = ({
                   setEdad("");
                   setTelefono("");
                   setDireccion("");
+                  setError(false);
+                  setClienteBusqueda("");
                 }}
               >
                 Agregar cliente
@@ -108,6 +112,7 @@ const Modal = ({
                   setEdad("");
                   setTelefono("");
                   setDireccion("");
+                  setClienteBusqueda("");
                 }}
               >
                 Cancelar

src/components/ModalVerCarrito.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { formatearStringUrlImagen } from "../lib/funciones";
+
+const ModalVerCarrito = ({
+  montura = {
+    "id_montura": 10,
+    "nombre_montura": "Nombre monturaaaaaaaaaaaaaaaaaaa",
+    "imagen":
+      '<img src="https://i.ibb.co/jHWcz8B/EBJ8-NK3-Ko81-301-C5-Frontal.png" alt="EBJ8-NK3-Ko81-301-C5-Frontal" border="0">',
+    "marca": "Marca montura",
+    "color": "Color montura",
+    "material": "Material Montura",
+  },
+  monturaInventario = {
+    "id_montura_inventario": 10,
+    "id_montura": 8,
+    "precio_unit": 90,
+    "stock": 20,
+    "codigo": "montura8",
+  },
+  setModalVerCarrito,
+  carrito,
+  setMontura,
+  setMonturaInventario
+}) => {
+  const { src, alt, border } = formatearStringUrlImagen(montura["imagen"]);
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
+      <div className="bg-white px-10 py-5 w-[790.5px] shadow-md rounded-lg ">
+        <div className=" flex items-center justify-between border-b-2 border-black pb-2">
+          <p className="uppercase">Recién añadido a tu carrito de compra</p>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="icon icon-tabler icon-tabler-x w-10 h-10 rounded-full cursor-pointer p-1"
+            width="25"
+            height="25"
+            viewBox="0 0 24 24"
+            strokeWidth="2"
+            stroke="#000000"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            onClick={() => {
+                setMonturaInventario({})
+                setMontura({})
+                setModalVerCarrito(false)
+            }}
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M18 6l-12 12" />
+            <path d="M6 6l12 12" />
+          </svg>
+        </div>
+        <div className="flex w-full my-10 ">
+          <div className="w-1/2">
+            <img src={src} alt={alt} border={border} />
+          </div>
+          <div className="w-1/2">
+            <div className="flex flex-col gap-2">
+              <p className="w-full text-xl truncate uppercase">
+                {montura["nombre_montura"]}
+              </p>
+              <p className="text-xl uppercase">{montura["marca"]}</p>
+              <p className="mt-3">
+                Color: <span className="uppercase">{montura["color"]}</span>
+              </p>
+              <p className="">
+                Material:{" "}
+                <span className="uppercase">{montura["material"]}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <button className="w-full text-xl py-4 uppercase border-2 cursor-pointer border-black hover:bg-gray-300">
+          Ver Carrito {0}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ModalVerCarrito;

src/lib/conexionApi.js

@@ -8,10 +8,13 @@ export const cargarApi = async () => {
     }
 }
 
-export const obtenerGet = async (endpoint) => {
+export const obtenerGet = async (endpoint, funcionSet, funcionSetError) => {
     const response = await fetch(`${url}/${endpoint}`)
     const data = await response.json()
-    return data
+    if (data.error || data.length === 0) {
+        funcionSetError(true)
+    }
+    funcionSet(data)
 }
 
 export const registrarPost = async (endpoint, data) => {
@@ -57,4 +60,9 @@ export const getEspecifico = async (endpoint, dato) => {
     const response = await fetch(`${url}/${endpoint}`)
     const data = await response.json()
     return data
-} 
+} 
+
+export const emitirPdfPrescripcion = (idPrescripcion) => {
+    const urlPdf = `${url}/prescripcion/pdf/${idPrescripcion}` 
+    return urlPdf
+}

src/lib/funciones.js

@@ -0,0 +1,19 @@
+export function formatearStringUrlImagen(stringImagen='<img src="https://i.ibb.co/TTmWTjV/df-BBqw-TYjvfrontal-tom-silver-optimania.png" alt="df-BBqw-TYjvfrontal-tom-silver-optimania" border="0">') {
+    // Crear un elemento temporal para parsear el string HTML
+    const tempElement = document.createElement('div');
+    tempElement.innerHTML = stringImagen;
+  
+    // Obtener los atributos necesarios del elemento
+    const src = tempElement.querySelector('img').getAttribute('src');
+    const alt = tempElement.querySelector('img').getAttribute('alt');
+    const border = tempElement.querySelector('img').getAttribute('border');
+  
+    // Crear un objeto con los valores obtenidos
+    const imagenObj = {
+      src: src,
+      alt: alt,
+      border: border
+    };
+  
+    return imagenObj;
+  }