add mockup

src/Components/Modal/AgregarManual.js

@@ -1,149 +1,114 @@
 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)
-    })
-})
+import { useFormik, Form, FormikProvider } from 'formik';
+import { Modal } from 'react-bootstrap'
 
-export default function Manual ( props ) {
+import {  
+    Box, Button,
+    Stack, TextField, 
+    InputLabel,MenuItem,FormControl,Select
+} from '@mui/material';
 
-    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, success } = props
-    const hiddenFileInput = React.useRef(null);
 
-    const PickFile = event => hiddenFileInput.current.click();
+export default function Manual ( props ) {
 
-    React.useEffect(() => {
-        if( SUPPORTED_FORMATS.includes(type) ){
-            setValidType(true)
-        }else{
-            setValidType(false)
-        }
+    const NewPlazaSchema = Yup.object().shape({
+        nombrepuesto : Yup.string().required('El nombre es requerido').min(5).max(100),
+        puestosuperior : Yup.number("El puesto superior debe ser un numero"),
+        areadepto : Yup.number().required('Escoge alguna area'),
+        fecha : Yup.date("Ingresa una fecha válida").required('Ingresa una fecha válida'),
+        notas : Yup.string().required('Ingresa una fecha válida'),
+    })
 
-    }, [type])
+    let { visible, onClose, success } = props
 
+    const formik = useFormik({
+        initialValues: {
+            nombrepuesto: "",
+            puestosuperior: "",
+            areadepto: "",
+            fecha: "",
+            notas: "",
+        },
+        onSubmit: (fields) => {
+            console.log(fields)
+        },
+        validationSchema: NewPlazaSchema,
+    });
+
+    const { errors, touched, handleSubmit, getFieldProps } = formik;
 
     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>
+                <h4 className="modal-title" style={{color : '#252525'}}>Agregar plaza</h4>
             </Modal.Header>
             <Modal.Body className="modal-body">
 
-                <Formik
-
-                    initialValues={{
-                        nombre: '',
-                        description: '',
-                        salario: '',
-                        imagen: '',
-                    }}
-
-                    validationSchema={NewPlazaSchema}
-                    onSubmit={ (values) => {
-                        // console.log('VALUES >> ',values)
-                        success();
-                        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>
+                <FormikProvider style={{ padding : 25 }} value={formik}>
+                    <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+                        <Stack spacing={3}>
+                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+                                <TextField
+                                    label="Nombre: "
+                                    fullWidth
+                                    {...getFieldProps('nombrepuesto')}
+                                    error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
+                                    helperText={touched.nombrepuesto && errors.nombrepuesto}
+                                />
+
+                                <TextField
+                                    label="Puesto Superior: "
+                                    fullWidth
+                                    {...getFieldProps('puestosuperior')}
+                                    error={Boolean(touched.puestosuperior && errors.puestosuperior)}
+                                    helperText={touched.puestosuperior && errors.puestosuperior}
+                                />
+
+                            </Stack>
+                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                                <TextField
+                                    label="Departamento"
+                                    fullWidth
+                                    type="text"
+                                    {...getFieldProps('puestosuperior')}
+                                    error={Boolean(touched.areadepto && errors.areadepto)}
+                                    helperText={touched.areadepto && errors.areadepto}
+                                />
+                                <TextField
+                                    label="Fecha Creacion"
+                                    fullWidth
+                                    type="text"
+                                    {...getFieldProps('fecha')}
+                                    error={Boolean(touched.fecha && errors.fecha)}
+                                    helperText={touched.fecha && errors.fecha}
+                                />
+                            </Stack>
+                            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
+                                <TextField
+                                    id="filled-multiline-static"
+                                    multiline
+                                    rows={4}
+                                    defaultValue="Default Value"
+                                    variant="filled"
+                                    label="notas"
+                                    fullWidth
+                                    type="text"
+                                    {...getFieldProps('notas')}
+                                    error={Boolean(touched.notas && errors.notas)}
+                                    helperText={touched.notas && errors.notas}
+                                />
+                            </Stack>
+                        </Stack>
+                    </Form>
+                </FormikProvider>
+
+                <Modal.Footer>OK</Modal.Footer>
+
             </Modal.Body>
         </Modal>
     )

src/Pages/Puestos.jsx

@@ -76,7 +76,7 @@ export function Puestos() {
 
     let [puesto, setPuesto] = React.useState(false);
 
-    let [manual, setManual] = React.useState(false);
+    let [manual, setManual] = React.useState(true);
     let [expres, setExpress] = React.useState(false);
 
     let [edit, setEdit] = React.useState(false);