From 991b0de353de15f4381662177c26729d4e9e81ba Mon Sep 17 00:00:00 2001 From: Peace Date: Sat, 6 Jul 2024 02:13:24 +0900 Subject: [PATCH] form & input overview --- .../Components/Layout/NavMenu.razor | 4 + .../Components/Pages/FormInputOverView.razor | 110 ++++++++++++++++++ .../Components/Pages/LayoutStack.razor | 2 + BlazorFluentUI/Components/_Imports.razor | 2 + BlazorFluentUI/Models/Country.cs | 11 ++ BlazorFluentUI/Models/Starship.cs | 35 ++++++ BlazorFluentUI/Program.cs | 3 + BlazorFluentUI/Services/CountryService.cs | 74 ++++++++++++ 8 files changed, 241 insertions(+) create mode 100644 BlazorFluentUI/Components/Pages/FormInputOverView.razor create mode 100644 BlazorFluentUI/Models/Country.cs create mode 100644 BlazorFluentUI/Models/Starship.cs create mode 100644 BlazorFluentUI/Services/CountryService.cs diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor index ecb5197..631dad4 100644 --- a/BlazorFluentUI/Components/Layout/NavMenu.razor +++ b/BlazorFluentUI/Components/Layout/NavMenu.razor @@ -21,6 +21,10 @@ Splitter Stack + + Overview + + diff --git a/BlazorFluentUI/Components/Pages/FormInputOverView.razor b/BlazorFluentUI/Components/Pages/FormInputOverView.razor new file mode 100644 index 0000000..8b5da90 --- /dev/null +++ b/BlazorFluentUI/Components/Pages/FormInputOverView.razor @@ -0,0 +1,110 @@ +@page "/forminputoverview" + +@inject CountryService countryService; + +@rendermode RenderMode.InteractiveServer + +Basic Fluent UI Form + + + This is an example of the Fluent UI. + The FluentValidationSummary and FluentValidationMessage give feedback on the state of the form. + Is uses Starship model form Standard Documentation. + + + Starfleet Starship Database +

+ This form uses the Fluent UI input components. + It uses a DataAnnotationsValidator, a FluentValidationSummary and FluentValidationMessages.; +

+ + New Ship Entry Form + + + + + + +
+ + +
+
+ + +
+
+ + +
+
+ + Select classification... + Exploration + Commerce + Diplomacy + Defense + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ Submit + + + + + +@code { + [SupplyParameterFromForm] + Starship starship { get; set; } = new Starship(); + + string message = ""; + + protected override void OnInitialized() + { + starship.ProductionDate = DateTime.Now; + } + + private async Task OnSearchCountryAsync(OptionsSearchEventArgs 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) + { + + } +} diff --git a/BlazorFluentUI/Components/Pages/LayoutStack.razor b/BlazorFluentUI/Components/Pages/LayoutStack.razor index 6636d2e..6ab89b1 100644 --- a/BlazorFluentUI/Components/Pages/LayoutStack.razor +++ b/BlazorFluentUI/Components/Pages/LayoutStack.razor @@ -12,7 +12,9 @@ Characteristics 1. Orientation: The child components are controlled via the Horizontal(default) or Vertical. +
2. Alignment: The child components are controlled via the HorizontalAlignment and VerticalAlignment. +
3. Spacing: The child components are controlled via the HorizontalGap and VerticalGap. diff --git a/BlazorFluentUI/Components/_Imports.razor b/BlazorFluentUI/Components/_Imports.razor index 759c981..4eb366f 100644 --- a/BlazorFluentUI/Components/_Imports.razor +++ b/BlazorFluentUI/Components/_Imports.razor @@ -9,4 +9,6 @@ @using Microsoft.JSInterop @using BlazorFluentUI @using BlazorFluentUI.Components +@using BlazorFluentUI.Models +@using BlazorFluentUI.Services diff --git a/BlazorFluentUI/Models/Country.cs b/BlazorFluentUI/Models/Country.cs new file mode 100644 index 0000000..41be865 --- /dev/null +++ b/BlazorFluentUI/Models/Country.cs @@ -0,0 +1,11 @@ +namespace BlazorFluentUI.Models +{ + public class Country + { + public int Id { get; set; } + + public string Name { get; set; } + + public string Code { get; set; } + } +} diff --git a/BlazorFluentUI/Models/Starship.cs b/BlazorFluentUI/Models/Starship.cs new file mode 100644 index 0000000..f804ed1 --- /dev/null +++ b/BlazorFluentUI/Models/Starship.cs @@ -0,0 +1,35 @@ +using System.ComponentModel.DataAnnotations; +using System.Diagnostics.CodeAnalysis; + +namespace BlazorFluentUI.Models +{ + [RequiresUnreferencedCode("Necessary because of RangeAttribute usage")] + public class Starship + { + [Required] + [MinLength(3, ErrorMessage = "Identifier is too short")] + [StringLength(16, ErrorMessage = "Identifier is too long (16 character limit)")] + public string? Identifier { get; set; } + + public string? Description { get; set; } + + [Required(ErrorMessage = "Countries are required")] + public IEnumerable Countries { get; set; } + + [Required(ErrorMessage = "A classification is required")] + public string? Classification { get; set; } + + [Required] + [Range(1, 100000, ErrorMessage = "Accomodation invalid (1-100000)")] + public int MaximumAccomodation { get; set; } + + [Required] + [Range(typeof(bool), "true", "true", ErrorMessage = "This form disallows unapproved ships")] + public bool IsValidatedDesign { get; set; } + + [Required] + public DateTime? ProductionDate { get; set; } + + public bool HasTeleporter { get; set; } + } +} diff --git a/BlazorFluentUI/Program.cs b/BlazorFluentUI/Program.cs index c4f4a23..4b6e627 100644 --- a/BlazorFluentUI/Program.cs +++ b/BlazorFluentUI/Program.cs @@ -1,5 +1,6 @@ using Microsoft.FluentUI.AspNetCore.Components; using BlazorFluentUI.Components; +using BlazorFluentUI.Services; var builder = WebApplication.CreateBuilder(args); @@ -14,6 +15,8 @@ builder.Services.AddRazorComponents(options => }); builder.Services.AddFluentUIComponents(); +builder.Services.AddSingleton(); + var app = builder.Build(); // Configure the HTTP request pipeline. diff --git a/BlazorFluentUI/Services/CountryService.cs b/BlazorFluentUI/Services/CountryService.cs new file mode 100644 index 0000000..18c7d95 --- /dev/null +++ b/BlazorFluentUI/Services/CountryService.cs @@ -0,0 +1,74 @@ +using BlazorFluentUI.Models; + +namespace BlazorFluentUI.Services +{ + public class CountryService + { + private readonly List _countries = new List(); + private readonly SemaphoreSlim _semaphore = new SemaphoreSlim(1, 1); + private readonly Random _random = new Random(); + private readonly string[] _countryNames = { "Korea", "USA", "Canada", "Mexico", "Brazil", "UK", "Germany", "France", "Italy", "China", "Japan", "India", "Australia", "Russia", "Spain", "South Africa", "New Zealand", "Argentina", "Egypt", "Thailand", "Sweden", "Norway", "Denmark", "Finland", "Netherlands", "Belgium" }; + + public CountryService() + { + var randomCountryNames = _countryNames.OrderBy(x => Guid.NewGuid()).ToArray(); + + for (int i = 0; i < randomCountryNames.Length; i++) + { + var country = new Country + { + Id = i + 1, + Name = randomCountryNames[i], + }; + _countries.Add(country); + } + } + + public async Task GetCountryAsync(int id) + { + await _semaphore.WaitAsync(); + try + { + return _countries.FirstOrDefault(c => c.Id == id); + } + finally + { + _semaphore.Release(); + } + } + + public async Task> GetAllCountriesAsync() + { + await _semaphore.WaitAsync(); + try + { + return _countries.ToList(); + } + finally + { + _semaphore.Release(); + } + } + + //public async Task GenerateRandomCountriesAsync(int count) + //{ + // await _semaphore.WaitAsync(); + // try + // { + // for (int i = 0; i < count; i++) + // { + // var country = new Country + // { + // Id = _countries.Any() ? _countries.Max(c => c.Id) + 1 : 1, + // Name = _countryNames[_random.Next(_countryNames.Length)], + // }; + // _countries.Add(country); + // } + // } + // finally + // { + // _semaphore.Release(); + // } + //} + } +}