@page "/editorforms"

<h3>EditorForm</h3>

<h4>Edit forms are automatically rendered through the bound data model</h4>

<p><code>EditorForm</code> component is a very useful component that, when editing data, simply assigns the <code>Model</code> property.</p>

<ul class="ul-demo">
    <li>The binding model automatically generates all properties by default, and you can change to not automatically build by setting <code>AutoGenerateAllItem</code></li>
    <li>If you don't need to edit the columns, set the <code>Editable</code>, the default is <code>true</code> build editing components</li>
    <li>Complex edit columns, set up <code>EditTemplate</code> templates, and edit custom components</li>
    <li>The buttons in the form can be set up multiplely, just set the buttons <code>Buttons</code> template</li>
</ul>

<DemoBlock Title="Basic usage" Introduction="Basic usage" Name="Normal">
    <p>Directly bind the model <code>model</code>, setting the <b> Education </b> <b>complete </b> field not to appear</p>
    <GroupBox Title="An example of a form" style="margin-top: 1.5rem;">
        <EditorForm Model="@Model">
            <FieldItems>
                <EditorItem @bind-Field="@context.Education" Editable="false" />
                <EditorItem @bind-Field="@context.Complete" Editable="false" />
                <EditorItem @bind-Field="@context.Hobby">
                    <EditTemplate Context="value">
                        <div class="col-12">
                            <CheckboxList @bind-Value="@value.Hobby" Items="@Hobbys" />
                        </div>
                    </EditTemplate>
                </EditorItem>
            </FieldItems>
            <Buttons>
                <Button Icon="fa fa-save" Text="Submit" />
            </Buttons>
        </EditorForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="Turn on data validation" Introduction="Data compliance checks are implemented through nested <code>ValidateForm</code> components" Name="ValidateForm">
    <p>The component is built into the <code>ValidateForm</code> to turn on data compliance checks, and <b> hobby </b> fields use the <code>EditTemplate</code> template to customize the component to render the data</p>
    <p>Make the <code>birthday</code> field read-only by setting the <code>Readonly</code> property</p>
    <GroupBox Title="An example of a form" style="margin-top: 1.5rem;">
        <ValidateForm Model="@ValidateModel">
            <EditorForm Model="@ValidateModel">
                <FieldItems>
                    <EditorItem @bind-Field="@context.DateTime" Readonly="true" />
                    <EditorItem @bind-Field="@context.Hobby">
                        <EditTemplate Context="value">
                            <div class="col-12">
                                <CheckboxList @bind-Value="@value.Hobby" Items="@Hobbys" />
                            </div>
                        </EditTemplate>
                    </EditorItem>
                </FieldItems>
                <Buttons>
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text='Submit' />
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="It is not automatically generated by default" Introduction="By setting the property <code>AutoGenerateAllItem</code> value of <code>false</code> the property is prohibited from being automatically generated, and the display property is controlled by setting the <code>FieldItems</code> internal collection" Name="EditorForm">
    <GroupBox Title="An example of a form">
        <p>In this example, by setting <code>the autoGenerate AllItem</code> value to <code>false</code>, turning off auto-generation, and rendering the form editing by manually adding two <code>EditoItem</code> edits</p>
        <EditorForm Model="@Model" AutoGenerateAllItem="false">
            <FieldItems>
                <EditorItem @bind-Field="@context.Name" />
                <EditorItem @bind-Field="@context.Count" />
            </FieldItems>
        </EditorForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="The components within the form component bind fields that are not model-independent" Introduction="By setting the property <code>AutoGenerateAllItem</code> value of <code>false</code> the property is prohibited from being automatically generated, and the display property is controlled by setting the <code>FieldItems</code> internal collection" Name="SkipValidate">
    <GroupBox Title="An example of a form">
        <p>In some cases, the value of some columns in the form may be a secondary classification, etc., and you need to know the information for a level 1 classification, at which point the first-level classification requires additional components to render if <code>Select</code>, which is independent of the current context binding model <code>Model</code>, which requires that you set the <code>SkipValidate</code> value to <code>true</code>, turn off model validation for this component</p>
        <ValidateForm Model="Model">
            <EditorForm Model="Model" AutoGenerateAllItem="false">
                <FieldItems>
                    <EditorItem @bind-Field="@context.Name" />
                    <EditorItem @bind-Field="@context.Address" />
                    <EditorItem @bind-Field="@context.Count">
                        <EditTemplate Context="value">
                            <div class="col-12 col-sm-6">
                                <Select SkipValidate="true" @bind-Value="@value.Count" Items="@DummyItems" ShowSearch="true" />
                            </div>
                            <div class="col-12 col-sm-6">
                                <BootstrapInput Value="@value.Count" Readonly="true" />
                            </div>
                        </EditTemplate>
                    </EditorItem>
                    <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
                </FieldItems>
                <Buttons>
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="Submit" />
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="Set the number of controls displayed per row" Introduction="Control the layout by setting the property values <code></code>ItemsPerRow" Name="ItemsPerRow">
    <p>This example sets <code>ItemsPerRow=3</code> show 3 components per row</p>
    <GroupBox Title="An example layout" style="margin-top: 1.5rem;">
        <ValidateForm Model="@Model">
            <EditorForm TModel="Foo" ItemsPerRow="3">
                <FieldItems>
                    <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
                </FieldItems>
                <Buttons>
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="Submit" />
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="Custom rendering component types" Introduction="Control the rendering component type by setting the <code>CompnentType</code> property values" Name="Alignment">
    <ul class="ul-demo">
        <li><code>inline</code> layout mode aligns the labels in the form right by setting the</code> <code>LabelAlign''Alignment.Right'</li>
        <li><code>Buttons</code> template you can nest <code>div</code> and style <code>text-end</code> align the right side of the button</li>
    </ul>
    <ValidateForm Model="@Model">
        <EditorForm TModel="Foo" ItemsPerRow="2" RowType="RowType.Inline" LabelAlign="Alignment.Right">
            <FieldItems>
                <EditorItem @bind-Field="@context.Hobby" Items="@Hobbys" />
            </FieldItems>
            <Buttons>
                <div class="text-end">
                    <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="Submit" />
                </div>
            </Buttons>
        </EditorForm>
    </ValidateForm>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="EditorItem Attribute" Items="@GetEditorItemAttributes()" />

// 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.Common;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;

namespace BootstrapBlazor.Shared.Samples;

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

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

    [NotNull]
    private Foo? Model { get; set; }

    [NotNull]
    private Foo? ValidateModel { get; set; }

    [NotNull]
    private IEnumerable<SelectedItem>? Hobbys { get; set; }

    private List<SelectedItem> DummyItems { get; } = new List<SelectedItem>()
        {
            new SelectedItem("1", "1"),
            new SelectedItem("2", "2"),
            new SelectedItem("3", "3"),
            new SelectedItem("4", "4"),
            new SelectedItem("5", "5")
        };

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

        Hobbys = Foo.GenerateHobbys(FooLocalizer);
        Model = new Foo()
        {
            Name = Localizer["TestAddr"],
            Count = 23,
            Address = Localizer["TestAddr"],
            DateTime = new DateTime(1997, 12, 05),
            Education = EnumEducation.Middel
        };
        ValidateModel = new Foo()
        {
            Name = Localizer["TestName"],
            Count = 23,
            DateTime = new DateTime(1997, 12, 05),
            Education = EnumEducation.Middel
        };
    }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Model",
                Description = Localizer["Att1"],
                Type = "TModel",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FieldItems",
                Description = Localizer["Att2"],
                Type = "RenderFragment<TModel>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Buttons",
                Description = Localizer["Att3"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = nameof(EditorForm<Foo>.IsDisplay),
                Description = Localizer["IsDisplay"],
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowLabel",
                Description = Localizer["Att4"],
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "AutoGenerateAllItem",
                Description = Localizer["Att5"],
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "ItemsPerRow",
                Description = Localizer["Att6"],
                Type = "int?",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "RowType",
                Description = Localizer["Att7"],
                Type = "RowType",
                ValueList = "Row|Inline",
                DefaultValue = "Row"
            },
            new AttributeItem() {
                Name = "LabelAlign",
                Description = Localizer["Att8"],
                Type = "Alignment",
                ValueList = "None|Left|Center|Right",
                DefaultValue = "None"
            }
    };

    private IEnumerable<AttributeItem> GetEditorItemAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Field",
                Description = Localizer["Att9"],
                Type = "TValue",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "FieldType",
                Description = Localizer["Att10"],
                Type = "Type",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Editable",
                Description = Localizer["Att11"],
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "true"
            },
            new AttributeItem() {
                Name = "Readonly",
                Description = Localizer["Att12"],
                Type = "bool",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Text",
                Description = Localizer["Att13"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "EditTemplate",
                Description = Localizer["Att14"],
                Type = "RenderFragment<object>",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}