diff --git a/atlas/templates/atlas/collection_case_detail.html b/atlas/templates/atlas/collection_case_detail.html index 003f900b..fa065be7 100644 --- a/atlas/templates/atlas/collection_case_detail.html +++ b/atlas/templates/atlas/collection_case_detail.html @@ -237,12 +237,19 @@ // Hide the options configurator if necessary optionsConfigurator.style.display = 'block'; + // Reset the "Add New Question" button + addNewQuestionButton.textContent = 'Add New Question'; + addNewQuestionButton.onclick = addNewQuestion; + toastr.success('Question options have been reset.'); }); // Add a new question - addNewQuestionButton.addEventListener('click', () => { - try { + addNewQuestionButton.onclick = addNewQuestion; + + function addNewQuestion() { + // Get the current content from the editor +try { currentContent = JSON.parse(question_editor.get().text); } catch { currentContent = JSON.parse(JSON.stringify(question_editor.get().json)); @@ -267,7 +274,7 @@ const title = questionTitleInput.value || `Question ${current_question_number}`; const description = questionDescriptionInput.value || "Enter the question description here."; - // Define the new question template based on the selected type + // Define the new question template based on the selected type let newQuestion; if (selectedType === 'radio') { newQuestion = { @@ -275,14 +282,16 @@ type: "string", title: title, format: "radio", - description: description + description: description, + questionType: selectedType, // Add questionType property }; } else if (selectedType === 'text') { newQuestion = { type: "string", title: title, format: "text", - description: description + description: description, + questionType: selectedType, // Add questionType property }; } else if (selectedType === 'dropdown') { newQuestion = { @@ -290,19 +299,21 @@ type: "string", title: title, format: "select", - description: description + description: description, + questionType: selectedType, // Add questionType property }; } else if (selectedType === 'multiselect') { newQuestion = { type: "array", items: { enum: options.length > 0 ? options : ["Option 1", "Option 2", "Option 3"], // Default options if none provided - type: "string" + type: "string", }, title: title, format: "select2", // Multiselect format description: description, - uniqueItems: true // Ensure unique selections + uniqueItems: true, // Ensure unique selections + questionType: selectedType, // Add questionType property }; } else if (selectedType === 'yesno') { newQuestion = { @@ -310,7 +321,8 @@ type: "string", title: title, format: "radio", - description: description + description: description, + questionType: selectedType, // Add questionType property }; } else if (selectedType === 'truefalse') { newQuestion = { @@ -318,7 +330,8 @@ type: "string", title: title, format: "radio", - description: description + description: description, + questionType: selectedType, // Add questionType property }; } @@ -330,10 +343,9 @@ question_editor.update({ json: currentContent }); toastr.success(`New question added: ${title}`); renderQuestions(); // Re-render the questions list - }); + } - // Function to render the list of questions with delete and drag-and-drop functionality - function renderQuestions() { +function renderQuestions() { questionsContainer.innerHTML = ''; // Clear the container try { @@ -363,6 +375,7 @@ questionElement.innerHTML = ` ${question.title || key} + `; questionsContainer.appendChild(questionElement); @@ -373,6 +386,12 @@ deleteQuestion(questionKey); }); + // Add event listener to edit the question + questionElement.querySelector('.edit-question-button').addEventListener('click', (e) => { + const questionKey = e.target.getAttribute('data-question-key'); + editQuestion(questionKey); + }); + // Add drag-and-drop event listeners questionElement.addEventListener('dragstart', handleDragStart); questionElement.addEventListener('dragover', handleDragOver); @@ -477,7 +496,101 @@ function handleDrop(e) { // Initial render of questions renderQuestions(); - }); +function editQuestion(questionKey) { + try { + let currentContent; + try { + currentContent = JSON.parse(question_editor.get().text); + } catch { + currentContent = JSON.parse(JSON.stringify(question_editor.get().json)); + } + const properties = currentContent.properties || {}; + const question = properties[questionKey]; + + if (question) { + // Populate the form fields with the question's data + questionTitleInput.value = question.title || ''; + questionDescriptionInput.value = question.description || ''; + questionTypeSelect.value = question.questionType || 'text'; + + // Clear existing options and populate them if applicable + while (questionOptionsContainer.firstChild) { + questionOptionsContainer.removeChild(questionOptionsContainer.firstChild); + } + if (question.enum) { + question.enum.forEach((option, index) => { + const optionInput = document.createElement('div'); + optionInput.className = 'option-input'; + optionInput.style.marginBottom = '5px'; + optionInput.innerHTML = ` + + + `; + questionOptionsContainer.appendChild(optionInput); + + // Add event listener to remove the option + optionInput.querySelector('.remove-option-button').addEventListener('click', () => { + questionOptionsContainer.removeChild(optionInput); + }); + }); + optionsConfigurator.style.display = 'block'; + } else { + optionsConfigurator.style.display = 'none'; + } + + // Update the "Add New Question" button to save changes + addNewQuestionButton.textContent = 'Save Changes'; + addNewQuestionButton.onclick = () => { + saveEditedQuestion(questionKey); + }; + } + } catch (error) { + console.error('Error editing question:', error); + toastr.error('Failed to edit the question.'); + } +} + +function saveEditedQuestion(questionKey) { + try { + let currentContent; + try { + currentContent = JSON.parse(question_editor.get().text); + } catch { + currentContent = JSON.parse(JSON.stringify(question_editor.get().json)); + } + const properties = currentContent.properties || {}; + const question = properties[questionKey]; + + if (question) { + // Update the question with the new values from the form + question.title = questionTitleInput.value || `Question ${questionKey}`; + question.description = questionDescriptionInput.value || ''; + question.format = questionTypeSelect.value; + + // Update the options if applicable + if (question.enum) { + question.enum = Array.from(questionOptionsContainer.querySelectorAll('.option-field')) + .map((input) => input.value.trim()) + .filter((option) => option !== ''); // Exclude empty options + } + + // Update the editor with the modified question + currentContent.properties[questionKey] = question; + question_editor.update({ json: currentContent }); + toastr.success(`Question "${question.title}" updated successfully.`); + renderQuestions(); // Re-render the questions list + + // Reset the "Add New Question" button + addNewQuestionButton.textContent = 'Add New Question'; + addNewQuestionButton.onclick = addNewQuestion; + } + } catch (error) { + console.error('Error saving edited question:', error); + toastr.error('Failed to save the question.'); + } +} +}); +