Add clear button to date filters

When a date filter is given a value, a clear icon is added to the element for easy removal.
WikiWatershed · Jul 25, 2017 · fc32018 · fc32018
1 parent 2c502c2
commit fc32018
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 17 deletions.
diff --git a/src/mmw/js/src/data_catalog/templates/form.html b/src/mmw/js/src/data_catalog/templates/form.html
@@ -3,15 +3,29 @@
 {% if showingFilters %}
     <div class="data-catalog-search-dates">
         <h5>Data collected between:</h5>
-        <input
-            class="data-catalog-date-input from-date form-control"
-            value="{{fromDate}}"
-        />
+        <div class="data-catalog-clearable-input">
+            <input
+                class="data-catalog-date-input from-date form-control"
+                value="{{fromDate}}"
+            />
+            {% if fromDate %}
+            <a href="javascript:0;" class="data-catalog-clear-icon" title="Clear">
+                <i class=" fa fa-times"></i>
+            </a>
+            {% endif %}
+        </div>
         <span>and</span>
-        <input
-            class="data-catalog-date-input to-date form-control"
-            value="{{toDate}}"
-        />
+        <div class="data-catalog-clearable-input">
+            <input
+                class="data-catalog-date-input to-date form-control"
+                value="{{toDate}}"
+            />
+            {% if toDate %}
+            <a href="javascript:0;" title="Clear">
+                <i class="data-catalog-clear-icon fa fa-times"></i>
+            </a>
+            {% endif %}
+        </div>
     </div>
 
     {% if not isValid %}

diff --git a/src/mmw/js/src/data_catalog/views.js b/src/mmw/js/src/data_catalog/views.js
@@ -134,24 +134,31 @@ var FormView = Marionette.ItemView.extend({
     ui: {
         dateInput: '.data-catalog-date-input',
         filterToggle: '.date-filter-toggle',
-        searchInput: '.data-catalog-search-input'
+        searchInput: '.data-catalog-search-input',
+        clearable: '.data-catalog-clearable-input a',
     },
 
     modelEvents: {
-        'change:showingFilters change:isValid': 'render'
+        'change:showingFilters change:isValid change:toDate change:fromDate': 'render'
     },
 
     events: {
         'keyup @ui.searchInput': 'onSearchInputChanged',
         'click @ui.filterToggle': 'onFilterToggle',
         'change @ui.dateInput': 'onDateInputChanged',
-        'keyup @ui.dateInput': 'onDateInputKeyup'
+        'keyup @ui.dateInput': 'onDateInputKeyup',
+        'click @ui.clearable': 'onClearInput',
     },
 
     onRender: function() {
         $('.data-catalog-date-input').datepicker();
     },
 
+    onClearInput: function(e) {
+        var $el = $(e.currentTarget).siblings('input').val('');
+        this.updateDateInput($el);
+    },
+
     onSearchInputChanged: function(e) {
         var query = this.ui.searchInput.val().trim();
         if (e.keyCode === ENTER_KEYCODE) {
@@ -168,18 +175,21 @@ var FormView = Marionette.ItemView.extend({
     },
 
     onDateInputChanged: function(e) {
-        var dateControl = $(e.currentTarget),
-            isFromDate = dateControl.hasClass('from-date'),
-            attr = isFromDate ? 'fromDate' : 'toDate';
-
-        this.model.set(attr, dateControl.val());
+        this.updateDateInput($(e.currentTarget));
     },
 
     onFilterToggle: function() {
         var newVal = !this.model.get('showingFilters');
         this.model.set('showingFilters', newVal);
     },
 
+    updateDateInput: function($dateEl) {
+        var isFromDate = $dateEl.hasClass('from-date'),
+            attr = isFromDate ? 'fromDate' : 'toDate';
+
+        this.model.set(attr, $dateEl.val());
+    },
+
     triggerSearch: function() {
         if (this.validate()) {
             this.triggerMethod('search');

diff --git a/src/mmw/sass/pages/_data-catalog.scss b/src/mmw/sass/pages/_data-catalog.scss
@@ -21,13 +21,25 @@
             padding-left: 38px;
             font-size: 0.8em;
         }
+        .data-catalog-clearable-input {
+            display: inline;
+        }
         .data-catalog-date-input {
-            width: 46%;
+            width: 42%;
             height: 38px;
             border: none;
             border-radius: 0;
             display: inline;
         }
+        .data-catalog-clear-icon {
+            color: $ui-grey;
+            position: relative;
+            right: 25px;
+            font-size: 18px;
+        }
+        &:hover {
+            text-decoration: none;
+        }
         .data-catalog-validation-msg {
           color: $ui-danger;
           margin-top: 8px;