Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 11160 | Rev 15227 | 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 
 
11152 stevensc 53 
	useEffect(() => {
54 
		register('description')
55 
	}, [])
6583 stevensc 56 
 
11152 stevensc 57 
	return (
58 
		<Modal
59 
			size="md"
60 
			show={isOpen}
61 
			onHide={closeModal}
62 
			autoFocus={false}
63 
		>
64 
			<Modal.Header closeButton>
65 
				<Modal.Title>Cambiar</Modal.Title>
66 
			</Modal.Header>
67 
			<form onSubmit={handleSubmit(onSubmit)}>
68 
				<Modal.Body>
69 
					<div className="mb-3">
70 
						<label className="form-label">Visión general</label>
71 
						<CKEditor
72 
							data={watch('description')}
73 
							onChange={(e) => {
74 
								const text = e.editor.getData()
75 
								setValue('description', text)
76 
							}}
77 
							onInstanceReady={(e) => e.editor.setData(overview)}
78 
							config={{
79 
								toolbar: [
80 
									{ name: 'editing', items: ['Scayt'] },
81 
									{ name: 'links', items: ['Link', 'Unlink'] },
82 
									{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'] },
83 
									{ name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat'] },
84 
									'/',
85 
									{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
86 
									{ name: 'styles', items: ['Styles', 'Format'] },
87 
									{ name: 'tools', items: ['Maximize'] }
88 
								],
89 
								removePlugins: 'elementspath,Anchor',
90 
								heigth: 100
91 
							}}
92 
							name="description"
93 
						/>
94 
						{error && <p>{error}</p>}
95 
					</div>
96 
				</Modal.Body>
97 
				<Modal.Footer>
98 
					<Button
99 
						variant="primary"
100 
						type="submit"
101 
					>
11160 stevensc 102 
						Enviar
11152 stevensc 103 
					</Button>
104 
					<Button className='btn-tertiary' onClick={closeModal}>
11160 stevensc 105 
						Cancelar
11152 stevensc 106 
					</Button>
107 
				</Modal.Footer>
108 
			</form>
109 
		</Modal >
110 
	)
6583 stevensc 111 
}
112 
 
113 
export default OverviewModal