This package allows you to emit any of your existing Laravel Nova filters to metrics or custom cards.
You can install the package in to a Laravel
app that uses Nova via composer:
composer require nemrutco/nova-global-filter
In this example, we are registering few Metric Cards
and the Global Filter
with a Date
filter as:
...
use Nemrutco\NovaGlobalFilter\NovaGlobalFilter;
use App\Nova\Filters\Date;
class Store extends Resource
{
...
public function cards(Request $request)
{
return [
new TotalSales // Value Metric
new Orders, // Trend Metric
new MostSoldProduct, // Partition Metric
// NovaGlobalFilter
new NovaGlobalFilter([
new Date, // Date Filter
]),
];
}
...
}
And now metric cards
or any other cards
optimized to listen GlobalFilter
can be filtered by using GlobalFilterable
trait and calling $this->globalFiltered($model,$filters)
method.
globalFiltered($model, $filters = [])
method expect $model
and $filters
parameters:
use Nemrutco\NovaGlobalFilter\GlobalFilterable;
use App\Nova\Filters\Date;
...
class UsersPerDay extends Trend
{
use GlobalFilterable;
public function calculate(NovaRequest $request)
{
// Filter your model with existing filters
$model = $this->globalFiltered($request, Store::class,[
Date::class // DateFilter
]);
// Do your thing with the filtered $model
return $this->countByDays($request, $model);
}
...
}
And that's it. Cards will be filtered based on passed filter value.
If you want to apply default value on initial request make sure you set default value in your filter as
...
// set default date
public function default()
{
return Carbon::now();
}
...
To change layout from grid
to inline
by default it's set to grid
...
(new NovaGlobalFilter([
// Filters
]))->inline(),
...
To enable Reset
button
...
(new NovaGlobalFilter([
// Filters
]))->resettable(),
...
To add multiple Global Filter
s
...
(new NovaGlobalFilter([
// Filters
]))->inline()->resettable(),
(new NovaGlobalFilter([
// Filters
]))->onlyOnDetail(),
...
To set Title
of Global Filter
...
(new NovaGlobalFilter([
// Filters
]))->title('Example Title'),
...
To listen Global Filter
on any Custom Card
s:
...
created() {
Nova.$on("global-filter-changed", filter => {
// Do your thing with the changed filter
console.log(filter);
});
},
...
To request all filter states from Global Filter
on any Custom Card
s:
...
Nova.$emit("global-filter-request");
...
To request spesific filters state from Global Filter
on any Custom Card
s:
...
created() {
Nova.$emit("global-filter-request", [
"App\\Nova\\Filters\\DateFilter",
"App\\Nova\\Filters\\CountryFilter"
]);
},
...
To receive filters state from Global Filter
on any Custom Card
s:
...
created() {
Nova.$on("global-filter-response", filters => {
// Do your thing with the filters
console.log(filters);
});
},
...
Nova.$on('global-filter-changed', [changed filter and value])
. So any card that listens to this event will recieve the filter and its value.Metric Card
s to allow them to listen "global-filter-changed"
event. Make sure there are no any conflicts with other pacages.Global Filter
will not trigger update at the filters in Filter Menu
of your Index view.Reset
button simply reloads the current page. There is nothing fancy going on behind the scenes.Star
the package.Cheers
Made with ❤️ for open source
The MIT License (MIT). Please see License File for more information.