Giter Club home page Giter Club logo

nova-global-filter's Introduction

Nova Global Filter

This package allows you to emit any of your existing Laravel Nova filters to metrics or custom cards.

screenshot

Installation

You can install the package in to a Laravel app that uses Nova via composer:

composer require valenting/global-filter

Usage

In this example, we are registering few Metric Cards and the Global Filter with a Date filter as:

...
use ValentinG\GlobalFilter\GlobalFilter;
use App\Nova\Filters\Date;

class Main extends Dashboard
{

  public function cards(Request $request): array
  {
    return [
        GlobalFilters::make()
            ->filters([
                GlobalYearFilter::make()
                    ->icon('calendar')
                    ->iconClass('text-red-500')
                ,
                GlobalStrateFilter::make()
                    ->icon('server')
                    ->iconClass('text-red-500')
            ])
        ,
        EmploymentsStatusPartition::make(),
        SkillsCriteriaPartition::make()->isFilter(false),
    ];
  }
}

And now metric cards can be filtered by using GlobalFilterable trait and calling $this->globalFiltered($model,$filters) method.

 public function globalFiltered(NovaRequest $request, Builder $builder, array $globalFilters = []): Builder

globalFiltered($model, $filters = []) method expect builder and $filters parameters:

You can listen custom other cards optimized to listen GlobalFilter

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

screenshot

...
(new NovaGlobalFilter([
    // Filters
]))->inline(),
...

To enable Reset button

...
(new NovaGlobalFilter([
    // Filters
]))->resettable(),
...

To add multiple Global Filters

...
(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 Cards:

...
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 Cards:

...
  Nova.$emit("global-filter-request");
...

To request spesific filters state from Global Filter on any Custom Cards:

...
created() {
  Nova.$emit("global-filter-request", [
      "App\\Nova\\Filters\\DateFilter",
      "App\\Nova\\Filters\\CountryFilter"
  ]);
},
...

To receive filters state from Global Filter on any Custom Cards:

...
created() {
  Nova.$on("global-filter-response", filters => {
    // Do your thing with the filters
    console.log(filters);
  });
},
...

Good to know

  • Basic functionality of this package is that it listens all the asigned filters. Once a value of a filter is changed, it emits as Nova.$on('global-filter-changed', [changed filter and value]). So any card that listens to this event will recieve the filter and its value.
  • This package overwrites Nova's default Metric Cards to allow them to listen "global-filter-changed" event. Make sure there are no any conflicts with other pacages.
  • This package currently does not support Index view filters to be synchronized. So filters in 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.
  • If you are willing to support this package, it will be great to get your issues, PRs and thoughts on Github. And dont forget to Star the package.

Cheers

Made with ❤️ for open source

License

The MIT License (MIT). Please see License File for more information.

nova-global-filter's People

Contributors

ali-raza-saleem avatar chrisvasey avatar cord avatar davide-granello avatar muzafferdede avatar valentingaudin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.