From 4b305376f7f0543bbe0635459cb2cc9d3161dc30 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 10 Dec 2018 16:53:12 +0000
Subject: [PATCH] Add counter of selected templates and folders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Being able to see how many things you have selected gives you positive
feedback that reinforces that what you’ve done has been recognised. It
helps you understand the implications of your actions (ie you see ‘3
selected’ before you press the ‘Move’ button). And it gives you an
escape hatch the get out of the state you’re in by providing the ‘Clear’
button.

We also found in prototyping that having a ‘Nothing selected’ message
helps draws people’s attention to the checkboxes when they first
encounter the folders feature.

This commit implements the counter and the cancel button. It tries to
follow the existing patterns for this module.
---
 app/assets/javascripts/templateFolderForm.js  | 55 ++++++++++++++-----
 .../stylesheets/components/message.scss       |  7 +++
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index 744b0c4f6..2d5ee8d98 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -25,8 +25,9 @@
         {key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true}
       ];
 
-      // cancel buttons only relevant if JS enabled, so
+      // cancel/clear buttons only relevant if JS enabled, so
       this.states.filter(state => state.cancellable).forEach((x) => this.addCancelButton(x));
+      this.states.filter(state => state.key === 'items-selected-buttons').forEach(x => this.addClearButton(x));
 
       // first off show the new template / new folder buttons
       this.currentState = this.$form.data('prev-state') || 'unknown';
@@ -41,23 +42,42 @@
     };
 
     this.addCancelButton = function(state) {
-      let $cancel =  $('<a></a>')
-          .html('Cancel')
-          .attr('class', 'page-footer-js-cancel')
-          .attr('tabindex', '0')
-          .on('click keydown', (event) => {
-            event.preventDefault();
-            // clear existing data
-            state.$el.find('input:radio').prop('checked', false);
-            state.$el.find('input:text').val('');
+      let $cancel = this.makeButton('Cancel', () => {
 
-            // go back to action buttons
-            this.selectActionButtons();
-          });
+        // clear existing data
+        state.$el.find('input:radio').prop('checked', false);
+        state.$el.find('input:text').val('');
+
+        // go back to action buttons
+        this.selectActionButtons();
+      });
 
       state.$el.append($cancel);
     };
 
+    this.addClearButton = function(state) {
+
+      let $clear = this.makeButton('Clear', () => {
+
+        // uncheck all templates and folders
+        this.$form.find('input:checkbox').prop('checked', false);
+
+        // go back to action buttons
+        this.selectActionButtons();
+      });
+
+      state.$el.find('.template-list-selected-counter').append($clear);
+    };
+
+    this.makeButton = (text, fn) => $('<a></a>')
+      .html(text)
+      .addClass('page-footer-js-cancel')
+      .attr('tabindex', '0')
+      .on('click keydown', event => {
+        event.preventDefault();
+        fn();
+      });
+
     this.selectActionButtons = function () {
       // If we want to show one of the grey choose actions state, we can pretend we're in the choose actions state,
       // and then pretend a checkbox was clicked to work out whether to show zero or non-zero options.
@@ -85,6 +105,9 @@
       }
 
       this.render();
+
+      $('.template-list-selected-counter-count').html(numSelected);
+
     };
 
     this.countSelectedCheckboxes = function() {
@@ -102,6 +125,9 @@
       <div id="nothing_selected">
         <button class="button-secondary" value="add-new-template">New template</button>
         <button class="button-secondary" value="add-new-folder">New folder</button>
+        <div class="template-list-selected-counter">
+          Nothing selected
+        </div>
       </div>
     `;
 
@@ -109,6 +135,9 @@
       <div id="items_selected">
         <button class="button-secondary" value="move-to-existing-folder">Move</button>
         <button class="button-secondary" value="move-to-new-folder">Add to a new folder</button>
+        <div class="template-list-selected-counter">
+          <span class="template-list-selected-counter-count">1</span> selected &ensp;
+        </div>
       </div>
     `;
   };
diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index c4833d8dc..c36c7bae1 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -108,6 +108,13 @@
     padding: $gutter-half 0 $gutter-one-third 0;
   }
 
+  &-selected-counter {
+    position: absolute;
+    right: $gutter-half;
+    top: $gutter - 1px;
+    color: $secondary-text-colour;
+  }
+
 }
 
 .folder-heading {