BlazorFluentUIPractice/BlazorFluentUI/Components/Pages/FormInputOverView.razor

@page "/forminputoverview"

@inject CountryService countryService;

@rendermode RenderMode.InteractiveServer

<FluentLabel Typo="Typography.H3">Basic Fluent UI Form</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
    This is an example of the Fluent UI.
    The <code>FluentValidationSummary</code> and <code>FluentValidationMessage</code> give feedback on the state of the form.
    Is uses <code>Starship</code> model form <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/input-components?view=aspnetcore-8.0#example-form">Standard Documentation</a>.
</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto">
    <FluentLabel Class="mt2" Typo="Typography.H4">Starfleet Starship Database</FluentLabel>
    <p>
        This form uses the Fluent UI input components.
        It uses a <code>DataAnnotationsValidator</code>, a <code>FluentValidationSummary</code> and <code>FluentValidationMessage</code>s.;
    </p>
    
    <FluentLabel Class="mt-4" Typo="Typography.H4">New Ship Entry Form</FluentLabel>
    
    <EditForm class="mt-2" Model="@starship" OnValidSubmit="@HandleValidSubmit" FormName="starship_fluent_entry">
        <DataAnnotationsValidator/>
        <FluentValidationSummary/>

        <FluentStack Orientation="Orientation.Vertical">
            <div>
                <FluentTextField Name="identifier" @bind-Value="@starship.Identifier" Label="Identifier" Required/>
                <FluentValidationMessage For="@(() => starship.Identifier)"/>
            </div>
            <div>
                <FluentTextField Name="description" @bind-Value="@starship.Description" Label="Description (optional)" />
                <FluentValidationMessage For="@(() => starship.Description)" />
            </div>
            <div>
                <FluentAutocomplete TOption="Country"
                                    Name="countries"
                                    AutoComplete="on"
                                    
                                    Label="Select countries"
                                    Width="250px"
                                    Placeholder="Select countries"
                                    OnOptionsSearch="@OnSearchCountryAsync"
                                    MaximumSelectedOptions="3"
                                    OptionText="@(item => item.Name)"
                                    Multiple="true"
                                    @bind-SelectedOptions="@starship.Countries" />
                <FluentValidationMessage For="@(() => starship.Countries)"/>
            </div>
            <div>
                <FluentSelect TOption="string" Name="class" Id="classification" @bind-Value="@starship.Classification" Label="Primary classification" Required>
                    <FluentOption Value="">Select classification...</FluentOption>
                    <FluentOption Value="Exploration">Exploration</FluentOption>
                    <FluentOption Value="Commerce">Commerce</FluentOption>
                    <FluentOption Value="Diplomacy">Diplomacy</FluentOption>
                    <FluentOption Value="Defense">Defense</FluentOption>
                </FluentSelect>
                <FluentValidationMessage For="@(() => starship.Classification)"/>
            </div>
            <div>
                <FluentNumberField Name="accomodation" @bind-Value="@starship.MaximumAccomodation" Label="Maximum accomodation" Required/>
                <FluentValidationMessage For="@(() => starship.MaximumAccomodation)"/>
            </div>
            <div>
                <FluentCheckbox Name="approved" @bind-Value="starship.IsValidatedDesign" Required Label="Engineering approval" />
                <FluentValidationMessage For="@(() => starship.IsValidatedDesign)" />
            </div>
            <div>
                <FluentDatePicker Name="production_date" Id="proddate" @bind-Value="starship.ProductionDate" Label="Production Date" Required />
                <FluentValidationMessage For="@(() => starship.ProductionDate)" />
            </div>
            <div>
                <FluentSwitch Name="teleporter" @bind-value="starship.HasTeleporter" Label="Teleporter" CheckedMessage="Fully operational" UncheckedMessage="Under maintenance" />
                <FluentValidationMessage For="@(() => starship.HasTeleporter)" />
            </div>
            <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">Submit</FluentButton>
        </FluentStack>
    </EditForm>
    <FluentLabel Class="mt-3" Color="Color.Info"/>
</FluentCard>

@code {
    [SupplyParameterFromForm]
    Starship starship { get; set; } = new Starship();

    string message = "";

    protected override void OnInitialized()
    {
        starship.ProductionDate = DateTime.Now;
    }

    private async Task OnSearchCountryAsync(OptionsSearchEventArgs<Country> e)
    {
        var allCountry = await countryService.GetAllCountriesAsync();
        e.Items = allCountry.Where(c => c.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                            .OrderBy(c => c.Name);
    }

    private void HandleValidSubmit()
    {
        message = $"Message: HandleValidSubmit called.";
    }

    private void OnSubmit(Starship e)
    {
        
    }
}