Proyectos de Subversion LeadersLinked - Backend

Rev

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