@page "/tables/filter"

<h3>筛选和排序功能</h3>

<h4>筛选可快速查找到自己想看的数据；排序可快速查找或对比数据。</h4>

<ul class="ul-demo mt-3">
    <li>对某一列数据进行筛选，通过指定列的 <code>Filterable</code> 属性来指定需要筛选的列</li>
    <li>对某一列数据进行排序，通过指定列的 <code>Sortable</code> 属性来指定需要排序的列，通过多次点击更改排序规则</li>
</ul>

<DemoBlock Title="可筛选数据的表格" Introduction="设置 <code>TableColumn</code> 列的 <code>Filterable</code> 属性，控制列头是否开启数据筛选功能" Name="Filterable">
    <p>
        <code>Filterable</code> 目前支持两种应用方式：
    </p>
    <ul class="ul-demo">
        <li>查询方法参数中的 <code>Filters</code> 是筛选条件，数据库查询数据时可以通过此属性自行进行数据筛选</li>
        <li>无感使用，正常查询数据，对筛选不进行任何处理，组件内部将根据 <code>Filter</code> 进行内部处理</li>
        <li>外部已经进行了筛选时请设置 <code>QueryData<TItem></code> 参数的 <code>IsFiltered</code> 属性值为 <code>true</code></li>
        <li>各列可分别设置筛选条件，各列之间筛选条件为 <code>And</code> 并且的关系</li>
    </ul>
    <div>
        本示例分别为 <code>DateTime、string、bool、enum、int</code> 类型，弹出筛选框也分别不同
    </div>
    <Alert ShowBar="true" Color="Color.Info" class="mt-3">开启筛选功能仅需要设置 <code>TableColumn</code> 的 <code>Filterable</code> 值为 <code>true</code>，无需额外任何代码</Alert>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义筛选模板" Introduction="设置 <code>FilterTemplate</code> 模板值，自定义列筛选模板，非常适用于复杂类型的筛选弹窗" Name="FilterTemplate">
    <p>
        <code>FilterTemplate</code> 类型为 <code>RenderFragment</code>：
        <span>其值为自定义组件，组件必须继承</span> <code>FilterBase</code> 本例中最后一列 <b>数量列</b> 通过筛选模板使用自定义组件 <code>CustomerFilter</code>
        <a href="https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Pages/Samples/Table/CustomerFilter.razor" target="_blank">[传送门] CustomerFilter 组件源码</a>
    </p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true">
                <Template Context="value">
                    <Checkbox Value="@value.Value" IsDisabled="true"></Checkbox>
                </Template>
            </TableColumn>
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true">
                <FilterTemplate>
                    <CustomerFilter></CustomerFilter>
                </FilterTemplate>
            </TableColumn>
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="显示过滤表头" Introduction="设置 <code>ShowFilterHeader</code> 属性值为 <code>true</code> 时显示过滤表头" Name="ShowFilterHeader">
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true" ShowFilterHeader="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Education" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="默认排序功能" Introduction="设置 <code>DefaultSort</code> 属性值为 <code>true</code> 时作为默认排序列" Name="DefaultSort">
    <ul class="ul-demo">
        <li>设置 <code>DefaultSort=true</code> 开启默认排序功能，当多列设置此属性时，第一列起作用</li>
        <li>设置 <code>DefaultSortOrder</code> 值，设置默认排序规则</li>
    </ul>
    <p>本例中默认排序为最后一列倒序排序</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" DefaultSort="true" DefaultSortOrder="@SortOrder.Desc" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="多列排序" Introduction="设置 <code>SortList</code> 属性，表格加载时使用此参数进行多列排序" Name="SortList">
    <p>本例中默认排序规则为：<code>DeteTime desc</code> <code>Address</code>，无需自己处理排序逻辑，组件内部已经内置</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true" SortList="SortList"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="动态多列排序" Introduction="设置 <code>OnSort</code> 参数" Name="OnSort">
    <p>点击列头进行排序时，组件内部查询前调用此回调，可以在此处根据条件设置 <code>SortList</code> 参数，即可实现动态多列排序功能，本例中点击时间列头进行正序排序时，内部使用 <code>DateTime, Count</code> 倒序时使用 <code>DateTime desc, Count desc</code></p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowSkeleton="true" SortList="SortList" OnSort="OnSort"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// 过滤示例代码
/// </summary>
public partial class TablesFilter
{
    private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

    [NotNull]
    private List<Foo>? Items { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? Localizer { get; set; }

    private List<string> SortList { get; } = new List<string> { "DateTime desc", "Address" };

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(Localizer);
    }

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        IEnumerable<Foo> items = Items;

        // 过滤
        var isFiltered = false;
        if (options.Filters.Any())
        {
            items = items.Where(options.Filters.GetFilterFunc<Foo>());
            isFiltered = true;
        }

        // 排序
        var isSorted = false;
        if (options.SortName == nameof(Foo.DateTime) && options.SortList != null)
        {
            var sortInvoker = Utility.GetSortListFunc<Foo>();
            items = sortInvoker(items, options.SortList);
            isSorted = true;
        }
        else if (!string.IsNullOrEmpty(options.SortName))
        {
            // 外部未进行排序，内部自动进行排序处理
            var invoker = Utility.GetSortFunc<Foo>();
            items = invoker(items, options.SortName, options.SortOrder);
            isSorted = true;
        }

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<Foo>()
        {
            Items = items,
            TotalCount = total,
            IsSorted = isSorted,
            IsFiltered = isFiltered
        });
    }

    private void OnSort(string sortName, SortOrder sortOrder)
    {
        if (sortName == nameof(Foo.DateTime))
        {
            if (sortOrder == SortOrder.Asc)
            {
                SortList.Clear();
                SortList.Add(nameof(Foo.DateTime));
                SortList.Add(nameof(Foo.Count));
            }
            else if (sortOrder == SortOrder.Desc)
            {
                SortList.Clear();
                SortList.Add($"{nameof(Foo.DateTime)} desc");
                SortList.Add($"{nameof(Foo.Count)} desc");
            }
            else
            {
                SortList.Clear();
                SortList.Add($"{nameof(Foo.DateTime)} desc");
                SortList.Add(nameof(Foo.Count));
            }
        }
    }
}