Merge pull request #18 from elev8studio/filter-reset-behaviour

Filter reset behaviour

Author: schroedan

package.json

@@ -16,7 +16,7 @@
         "moment": "^2.22.2"
     },
     "dependencies": {
-        "font-awesome": "^4.7.0",
+        "@vue-hero-icons/solid": "^1.7.2",
         "vue": "^2.5.0"
     }
 }

resources/js/components/DateRangeFilter.vue

@@ -32,9 +32,11 @@
 
                 <button
                     v-show="isValidCurrentValue"
-                    class="reset-button btn btn-sm fa fa-times"
+                    class="reset-button btn btn-sm focus:outline-none flex justify-center items-center"
                     @click="resetFilter"
-                ></button>
+                >
+                    <XIcon class="reset-icon"/>
+                </button>
             </div>
         </div>
     </div>
@@ -66,15 +68,34 @@
             };
         },
 
+        created () {
+            /*
+             * Clear the displayed value when clicking 'Reset Filters'
+             * to reset all applied filters. Without this, the filter is
+             * removed, but the input value remains, which is confusing.
+             */
+            this.$store.subscribeAction((action, state) => {
+                if (action.type === `${this.resourceName}/resetFilterState`) {
+                    this.resetFilter();
+                }
+            });
+        },
+
         methods: {
             handleChange: function (value) {
-                if (Array.isArray(value) && value.length === 2) {
-                    value = value.map((value) => moment(value).format('YYYY-MM-DD'));
-                }
+                /*
+                 * Remove repetition and provide empty value when clear button is pressed.
+                 * This tells Nova that the filter is no longer enabled, changing the filter
+                 * icon colour from blue to regular colour. Without this fix, you can press
+                 * the clear button, but the filter icon still looks as if a filter is applied.
+                 */
+                value = Array.isArray(value) && value.length === 2
+                    ? value.map((value) => moment(value).format('YYYY-MM-DD'))
+                    : [];
 
                 this.$store.commit(`${this.resourceName}/updateFilterState`, {
                     filterClass: this.filterKey,
-                    value: Array.isArray(value) && value.length === 2 ? value : [],
+                    value: value,
                 });
 
                 this.$emit('change');
@@ -94,7 +115,7 @@
             },
 
             isValidCurrentValue: function () {
-                return Array.isArray(this.filter.currentValue) && this.filter.currentValue.length === 2
+                return Array.isArray(this.filter.currentValue) && this.filter.currentValue.length === 2;
             },
 
             resetFilter: function () {

resources/js/components/DateRangePicker.vue

@@ -3,7 +3,6 @@
         type="text"
         ref="dateRangePicker"
         :disabled="disabled"
-        :class="{ '!cursor-not-allowed': disabled }"
         :placeholder="placeholder"
         :value="value"
     />
@@ -136,7 +135,8 @@
 </script>
 
 <style scoped>
-    .\!cursor-not-allowed {
-        cursor: not-allowed !important;
-    }
+    /* 'cursor: not-allowed' removed because the result is misleading -
+     * when hovering the input field, the not-allowed cursor suggests
+     * the field is not clickable, but you can still click it.
+     */
 </style>

resources/sass/filter.scss

@@ -1,5 +1,3 @@
-@import "~font-awesome/scss/font-awesome";
-
 .date-range-filter .input-wrapper {
   $reset-button-width: 2rem !default;
 
@@ -18,6 +16,12 @@
     transition: opacity 0.4s;
   }
 
+  .reset-icon {
+    width: 18px;
+    height: 18px;
+    color: #9d9d9d;
+  }
+
   &:hover .reset-button {
     opacity: 1;
   }