Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 14843 | Rev 15267 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11152 stevensc 1 
import axios from 'axios'
6583 stevensc 2 
import React, { useEffect, useState } from 'react'
11152 stevensc 3 
import { Modal, Button } from 'react-bootstrap'
4 
import { useForm } from 'react-hook-form'
5 
import { CKEditor } from 'ckeditor4-react'
14843 stevensc 6 
import { addNotification } from '../../../redux/notification/notification.actions'
7 
import { useDispatch } from 'react-redux'
6583 stevensc 8 
 
9 
const OverviewModal = ({
11152 stevensc 10 
	isOpen = false,
11 
	closeModal = function () { },
12 
	overviewUrl,
13 
	action,
14 
	overview
6583 stevensc 15 
}) => {
16 
 
11152 stevensc 17 
	const { register, handleSubmit, setValue, watch } = useForm()
18 
	const [error, setError] = useState(null)
14843 stevensc 19 
	const dispatch = useDispatch()
6583 stevensc 20 
 
11152 stevensc 21 
	const onSubmit = ({ description }) => {
22 
		const formData = new FormData
23 
		formData.append('description', description)
6583 stevensc 24 
 
11152 stevensc 25 
		axios.post(overviewUrl, formData)
26 
			.then(({ data }) => {
27 
				if (!data.success) {
14843 stevensc 28 
					typeof data.data === 'string'
29 
						?
30 
						dispatch(addNotification({
31 
							style: 'danger',
32 
							msg: data.data
33 
						}))
34 
						: Object.entries(data.data).map(([key, value]) =>
35 
							value.map(err =>
36 
								dispatch(addNotification({
37 
									style: 'danger',
38 
									msg: `${key}: ${err}`
39 
								}))
40 
							)
41 
						)
42 
					return
11152 stevensc 43 
				}
44 
				action(data.data.description)
45 
			})
46 
			.then(() => {
47 
				setError(null)
48 
				closeModal()
49 
			})
50 
			.catch((err) => setError(err))
51 
	}
6583 stevensc 52 
 
15227 stevensc 53 
	useEffect(() => register('description'), [])
6583 stevensc 54 
 
11152 stevensc 55 
	return (
56 
		<Modal
57 
			size="md"
58 
			show={isOpen}
59 
			onHide={closeModal}
60 
			autoFocus={false}
61 
		>
62 
			<Modal.Header closeButton>
15227 stevensc 63 
				<Modal.Title>Visión general</Modal.Title>
11152 stevensc 64 
			</Modal.Header>
65 
			<form onSubmit={handleSubmit(onSubmit)}>
66 
				<Modal.Body>
67 
					<div className="mb-3">
68 
						<label className="form-label">Visión general</label>
69 
						<CKEditor
70 
							data={watch('description')}
71 
							onChange={(e) => {
72 
								const text = e.editor.getData()
73 
								setValue('description', text)
74 
							}}
75 
							onInstanceReady={(e) => e.editor.setData(overview)}
76 
							config={{
77 
								toolbar: [
78 
									{ name: 'editing', items: ['Scayt'] },
79 
									{ name: 'links', items: ['Link', 'Unlink'] },
80 
									{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'] },
81 
									{ name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat'] },
82 
									'/',
83 
									{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
84 
									{ name: 'styles', items: ['Styles', 'Format'] },
85 
									{ name: 'tools', items: ['Maximize'] }
86 
								],
87 
								removePlugins: 'elementspath,Anchor',
88 
								heigth: 100
89 
							}}
90 
							name="description"
91 
						/>
92 
						{error && <p>{error}</p>}
93 
					</div>
94 
				</Modal.Body>
95 
				<Modal.Footer>
96 
					<Button
97 
						variant="primary"
98 
						type="submit"
99 
					>
11160 stevensc 100 
						Enviar
11152 stevensc 101 
					</Button>
102 
					<Button className='btn-tertiary' onClick={closeModal}>
11160 stevensc 103 
						Cancelar
11152 stevensc 104 
					</Button>
105 
				</Modal.Footer>
106 
			</form>
107 
		</Modal >
108 
	)
6583 stevensc 109 
}
110 
 
111 
export default OverviewModal