Proyectos de Subversion LeadersLinked - Backend

Rev

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

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