Fix for bug where removed questions due to conditions fails to remove…

… answers of removed questions.

app/controllers/answers_controller.rb

@@ -101,6 +101,18 @@ def create_or_update
       remove_list_after = remove_list(@plan)
 
       all_question_ids = @plan.questions.pluck(:id)
+
+      #  TBD: Clear all answers for removed questions
+      remove_list_after.each do |id|
+        puts "Remove Question with id: #{id}"
+        Answer.where(question_id: id, plan: @plan).each do |a|
+          puts "Answer with #{a.id}"
+          puts "Destroy question_options #{a.question_options}"
+          Answer.destroy(a.id)
+        end
+      end
+      puts 'remove_list_after: '
+      p remove_list_after
       # rubocop pointed out that these variable is not used
       # all_answers = @plan.answers
       qn_data = {

app/javascript/src/answers/edit.js

@@ -5,7 +5,7 @@ import {
 } from '../utils/isType';
 import { Tinymce } from '../utils/tinymce.js';
 import debounce from '../utils/debounce';
-import { updateSectionProgress, getQuestionDiv } from '../utils/sectionUpdate';
+import { updateSectionProgress, getQuestionDiv , deleteAllAnswersForQuestion } from '../utils/sectionUpdate';
 import datePicker from '../utils/datePicker';
 import TimeagoFactory from '../utils/timeagoFactory.js.erb';
 
@@ -23,7 +23,9 @@ $(() => {
         updateSectionProgress(section.sec_id, section.no_ans, section.no_qns);
       });
       data.qn_data.to_hide.forEach((questionid) => {
+        deleteAllAnswersForQuestion(questionid);
         getQuestionDiv(questionid).slideUp();
+
       });
       data.qn_data.to_show.forEach((questionid) => {
         getQuestionDiv(questionid).slideDown();

app/javascript/src/usage/index.js

@@ -59,6 +59,7 @@ $(() => {
     const plansData = JSON.parse($('#plans_created').val());
     if (isObject(plansData)) {
       const chart = createChart('#yearly_plans', plansData, '', (event) => {
+        console.log(event);
         const segment = chart.getElementAtEvent(event)[0];
         if (!isUndefined(segment)) {
           const target = $('#plans_click_target').val();

app/javascript/src/utils/sectionUpdate.js

@@ -1,3 +1,5 @@
+import { Tinymce } from '../utils/tinymce.js';
+
 // update details in section progress panel
 export const updateSectionProgress = (id, numSecAnswers, numSecQuestions) => {
   const progressDiv = $(`#section-panel-${id}`).find('.section-status');
@@ -25,3 +27,28 @@ export const updateSectionProgress = (id, numSecAnswers, numSecQuestions) => {
 // given a question id find the containing div
 // used inconditional questions
 export const getQuestionDiv = (id) => $(`#answer-form-${id}`).closest('.question-body');
+
+// Clear an answers for a given question id.
+export const deleteAllAnswersForQuestion = (questionid) => {
+  const answerFormDiv = $(`#answer-form-${questionid}`);
+  const editAnswerForm = $(`#answer-form-${questionid}`).find('.form-answer');
+
+  editAnswerForm.find('input:checkbox').prop('checked', false);
+  editAnswerForm.find('input:radio').prop('checked', false);
+  editAnswerForm.find('input:text').text('');
+  // Get the TinyMce editor textarea and rest content to ''
+  const editorAnswerTextAreaId = `answer-text-${questionid}`;
+  const tinyMceAnswerEditor = Tinymce.findEditorById(editorAnswerTextAreaId);
+  if (tinyMceAnswerEditor) {
+    tinyMceAnswerEditor.setContent('');
+  }
+  // Date fields in form are input of type="date"
+  // The editAnswerForm.find('input:date') throws error, so
+  // we need an alternate way to reset date.
+  editAnswerForm.find('#answer_text').each ( (el) => {
+    if($(el).attr('type') === 'date') {
+      $(el).val('');
+    }
+
+  });
+};