more improvements

atlas/templates/atlas/collection_case_detail.html

@@ -237,11 +237,18 @@
         // 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', () => {
+    addNewQuestionButton.onclick = addNewQuestion;
+
+    function addNewQuestion() {
+        // Get the current content from the editor
 try {
             currentContent = JSON.parse(question_editor.get().text);
         } catch {
@@ -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,9 +343,8 @@
         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() {
     questionsContainer.innerHTML = ''; // Clear the container
 
@@ -363,6 +375,7 @@
 
             questionElement.innerHTML = `
                 <strong>${question.title || key}</strong>
+                <button type="button" class="btn btn-warning btn-sm edit-question-button" data-question-key="${key}" style="margin-left: 10px;">Edit</button>
                 <button type="button" class="btn btn-danger btn-sm delete-question-button" data-question-key="${key}" style="margin-left: 10px;">Delete</button>
             `;
             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 = `
+                        <input type="text" class="form-control option-field" value="${option}" placeholder="Option ${index + 1}" style="display: inline-block; width: 90%;">
+                        <button type="button" class="btn btn-danger btn-sm remove-option-button" style="display: inline-block; width: 8%;">&times;</button>
+                    `;
+                    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.');
+    }
+}
+});
+