agrego campos de insercion en backend y frod para products.

Camilocsr · May 18, 2023 · 5f38682 · 5f38682
1 parent ea77919
commit 5f38682
Show file tree

Hide file tree

Showing 26 changed files with 80 additions and 10 deletions.
diff --git a/Backend/controllers/productController.js b/Backend/controllers/productController.js
@@ -7,15 +7,17 @@ async function addProduct(req,res){
       name,
       size,
       unitaryPrice,
-      description
+      description,
+      categoria
     } = req.body 
 
     const product = ({
       name,
       size,
       unitaryPrice,
       description,
-      imgUrl: req.file ? `${host}:${port}/public/${req.file.filename}` : null // si el campo de img es bacio ps se pone null
+      categoria,
+      imgUrl: req.file ? `${host}:${port}/public/${req.file.filename}` : null, // si el campo de img es bacio ps se pone null
     }
     )
 
@@ -90,6 +92,7 @@ const editionProducts = async (req, res) => {
       name,
       size,
       unitaryPrice,
+      categoria,
       description
     } = req.body;
 
@@ -108,6 +111,9 @@ const editionProducts = async (req, res) => {
     if (description) {
       productData.description = description;
     }
+    if (categoria) {
+      productData.categoria = categoria;
+    }
     if (req.file) {
       productData.imgUrl = `${host}:${port}/public/${req.file.filename}`;
     }

diff --git a/Backend/index.http b/Backend/index.http
@@ -0,0 +1,11 @@
+POST http://localhost:9999/v1/products
+Content-Type: application/json
+
+{
+    "name":"chaqueta de la marca ofori...",
+    "size":45,
+    "unitaryPrice":5,
+    "categoria":"niños",
+    "imgUrl":"http://localhost:9999/v1/products/images.png",
+    "description":"esta es una chaqueta la cual es impermeable de color azul claro.."
+}
diff --git a/Backend/models/Product.js b/Backend/models/Product.js
@@ -14,6 +14,10 @@ const ProductSchema = Schema({//lo que va a requerir nuestra base de datos.
     type:Number,
     required:true
   },//precio por unidad
+  categoria:{
+    type:String,
+    required:true
+  },
   imgUrl:{
     type:String,
     required:true

diff --git a/Backend/package.json b/Backend/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "stand": "standard",
-    "server": "nodemon server.js"
+    "server": "nodemon server.js",
+    "start": "node server.js"
   },
   "keywords": [],
   "author": "",

diff --git a/Backend/storage/imgs/image-1684366239990-720071008.png b/Backend/storage/imgs/image-1684366239990-720071008.png
diff --git a/Backend/storage/imgs/image-1684366257226-880479135.jpg b/Backend/storage/imgs/image-1684366257226-880479135.jpg
diff --git a/Backend/storage/imgs/image-1684366313265-450653180.png b/Backend/storage/imgs/image-1684366313265-450653180.png
diff --git a/Backend/storage/imgs/image-1684366330344-107275669.jpg b/Backend/storage/imgs/image-1684366330344-107275669.jpg
diff --git a/Backend/storage/imgs/image-1684366426456-904866881.png b/Backend/storage/imgs/image-1684366426456-904866881.png
diff --git a/Backend/storage/imgs/image-1684366959155-559416825.png b/Backend/storage/imgs/image-1684366959155-559416825.png
diff --git a/Backend/storage/imgs/image-1684367767735-672217899.gif b/Backend/storage/imgs/image-1684367767735-672217899.gif
diff --git a/Backend/storage/imgs/image-1684368016123-869585258.png b/Backend/storage/imgs/image-1684368016123-869585258.png
diff --git a/Backend/storage/imgs/image-1684368210179-376460739.png b/Backend/storage/imgs/image-1684368210179-376460739.png
diff --git a/Backend/storage/imgs/image-1684369166568-723223332.jpg b/Backend/storage/imgs/image-1684369166568-723223332.jpg
diff --git a/Backend/storage/imgs/image-1684369245808-114561411.png b/Backend/storage/imgs/image-1684369245808-114561411.png
diff --git a/Backend/storage/imgs/image-1684369344708-727183952.jpg b/Backend/storage/imgs/image-1684369344708-727183952.jpg
diff --git a/Backend/storage/imgs/image-1684371291385-201872657.gif b/Backend/storage/imgs/image-1684371291385-201872657.gif
diff --git a/Backend/storage/imgs/image-1684371394376-611314665.jpg b/Backend/storage/imgs/image-1684371394376-611314665.jpg
diff --git a/Backend/storage/imgs/image-1684371861581-820747354.gif b/Backend/storage/imgs/image-1684371861581-820747354.gif
diff --git a/Backend/storage/imgs/image-1684371972562-881384688.png b/Backend/storage/imgs/image-1684371972562-881384688.png
diff --git a/migracion/src/components/DeleteProducts.jsx b/migracion/src/components/DeleteProducts.jsx
@@ -36,17 +36,15 @@ class DeleteProducts extends ListProducts {
     console.log(products._id)
     return (
       <Row className="centrar-products">
-        {products.map(({ _id, name, description, imgUrl, unitaryPrice, size }) => (
+        {products.map(({ _id, name, description, imgUrl, unitaryPrice, size,categoria }) => (
           <Col className="cont-sep col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-3" sm={3} key={_id}>
             <Card className="Card">
               <Card.Img className="Card.Img" variant="top" src={imgUrl} style={{ height: '300px' }} alt={name} />
               <Card.Body>
                 <Card.Title>Nombre: {name}</Card.Title>
                 <Card.Text>Cantidad: {size}</Card.Text>
-                {
-                  console.log(_id)
-                }
                 <Card.Text>Valor: {unitaryPrice}</Card.Text>
+                <Card.Text>Categoria: {categoria}</Card.Text>
                 <Card.Text>Descripción: {description}</Card.Text>
               </Card.Body>
               <Card.Footer style={{ background: 'black', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>

diff --git a/migracion/src/components/EditarProduts.jsx b/migracion/src/components/EditarProduts.jsx
@@ -19,15 +19,15 @@ const ButtonWithDiv = ({ productId }) => {
       {showDiv && (
         <ContEditar productId={productId} onUpdate={handleProductUpdate} />
       )}
-      {productData && (
+      {/* {productData && (
         <div>
           <p>Nombre: {productData.name}</p>
           <p>Cantidad: {productData.size}</p>
           <p>Valor: {productData.unitaryPrice}</p>
           <p>Description: {productData.description}</p>
           <p>img: {productData.imgUrl}</p>
         </div>
-      )}
+      )} */}
     </div>
   );
 };

diff --git a/migracion/src/components/Form.jsx b/migracion/src/components/Form.jsx
@@ -2,12 +2,14 @@ import React from 'react';
 import {useState,useRef} from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
+import Dropdown from 'react-bootstrap/Dropdown';
 
 const Formulario = ({handleSubmit})=>{
   const [formValues,setformValues] = useState({
     name:'',
     priceUnitary:'',
     size:'',
+    categoria:'',
     description:''
   })
 
@@ -20,6 +22,10 @@ const Formulario = ({handleSubmit})=>{
     setformValues({...formValues,[name]:value})
   }
 
+  const handleCategoriaSelect = (categoria) => {
+    setformValues({ ...formValues, categoria });
+  };
+
   const _handleSubmit = (e)=>{
     e.preventDefault()
     handleSubmit({...formValues,image:inputFileRef.current.files[0]})
@@ -47,6 +53,19 @@ const Formulario = ({handleSubmit})=>{
         <Form.Control name="priceUnitary"value={formValues.priceUnitary} onChange={handleChange} type="number" placeholder="sin putos"/>
       </Form.Group>
 
+      <Form.Group className="mb-3" controlId="formBasicPassword">
+        <Form.Label>Categoria.</Form.Label>
+        <Dropdown>
+          <Dropdown.Toggle variant="secondary">{formValues.categoria}</Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={() => handleCategoriaSelect('niños')}>Niños</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleCategoriaSelect('niñas')}>Niñas</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleCategoriaSelect('hombres')}>Hombres</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleCategoriaSelect('mujeres')}>Mujeres</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+      </Form.Group>
+
       <Form.Group controlId="formProduct">
         <Form.Label>Descripción:</Form.Label>
         <Form.Control as="textarea"name="description" value={formValues.description} onChange={handleChange} placeholder="Chaqueta talla... color..." />

diff --git a/migracion/src/components/FormEditarProducts.jsx b/migracion/src/components/FormEditarProducts.jsx
@@ -2,16 +2,20 @@ import React, { useState, useEffect } from "react";
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import axios from "axios";
+import Dropdown from 'react-bootstrap/Dropdown';
 
 const ContEditar = ({ productId, onUpdate }) => {
   const [formData, setFormData] = useState({
     name: '',
     size: '',
     unitaryPrice: '',
+    categoria: '',
     description: '',
     imgUrl: null
   });
 
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
   const handleInputChange = (e) => {
     const { name, value, files } = e.target;
     if (name === "imgUrl") {
@@ -27,25 +31,37 @@ const ContEditar = ({ productId, onUpdate }) => {
     }
   };
 
+  const handleCategoriaSelect = (categoria) => {
+    setFormData({ ...formData, categoria });
+  };
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
     const formDataToSend = new FormData();
     formDataToSend.append("name", formData.name);
     formDataToSend.append("size", formData.size);
     formDataToSend.append("unitaryPrice", formData.unitaryPrice);
+    formDataToSend.append("categoria", formData.categoria);
     formDataToSend.append("description", formData.description);
     formDataToSend.append("image", formData.imgUrl);
 
     try {
       const response = await axios.post(`http://localhost:9999/v1/products/edition/${productId}`, formDataToSend);
       console.log(response.data);
       onUpdate(response.data.productStored);
+      setIsSubmitted(true);
     } catch (error) {
       console.error(error);
     }
   };
 
+  if (isSubmitted) {
+    return <div style={{
+      color: "white"
+    }}>¡Actualizacion completa!.</div>; // Mostrar un mensaje de éxito en lugar del formulario
+  }
+
   return (
     <>
       <div style={{ background: 'white' }}>
@@ -68,6 +84,19 @@ const ContEditar = ({ productId, onUpdate }) => {
             <Form.Control name="unitaryPrice" value={formData.unitaryPrice} type="number" placeholder="sin puntos" onChange={handleInputChange} />
           </Form.Group>
 
+          <Form.Group className="mb-3" controlId="formBasicPassword">
+            <Form.Label>Categoria.</Form.Label>
+            <Dropdown>
+              <Dropdown.Toggle variant="secondary">{formData.categoria}</Dropdown.Toggle>
+                <Dropdown.Menu>
+                  <Dropdown.Item onClick={() => handleCategoriaSelect('niños')}>Niños</Dropdown.Item>
+                  <Dropdown.Item onClick={() => handleCategoriaSelect('niñas')}>Niñas</Dropdown.Item>
+                  <Dropdown.Item onClick={() => handleCategoriaSelect('hombres')}>Hombres</Dropdown.Item>
+                  <Dropdown.Item onClick={() => handleCategoriaSelect('mujeres')}>Mujeres</Dropdown.Item>
+                </Dropdown.Menu>
+            </Dropdown>
+          </Form.Group>
+
           <Form.Group controlId="formProduct">
             <Form.Label>Descripción:</Form.Label>
             <Form.Control value={formData.description} name="description" as="textarea" placeholder="Chaqueta talla... color..." onChange={handleInputChange} />

diff --git a/migracion/src/components/ListProducts.jsx b/migracion/src/components/ListProducts.jsx
@@ -13,14 +13,15 @@ class ListProducts extends Component {
 
     return (
       <Row className="centrar-products">
-        {reversedProducts.map(({ description, name, size, _id, unitaryPrice, imgUrl }) => (
+        {reversedProducts.map(({ description, name, size, _id, unitaryPrice, imgUrl,categoria }) => (
           <Col className="cont-sep col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3 col-xxl-3" sm={3} key={_id}>
             <Card className="Card">
               <Card.Img className="Card.Img" style={{ height: '300px' }} variant="top" src={imgUrl} />
               <Card.Body>
                 <Card.Title>{name}</Card.Title>
                 <Card.Text>{description}</Card.Text>
                 <Card.Text>Cantidad: {size}</Card.Text>
+                {/* <Card.Text>Categoria: {categoria}</Card.Text> */}
               </Card.Body>
               <Card.Footer>
                 $({unitaryPrice})

diff --git a/migracion/src/services/index.jsx b/migracion/src/services/index.jsx
@@ -23,6 +23,7 @@ export async function saveProducts(productData){
     formData.append('unitaryPrice', productData.priceUnitary)
     formData.append('size', productData.size)
     formData.append('description', productData.description)
+    formData.append('categoria',productData.categoria)
     formData.append('image', productData.image)
     const response = await axios({
       url: `${baseUrl}/products`,