grid and list mode modal

psicoadmin/src/Components/Modal/EditPlaza.js

@@ -1,10 +1,44 @@
 import React from 'react';
-import { Modal } from 'react-bootstrap'
+import * as Yup from 'yup';
+import { Modal, Row, Col, Button } from 'react-bootstrap'
+import { Formik, Field, Form } from 'formik';
+
 import NotFound from '../../Images/not_found.png';
+const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/gif", "image/png"];
+
+const NewPlazaSchema = Yup.object().shape({
+    nombre : Yup.string().required('El nombre es requerido').min(5).max(20),
+    description : Yup.string().required('La description es requerida').min(5).max(20),
+    salario : Yup.number().required('El salario es requerido'),
+    imagen:  Yup.mixed().required('El imagen es requerido').test('fileSize', "El archivo es demasiado grande", value => {
+        if(!value || value.length <= 0) return false
+        return value[0].size < 200000
+    }).test('fileType', "El tipo del archivo no es válido", value => {
+        if(!value) return false
+        return SUPPORTED_FORMATS.includes(value[0].type)
+    })
+})
 
 export default function Edit(props) {
 
-    let { visible, onClose } = props
+    let { visible, onClose, puesto } = props
+
+    let [ filename, setFilename ] = React.useState('');
+    let [ file, setFile ] = React.useState(undefined);
+    let [ type, setType ] = React.useState(undefined);
+    let [ validType, setValidType ] = React.useState(false);
+
+    const hiddenFileInput = React.useRef(null);
+    const PickFile = event => hiddenFileInput.current.click();
+
+    React.useEffect(() => {
+        if( SUPPORTED_FORMATS.includes(type) ){
+            setValidType(true)
+        }else{
+            setValidType(false)
+        }
+
+    }, [type])
 
     return(
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
@@ -12,34 +46,107 @@ export default function Edit(props) {
                 <button onClick={onClose} type="button" className="close" data-dismiss="modal">&times;</button>
                 <h4 className="modal-title">Editar plaza</h4>
             </Modal.Header>
-            <Modal.Body classNameName="modal-body">
-
-                <div className="row">
-                    <div className="col-md-4">
-                        <div className="img-container">
-                            <img alt='not found version' src={NotFound} />
-                        </div>
-                    </div>
-                    <div className="col-md-8">
-                        <div className="custom-file-upload">
-                            <input type="file" id="file" name="myfiles[]" multiple disabled />
-                        </div>
-                    </div>
-                </div>
-                <div className="data_product">
-                    <div className="row">
-                        <div className="col-md-12">
-                            <input type="text" name="nombre" placeholder="Nombre de la plaza"/>
-                            <textarea placeholder="Descripción"></textarea>
-                            <input type="number" name="sku" placeholder="3500"/>
-                        </div>
-                    </div>
-                    <div className="add_producto_confirm">
-                        <div className="btn_add_producto_confirm">
-                            <a href="/" type="submit">Actualizar plaza</a>
-                        </div>
-                    </div> 
-                </div>
+
+           <Modal.Body classNameName="modal-body">
+                <Formik
+
+                    initialValues={{
+                        nombre: puesto.id +" - "+  puesto.nombre,
+                        description: puesto.description,
+                        salario: puesto.salario,
+                        imagen: '',
+                    }}
+
+                    validationSchema={NewPlazaSchema}
+                    onSubmit={ (values) => {
+                        // console.log('VALUES >> ',values)
+                        props.setManual(false)
+                    }} >
+
+
+                    { ({  errors, touched, validateField, validateForm, setFieldValue  }) => (
+                        <Form>
+                            <Row>
+
+                                <Col md="4">
+                                    <div className="img-container">
+                                        <img alt="agregar plaza manual" src={ validType ? file : NotFound}/>
+                                    </div>
+                                </Col>
+
+                                <Col md="8">
+
+                                    <input 
+                                        value={filename} 
+                                        type="text" 
+                                        className="file-upload-input" 
+                                        disabled="" 
+                                        placeholder="Ningún archivo seleccionado" readOnly
+                                    />
+
+                                    <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }} onClick={PickFile}>
+                                        SUBIR FOTO
+                                    </Button>
+
+                                    {errors.imagen && touched.imagen && <div className="error_feedback">{errors.imagen}</div>}
+                                    <input
+                                        multiple={false}
+                                        type="file"
+                                        ref={hiddenFileInput}
+                                        onChange={(event) => {
+                                            const files = event.target.files;
+                                            console.log('files crud ', files[0])
+                                            let myFiles =Array.from(files);
+                                            setFieldValue("imagen", myFiles);
+                                            setFilename(myFiles[0].name)
+                                            setType(myFiles[0].type)
+                                            const objectUrl = URL.createObjectURL(files[0])
+                                            setFile(objectUrl)
+                                        }}
+                                        style={{display: 'none'}}
+                                    />
+
+                                </Col>
+
+                            </Row>
+                            <div className="data_product">
+                                <Row>
+                                    <Col md="12">
+
+                                        {errors.nombre && touched.nombre && <div className="error_feedback">{errors.nombre}</div>}
+                                        <Field  name="nombre" placeholder="Nombre de la plaza"/>
+
+                                        {errors.description && touched.description && <div className="error_feedback">{errors.description}</div>}
+                                        <Field name="description">
+                                            {({ field, form, meta }) => {
+                                                return(
+                                                    <textarea id="description" name="description" value={field.value} onChange={field.onChange} placeholder="Descripción general de la plaza"></textarea>
+                                                )
+                                            }}
+                                        </Field>
+
+                                        {errors.salario && touched.salario && <div className="error_feedback">{errors.salario}</div>}
+                                        <Field name="salario" type="text" placeholder="Salario"/>
+
+
+                                    </Col>
+
+
+                                    <div className="add_producto_confirm">
+                                        <div className="btn_add_producto_confirm">
+                                            <span href="/" type="submit">Actualizar plaza</span>
+                                        </div>
+                                    </div>
+
+                                </Row>
+                            </div>
+                        </Form>
+                    )}
+
+
+
+
+                </Formik>
 
             </Modal.Body>
         </Modal>

psicoadmin/src/Components/Modal/EliminarPlaza.js

@@ -3,7 +3,7 @@ import { Modal, Row, Col } from 'react-bootstrap'
 
 export default function Eliminar(props) {
 
-    let { visible, onClose } = props
+    let { visible, onClose, puesto } = props
 
     return(
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
@@ -26,7 +26,7 @@ export default function Eliminar(props) {
                     <Col md="6">
                         <div class="delet_producto_confirm">
                             <div class="btn_delete_producto_confirm">
-                                <a href="/" type="submit">Eliminar</a>
+                                <a  href="/" onClick={() => console.log('ID >> ',puesto.id)} type="submit">Eliminar</a>
                             </div>
                         </div>
                     </Col>

psicoadmin/src/Components/Modal/MostrarPlaza.js

@@ -4,7 +4,7 @@ import NotFound from '../../Images/not_found.png';
 
 export default function Mostrar(props) {
 
-    let { visible, onClose } = props
+    let { visible, onClose, puesto } = props
 
     return(
         <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered  show={visible} onHide={onClose}>
@@ -22,9 +22,9 @@ export default function Mostrar(props) {
                             </div>
                         </div>
                         <div class="col-md-8">
-                            <input type="text" name="nombre" placeholder="Nombre de la plaza" readOnly/>
-                            <input type="text" name="descript" placeholder="Descripción" readOnly/>
-                            <input type="number" name="sku" placeholder="3500" readOnly/>
+                            <input value={puesto.id + " - "+ puesto.nombre} type="text" name="nombre" placeholder="Nombre de la plaza" readOnly/>
+                            <input value={puesto.description} type="text" name="descript" placeholder="Descripción" readOnly/>
+                            <input value={puesto.salario} type="text" name="sku" placeholder="3500" readOnly/>
                         </div>
                     </div>
                 </div>

psicoadmin/src/Pages/Puestos.js

@@ -114,25 +114,7 @@ function ListMode(props) {
 
 function GridMode (props) {
     
-    let { setEdit, setDelete, setShow } = props;
-
-    let buttons = [
-        <div className="botones_interactivos">
-            <span onClick={ () => setShow(true) } tooltip-location="top" tooltip="Ver plaza">
-                <RemoveRedEyeIcon className="grid_btn"/>
-            </span>
-        </div>,
-        <div className="botones_interactivos">
-            <span onClick={ () => setEdit(true) } tooltip-location="top" tooltip="Editar plaza">
-                <EditIcon className="grid_btn"/>
-            </span>
-        </div>,
-        <div className="botones_interactivos">
-            <span onClick={() => setDelete(true)} tooltip-location="top" tooltip="Eliminar plaza">
-                <HighlightOffIcon className="grid_btn"/>
-            </span>
-        </div>
-    ]
+    let { setEdit, setDelete, setShow, setPuesto } = props;
 
     return(
         <React.Fragment> 
@@ -155,7 +137,41 @@ function GridMode (props) {
                                             <p>{ plaza.salario }</p>
                                         </div>
                                         <div className="btn_interactivos">
-                                            { buttons }
+
+                                            <div className="botones_interactivos">
+                                                <span 
+                                                    onClick={ () => {
+                                                        setPuesto(plaza)
+                                                        setShow(true)
+                                                    }} 
+                                                    tooltip-location="top" 
+                                                    tooltip="Ver plaza">
+                                                    <RemoveRedEyeIcon className="grid_btn"/>
+                                                </span>
+                                            </div>
+                                            <div className="botones_interactivos">
+                                                <span 
+                                                    onClick={() => {
+                                                        setPuesto(plaza)
+                                                        setEdit(true)
+                                                    }} 
+                                                    tooltip-location="top" 
+                                                    tooltip="Editar plaza">
+                                                    <EditIcon className="grid_btn"/>
+                                                </span>
+                                            </div>
+                                            <div className="botones_interactivos">
+                                                <span 
+                                                    onClick={() => {
+                                                        setPuesto(plaza)
+                                                        setDelete(true)
+                                                    }} 
+                                                    tooltip-location="top" 
+                                                    tooltip="Eliminar plaza">
+                                                    <HighlightOffIcon className="grid_btn"/>
+                                                </span>
+                                            </div>
+
                                         </div>
                                     </Col>
                                 </Row>
@@ -228,6 +244,7 @@ export function Puestos() {
                 <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
                     <Row>
                         <GridMode
+                            setPuesto={setPuesto}
                             setEdit={setEdit}
                             setDelete={setDelete}
                             setShow={setShow}
@@ -249,9 +266,9 @@ export function Puestos() {
             <Express setExpress={setExpress} visible={expres} onClose={() => setExpress(false) } />
             <Manual setManual={setManual} visible={manual}  onClose={() => setManual(false) } />
 
-            <Editar visible={edit} onClose={() => setEdit(false)} />
-            <Eliminar visible={del} onClose={() => setDelete(false)} />
-            <Mostrar visible={show} onClose={() => setShow(false)} />
+            <Editar  puesto={puesto} visible={edit} onClose={() => setEdit(false)} />
+            <Eliminar puesto={puesto} visible={del} onClose={() => setDelete(false)} />
+            <Mostrar puesto={puesto} visible={show} onClose={() => setShow(false)} />
 
         </div>
     )