@page "/tables/dialog"

<h3>Table 表格在弹窗内使用</h3>

<h4>用于带层级关系的数据选择中</h4>

<Block Title="弹窗中数据联动" Introduction="点击工具栏中的选择按钮弹出对话框选择候选数据">
    <p>本例中展示如果通过 <code>Modal</code> 组件与 <code>Table</code> 进行联动，通过弹窗中选择数据，然后再进行编辑</p>
    <ul class="ul-demo">
        <li>点击 <code>选择</code> 按钮弹出对话框选择产品 <code>Product</code></li>
        <li>弹窗中选择产品后点击 <code>确定</code> 按钮关闭弹窗</li>
        <li>点击 <code>编辑</code> 按钮，由于设置部分数据为只读，只能更改 <code>Count</code> 字段</li>
    </ul>
    <Table TItem="Foo" @ref="ProductTable"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowDefaultButtons="true" ShowAddButton="false" IsMultipleSelect="true" ShowExtendButtons="true"
           OnQueryAsync="@OnQueryEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableToolbarTemplate>
            <TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa fa-fw fa-edit" Text="选择" OnClickCallback="@ShowDialog" />
        </TableToolbarTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Readonly="true" />
            <TableColumn @bind-Field="@context.Name" Readonly="true" />
            <TableColumn @bind-Field="@context.Count" Width="80" />
        </TableColumns>
    </Table>
</Block>

<Modal @ref="Modal">
    <ModalDialog Title="选择项目" IsCentered="true">
        <BodyTemplate>
            <Table TItem="Foo" IsStriped="true" @bind-SelectedRows="@SelectedRows" ClickToSelect="true"
                   ShowToolbar="true" ShowDefaultButtons="false" IsMultipleSelect="true"
                   OnQueryAsync="@OnQueryProductAsync" HeaderStyle="TableHeaderStyle.Light">
                <TableColumns>
                    <TableColumn @bind-Field="@context.DateTime" />
                    <TableColumn @bind-Field="@context.Name" />
                    <TableColumn @bind-Field="@context.Count" />
                </TableColumns>
            </Table>
        </BodyTemplate>
        <FooterTemplate>
            <Button Text="确定" Icon="fa fa-check-square-o" OnClick="@OnConfirm" />
        </FooterTemplate>
    </ModalDialog>
</Modal>

// 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;
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 TablesDialog
    {
        private static readonly Random random = new Random();

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

        [NotNull]
        private Modal? Modal { get; set; }

        [NotNull]
        private Table<Foo>? ProductTable { get; set; }

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

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

        private bool _confirm;

        private IEnumerable<Foo> SelectedRows { get; set; } = Enumerable.Empty<Foo>();

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

            Products = new List<Foo>();

            ProductSelectItems = Enumerable.Range(1, 5).Select(i => new Foo()
            {
                Id = i,
                Name = Localizer["Foo.Name", $"{i:d4}"],
                DateTime = DateTime.Now.AddDays(i - 1),
                Address = Localizer["Foo.Address", $"{random.Next(1000, 2000)}"],
                Count = random.Next(1, 100),
                Complete = random.Next(1, 100) > 50,
                Education = EnumEducation.Primary,
                Hobby = new string[] { "1" }
            }).ToList();
        }

        private async Task ShowDialog(IEnumerable<Foo> items)
        {
            await Modal.Toggle();
        }

        private async Task OnConfirm()
        {
            _confirm = true;
            await Modal.Toggle();
            await ProductTable.QueryAsync();
        }

        private Task<bool> OnSaveAsync(Foo item)
        {
            var oldItem = Products.FirstOrDefault(i => i.Id == item.Id);
            if (oldItem != null)
            {
                oldItem.Count = item.Count;
            }
            return Task.FromResult(true);
        }

        private Task<bool> OnDeleteAsync(IEnumerable<Foo> items)
        {
            Products.RemoveAll(p => items.Contains(p));
            return Task.FromResult(true);
        }

        private Task<QueryData<Foo>> OnQueryEditAsync(QueryPageOptions options)
        {
            var items = Products;
            if (_confirm)
            {
                items.Clear();
                items.AddRange(SelectedRows);
            }
            _confirm = false;

            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,
                IsFiltered = true,
                IsSearch = true,
                IsSorted = true
            });
        }

        private Task<QueryData<Foo>> OnQueryProductAsync(QueryPageOptions options)
        {
            var items = ProductSelectItems;

            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,
            });
        }
    }
}