ipridham / nova-global-filter

此包允许您将现有的 Laravel Nova 过滤器广播到指标或自定义卡片。

安装: 6

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 0

分支: 30

语言:Vue

dev-main 2023-09-04 14:39 UTC

This package is auto-updated.

Last update: 2024-09-04 16:40:05 UTC


README

此包允许您将现有的 Laravel Nova 过滤器发射到指标或自定义卡片。

screenshot

安装

您可以通过 composer 在使用 Nova 的 Laravel 应用程序中安装此包

composer require nemrutco/nova-global-filter

用法

在这个例子中,我们注册了一些带有日期过滤器的 metric cardsGlobal Filter

...
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
      ]),
    ];
  }
  ...
}

现在,任何优化以监听 GlobalFiltermetric cards 或其他卡片都可以通过使用 GlobalFilterable trait 和调用 $this->globalFiltered($model,$filters) 方法进行筛选。

globalFiltered($model, $filters = []) 方法期望 $model$filters 参数

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);

  }
...
}

就是这样。卡片将根据传递的筛选值进行筛选。

如果您想在对初始请求应用默认值,请确保在您的筛选器中设置了默认值

...
// set default date
public function default()
{
    return Carbon::now();
}
...

要更改布局从 gridinline

默认设置为 grid

screenshot

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

要启用 重置 按钮

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

要添加多个 Global Filter

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

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

要设置 全局筛选器标题

...
(new NovaGlobalFilter([
    // Filters
]))->title('Example Title'),
...

要监听任何 自定义卡片 上的 Global Filter

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

要在任何 自定义卡片 上请求所有筛选器状态

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

要在任何 自定义卡片 上请求特定筛选器状态

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

要在任何 自定义卡片 上接收筛选器状态

...
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]) 的形式发出。因此,任何监听此事件的卡片都将接收筛选器和其值。
  • 此包覆盖了 Nova 的默认 metric card 以允许它们监听 "global-filter-changed" 事件。请确保没有与其他包发生冲突。
  • 此包目前不支持同步索引视图筛选器。因此,全局筛选器中的筛选器不会触发索引视图的筛选菜单中的筛选器更新。
  • 重置 按钮只是重新加载当前页面。幕后并没有什么特别之处。
  • 如果您愿意支持此包,将非常欢迎您在 Github 上提出问题、PR 和意见。别忘了 Star 该包。

干杯

用 ❤️ 为开源制作

许可

MIT 许可证 (MIT)。有关更多信息,请参阅 许可文件