WebSVN – LeadersLinked - Backend – Diff – /react-webpack/organizational-climate/form/views/FormView.js

 	open: 'Abierto',
 	simple: 'Simple',
 	multiple: 'Multiple'
+}
+const INITIAL_OPTION = {
+	slug_section: '',
+	slug_question: '',
+	slug_option: '',
+	text: '',
+	checked: false,
+	position: 0
+}
 const INITIAL_SECTION = {
 	slug_section: '',
 	name: '',
 	text: '',
 	// Section modal states
 	const [isShowSection, setIsShowSectionModal] = useState(false)
 	const [sectionSelected, setSectionSelected] = useState(INITIAL_SECTION)
 	const [sectionType, setSectionType] = useState('add')
-	// Section modal states
+	// Question modal states
 	const [isShowQuestion, setIsShowQuestionModal] = useState(false)
 	const [questionSelected, setQuestionSelected] = useState(INITIAL_QUESTION)
+	const [questionType, setQuestionType] = useState('add')
+	// Option modal states
+	const [isShowOption, setIsShowOptionModal] = useState(false)
+	const [optionSelected, setOptionSelected] = useState(INITIAL_OPTION)
-	const [questionType, setQuestionType] = useState('add')
+	const [optionType, setOptionType] = useState('add')
 	const [content, setContent] = useState([])
 	const [status, setStatus] = useState('A')
 	const [showDeleteModal, setShowDeleteModal] = useState(false)
 	const [deleteType, setDeleteType] = useState('section')
 	const deleteSlugsOptions = {
 		section: sectionSelected.slug_section,
+		question: questionSelected.slug_question
 		question: questionSelected.slug_question
 	// Section methods
 	const showSectionModal = (section = INITIAL_SECTION, type = 'add') => {
 		setSectionSelected(section)
 			questions: [],
 			status: 0
 		}])
+	}
-	const deleteSection = (slug) => {
-		setContent(current =>
-			current.filter(currentSection => {
-				return currentSection.slug_section !== slug
-			}),
-		)
-	}
-	const deleteQuestion = (slug) => {
-		setContent(current =>
-			current.map(currentSection => {
-				if (currentSection.slug_section === sectionSelected.slug_section) {
-					return {
-						...currentSection,
-						questions: currentSection.questions.filter((currentQuestion) => currentQuestion.slug_question !== slug)
-					}
-				}
-				return currentSection
-			}),
-		)
-	}
-	const deleteHandler = (type, slug) => {
-		if (type === 'section') {
-			return deleteSection(slug)
-		}
-		if (type === 'question') {
-			return deleteQuestion(slug)
-		}
-	}
 	const editSection = (name, text, slug) => {
 		setContent(current =>
 			current.map(currentSection => {
 				if (currentSection.slug_section === slug) {
 				return currentSection
 			})
+		)
+	}
+	const deleteSection = (slug) => {
+		setContent(current =>
+			current.filter(currentSection => {
+				return currentSection.slug_section !== slug
+			}),
+		)
+	}
 	// Question methods
 	const showQuestionModal = (question = INITIAL_QUESTION, type = 'add') => {
 		setIsShowQuestionModal(true)
 		setQuestionType(type)
 		setQuestionSelected(question)
 				return currentSection
 			})
+		)
+	}
+	const deleteQuestion = (slug) => {
+		setContent(current =>
+			current.map(currentSection => {
+				if (currentSection.slug_section === sectionSelected.slug_section) {
+					return {
+						...currentSection,
+						questions: currentSection.questions.filter((currentQuestion) => currentQuestion.slug_question !== slug)
+					}
+				}
+				return currentSection
+			}),
+		)
+	}
+	// Option methods
+	const showOptionModal = (option = INITIAL_OPTION, type = 'add') => {
+		setIsShowOptionModal(true)
+		setOptionType(type)
+		setOptionSelected(option)
+	}
+	const addOption = (option) => {
+		const uuid = new Date().getTime()
+		setContent(current =>
+			current.map(currentSection => {
+				if (currentSection.slug_section === sectionSelected.slug_section) {
+					currentSection.questions.map(currentQuestion => {
+						if (currentQuestion.slug_question === questionSelected.slug_question) {
+							return {
+								...currentQuestion,
+								options: [
+									...currentQuestion.options,
+									{
+										...option,
+										slug_question: questionSelected.slug_question,
+										slug_section: sectionSelected.slug_section,
+										slug_option: `option${uuid}`
+									}
+								]
+							}
+						}
+						return currentQuestion
+					})
+				}
+				return currentSection
+			})
+		)
+	}
+	const deleteOption = (slug) => {
+		setContent(current =>
+			current.map(currentSection => {
+				if (currentSection.slug_section === sectionSelected.slug_section) {
+					currentSection.questions.map(question => {
+						if (question.slug_question === questionSelected.slug_question) {
+							return {
+								...question,
+								options: question.options.filter(option => option.slug_option !== slug)
+							}
+						}
+						return question
+					})
+				}
+				return currentSection
+			}),
+		)
+	}
+	// General methods
+	const deleteHandler = (type, slug) => {
+		if (type === 'section') {
+			return deleteSection(slug)
+		}
+		if (type === 'question') {
+			return deleteQuestion(slug)
+		}
+		if (type === 'option') {
+			return deleteOption(slug)
+		}
+	}
 	const onSubmit = () => {
 		const submitData = new FormData()
 		submitData.append('name', watch('name'))
 		submitData.append('description', watch('description'))
 																								</button>
 																							</td>
 																						</tr>
+																						{
 																							section.questions.map((question) => (
+																								<>
-																								<tr key={question.slug_question} className="tr-question">
+																									<tr key={question.slug_question} className="tr-question">
-																									<td className="text-left">Pregunta</td>
+																										<td className="text-left">Pregunta</td>
-																									<td className="text-left">
+																										<td className="text-left">
-																										{parse(question.text)}
+																											{parse(question.text)}
-																									</td>
+																										</td>
-																									<td className="text-capitalize">
+																										<td className="text-capitalize">
-																										{sectionTypeOptions[question.type]}
+																											{sectionTypeOptions[question.type]}
-																									</td>
+																										</td>
-																									<td>
+																										<td>
-																										<button className="btn btn-default btn-edit-question" onClick={() => {
+																											<button className="btn btn-default" onClick={() => {
-																											setSectionSelected(section)
+																												setSectionSelected(section)
-																											showQuestionModal(question, 'edit')
+																												showQuestionModal(question, 'edit')
-																										}}>
+																											}}>
-																											<i className="fa fa-edit" /> Editar Pregunta
+																												<i className="fa fa-edit" /> Editar Pregunta
-																										</button>
-																										<button className="btn btn-default btn-delete-question" onClick={() => {
-																											setQuestionSelected(question)
-																											setDeleteType('question')
-																											setShowDeleteModal(true)
-																										}}>
-																											<i className="fa fa-ban" /> Borrar Pregunta
-																										</button>
-																										{
-																											question.type !== 'open'
-																											&&
-																											<button className="btn btn-default btn-delete-question">
-																												<i className="fa fa-plus" /> Agregar opción
 																											</button>
+																											<button className="btn btn-default" onClick={() => {
+																												setQuestionSelected(question)
+																												setDeleteType('question')
+																												setShowDeleteModal(true)
+																											}}>
+																												<i className="fa fa-ban" /> Borrar Pregunta
+																											</button>
+																											{
+																												question.type !== 'open'
+																												&&
+																												<button className="btn btn-default">
+																													<i className="fa fa-plus" /> Agregar opción
+																												</button>
-																										}
+																											}
-																									</td>
+																										</td>
-																								</tr>
+																									</tr>
+																									{
+																										question.options.map(option => (
+																											<tr key={option.slug_question} className="tr-option">
+																												<td className="text-left">Pregunta</td>
+																												<td className="text-left">
+																													{parse(option.text)}
+																												</td>
+																												<td />
+																												<td>
+																													<button className="btn btn-default" onClick={() => {
+																														setSectionSelected(section)
+																														setQuestionSelected(question)
+																														showOptionModal(option, 'edit')
+																													}}>
+																														<i className="fa fa-edit" /> Editar opción
+																													</button>
+																													<button className="btn btn-default" onClick={() => {
+																														setOptionSelected(option)
+																														setQuestionSelected(question)
+																														setDeleteType('option')
+																														setShowDeleteModal(true)
+																													}}>
+																														<i className="fa fa-ban" /> Borrar opción
+																													</button>
+																												</td>
+																											</tr>
+																										))
+																									}
+																								</>
 																							))
+																						}
 																					</tbody>
 																				</table>
 																			</div>
 																		</div>
 																	</div>
 				questionType={questionType}
 				question={questionSelected}
 				closeModal={closeQuestionModal}
 				onSubmit={questionType === 'add' ? addQuestion : editQuestion}
 			/>
+			<OptionModal
+				show={isShowOption}
+				questionType={optionType}
+				question={optionSelected}
+				closeModal={closeOptionModal}
+				onSubmit={optionType === 'add' ? addOption : editQuestion}
+			/>
 			<DeleteModal
 				isOpen={showDeleteModal}
 				closeModal={() => setShowDeleteModal(false)}
 				onComplete={() => deleteHandler(deleteType, deleteSlugsOptions[deleteType])}
 				message="Registro eliminado"

Proyectos de Subversion LeadersLinked - Backend

(root)/react-webpack/organizational-climate/form/views/FormView.js – Rev 13008 → 13067