update README; create PasswordField component and apply at app; imple…

…ment custom alert; refactor invoiceInfo and deliveryInfo; #b00tc4mp#156
JackDev21 · Aug 27, 2024 · 87074fe · 87074fe
1 parent eaae4c5
commit 87074fe
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,8 @@
 
 # FactuClient
 
+<img style="width:50%" src="https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExa3R3MmRvcDR3Znd5N3RoczF4MjV1ZWJrc2t6Y2tuNWt6eWU0ZzV3NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FAEEL82CUc1JPBas1V/giphy.webp" alt="Image Invoice" >
+
 **FactuClient** es una aplicación de gestión diseñada para facilitar la creación, visualización y manejo de albaranes y facturas de clientes. Los usuarios pueden crear perfiles de clientes, gestionar sus datos, generar facturas a partir de albaranes existentes, y descargar o compartir estas facturas y albaranes en formato PDF. Este proyecto es parte del proyecto final del BootCamp de ISDICODERS.
 
 ## Tecnologías Utilizadas
@@ -42,14 +44,14 @@
 2. **Instalar las dependencias del frontend:**
 
    ```bash
-   cd client
+   cd factuclient
    npm install
    ```
 
 3. **Instalar las dependencias del backend:**
 
    ```bash
-   cd ../server
+   cd ../api
    npm install
    ```
 
@@ -65,13 +67,14 @@
 5. **Iniciar el servidor:**
 
    ```bash
-   npm run dev
+   cd api
+   npm run start
    ```
 
 6. **Iniciar el frontend:**
 
    ```bash
-   cd client
+   cd factuclient
    npm run dev
    ```
 
@@ -89,7 +92,7 @@ Una vez que el servidor y el frontend están en funcionamiento, puedes acceder a
 
 ```
 FactuClient/
-├── api/                      # Código fuente del backend
+├── api/                  
 │   ├── coverage/             # Reportes de cobertura de pruebas
 │   ├── handlers/             # Manejadores de rutas y lógica de controladores
 │   ├── logic/                # Lógica de negocio y funciones utilitarias
@@ -98,7 +101,8 @@ FactuClient/
 │   ├── utils/                # Funciones utilitarias y helpers
 │   ├── routes.js             # Definición de las rutas de la API
 │   └── server.js             # Configuración e inicio del servidor
-├── doc/                      # Documentación adicional del proyecto
+├── doc/                      # Documentacion proyecto modelo de datos
+├── com/                      # Package validate, errors.
 ├── FactuClient/              # Código fuente del frontend
 │   ├── dist/                 # Archivos estáticos generados para producción
 │   ├── public/               # Recursos públicos, como imágenes y favicons

diff --git a/staff/jose-canto/project/FactuClient/src/components/PasswordField/index.jsx b/staff/jose-canto/project/FactuClient/src/components/PasswordField/index.jsx
@@ -0,0 +1,22 @@
+import { useState } from "react"
+import { MdVisibility, MdVisibilityOff } from "react-icons/md"
+import Field from "../core/Field"
+
+const PasswordField = ({ id, placeholder }) => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword)
+  }
+
+  return (
+    <div className="relative">
+      <Field id={id} type={showPassword ? "text" : "password"} placeholder={placeholder} />
+      <span className="absolute left-[15.5rem] top-[2.1rem] cursor-pointer text-3xl" onClick={togglePasswordVisibility}>
+        {showPassword ? <MdVisibilityOff /> : <MdVisibility />}
+      </span>
+    </div>
+  )
+}
+
+export default PasswordField
diff --git a/staff/jose-canto/project/FactuClient/src/components/view/DeliveryInfo.jsx b/staff/jose-canto/project/FactuClient/src/components/view/DeliveryInfo.jsx
@@ -22,6 +22,8 @@ import logic from "../../logic/index"
 import "./DeliveryInfo.css"
 
 export default function DeliveryInfo() {
+  const { alert } = useContext()
+
   const navigate = useNavigate()
   const { deliveryNoteId } = useParams()
   const [deliveryNote, setDeliveryNote] = useState(null)
@@ -37,9 +39,7 @@ export default function DeliveryInfo() {
           setDeliveryNote(deliveryNote)
 
           const calculateTotal = deliveryNote.works.reduce(
-            (accumulator, work) => accumulator + work.quantity * work.price,
-            0
-          )
+            (accumulator, work) => accumulator + work.quantity * work.price, 0)
           setTotal(calculateTotal)
         })
         .catch((error) => {
@@ -85,9 +85,13 @@ export default function DeliveryInfo() {
 
       <Main className={"MainDeliveryInfo"}>
         <div className="DeliveryInfoCustomer">
-          {deliveryNote?.customer && <p>{deliveryNote.customer.companyName}</p>}
-          {deliveryNote?.customer && <p>{deliveryNote.customer.address}</p>}
-          {deliveryNote?.customer && <p>{deliveryNote.customer.taxId}</p>}
+          {deliveryNote?.customer && (
+            <ul className="flex flex-col items-center">
+              <li>{deliveryNote.customer.companyName}</li>
+              <li>{deliveryNote.customer.address}</li>
+              <li>{deliveryNote.customer.taxId}</li>
+            </ul>
+          )}
         </div>
         <div className="DeliveryWork">
           <div className="TitleDateContainer">

diff --git a/staff/jose-canto/project/FactuClient/src/components/view/InvoiceInfo.jsx b/staff/jose-canto/project/FactuClient/src/components/view/InvoiceInfo.jsx
@@ -82,20 +82,28 @@ export default function InvoiceInfo() {
       <Main className="MainInvoiceInfo">
         <div className="DataContainer">
           <div className="CompanyData">
-            {invoice?.company && <p>{invoice.company.companyName}</p>}
-            {invoice?.company && <p>{invoice.company.address}</p>}
-            {invoice?.company && <p>{invoice.company.taxId}</p>}
-            {invoice?.company && <p>{invoice.company.email}</p>}
-            {invoice?.company && <p>{invoice.company.phone}</p>}
+            {invoice?.company && (
+              <ul>
+                <li>{invoice.company.companyName}</li>
+                <li>{invoice.company.address}</li>
+                <li>{invoice.company.taxId}</li>
+                <li>{invoice.company.email}</li>
+                <li>{invoice.company.phone}</li>
+              </ul>
+            )}
           </div>
 
           <div className="CustomerData">
             <p className="DataText">DATOS CLIENTE:</p>
-            {invoice?.customer && <p>{invoice.customer.companyName}</p>}
-            {invoice?.customer && <p>{invoice.customer.address}</p>}
-            {invoice?.customer && <p>{invoice.customer.taxId}</p>}
-            {invoice?.customer && <p>{invoice.customer.email}</p>}
-            {invoice?.customer && <p>{invoice.customer.phone}</p>}
+            {invoice?.customer && (
+              <ul>
+                <li>{invoice.customer.companyName}</li>
+                <li>{invoice.customer.address}</li>
+                <li>{invoice.customer.taxId}</li>
+                <li>{invoice.customer.email}</li>
+                <li>{invoice.customer.phone}</li>
+              </ul>
+            )}
           </div>
         </div>
         <div className="InvoiceContainer">

diff --git a/staff/jose-canto/project/FactuClient/src/components/view/Login.jsx b/staff/jose-canto/project/FactuClient/src/components/view/Login.jsx
@@ -12,6 +12,7 @@ import Button from "../core/Button"
 import Field from "../core/Field"
 import Main from "../core/Main"
 import Footer from "../core/Footer"
+import PasswordField from "../PasswordField"
 
 export default function Login() {
   const { alert } = useContext()
@@ -64,7 +65,7 @@ export default function Login() {
       <Main className="LoginMain">
         <form className="LoginForm" onSubmit={handleLoginSubmit}>
           <Field id="username" type="text" placeholder="Username"></Field>
-          <Field id="password" type="password" placeholder="Password"></Field>
+          <PasswordField id="password" placeholder="Password"></PasswordField>
           <Button type="submit">Login</Button>
 
           <div className="Link">

diff --git a/staff/jose-canto/project/FactuClient/src/components/view/Register.jsx b/staff/jose-canto/project/FactuClient/src/components/view/Register.jsx
@@ -9,6 +9,7 @@ import Title from "../Title"
 import Field from "../core/Field"
 import Button from "../core/Button"
 import Main from "../core/Main"
+import PasswordField from "../PasswordField"
 import Footer from "../core/Footer"
 
 import "./Register.css"
@@ -59,8 +60,8 @@ export default function Register() {
         <form className="RegisterForm" onSubmit={handleRegisterSubmit}>
           <Field id="username" type="text" placeholder="Nombre de Usuario"></Field>
           <Field id="email" type="email" placeholder="Email"></Field>
-          <Field id="password" type="password" placeholder="Password"></Field>
-          <Field id="confirmPassword" type="password" placeholder="Confirmar password"></Field>
+          <PasswordField id="password" placeholder="Password"></PasswordField>
+          <PasswordField id="confirmPassword" placeholder="Confirmar password"></PasswordField>
           <Button type="submit">Registrate</Button>
 
           <div className="Link">