preserve previous state on form error

the html now contains a `data-prev-state` attribute which contains the
previous state, taken from the `operation` value in the form data (from
the submit button). This is used to seed the `currentState` of the
templateFolderForm. If not specified (or 'unknown', because the user
hit enter last time round), then set it to nothingSelectedButtons.

app/assets/javascripts/templateFolderForm.js

@@ -12,26 +12,21 @@
       this.$stickyBottom.append(this.itemsSelectedButtons);
 
       // all the diff states that we want to show or hide
-      this.states = {
-        nothingSelectedButtons: this.$form.find('#nothing_selected'),
-        itemsSelectedButtons: this.$form.find('#items_selected'),
-
-        moveToFolderRadios: this.$form.find('#move_to_folder_radios'),
-        moveToNewFolderForm: this.$form.find('#move_to_new_folder_form'),
-
-        addNewFolderForm: this.$form.find('#add_new_folder_form'),
-        addNewTemplateForm: this.$form.find('#add_new_template_form'),
-
-      };
+      this.states = [
+        {key: 'nothing-selected-buttons', $el: this.$form.find('#nothing_selected'), cancellable: false},
+        {key: 'items-selected-buttons', $el: this.$form.find('#items_selected'), cancellable: false},
+        {key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true},
+        {key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true},
+        {key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true},
+        {key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true}
+      ];
 
       // cancel buttons only relevant if JS enabled, so
-      this.addCancelButton(this.states.moveToFolderRadios);
-      this.addCancelButton(this.states.moveToNewFolderForm);
-      this.addCancelButton(this.states.addNewFolderForm);
-      this.addCancelButton(this.states.addNewTemplateForm);
+      this.states.filter(state => state.cancellable).forEach((x) => this.addCancelButton(x));
 
       // first off show the new template / new folder buttons
-      this.currentState = 'nothingSelectedButtons';
+      let prevState = this.$form.data('prev-state') || 'unknown';
+      this.currentState = (prevState === 'unknown') ? 'nothing-selected-buttons' : prevState;
 
       this.$form.on('click', 'button.button-secondary', (event) => this.actionButtonClicked(event));
       this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
@@ -39,14 +34,14 @@
       this.render();
     };
 
-    this.addCancelButton = function($el) {
+    this.addCancelButton = function(state) {
       let $cancel =  $('<a></a>')
           .html('Cancel')
           .click((event) => {
             event.preventDefault();
             // clear existing data
-            $el.find('input:radio').prop('checked', false);
-            $el.find('input:text').val('');
+            state.$el.find('input:radio').prop('checked', false);
+            state.$el.find('input:text').val('');
 
             // gross hack - pretend we're in the choose actions state, then pretend a checkbox was clicked to work out
             // whether to show zero or non-zero options. This calls a render at the end
@@ -54,7 +49,7 @@
             this.templateFolderCheckboxChanged();
           });
 
-      $el.append($cancel);
+      state.$el.append($cancel);
     };
 
     this.actionButtonClicked = function(event) {
@@ -84,8 +79,8 @@
 
     this.render = function() {
       // detach everything, unless they are the currentState
-      Object.entries(this.states).forEach(
-        ([state, $el]) => (state === this.currentState ? this.$stickyBottom.append($el) : $el.detach())
+      this.states.forEach(
+        state => (state.key === this.currentState ? this.$stickyBottom.append(state.$el) : state.$el.detach())
       );
     };
 

app/templates/components/form.html

@@ -4,7 +4,8 @@
   autocomplete=False,
   class=None,
   id=None,
-  module=None
+  module=None,
+  data_kwargs={}
 ) %}
   <form
     method="{{ method }}"
@@ -13,6 +14,11 @@
     {% if class %}class="{{ class }}"{% endif %}
     {% if id %}id="{{ id }}"{% endif %}
     {% if module %}data-module="{{ module }}"{% endif %}
+    {% for key, val in data_kwargs.items() %}
+      {% if val %}
+        data-{{ key }}="{{ val }}"
+      {% endif %}
+    {% endfor %}
     novalidate
   >
     {{ caller() }}

app/templates/views/templates/choose.html

@@ -79,7 +79,10 @@
     {{ live_search(target_selector='#template-list .template-list-item', show=show_search_box, form=search_form) }}
 
     {% if can_manage_folders %}
-      {% call form_wrapper(module='template-folder-form') %}
+      {% call form_wrapper(
+          module='template-folder-form',
+          data_kwargs={'prev-state': templates_and_folders_form.op or None}
+      ) %}
         {% include 'views/templates/_template_list.html' %}
         {% include 'views/templates/_move_to.html' %}
       {% endcall %}