[ADD] puestos full view page

psicoadmin/src/Components/Modal.js

@@ -0,0 +1,20 @@
+import { Modal } from 'react-bootstrap';
+
+export default function MyModal (props) {
+    let { Head, Body, visible, onClose } = props
+    return(
+        <Modal 
+            size="lg" 
+            aria-labelledby="contained-modal-title-vcenter" 
+            centered  
+            show={visible} 
+            onHide={onClose}>
+            <Modal.Header>
+                <Head/>
+            </Modal.Header>
+            <Modal.Body>
+                <Body/>
+            </Modal.Body>
+        </Modal>
+    )
+}

psicoadmin/src/Pages/Puestos.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Row, Col } from 'react-bootstrap'
+import { Row, Col, Modal } from 'react-bootstrap'
 
 import Box from '@mui/material/Box';
 import ToggleButton from '@mui/material/ToggleButton';
@@ -49,9 +49,9 @@ function ListMode() {
 
                         {
                             data.length ? 
-                                data.map( plaza => {
+                                data.map( (plaza, i) => {
                                     return (
-                                        <tr>
+                                        <tr key={i}>
                                             <td>{ plaza.nombre }</td>
                                             <td>{ plaza.description }</td>
                                             <td>{ plaza.salario }</td>
@@ -81,17 +81,17 @@ function GridMode () {
 
     let buttons = [
         <div className="botones_interactivos">
-            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto">
+            <a href="#" tooltip-location="top" tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto">
                 <RemoveRedEyeIcon className="grid_btn"/>
             </a>
         </div>,
         <div className="botones_interactivos">
-            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto">
+            <a href="#" tooltip-location="top" tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto">
                 <EditIcon className="grid_btn"/>
             </a>
         </div>,
         <div className="botones_interactivos">
-            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto">
+            <a href="#" tooltip-location="top" tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto">
                 <HighlightOffIcon className="grid_btn"/>
             </a>
         </div>
@@ -101,10 +101,9 @@ function GridMode () {
         <React.Fragment> 
             {
                 data.length ? 
-                data.map( plaza => {
-
+                data.map( ( plaza, i ) => {
                     return(
-                        <Col md="3">
+                        <Col key={i} md="3">
                             <div className="panel">
                                 <Row>
                                     <Col md="4">
@@ -130,9 +129,78 @@ function GridMode () {
     )
 }
 
+function Manual ( props ) {
+
+    let { visible, onClose } = props
+
+    return (
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
+            <Modal.Header>
+                <button onClick={onClose}  type="button" className="close" data-dismiss="modal">&times;</button>
+                <h4 className="modal-title">Agregar plaza</h4>
+            </Modal.Header>
+            <Modal.Body className="modal-body">
+                <Row>
+                    <Col md="4">
+                        <div className="img-container">
+                            <img src="images/not_found.png"/>
+                        </div>
+                    </Col>
+                    <Col md="8">
+                        <div className="custom-file-upload">
+                            <input type="file" id="file" name="myfiles[]" multiple />
+                        </div>
+                    </Col>
+                </Row>
+                <div className="data_product">
+                    <Row>
+                        <Col md="12">
+                            <input type="text" name="nombre" placeholder="Nombre de la plaza"/>
+                            <textarea placeholder="Descripción general de la plaza"></textarea>
+                            <input type="number" name="salario" placeholder="Salario"/>
+                        </Col>
+                        <div className="add_producto_confirm">
+                            <div className="btn_add_producto_confirm">
+                                <a href="#" type="submit">Agregar plaza</a>
+                            </div>
+                        </div>
+                    </Row>
+                </div>
+            </Modal.Body>
+        </Modal>
+    )
+}
+
+function Express (props) {
+    let { visible, onClose } = props
+    return (
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
+            <Modal.Header>
+                <button onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
+                <h4 className="modal-title">Agregar plaza express</h4>
+            </Modal.Header>
+            <Modal.Body>
+                <div className="data_product">
+                    <div className="row">
+                        <div className="col-md-12">
+                            <input type="link" name="link" placeholder="Link de la plaza"/>
+                        </div>
+                        <div className="add_producto_confirm">
+                            <div className="btn_add_producto_confirm">
+                                <a href="#" type="submit">Agregar plaza</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Modal.Body>
+        </Modal>
+    )
+}
+
+
 export function Puestos() {
 
-    const [alignment, setAlignment] = React.useState('left');
+    const [alignment, setAlignment] = React.useState('list');
 
     const handleChange = (event, newAlignment) => setAlignment(newAlignment);
 
@@ -151,6 +219,12 @@ export function Puestos() {
         exclusive: true,
     };
 
+
+    let [manual, setManual] = React.useState(false);
+    let [expres, setExpress] = React.useState(false);
+
+    const showExpress = () => setExpress(true)
+
     return (
         <div className="content-section">
             <div className="main">
@@ -166,14 +240,10 @@ export function Puestos() {
                     </Col>
                     <Col md="6">
                         <div className="add_producto">
-                            <div className="btn_add_producto">
-                                <a href="#" data-toggle="modal" data-target="#addProducto">Agregar manual</a>
-                            </div>
+                            <div onClick={() => {console.log('show manual') ; setManual(true) }} className="btn_add_producto"> <a>Agregar manual</a> </div>
                         </div>
-                        <div className="add_producto">
-                            <div className="btn_add_producto">
-                                <a href="#" data-toggle="modal" data-target="#addProductoExpress">Agregar express</a>
-                            </div>
+                        <div onClick={showExpress} className="add_producto">
+                            <div className="btn_add_producto"> <a>Agregar express</a> </div>
                         </div>
                     </Col>
                 </Row>
@@ -188,6 +258,8 @@ export function Puestos() {
                     </Row>
                 </div>
             </div>
+            <Express visible={expres} onClose={ () => setExpress(false) } />
+            <Manual visible={manual}  onClose={ () => setManual(false) } />
         </div>
     )
 }