ABC mantenimiento plazas modal

psicoadmin/src/Components/AgregarManual.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import * as Yup from 'yup';
+import { Formik, Field, Form } from 'formik';
+import { Row, Col, Modal, Button} from 'react-bootstrap'
+
+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 Manual ( props ) {
+
+    let [ filename, setFilename ] = React.useState('');
+    let [ file, setFile ] = React.useState(undefined);
+    let [ type, setType ] = React.useState(undefined);
+    let [ validType, setValidType ] = React.useState(false);
+
+    let { visible, onClose } = props
+    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}>
+            <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">
+
+                <Formik
+
+                    initialValues={{
+                        nombre: '',
+                        description: '',
+                        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="number" placeholder="Salario"/>
+
+
+                                    </Col>
+                                    <div className="add_producto_confirm">
+                                        <button className="btn_add_producto_confirm" type="submit">Agregar plaza</button>
+                                    </div>
+                                </Row>
+                            </div>
+                        </Form>
+                    )}
+
+
+
+
+                </Formik>
+            </Modal.Body>
+        </Modal>
+    )
+}

psicoadmin/src/Components/Modal/AgregarManual.js

@@ -3,7 +3,7 @@ import * as Yup from 'yup';
 import { Formik, Field, Form } from 'formik';
 import { Row, Col, Modal, Button} from 'react-bootstrap'
 
-import NotFound from '../Images/not_found.png';
+import NotFound from '../../Images/not_found.png';
 const SUPPORTED_FORMATS = ["image/jpg", "image/jpeg", "image/gif", "image/png"];
 
 const NewPlazaSchema = Yup.object().shape({

psicoadmin/src/Components/Modal/EditPlaza.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap'
+
+export default function Edit(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">Editar plaza</h4>
+            </Modal.Header>
+            <Modal.Body className="modal-body">
+                <h1>Editar Plaza </h1>
+            </Modal.Body>
+        </Modal>
+    )
+}

psicoadmin/src/Components/Modal/EliminarPlaza.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap'
+
+export default function Eliminar(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">Eliminar plaza</h4>
+            </Modal.Header>
+            <Modal.Body className="modal-body">
+                <h1>Eliminar Plaza </h1>
+            </Modal.Body>
+        </Modal>
+    )
+}

psicoadmin/src/Components/Modal/MostrarPlaza.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap'
+
+export default function Mostrar(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">Mostrar plaza</h4>
+            </Modal.Header>
+            <Modal.Body className="modal-body">
+                <h1>Mostrar Plaza </h1>
+            </Modal.Body>
+        </Modal>
+    )
+}

psicoadmin/src/Pages/Puestos.js

@@ -17,6 +17,10 @@ import NotFound from '../Images/not_found.png';
 import Express from '../Components/Modal/AgregarExpress';
 import Manual from '../Components/Modal/AgregarManual';
 
+import Editar from '../Components/Modal/EditPlaza';
+import Eliminar from '../Components/Modal/EliminarPlaza';
+import Mostrar from '../Components/Modal/MostrarPlaza';
+
     
 let data = [{
     nombre : 'The standard Lorem Ipsum passage, used since the 1500s',
@@ -37,12 +41,14 @@ for ( var _ of new Array(46) ){
     data.push({ ...data[0], id : ID.next().value, d : _ })
 }
 
-function ListMode() {
+function ListMode(props) {
+    
+    let { setEdit, setDelete, setShow } = props;
 
     let actions = [
-        <Button onClick={ ()  => console.log('ver producto') } className="ver_producto">Ver</Button>,
-        <Button onClick={ ()  => console.log('editar producto') } className="editar_producto">Editar</Button>,
-        <Button onClick={ ()  => console.log('eliminar producto') } className="eliminar_producto">Eliminar</Button>,
+        <Button onClick={ ()  => setShow(true)} className="ver_producto">Ver</Button>,
+        <Button onClick={() => setEdit(true)} className="editar_producto">Editar</Button>,
+        <Button onClick={ ()  => setDelete(true) } className="eliminar_producto">Eliminar</Button>,
     ]
 
     return(
@@ -89,21 +95,23 @@ function ListMode() {
 }
 
 
-function GridMode () {
+function GridMode (props) {
+    
+    let { setEdit, setDelete, setShow } = props;
 
     let buttons = [
         <div className="botones_interactivos">
-            <span tooltip-location="top" tooltip="Ver plaza">
+            <span onClick={ () => setShow(true) } tooltip-location="top" tooltip="Ver plaza">
                 <RemoveRedEyeIcon className="grid_btn"/>
             </span>
         </div>,
         <div className="botones_interactivos">
-            <span tooltip-location="top" tooltip="Editar plaza">
+            <span onClick={ () => setEdit(true) } tooltip-location="top" tooltip="Editar plaza">
                 <EditIcon className="grid_btn"/>
             </span>
         </div>,
         <div className="botones_interactivos">
-            <span tooltip-location="top" tooltip="Eliminar plaza">
+            <span onClick={() => setDelete(true)} tooltip-location="top" tooltip="Eliminar plaza">
                 <HighlightOffIcon className="grid_btn"/>
             </span>
         </div>
@@ -167,6 +175,10 @@ export function Puestos() {
     let [manual, setManual] = React.useState(false);
     let [expres, setExpress] = React.useState(false);
 
+    let [edit, setEdit] = React.useState(false);
+    let [del, setDelete] = React.useState(false);
+    let [show, setShow] = React.useState(false);
+
     return (
         <div className="content-section">
 
@@ -192,18 +204,30 @@ export function Puestos() {
                 </Row>
                 <div className={`main_productos ${ alignment === 'grid' ? 'activar_vista' : 'desactivar_vista'  }`} id="grid_view">
                     <Row>
-                        <GridMode/>
+                        <GridMode
+                            setEdit={setEdit}
+                            setDelete={setDelete}
+                            setShow={setShow}
+                        />
                     </Row>
                 </div>
                 <div className={`main_list_products ${alignment === 'list' ?  'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                     <Row>
-                        <ListMode/>
+                        <ListMode 
+                            setEdit={setEdit}
+                            setDelete={setDelete}
+                            setShow={setShow}
+                        />
                     </Row>
                 </div>
             </div>
 
-            <Express setExpress={setExpress} visible={expres} onClose={ () => setExpress(false) } />
-            <Manual setManual={setManual} visible={manual}  onClose={ () => setManual(false) } />
+            <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)} />
 
         </div>
     )