Fix discard in quiz editor (#600)

* Fix discard behavior in quiz editor -> edit answer

* Clean up code comments

app/abilities/answer_ability.rb

@@ -4,10 +4,8 @@ class AnswerAbility
   def initialize(user)
     clear_aliased_actions
 
-    can [:new, :create, :update, :destroy], Answer do |answer|
+    can [:new, :create, :update, :destroy, :cancel_edit], Answer do |answer|
       answer.question.present? && user.can_edit?(answer.question)
     end
-
-    can :update_answer_box, Answer
   end
 end

app/assets/javascripts/answers.coffee.erb

@@ -0,0 +1,90 @@
+<% environment.context_class.instance_eval { include ApplicationHelper } %>
+
+# The "target button" is either the "discard" button or the "edit" button
+# what its purpose is is stored in this object with a mapping:
+# answerId -> boolean
+targetButtonIsDiscardButton = {}
+
+# Set of answer ids that have a discard listener registered
+# This is to avoid registering the same listener multiple times.
+window.registeredDiscardListeners = new Set(); 
+
+$(document).on 'turbolinks:load', ->
+
+  $(document).on 'shown.bs.collapse', '[id^="collapse-answer-"]', ->
+    # Answer is now shown to the user and can be edited
+    answerId = $(this).data('id');
+    registerDiscardListeners();
+    targetButtonIsDiscardButton[answerId] = true;
+    $target = $('#targets-answer-' + answerId)
+    $target.empty().append($target.data('discard'))
+      .removeClass('btn-primary').addClass('btn-secondary')
+
+  $(document).on 'hidden.bs.collapse', '[id^="collapse-answer-"]', ->
+    # Answer is now hidden from the user
+    answerId = $(this).data('id')
+    targetButtonIsDiscardButton[answerId] = false;
+    $target = $('#targets-answer-' + answerId)
+    $target.empty().append($target.data('edit'))
+      .removeClass('btn-secondary').addClass('btn-primary')
+
+  # Appearance of box
+  $(document).on 'change', '[id^="answer-value-"]', ->
+    id = $(this).data('id')
+    isCorrectAnswer = $('#answer-true-' + id).is(':checked')
+
+    # Set background color
+    if isCorrectAnswer
+      newClass = "<%= bgcolor(true) %>";
+    else
+      newClass = "<%= bgcolor(false) %>";
+    $('#answer-header-' + id)
+      .removeClass('bg-correct')
+      .removeClass('bg-incorrect')
+      .addClass(newClass)
+
+    # Set ballot box
+    answerBox = $('#answer-box-' + id)
+    answerBox.empty()
+    if isCorrectAnswer
+      answerBox.append '<%= ballot_box(true) %>'
+    else
+      answerBox.append '<%= ballot_box(false) %>'
+
+  # Cancel new answer creation
+  $(document).on 'click', '#new-answer-cancel', ->
+    $('#new-answer').show()
+    $('#new-answer-field').empty()
+
+# clean up everything before turbolinks caches
+$(document).on 'turbolinks:before-cache', ->
+  $(document).off 'shown.bs.collapse', '[id^="collapse-answer-"]'
+  $(document).off 'hidden.bs.collapse', '[id^="collapse-answer-"]'
+  $(document).off 'change', '[id^="answer-value-"]'
+  $(document).off 'click', '#new-answer-cancel'
+
+
+registerDiscardListeners = () ->
+  buttons = $('[id^=targets-answer-]');
+  $.each(buttons, (i,btn) ->
+    btn = $(btn);
+    answerId = btn.attr('id').split('-')[2];
+
+    # Don't register listeners multiple times
+    if answerId in window.registeredDiscardListeners
+      return;
+
+    window.registeredDiscardListeners.add(answerId);
+    $(this).on('click', (evt) =>
+      isDiscardButton = targetButtonIsDiscardButton[answerId];
+      if not isDiscardButton
+        return;
+
+      # On discard
+      $.ajax Routes.cancel_edit_answer_path(answerId),
+        type: 'GET'
+        dataType: 'script'
+        error: (jqXHR, textStatus, errorThrown) ->
+          console.log("AJAX Error: #{textStatus}")
+    );
+  );

app/controllers/answers_controller.rb

@@ -1,6 +1,6 @@
 # AnswersController
 class AnswersController < ApplicationController
-  before_action :set_answer, except: [:new, :create, :update_answer_box]
+  before_action :set_answer, except: [:new, :create]
   authorize_resource except: [:new, :create]
 
   def current_ability
@@ -34,9 +34,8 @@ def destroy
     @success = true
   end
 
-  def update_answer_box
-    @answer_id = params[:answer_id].to_i
-    @value = params[:value] == "true"
+  def cancel_edit
+    I18n.locale = @answer.question&.locale_with_inheritance
   end
 
   private

app/views/answers/cancel_edit.js.erb

@@ -0,0 +1,39 @@
+var answerId = <%= @answer.id %>;
+var answerCard = $(`#answers-accordion > #answer-card-${answerId}`);
+window.registeredDiscardListeners.delete(answerId);
+
+// eslint-disable-next-line @stylistic/quotes
+var newAnswerCardElements = $(`<%= j render partial: 'answers/card', locals: { answer: @answer } %>`).children();
+
+// re-render possible MathJax content
+// eslint-disable-next-line no-undef
+renderMathInElement(newAnswerCardElements.get(0), {
+  delimiters: [
+    {
+      left: "$$",
+      right: "$$",
+      display: true,
+    },
+    {
+      left: "$",
+      right: "$",
+      display: false,
+    },
+    {
+      left: "\\(",
+      right: "\\)",
+      display: false,
+    },
+    {
+      left: "\\[",
+      right: "\\]",
+      display: true,
+    },
+  ],
+  throwOnError: false,
+},
+);
+
+setTimeout(() => {
+  answerCard.empty().append(newAnswerCardElements);
+}, 100);

config/routes.rb

@@ -51,9 +51,9 @@
   resources :announcements, only: [:index, :new, :create]
 
   # answers routes
-
-  get "answers/update_answer_box",
-      as: "update_answer_box"
+  get "answers/:id/cancel_edit",
+      to: "answers#cancel_edit",
+      as: "cancel_edit_answer"
 
   resources :answers, except: [:index, :show, :edit]