only refresh page if from and to values are set

Author: milewski

dist/js/filter.js

@@ -10,11 +10,11 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^5.0.0",
-        "vue-template-compiler": "^2.6.10"
+        "cross-env": "^6.0.3",
+        "laravel-mix": "^5.0.1",
+        "vue-template-compiler": "^2.6.11"
     },
     "dependencies": {
-        "vue": "^2.5.0"
+        "vue": "^2.6.11"
     }
 }

package.json

@@ -1,29 +1,29 @@
 <template>
 
-    <div>
+    <div class="range-input-filter">
 
         <h3 class="text-sm uppercase tracking-wide text-80 bg-30 p-3">
             {{ filter.name }}
         </h3>
 
-        <div class="flex p-2 flex-wrap items-center">
+        <div class="flex p-2 flex-no-wrap items-center">
 
-            <input class="flex items-center form-control form-input text-sm min-w-0 border-60"
-                   :class="{ 'flex-1': filter.options.fullWidth }"
+            <input class="flex items-center form-control form-input text-sm border-60"
+                   :class="{ 'w-full': filter.options.fullWidth }"
                    name="from"
                    :type="filter.options.inputType"
                    :placeholder="filter.options.fromPlaceholder"
-                   :value="value.from"
+                   v-model="value.from"
                    @change="handleChange"/>
 
-            <div class="text-sm mx-2">{{ filter.options.dividerLabel }}</div>
+            <div class="text-sm mx-2 text-center">{{ filter.options.dividerLabel }}</div>
 
-            <input class="flex items-center form-control form-input text-sm min-w-0 border-60"
-                   :class="{ 'flex-1': filter.options.fullWidth }"
+            <input class="flex items-center form-control form-input text-sm border-60"
+                   :class="{ 'w-full': filter.options.fullWidth }"
                    name="to"
                    :type="filter.options.inputType"
                    :placeholder="filter.options.toPlaceholder"
-                   :value="value.to"
+                   v-model="value.to"
                    @change="handleChange"/>
 
         </div>
@@ -49,6 +49,16 @@
         methods: {
             handleChange(event) {
 
+                /**
+                 * Dont refresh the page if user is still typing the values
+                 */
+                if (Number.isNaN(parseInt(this.value.from)) !==
+                    Number.isNaN(parseInt(this.value.to))) {
+
+                    return
+
+                }
+
                 this.$store.commit(`${ this.resourceName }/updateFilterState`, {
                     filterClass: this.filterKey,
                     value: {
@@ -66,10 +76,7 @@
                 return this.$store.getters[ `${ this.resourceName }/getFilter` ](this.filterKey)
             },
             value() {
-                return this.filter.currentValue || {
-                    from: null,
-                    to: null
-                }
+                return { ...this.filter.currentValue } || { from: '', to: '' }
             }
         }
     }

resources/js/components/RangeInputFilter.vue

@@ -14,6 +14,17 @@ class RangeInputFilter extends Filter
      */
     public $component = 'range-input-filter';
 
+    /**
+     * @var array
+     */
+    public $defaults = [
+        'fromPlaceholder' => null,
+        'toPlaceholder' => null,
+        'inputType' => 'number',
+        'dividerLabel' => 'to',
+        'fullWidth' => true
+    ];
+
     /**
      * @param Request $request
      * @param Builder $query
@@ -35,13 +46,7 @@ public function apply(Request $request, $query, $value)
      */
     public function options(Request $request): array
     {
-        return [
-            'fromPlaceholder' => null,
-            'toPlaceholder' => null,
-            'inputType' => 'number',
-            'dividerLabel' => 'to',
-            'fullWidth' => true
-        ];
+        return [];
     }
 
     /**
@@ -51,7 +56,9 @@ public function options(Request $request): array
      */
     public function jsonSerialize(): array
     {
-        return array_merge(parent::jsonSerialize(), [ 'options' => $this->options(resolve(Request::class)) ]);
+        return array_merge(
+            parent::jsonSerialize(), [ 'options' => array_merge($this->defaults, $this->options(resolve(Request::class))) ]
+        );
     }
 
 }