@page "/tables/search"

<h3>Table 表格</h3>

<h4>常用于单表维护，通过属性配置实现简单的增、删、改、查、排序、过滤、搜索等常用功能，通过 <code>Template</code> 的高级用法能实现非常复杂的业务需求功能</h4>

<Tips>
    <p><code>Table</code> 组件的搜索功能提供两种模式，可通过 <code>SearchMode</code> 进行设置，默认为 <code>Popup</code> 即弹窗模式，<b>Top</b> 模式下搜索栏会内置到表格上方，此模式下 <b>刷新</b> 按钮与 <b>搜索</b> 按钮二合一，可以通过设置 <code>ShowSearchButton=false</code> 关闭搜索按钮</p>
</Tips>

<DemoBlock Title="具有搜索功能的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件，通过设置 <code>SearchTemplate</code> 模板自定义搜索 UI" Name="SearchTable">
    <ul class="ul-demo">
        <li>通过设置 <code>ShowEmpty="true"</code> 开启无数据显示功能</li>
        <li><code>EmptyText</code> 参数用于设置无数据时显示文字，默认取资源文件中的内置文字</li>
        <li><code>EmptyTemplate</code> 参数用于自定义无数据显示模板</li>
    </ul>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowSearch="true" IsMultipleSelect="true" ShowExtendButtons="true"
           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
           SearchModel="@SearchModel" ShowEmpty="true" SearchMode="SearchMode.Top"
           OnQueryAsync="@OnSearchModelQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Education" />
        </TableColumns>
        <SearchTemplate>
            <GroupBox Title="搜索条件">
                <div class="row g-3 form-inline">
                    <div class="col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Name" placeholder="请输入姓名，50字以内" maxlength="50" ShowLabel="true" DisplayText="@Localizer[nameof(context.Name)]" />
                    </div>
                    <div class="col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Address" placeholder="请输入地址，500字以内" maxlength="500" ShowLabel="true" DisplayText="@Localizer[nameof(context.Address)]" />
                    </div>
                </div>
            </GroupBox>
        </SearchTemplate>
    </Table>
</DemoBlock>

<DemoBlock Title="自动生成搜索功能的表格" Introduction="当设置了 <code>ShowSearch</code> 时，如果未设置 <code>SearchTemplate</code> 编辑模板时，组件会尝试自动生成搜索条件 UI" Name="AutoGenerateSearch">
    <p>列信息绑定时通过设置 <code>Searchable</code> 属性，设置搜索条件自动构建 UI</p>
    <Tips>
        <p>自动构建搜索弹窗时，由于各列设置 <code>Searchable</code> 此时组件会通过 <code>SearchText</code> 与设置 <code>Searchable</code> 值为 <code>true</code> 的各列自动构建搜索拉姆达表达式，通过 <code>QueryPageOptions</code> 的属性 <code>Searchs</code> 获得</p>

    </Tips>
    <Pre>if (options.Searchs.Any())
{
    // 逻辑关系使用 FilterLogic.Or
    items = items.Where(options.Searchs.GetFilterFunc<Foo>(FilterLogic.Or));
}</Pre>
    <GroupBox Title="搜索功能体验区" class="mb-2">
        <div class="row g-3 form-inline">
            <div class="col-12 col-sm-3">
                <Switch DisplayText="搜索模式" ShowLabel="true" @bind-Value="SearchModeFlag" />
            </div>
            <div class="col-12 col-sm-3">
                <Switch DisplayText="模糊搜索" ShowLabel="true" @bind-Value="ShowSearchText" />
            </div>
            <div class="col-12 col-sm-3">
                <Switch DisplayText="显示重置" ShowLabel="true" @bind-Value="ShowResetButton" />
            </div>
            <div class="col-12 col-sm-3">
                <Switch DisplayText="显示搜索" ShowLabel="true" @bind-Value="ShowSearchButton" IsDisabled="SearchModeFlag" />
            </div>
        </div>
    </GroupBox>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true"
           SearchMode="SearchModeValue" ShowResetButton="ShowResetButton" ShowSearchButton="ShowSearchButton"
           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true" ShowSearchText="ShowSearchText"
           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" />
            <TableColumn @bind-Field="@context.Name" Searchable="true" />
            <TableColumn @bind-Field="@context.Address" Searchable="true" />
            <TableColumn @bind-Field="@context.Education" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义列搜索模板" Introduction="当设置了 <code>SearchTemplate</code> 时，组件自动生成搜索 UI 时使用此模板作为呈现 UI" Name="CutomColSearch">
    <p>通过设置姓名列的 <code>SearchTemplate</code> 自定义编辑时使用下拉框来选择姓名</p>
    <p>由于是搜索条件，本例中姓名搜索列下拉框增加了 请选择... 项</p>
    <p>生成列搜索模板是查找顺序为 SearchTemplate -> AutoGenerate 优先查找是否设置了搜索模板，然后根据绑定字段类型自动生成</p>
    <p>通过设置 <code>ShowSearch="true"</code> <code>ShowSearchText="false"</code> 设置搜索栏仅显示 <b>高级搜索</b></p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" SearchModel="@SearchModel" ShowSearch="true" ShowSearchText="false"
           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" />
            <TableColumn @bind-Field="@context.Name" Searchable="true">
                <SearchTemplate Context="model">
                    @{
                        var items = new List<SelectedItem>()
                    {
                    new SelectedItem { Text = "请选择 ...", Value = "" },
                    new SelectedItem { Text = "姓名1", Value = "姓名1" },
                    new SelectedItem { Text = "姓名2", Value = "姓名2" },
                    };
                        <div class="col-12 col-sm-6">
                            <Select Items="items" @bind-Value="@model!.Name" ShowLabel="true" DisplayText="姓名" />
                        </div>
                    }
                </SearchTemplate>
            </TableColumn>
            <TableColumn @bind-Field="@context.Address" Searchable="true" />
            <TableColumn @bind-Field="@context.Education" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义搜索模型" Introduction="设置了 <code>CustomerSearchModel</code> 与 <code>CustomerSearchTemplate</code>，完全自主控制搜索条件 UI" Name="CustomerSearchModel">
    <p>由于某种应用场景我们的表格实体类 <code>TItem</code> 来充当搜索模型时并不理想，比如我们有一个属性是 <code>int</code> 或者 <code>enum</code> 时，我们作为搜索条件时需要有一个 <b>全部</b> 或者 <b>请选择 ...</b> 的空白条件项。此时使用默认模型时非常难用，就可以使用自定义搜索模型 <code>CustomerModel</code> 与 <code>CustomerSearchTemplate</code> 来自定义控制搜索界面</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource" SearchMode="SearchMode.Top"
           IsStriped="true" IsBordered="true" CustomerSearchModel="@CustomerSearchModel" ShowSearch="true" ShowSearchText="true"
           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Searchable="true" />
            <TableColumn @bind-Field="@context.Address" Searchable="true" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Education" />
        </TableColumns>
        <CustomerSearchTemplate>
            @if (context is FooSearchModel model)
            {
                <FooSearch @bind-Value="@model" />
            }
        </CustomerSearchTemplate>
    </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;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// Table 组件搜索示例代码
/// </summary>
public sealed partial class TablesSearch
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? Localizer { get; set; }

    private Foo SearchModel { get; set; } = new Foo();

    private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

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

    private bool SearchModeFlag
    {
        get
        {
            return SearchModeValue == SearchMode.Popup;
        }
        set
        {
            SearchModeValue = value ? SearchMode.Popup : SearchMode.Top;
        }
    }

    private bool ShowResetButton { get; set; } = true;

    private bool ShowSearchButton { get; set; } = true;

    private bool ShowSearchText { get; set; }

    private SearchMode SearchModeValue { get; set; }

    [NotNull]
    private ITableSearchModel CustomerSearchModel { get; set; } = new FooSearchModel();

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

        Items = Foo.GenerateFoo(Localizer);
    }

    private static Task<Foo> OnAddAsync() => Task.FromResult(new Foo() { DateTime = DateTime.Now });

    private Task<bool> OnSaveAsync(Foo item, ItemChangedType changedType)
    {
        // 增加数据演示代码
        if (changedType == ItemChangedType.Add)
        {
            item.Id = Items.Max(i => i.Id) + 1;
            Items.Add(item);
        }
        else
        {
            var oldItem = Items.FirstOrDefault(i => i.Id == item.Id);
            if (oldItem != null)
            {
                oldItem.Name = item.Name;
                oldItem.Address = item.Address;
                oldItem.DateTime = item.DateTime;
                oldItem.Count = item.Count;
                oldItem.Complete = item.Complete;
                oldItem.Education = item.Education;
            }
        }
        return Task.FromResult(true);
    }

    private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
    {
        items.ToList().ForEach(i => Items.Remove(i));
        return Task.FromResult(true);
    }

    private static Task OnResetSearchAsync(Foo item)
    {
        item.Name = "";
        item.Address = "";
        return Task.CompletedTask;
    }

    private Task<QueryData<Foo>> OnSearchModelQueryAsync(QueryPageOptions options)
    {
        // 自定义了 SearchModel
        IEnumerable<Foo> items = Items;

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

        if (!string.IsNullOrEmpty(SearchModel.Name))
        {
            items = items.Where(i => i.Name == SearchModel.Name);
        }

        if (!string.IsNullOrEmpty(SearchModel.Address))
        {
            items = items.Where(i => i.Address == SearchModel.Address);
        }

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

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


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

        var isAdvanceSearch = false;
        // 处理高级搜索
        if (options.AdvanceSearchs.Any())
        {
            items = items.Where(options.AdvanceSearchs.GetFilterFunc<Foo>());
            isAdvanceSearch = true;
        }

        // 处理 自定义 高级搜索 CustomerSearchModel 过滤条件
        if (options.CustomerSearchs.Any())
        {
            items = items.Where(options.CustomerSearchs.GetFilterFunc<Foo>());
            isAdvanceSearch = true;
        }

        // 处理 Searchable=true 列与 SeachText 模糊搜索
        if (options.Searchs.Any())
        {
            items = items.Where(options.Searchs.GetFilterFunc<Foo>(FilterLogic.Or));
        }

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

        // 排序
        var isSorted = false;
        if (!string.IsNullOrEmpty(options.SortName))
        {
            var invoker = Foo.GetNameSortFunc();
            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,
            IsSearch = options.CustomerSearchs.Any(),
            IsAdvanceSearch = isAdvanceSearch
        });
    }
}