| 11483 |
stevensc |
1 |
import React, { useState, useEffect } from 'react'
|
|
|
2 |
import { Button, Modal } from 'react-bootstrap'
|
|
|
3 |
import axios from 'axios'
|
|
|
4 |
import { useForm } from 'react-hook-form'
|
|
|
5 |
import { useDispatch } from 'react-redux'
|
|
|
6 |
import Datetime from 'react-datetime'
|
|
|
7 |
import 'react-datetime/css/react-datetime.css'
|
|
|
8 |
import { addNotification } from '../../../redux/notification/notification.actions'
|
|
|
9 |
|
| 11484 |
stevensc |
10 |
const EditAndAddModal = ({ action_link, closeModal, type, onComplete }) => {
|
| 11483 |
stevensc |
11 |
|
|
|
12 |
//Hooks
|
|
|
13 |
const { register, handleSubmit, errors, setValue, clearErrors } = useForm()
|
|
|
14 |
const [isActive, setIsActive] = useState(false)
|
| 12187 |
stevensc |
15 |
const [year, setYear] = useState(new Intl.DateTimeFormat('en-CA').format(new Date()))
|
| 11483 |
stevensc |
16 |
const dispatch = useDispatch()
|
|
|
17 |
|
|
|
18 |
const onSubmit = (data) => {
|
|
|
19 |
const submitData = new FormData()
|
|
|
20 |
|
|
|
21 |
Object.entries({
|
|
|
22 |
...data,
|
|
|
23 |
status: isActive ? 'a' : 'i',
|
|
|
24 |
date: year
|
|
|
25 |
}).map(([key, value]) => {
|
|
|
26 |
submitData.append(key, value)
|
|
|
27 |
})
|
|
|
28 |
|
|
|
29 |
axios.post(action_link, submitData)
|
|
|
30 |
.then(({ data }) => {
|
|
|
31 |
if (!data.success) {
|
| 14843 |
stevensc |
32 |
typeof data.data === 'string'
|
|
|
33 |
?
|
|
|
34 |
dispatch(addNotification({
|
|
|
35 |
style: 'danger',
|
|
|
36 |
msg: data.data
|
|
|
37 |
}))
|
|
|
38 |
: Object.entries(data.data).map(([key, value]) =>
|
|
|
39 |
value.map(err =>
|
|
|
40 |
dispatch(addNotification({
|
|
|
41 |
style: 'danger',
|
|
|
42 |
msg: `${key}: ${err}`
|
|
|
43 |
}))
|
|
|
44 |
)
|
|
|
45 |
)
|
|
|
46 |
return
|
| 11483 |
stevensc |
47 |
}
|
|
|
48 |
|
|
|
49 |
clearErrors()
|
|
|
50 |
closeModal()
|
| 11484 |
stevensc |
51 |
onComplete()
|
| 11483 |
stevensc |
52 |
dispatch(addNotification({
|
|
|
53 |
style: 'success',
|
|
|
54 |
msg: 'Usuario registrado'
|
|
|
55 |
}))
|
|
|
56 |
})
|
|
|
57 |
}
|
|
|
58 |
|
|
|
59 |
useEffect(() => {
|
|
|
60 |
if (type === 'edit') {
|
|
|
61 |
axios.get(action_link)
|
|
|
62 |
.then(({ data }) => {
|
|
|
63 |
if (!data.success) {
|
|
|
64 |
return dispatch(addNotification({
|
|
|
65 |
style: 'danger',
|
|
|
66 |
msg: 'Ha ocurrido un error'
|
|
|
67 |
}))
|
|
|
68 |
}
|
|
|
69 |
|
| 11486 |
stevensc |
70 |
setYear(data.data.date)
|
|
|
71 |
setIsActive(data.data.status === 'a' ? true : false)
|
|
|
72 |
setValue('title', data.data.title)
|
|
|
73 |
setValue('description', data.data.description)
|
| 11483 |
stevensc |
74 |
})
|
|
|
75 |
}
|
|
|
76 |
}, [type])
|
|
|
77 |
|
|
|
78 |
return (
|
|
|
79 |
<Modal size="md" onHide={closeModal} show={type === 'add' || type === ('edit')}>
|
|
|
80 |
<Modal.Header closeButton>
|
|
|
81 |
<Modal.Title>
|
|
|
82 |
{
|
|
|
83 |
type === 'add'
|
|
|
84 |
? 'Agregar Objetivo'
|
|
|
85 |
: 'Editar Objetivo'
|
|
|
86 |
}
|
|
|
87 |
</Modal.Title>
|
|
|
88 |
</Modal.Header>
|
|
|
89 |
<form onSubmit={handleSubmit(onSubmit)}>
|
|
|
90 |
<Modal.Body>
|
|
|
91 |
<div className="d-flex" style={{ gap: '10px' }}>
|
|
|
92 |
<div className='form-group'>
|
|
|
93 |
<label className="form-label">Título</label>
|
|
|
94 |
<input type="text" name='title' className='form-control' ref={register({ required: true })} />
|
|
|
95 |
{errors.title && <p>{errors.title.message}</p>}
|
|
|
96 |
</div>
|
|
|
97 |
<div className='form-group'>
|
|
|
98 |
<label className="form-label">Estatus</label>
|
|
|
99 |
<div
|
|
|
100 |
className={`toggle d-block btn btn-primary ${!isActive && 'off'}`}
|
|
|
101 |
data-toggle="toggle"
|
|
|
102 |
role="button"
|
|
|
103 |
style={{ width: '130px' }}
|
|
|
104 |
onClick={() => setIsActive(!isActive)}
|
|
|
105 |
>
|
|
|
106 |
<input
|
|
|
107 |
type="checkbox"
|
|
|
108 |
checked={isActive}
|
|
|
109 |
/>
|
|
|
110 |
<div className="toggle-group">
|
|
|
111 |
<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
|
|
|
112 |
<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
|
|
|
113 |
<span className="toggle-handle btn btn-light"></span>
|
|
|
114 |
</div>
|
|
|
115 |
</div>
|
|
|
116 |
</div>
|
|
|
117 |
</div>
|
|
|
118 |
<div className='form-group'>
|
|
|
119 |
<label className="form-label">Fecha</label>
|
|
|
120 |
<Datetime
|
|
|
121 |
dateFormat="DD-MM-YYYY"
|
|
|
122 |
timeFormat={false}
|
|
|
123 |
onChange={(e) =>
|
|
|
124 |
setYear(new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))
|
|
|
125 |
}
|
|
|
126 |
inputProps={{ className: 'form-control' }}
|
|
|
127 |
initialValue={Date.parse(year)}
|
|
|
128 |
closeOnSelect
|
|
|
129 |
value={year}
|
|
|
130 |
/>
|
|
|
131 |
</div>
|
|
|
132 |
<div className='form-group'>
|
|
|
133 |
<label className="form-label">Descripción</label>
|
|
|
134 |
<textarea type="text" name='description' className='form-control' rows='3' ref={register({ required: true })} />
|
|
|
135 |
{errors.description && <p>{errors.description.message}</p>}
|
|
|
136 |
</div>
|
|
|
137 |
</Modal.Body>
|
|
|
138 |
<Modal.Footer>
|
|
|
139 |
<Button variant="primary" type='submit'>
|
|
|
140 |
Enviar
|
|
|
141 |
</Button>
|
|
|
142 |
<Button variant="danger" onClick={closeModal}>
|
|
|
143 |
Cancelar
|
|
|
144 |
</Button>
|
|
|
145 |
</Modal.Footer>
|
|
|
146 |
</form>
|
|
|
147 |
</Modal >
|
|
|
148 |
)
|
|
|
149 |
}
|
|
|
150 |
|
|
|
151 |
export default EditAndAddModal
|