Simplify store_credit memo edit JS

The previous store credit JS did a lot more than it needed to, and
recreated much of the work that we could get for free from rails-ujs. We
were already specifying remote: true, but weren't using that
functionality and instead were performing the AJAX explicitly.

This commit replaces the existing JS and relies on CSS for display , and
jquery-ujs for submitting via AJAX. The user-facing behaviour should be
identical.

The resulting code has very little to do with store credits, we should
consider at a future date looking through our inline edits in the admin
and possibly consolidating them.

backend/app/assets/javascripts/spree/backend/store_credits.js

@@ -0,0 +1,25 @@
+Spree.ready(function() {
+  $('.store-credit-memo-row').each(function() {
+    var row = this;
+    var field = row.querySelector('[name="store_credit[memo]"]')
+    var textDisplay = row.querySelector('.store-credit-memo-text')
+
+    $(row).on('ajax:success', function(event, data) {
+      row.classList.remove('editing');
+      field.defaultValue = field.value;
+      textDisplay.textContent = field.value;
+
+      show_flash('success', data.message);
+    }).on('ajax:error', function(event, xhr, status, error) {
+      show_flash('error', xhr.responseJSON.message);
+    });
+
+    row.querySelector('.edit-memo').addEventListener('click', function() {
+      row.classList.add('editing');
+    });
+
+    row.querySelector('.cancel-memo').addEventListener('click', function() {
+      row.classList.remove('editing');
+    });
+  });
+});

backend/app/assets/stylesheets/spree/backend/sections/_store_credits.scss

@@ -1,9 +1,3 @@
-#sc_memo_edit_form {
-  #store_credit_memo {
-    width: 100%;
-  }
-}
-
 #sc-detail-table {
   tr {
     &:hover {
@@ -16,3 +10,20 @@
     }
   }
 }
+
+.store-credit-memo-row {
+  &.editing {
+    .store-credit-memo-text,
+    .edit-memo {
+      display: none;
+    }
+  }
+
+  &:not(.editing) {
+    .store-credit-memo-form,
+    .save-memo,
+    .cancel-memo {
+      display: none;
+    }
+  }
+}

backend/app/views/spree/admin/store_credits/show.html.erb

@@ -42,32 +42,24 @@
     <td><%= @store_credit.category_name %></td>
     <td class='actions'></td>
   </tr>
-  <tr id='memo-display-row'>
+  <tr class='store-credit-memo-row' data-original-value='<%= @store_credit.memo %>'>
     <td>
       <strong><%= t('spree.admin.store_credits.memo') %></strong>
     </td>
-    <td class='js-memo-text'>
-      <%= @store_credit.memo %>
-    </td>
-    <td class='actions'>
-      <% if can?(:update, @store_credit) %>
-        <%= link_to '', '#', class: 'js-edit-memo edit-method fa fa-edit no-text with-tip', data: { action: 'edit' }, title: t('spree.actions.edit') %>
-      <% end %>
-    </td>
-  </tr>
-  <tr id='memo-edit-row' class='hidden' data-original-value='<%= @store_credit.memo %>'>
     <td>
-      <strong><%= t('spree.admin.store_credits.memo') %></strong>
-    </td>
-    <td>
-      <%= form_tag admin_user_store_credit_path(@user, @store_credit), method: :put, remote: true, id: 'sc_memo_edit_form' do %>
-        <%= text_area_tag 'store_credit[memo]', @store_credit.memo  %>
+      <div class='store-credit-memo-text'>
+        <%= @store_credit.memo %>
+      </div>
+
+      <%= form_tag admin_user_store_credit_path(@user, @store_credit), method: :put, remote: true, class: 'store-credit-memo-form', id: 'store_credit_memo_form' do %>
+        <%= text_area_tag 'store_credit[memo]', @store_credit.memo, class: 'fullwidth' %>
       <% end %>
     </td>
     <td class='actions'>
       <% if can?(:update, @store_credit) %>
-        <%= link_to '', '#', class: 'js-save-memo fa fa-check no-text with-tip', data: { user_id: @user.id, store_credit_id: @store_credit.id, action: 'save' }, title: t('spree.actions.save') %>
-        <%= link_to '', '#', class: 'js-cancel-memo fa fa-cancel no-text with-tip', data: { action: 'cancel' }, title: t('spree.actions.cancel') %>
+        <%= button_tag '', class: "fa fa-check save-memo no-text with-tip", "data-action": "save", title: t('spree.actions.save'), type: 'submit', form: 'store_credit_memo_form' %>
+        <%= button_tag '', class: "fa fa-cancel cancel-memo no-text with-tip", "data-action": "cancel", title: t('spree.actions.cancel'), type: 'reset', form: 'store_credit_memo_form' %>
+        <%= button_tag '', class: "fa fa-edit edit-memo no-text with-tip", "data-action": "edit", title: t('spree.actions.edit') %>
       <% end %>
     </td>
   </tr>