Initial commit

littlemiaor · littlemiaor · commit 3133d282f0d3 · 2019-12-06T12:42:02.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Digital Creative
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,62 @@
+# Nova Slider Filter
+
+[![Latest Version on Packagist](https://img.shields.io/packagist/v/digital-creative/nova-range-input-filter)](https://packagist.org/packages/digital-creative/nova-range-input-filter)
+[![Total Downloads](https://img.shields.io/packagist/dt/digital-creative/nova-range-input-filter)](https://packagist.org/packages/digital-creative/nova-range-input-filter)
+[![License](https://img.shields.io/packagist/l/digital-creative/nova-range-input-filter)](https://github.com/dcasia/nova-range-input-filter/blob/master/LICENSE)
+
+A Laravel Nova range input filter.
+
+![RangeInputFilter in Action](https://raw.githubusercontent.com/dcasia/nova-range-input-filter/master/screenshot.png)
+
+# Installation
+
+You can install the package via composer:
+
+```
+composer require digital-creative/nova-range-input-filter
+```
+
+## Basic Usage
+
+Create a filter as usual and extend the `DigitalCreative\RangeInputFilter\RangeInputFilter` class
+
+```php
+use DigitalCreative\RangeInputFilter\RangeInputFilter;
+
+class MyFilter extends RangeInputFilter {
+
+    public function apply(Request $request, $query, $value)
+    {
+        // $value will always be an array
+    }
+    
+    public function options(Request $request)
+    {
+        return [
+            'fromPlaceholder' => 0,
+            'toPlaceholder' => 20,
+            'dividerLabel' => 'to',
+        ];
+    }
+
+}
+```
+
+and use it as usual on the filters methods within your resource class:
+
+```php
+class ExampleNovaResource extends Resource {
+
+    public function filters(Request $request)
+    {
+        return [
+            new MyFilter()
+        ];
+    }
+
+}
+```
+
+## License
+
+The MIT License (MIT). Please see [License File](https://raw.githubusercontent.com/dcasia/nova-range-input-filter/master/LICENSE) for more information.
diff --git a/composer.json b/composer.json
@@ -0,0 +1,40 @@
+{
+    "name": "digital-creative/nova-range-input-filter",
+    "description": "A Laravel Nova range input filter.",
+    "keywords": [
+        "laravel",
+        "nova",
+        "range",
+        "input",
+        "filter"
+    ],
+    "authors": [
+        {
+            "name": "Rafael Milewski"
+        },
+        {
+            "name": "littlemiaor"
+        }
+    ],
+    "license": "MIT",
+    "require": {
+        "php": ">=7.1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "DigitalCreative\\RangeInputFilter\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "DigitalCreative\\RangeInputFilter\\RangeInputFilterServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}
diff --git a/dist/js/filter.js b/dist/js/filter.js
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -0,0 +1,3 @@
+{
+    "/js/filter.js": "/js/filter.js"
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "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": "^1.0"
+    },
+    "dependencies": {
+        "vue": "^2.5.0"
+    }
+}
diff --git a/resources/js/components/RangeInputFilter.vue b/resources/js/components/RangeInputFilter.vue
@@ -0,0 +1,76 @@
+<template>
+
+    <div>
+
+        <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">
+
+            <input class="flex items-center form-control form-input text-sm min-w-0 border-60"
+                   :class="{ 'flex-1': filter.options.fullWidth }"
+                   name="from"
+                   :type="filter.options.inputType"
+                   :placeholder="filter.options.fromPlaceholder"
+                   :value="value.from"
+                   @change="handleChange"/>
+
+            <div class="text-sm mx-2">{{ 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 }"
+                   name="to"
+                   :type="filter.options.inputType"
+                   :placeholder="filter.options.toPlaceholder"
+                   :value="value.to"
+                   @change="handleChange"/>
+
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+
+    export default {
+        name: 'RangeInputFilter',
+        props: {
+            resourceName: {
+                type: String,
+                required: true
+            },
+            filterKey: {
+                type: String,
+                required: true
+            }
+        },
+        methods: {
+            handleChange(event) {
+
+                this.value[ event.target.name ] = event.target.value
+
+                this.$store.commit(`${ this.resourceName }/updateFilterState`, {
+                    filterClass: this.filterKey,
+                    value: this.value
+                })
+
+                this.$emit('change')
+
+            }
+        },
+        computed: {
+            filter() {
+                return this.$store.getters[ `${ this.resourceName }/getFilter` ](this.filterKey)
+            },
+            value() {
+                return this.filter.currentValue || {
+                    from: null,
+                    to: null
+                }
+            }
+        }
+    }
+
+</script>
diff --git a/resources/js/filter.js b/resources/js/filter.js
@@ -0,0 +1,3 @@
+Nova.booting((Vue, router, store) => {
+    Vue.component('range-input-filter', require('./components/RangeInputFilter'))
+})
diff --git a/screenshot.png b/screenshot.png
diff --git a/src/RangeInputFilter.php b/src/RangeInputFilter.php
@@ -0,0 +1,57 @@
+<?php
+
+namespace DigitalCreative\RangeInputFilter;
+
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Http\Request;
+use Laravel\Nova\Filters\Filter;
+
+class RangeInputFilter extends Filter
+{
+
+    /**
+     * @var string
+     */
+    public $component = 'range-input-filter';
+
+    /**
+     * @param Request $request
+     * @param Builder $query
+     * @param mixed $value
+     *
+     * @return Builder
+     */
+    public function apply(Request $request, $query, $value)
+    {
+        return $query;
+    }
+
+    /**
+     * Get the filter's available options.
+     *
+     * @param Request $request
+     *
+     * @return array
+     */
+    public function options(Request $request): array
+    {
+        return [
+            'fromPlaceholder' => null,
+            'toPlaceholder' => null,
+            'inputType' => 'number',
+            'dividerLabel' => 'to',
+            'fullWidth' => true
+        ];
+    }
+
+    /**
+     * Prepare the filter for JSON serialization.
+     *
+     * @return array
+     */
+    public function jsonSerialize(): array
+    {
+        return array_merge(parent::jsonSerialize(), [ 'options' => $this->options(resolve(Request::class)) ]);
+    }
+
+}
diff --git a/src/RangeInputFilterServiceProvider.php b/src/RangeInputFilterServiceProvider.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace DigitalCreative\RangeInputFilter;
+
+use Illuminate\Support\ServiceProvider;
+use Laravel\Nova\Events\ServingNova;
+use Laravel\Nova\Nova;
+
+class RangeInputFilterServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Nova::serving(function (ServingNova $event) {
+            Nova::script('range-input-filter', __DIR__ . '/../dist/js/filter.js');
+        });
+    }
+}
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -0,0 +1,4 @@
+const mix = require('laravel-mix')
+
+mix.setPublicPath('dist')
+   .js('resources/js/filter.js', 'js')

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "/js/filter.js": "/js/filter.js"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+Nova.booting((Vue, router, store) => {`
	`2`	`+ Vue.component('range-input-filter', require('./components/RangeInputFilter'))`
	`3`	`+})`