|
|
@@ -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">×</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>
|
|
|
)
|
amenpunk