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

<h3>Table 表格</h3>

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

<Block Title="带 Toolbar 的表格" Introduction="设置 <code>ShowToolbar</code> 显示工具条组件">
    <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>
</Block>

<Block Title="带查询的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件">
	<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>
</Block>

<Block Title="自定义扩展按钮" Introduction="设置 <code>TableToolbarTemplate</code> 模板添加自定义扩展按钮">
    <p>本例中实现经典的应用场景</p>
    <ul class="ul-demo">
        <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>
</Block>

<Block Title="自定义显示功能按钮" Introduction="通过设置 <code>ShowAddButton</code> <code>ShowEditButton</code> <code>ShowDeleteButton</code> 属性值来控制单独功能按钮是否显示，当 <code>ShowDefaultButtons</code> 设置为 <code>false</code> 时，所有按钮均不显示">
    <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>
</Block>

// 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 BootstrapBlazor.Shared.Pages.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.Pages.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 async Task MockDownLoadAsync()
        {
            // 此处模拟打包下载数据耗时 5 秒
            await Task.Delay(5000);
        }
    }
}