Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 12999 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
12996 stevensc 1 
import React, { useEffect } from 'react'
2 
import { Button, Modal } from 'react-bootstrap'
3 
import { useForm } from 'react-hook-form'
4 
import DescriptionInput from '../../../shared/DescriptionInput'
5 
 
6 
const QuestionModal = ({ show, closeModal, question, onSubmit, questionType }) => {
7 
 
8 
	const { handleSubmit, register, setValue, watch } = useForm()
9 
 
10 
	useEffect(() => {
11 
		register('text')
12 
		setValue('text', question.text)
13 
	}, [question])
14 
 
15 
	const submit = (data) => {
16 
		if (questionType === 'add') {
17 
			onSubmit({
18 
				...question,
19 
				text: data.text,
20 
				type: data.type,
21 
				maxlength: data.maxlength,
22 
				multiline: data.multiline
23 
			})
24 
			closeModal()
25 
			return
26 
		}
27 
		if (questionType === 'edit') {
28 
			onSubmit({
29 
				...question,
30 
				text: data.text,
31 
				type: data.type,
32 
				maxlength: data.maxlength,
33 
				multiline: data.multiline
34 
			})
35 
			closeModal()
36 
		}
37 
	}
38 
 
39 
	return (
40 
		<Modal size="md" onHide={closeModal} show={show}>
41 
			<Modal.Header closeButton>
42 
				<Modal.Title>{`${questionType === 'add' ? 'Agregar' : 'Editar'} sección`}</Modal.Title>
43 
			</Modal.Header>
44 
			<form onSubmit={handleSubmit(submit)}>
45 
				<Modal.Body>
46 
					<div className='form-group'>
47 
						<label className="form-label">Texto</label>
48 
						<DescriptionInput
49 
							defaultValue={question.text}
50 
							name='text'
51 
							onChange={setValue}
52 
						/>
53 
					</div>
54 
					<div className='form-group'>
55 
						<label className="form-label">Tipo</label>
56 
						<select name='type' className='form-control' ref={register} defaultValue={question.type}>
57 
							<option value='open'>Abierto</option>
58 
							<option value='simple'>Simple</option>
59 
							<option value='multiple'>Multiple</option>
60 
						</select>
61 
					</div>
62 
					{
63 
						watch('type') !== 'open'
64 
						&&
65 
						<>
66 
							<div className='form-group'>
67 
								<label className="form-label">Longitud máxima</label>
68 
								<input type="number" name='maxLength' className='form-control' defaultValue={question.maxlength} />
69 
							</div>
70 
							<div className='form-group'>
71 
								<label className="form-label">Mútiples lineas</label>
72 
								<select name='type' className='form-control' ref={register} defaultValue={question.multiline}>
73 
									<option value='open'>Si</option>
74 
									<option value='simple'>No</option>
75 
								</select>
76 
							</div>
77 
						</>
78 
					}
79 
				</Modal.Body>
80 
				<Modal.Footer>
81 
					<Button variant="primary" type='submit'>
82 
						Enviar
83 
					</Button>
84 
					<Button variant="danger" onClick={closeModal}>
85 
						Cancelar
86 
					</Button>
87 
				</Modal.Footer>
88 
			</form>
89 
		</Modal >
90 
	)
91 
}
92 
 
93 
export default QuestionModal