Proyectos de Subversion LeadersLinked - Backend

Rev

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