README

该包的目的是提供一种方式，将一些过滤器保留在会话中，以便在显示项目列表时使用。它还支持排序。

设置
基本用法
表单示例
排序
翻译
JavaScript
辅助工具

设置

运行 composer require pugx/filter-bundle。无需配置。

基本用法

在你的控制器中注入提供的服务，并使用表单。

你的表单应使用 GET 作为方法，使用一些在你的项目列表中有意义的字段，并且不要使用 CSRF 保护。

第一步是将过滤器以名称保存（如果表单已提交）。然后，你可以在 $filter->filter('foo') 中获取一个键/值数组，其中 "foo" 是你上面提供的名称。

使用此类数组检索过滤值取决于你：此包对你的领域没有假设，也不做魔法。

以下是一个示例

<?php

class FooController extends AbstractController
{
    public function itemList(Repository $repository, Filter $filter): Response
    {
        if ($filter->saveFilter(Form\FooFilterType::class, 'foo')) {
            return $this->redirectToRoute('foo_item_list');
        }
        // this is just an example: please implement your own method
        $foos = $repository->getList($filter->filter('foo'));

        return $this->render('foo/item_list.html.twig', [
            'form' => $filter->getFormView('foo'),
            'foos' => $foos,
        ]);
    }

}

{# this will display your form. Use '_pugx_filter_b4.html.twig' or '_pugx_filter_b5.html.twig' for Bootstrap 4 / 5 #} 
{{ include('_pugx_filter.html.twig' with {name: 'foo'}) }}

{% for foo in foos %}
    {# here you can display your list of filtered items, as long as you did your homework #}
{% endfor %}

表单示例

<?php

class FooFilterType extends AbstractType
{
   public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('name', Type\TextType::class, ['required' => false])
            ->add('email', Type\TextType::class, ['required' => false])
        ;
    }


    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'csrf_protection' => false,
            'method' => 'GET',
        ]);
    }
}

排序

你可以使用提供的 Twig 扩展来实现列排序功能。

模板示例

{# Use '_pugx_sort_b4.html.twig' or '_pugx_sort_b5.html.twig' for Bootstrap 4 / 5 #} 
{% from '_pugx_sort.html.twig' import sort -%}

{% block body %}
    {{ include('_pugx_filter.html.twig' with {name: 'foo'}) }}
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Name {{ sort('my_sorting_route', 'foo', 'name') }} </th>
            </tr>
        </thead>
        <tbody>
            {% for foo in foos %}
                {# same as above... #}
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

你需要提供一个路由/操作来执行排序，使用 $filter->sort('foo', $field, $direction)。

然后，你将在过滤器数组中找到额外的值，如下所示

$filters = [
    '_sort' => [
        'field' => 'name',
        'direction' => 'ASC',
    ]
];

你可以使用此值来执行排序（再次，这取决于你，并且取决于你的领域逻辑）。

翻译

翻译可用（目前仅限英语/法语/意大利语）。

如果你使用的是 Symfony 4.4+，翻译应自动发现。

在较旧版本的 Symfony 中，请将以下内容添加到你的配置中

# config/packages/translation.yaml
framework:
    translator:
        paths:
            - '%kernel.project_dir%/translations/'  # this line should be already present
            - '%kernel.project_dir%/vendor/pugx/filter-bundle/translations/' # add this line

JavaScript

提供了一个 jQuery 辅助工具，用于增强用户体验。你可以在你的 package.json 文件中通过以下行来使用它

{
    "dependencies": {
        "@pugx/filter-bundle": "file:vendor/pugx/filter-bundle/assets"
    }
}

然后你可以做如下操作

// assets/js/app.js
import '@pugx/filter-bundle/js/filter';

$(document).ready(function () {
    'use strict';

    if (jQuery().pugxFilter) {
        $('#filter').pugxFilter();
    }
});

基本结果是，切换按钮上的图标将被切换，并且当过滤器显示时，箭头将指向右边（当过滤器折叠时，箭头将指向底部）。

你可以向 pugxFilter 函数传递一个选项对象。

目前支持以下选项

callbackHide：当过滤器折叠时使用的回调
callbackShow：当过滤器显示时使用的回调

如果你更喜欢使用 Bootstrap 的原生 JavaScript，可以使用以下代码片段

import Collapse from "bootstrap/js/src/collapse";

let collapses = document.querySelectorAll("[data-bs-toggle='collapse']");
Array.from(collapses, (collapse) => {
    new Collapse(collapse);
    let filter = document.getElementById("filter");
    if (filter) {
        filter.addEventListener("hide.bs.collapse", () => {
            let icon = collapse.querySelector("button.filter svg, button.filter i");
            icon && icon.classList.remove("fa-angle-right");
            icon && icon.classList.add("fa-angle-down");
        });
        filter.addEventListener("show.bs.collapse", () => {
            let icon = collapse.querySelector("button.filter svg, button.filter i");
            icon && icon.classList.remove("fa-angle-down");
            icon && icon.classList.add("fa-angle-right");
        });
    }
});

辅助工具

以下辅助函数作为函数在 twig 模板中可用

filter_has：告诉是否启用了过滤器（例如，如果存在过滤器的会话）
filter_is：告诉是否选择了过滤器字段
filter_is_not：告诉是否未选择过滤器字段

pugx / filter-bundle

维护者

详细信息

README

设置

基本用法

表单示例

排序

翻译

JavaScript

辅助工具