@page "/tables/toolbar"
@inject ToastService ToastService

<h3>Table 表格</h3>

<h4>用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</h4>

<DemoBlock Title="带 Toolbar 的表格" Introduction="设置 <code>ShowToolbar</code> 显示工具条组件" Name="Toolbar">
    <Table TItem="Foo"
           IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
           IsMultipleSelect="true" ShowToolbar="true" ShowDefaultButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="带查询的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件" Name="QueryTabel">
    <p>本例中通过设置 <code>ShowCardView</code> 显示 <b>视图</b> 按钮，用于切换 <code>Table</code> 组件渲染方式</p>
    <Table TItem="Foo"
           IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
           ShowToolbar="true" ShowSearch="true" ShowCardView="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
           OnQueryAsync="@OnSearchQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义扩展按钮" Introduction="设置 <code>TableToolbarTemplate</code> 模板添加自定义扩展按钮" Name="CustomButton">
    <p>本例中实现经典的应用场景</p>
    <ul class="ul-demo mb-3">
        <li>点击下载按钮，后台开启下载线程进行数据处理，<code>禁用</code> 下载按钮</li>
        <li>前台显示进度条提示，正在打包导出，此期间可以处理其他事务</li>
        <li>数据处理完成后，关闭前台提示弹窗，<code>恢复</code> 下载按钮</li>
    </ul>
    <p>本例中通过设置 <code>TableToolbarButton</code> 按钮的 <code>IsAsync</code> 属性开启 <b>异步操作模式</b>，请注意 <code>OnClickCallback</code> 回调委托内需要使用真正的 <b>异步操作</b> 否则无效果</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowDefaultButtons="false" ShowSearch="false" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableToolbarTemplate>
            <TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa fa-fw fa-download" Text="下载1" IsAsync OnClickCallback="@DownloadAsync" />
            <TableToolbarButton TItem="Foo" Color="Color.Success" Icon="fa fa-fw fa-edit" Text="下载2" IsAsync OnClickCallback="@DownloadAsync" />
        </TableToolbarTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="自定义显示功能按钮" Introduction="通过设置 <code>ShowAddButton</code> <code>ShowEditButton</code> <code>ShowDeleteButton</code> 属性值来控制单独功能按钮是否显示，当 <code>ShowDefaultButtons</code> 设置为 <code>false</code> 时，所有按钮均不显示" Name="CustomDispalyButton">
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowExtendButtons="true"
           OnQueryAsync="@OnQueryAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </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;

namespace BootstrapBlazor.Shared.Samples.Table;

/// <summary>
/// 
/// </summary>
public sealed partial class TablesToolbar
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? Localizer { get; set; }

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

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

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

        Items = Foo.GenerateFoo(Localizer);
    }

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        // 设置记录总数
        var total = Items.Count;

        // 内存分页
        var 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
        });
    }

    private Task<QueryData<Foo>> OnSearchQueryAsync(QueryPageOptions options)
    {
        var items = Items.AsEnumerable();
        if (!string.IsNullOrEmpty(options.SearchText))
        {
            // 针对 SearchText 进行模糊查询
            items = items.Where(i => (i.Address ?? "").Contains(options.SearchText)
                    || (i.Name ?? "").Contains(options.SearchText));
        }

        // 设置记录总数
        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 = true,
            IsFiltered = true,
            IsSearch = true
        });
    }

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

    private async Task DownloadAsync(IEnumerable<Foo> items)
    {
        // 构造弹窗配置信息，进行弹窗操作
        var cate = ToastCategory.Information;
        var title = "自定义下载示例";
        var content = "请先选择数据，然后点击下载按钮";
        if (items.Any())
        {
            cate = ToastCategory.Success;
            content = $"开始打包选中的 {items.Count()} 条数据，完成后自动关闭本窗口";
        }

        var option = new ToastOption()
        {
            Category = cate,
            Title = title,
            Content = content,
        };

        // 弹出 Toast
        await ToastService.Show(option);

        // 如果已选择下载项进行打包下载操作
        if (items.Any())
        {
            // 禁止自动关闭
            option.IsAutoHide = false;

            // 开启后台进程进行数据处理
            // 传递 Option 过去是为了异步操作结束后可以关闭弹窗
            await MockDownLoadAsync();

            // 关闭 option 相关联的弹窗
            await option.Close();

            // 弹窗告知下载完毕
            await ToastService.Show(new ToastOption()
            {
                Category = ToastCategory.Success,
                Title = "自定义下载示例",
                Content = "数据下载完毕",
            });
        }
    }

    private static async Task MockDownLoadAsync()
    {
        // 此处模拟打包下载数据耗时 5 秒
        await Task.Delay(5000);
    }
}