feat: Use Blazor FluentUI components (BSData#38)

* refactor: Use Blazor FluentUI components

* fix: show shorter app version

src/Phalanx.App/App.razor

@@ -1,4 +1,4 @@
-<fast-design-system-provider accent-color="#0078D4" base-layer-luminance="0.15">
+<FluentDesignSystemProvider AccentBaseColor="#0078D4" BaseLayerLuminance="0.15f">
     <Router AppAssembly="@typeof(App).Assembly">
         <Found Context="routeData">
             <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
@@ -11,4 +11,4 @@
             </LayoutView>
         </NotFound>
     </Router>
-</fast-design-system-provider>
+</FluentDesignSystemProvider>

src/Phalanx.App/Pages/Home/WelcomeView.razor

@@ -16,6 +16,6 @@
     </li>
     <li>
         Visit our GitHub repository to see source code, raise issues and see planning at
-        <fast-anchor appearance="hypertext" href="https://github.com/BSData/phalanx">https://github.com/BSData/phalanx</fast-anchor>
+        <FluentAnchor Appearance="Appearance.Hypertext" Href="https://github.com/BSData/phalanx">https://github.com/BSData/phalanx</FluentAnchor>
     </li>
 </ul>

src/Phalanx.App/Pages/Index.razor

@@ -3,6 +3,6 @@
 <Phalanx.App.Pages.Home.WelcomeView></Phalanx.App.Pages.Home.WelcomeView>
 
 <div style="display: flex; justify-content: space-around;">
-    <fast-anchor appearance="accent" href="/rosteredit">Edit sample roster</fast-anchor>
-    <fast-anchor appearance="accent" href="/print">Format roster</fast-anchor>
+    <FluentAnchor Appearance="Appearance.Accent" Href="/rosteredit">Edit sample roster</FluentAnchor>
+    <FluentAnchor Appearance="Appearance.Accent" Href="/print">Format roster</FluentAnchor>
 </div>

src/Phalanx.App/Pages/Printing/RosterFormatEditor.razor

@@ -2,33 +2,29 @@
 
 <label>
     Name
-    <fast-text-field placeholder="name" current-value="@Format.Name" @onchange="OnTemplateNameChanged"
-        disabled="@Readonly">
-    </fast-text-field>
+    <FluentTextField Placeholder="name" @bind-Value="Name" Disabled="Readonly" />
 </label>
 <label>
     Output type
-    <fast-select current-value="@Format.OutputFormat" @onchange="OnTemplateOutputFormatChanged" disabled="@Readonly">
+    <FluentSelect @bind-Value="OutputFormat" Disabled="Readonly">
         @foreach (var item in Enum.GetValues<OutputFormat>())
         {
-            <fast-option value="@item">@item</fast-option>
+            <FluentOption Value="@item">@item</FluentOption>
         }
-    </fast-select>
+    </FluentSelect>
 </label>
 <label>
     Format method
-    <fast-select current-value="@Format.Method" @onchange="OnTemplateFormatMethodChanged" disabled="@Readonly">
+    <FluentSelect @bind-Value="Method" Disabled="Readonly">
         @foreach (var item in Enum.GetValues<FormatMethod>())
         {
-            <fast-option value="@item">@item</fast-option>
+            <FluentOption Value="@item">@item</FluentOption>
         }
-    </fast-select>
+    </FluentSelect>
 </label>
-<fast-text-area value="@Format.Template" current-value="@Format.Template" @onchange="OnTemplateContentChanged"
-    resize="vertical" rows="50" disabled="@Readonly">
-</fast-text-area>
+<FluentTextArea @bind-Value="Template" Resize="Resize.Vertical" rows="50" Disabled="Readonly" />
 
-@code {
+    @code {
     [Parameter]
     public RosterFormat Format { get; set; } = new();
 
@@ -38,27 +34,27 @@
     [Parameter]
     public bool Readonly { get; set; }
 
-    Task OnTemplateNameChanged(ChangeEventArgs e)
+    string? Name
     {
-        return FormatChanged.InvokeAsync(Format with { Name = e.Value?.ToString() });
+        get => Format.Name;
+        set => FormatChanged.InvokeAsync(Format with { Name = value });
     }
 
-    Task OnTemplateOutputFormatChanged(ChangeEventArgs e)
+    OutputFormat OutputFormat
     {
-        return Enum.TryParse<OutputFormat>(e.Value?.ToString(), out var result)
-        ? FormatChanged.InvokeAsync(Format with { OutputFormat = result })
-        : Task.CompletedTask;
+        get => Format.OutputFormat;
+        set => FormatChanged.InvokeAsync(Format with { OutputFormat = value });
     }
 
-    Task OnTemplateFormatMethodChanged(ChangeEventArgs e)
+    FormatMethod Method
     {
-        return Enum.TryParse<FormatMethod>(e.Value?.ToString(), out var result)
-        ? FormatChanged.InvokeAsync(Format with { Method = result })
-        : Task.CompletedTask;
+        get => Format.Method;
+        set => FormatChanged.InvokeAsync(Format with { Method = value });
     }
 
-    Task OnTemplateContentChanged(ChangeEventArgs e)
+    string? Template
     {
-        return FormatChanged.InvokeAsync(Format with { Template = e.Value?.ToString() });
+        get => Format.Template;
+        set => FormatChanged.InvokeAsync(Format with { Template = value });
     }
 }

src/Phalanx.App/Pages/RosterCreate.razor

@@ -3,33 +3,30 @@
 
 <h1>Create Roster</h1>
 
-<fast-card>
+<FluentCard class="pcard">
     <EditForm Model="Model">
         <fieldset>
             <legend>New roster</legend>
 
             <label>
                 Name
-                <fast-text-field placeholder="Roster name" current-value="@Model.Name"
-                    @onchange="(e => Model.Name = e.Value?.ToString())">
-
-                </fast-text-field>
+                <FluentTextField Placeholder="Roster name" @bind-Value="@Model.Name" />
             </label>
             <label>
                 Game system
-                <fast-select current-value="@Model.GamesystemIndex" @onchange="OnGamesystemChange">
+                <FluentSelect @bind-Value="@Model.GamesystemIndex">
                     @foreach (var (item, idx) in Gamesystems.Select((item, idx) => (item, idx)))
                     {
-                        <fast-option value="@idx">@item.Name</fast-option>
+                        <FluentOption Value="@idx">@item.Name</FluentOption>
                     }
-                </fast-select>
+                </FluentSelect>
             </label>
-            <fast-button appearance="accent">Create</fast-button>
+            <FluentButton Appearance="Appearance.Accent">Create</FluentButton>
         </fieldset>
     </EditForm>
-</fast-card>
+</FluentCard>
 
-@code {
+    @code {
 
     public class NewRosterModel
     {
@@ -42,9 +39,4 @@
     private List<GamesystemNode> Gamesystems { get; } = new();
 
     public NewRosterModel Model { get; } = new();
-
-    void OnGamesystemChange(ChangeEventArgs e)
-    {
-        Model.GamesystemIndex = int.TryParse(e.Value?.ToString(), out var idx) ? idx : null;
-    }
 }

src/Phalanx.App/Pages/RosterEdit.razor

@@ -8,44 +8,44 @@
     <TitlePart>@Roster.Name</TitlePart>
 
     <h2>@Roster.Name</h2>
-    @foreach (var cost in Roster.Costs)
-    {
-        if (Roster.CostLimits.FirstOrDefault(x => x.TypeId == cost.TypeId) is { } limit)
+    <p>
+        @foreach (var cost in Roster.Costs)
         {
-            <span>@cost.Value / @limit.Value @cost.Name</span>
+            if (Roster.CostLimits.FirstOrDefault(x => x.TypeId == cost.TypeId) is { } limit)
+            {
+                <span>@cost.Value / @limit.Value @cost.Name</span>
+            }
+            else
+            {
+                <span>@cost.Value @cost.Name</span>
+            }
+            if (cost != Roster.Costs[^1])
+            {
+                <span>, </span>
+            }
         }
-        else
+    </p>
+    <FluentTreeView>
+        @foreach (var force in Roster.Forces)
         {
-            <span style="color:white">@cost.Value @cost.Name</span>
+            <FluentTreeItem Expanded="true">
+                <span>@force.Name</span>
+                @foreach (var category in force.Categories)
+                {
+                    <FluentTreeItem Expanded="true">
+                        <span>@category.Name</span>
+                        @foreach (var selection in force.Selections.Where(sel => sel.Categories.Any(x => x.Primary && x.EntryId ==
+                       category.EntryId)))
+                        {
+                            <FluentTreeItem Expanded="true">
+                                <span>@selection.Name</span>
+                            </FluentTreeItem>
+                        }
+                    </FluentTreeItem>
+                }
+            </FluentTreeItem>
         }
-    }
-    <br />
-    <fast-accordion>
-        <fast-accordion-item>
-            <span slot="heading">HQ</span>
-            <fast-listbox id="hqList" style="min-width:100%">
-                @* @foreach (var unit in roster?.Units?.Where(x => x.OrgSlotId == 1))
-                    {
-                    <div class="row">
-                    <div class="col-11">
-                    <fast-option style="display: block" @onclick="ListItemClick">@unit?.Name @unit?.PointsPerModel</fast-option>
-                    </div>
-                    <div class="col-1">
-                    <fast-button href="#" appearance="accent" style="float:right" @onclick="ButtonClick"><i class="fas fa-trash"></i></fast-button>
-                    </div>
-                    </div>
-                    }*@
-            </fast-listbox>
-        </fast-accordion-item>
-        <fast-accordion-item>
-            <span slot="heading">Troops</span>
-            Panel two content
-        </fast-accordion-item>
-        <fast-accordion-item>
-            <span slot="heading">Elites</span>
-
-        </fast-accordion-item>
-    </fast-accordion>
+    </FluentTreeView>
 }
 
 @code {

src/Phalanx.App/Pages/RosterPrinter.razor

@@ -11,7 +11,7 @@
 <h1>Format roster</h1>
 
 <div class="card-container">
-    <fast-card>
+    <FluentCard class="pcard">
         <form>
             <fieldset>
                 <legend>Roster file</legend>
@@ -38,33 +38,32 @@
                 <legend>Formatter</legend>
                 <label>
                     Select preset
-                    <fast-select current-value="@SelectedFormatIndex" @onchange="OnFormatIndexSelected">
+                    <FluentSelect @bind-Value="@SelectedFormatIndex">
                         @foreach (var (format, index) in formatter.Formats.Select((x, i) => (x, i)))
-                        {
-                            <fast-option value="@index">@format.Name</fast-option>
-                        }
-                    </fast-select>
-                </label>
-                <fast-checkbox current-checked="@isCustomFormat.ToString()"
-                    @onchange="e => isCustomFormat = !isCustomFormat">
-                    Edit
-                </fast-checkbox>
-                @if (selectedFormat is not null)
+                            {
+                                <FluentOption Value="@index">@format.Name</FluentOption>
+                            }
+                        </FluentSelect>
+                    </label>
+                    <FluentCheckbox @bind-Value="isCustomFormat">
+                        Edit
+                    </FluentCheckbox>
+                    @if (selectedFormat is not null)
                 {
-                    <RosterFormatEditor @bind-Format=selectedFormat Readonly="!isCustomFormat"></RosterFormatEditor>
+                    <RosterFormatEditor @bind-Format=selectedFormat Readonly="!isCustomFormat" />
                 }
             </fieldset>
         </form>
-    </fast-card>
+    </FluentCard>
 
-    <fast-card>
+    <FluentCard class="pcard">
         <h3>Formatted output</h3>
         @if (selectedFormat is not null && RosterNode is not null)
         {
             var formattedOutput = RosterFormatter.Format(RosterNode, selectedFormat);
-            <fast-tabs class="output-tabs">
-                <fast-tab>Preview</fast-tab>
-                <fast-tab-panel slot="tabpanel">
+            <FluentTabs class="output-tabs">
+                <FluentTab>Preview</FluentTab>
+                <FluentTabPanel slot="tabpanel">
                     @if (selectedFormat?.OutputFormat == OutputFormat.Html)
                     {
                         <iframe srcdoc="@formattedOutput" class="html-renderer">
@@ -74,14 +73,14 @@
                     {
                         <pre>@formattedOutput</pre>
                     }
-                </fast-tab-panel>
-                <fast-tab>Raw text</fast-tab>
-                <fast-tab-panel slot="tabpanel">
+                </FluentTabPanel>
+                <FluentTab>Raw text</FluentTab>
+                <FluentTabPanel slot="tabpanel">
                     <pre>@formattedOutput</pre>
-                </fast-tab-panel>
-            </fast-tabs>
+                </FluentTabPanel>
+            </FluentTabs>
         }
-    </fast-card>
+    </FluentCard>
 </div>
 
 @code {

src/Phalanx.App/Pages/RosterPrinter.razor.css

@@ -2,11 +2,11 @@
     flex: auto;
 }
 
-.output-tabs fast-tab-panel {
+.output-tabs fluent-tab-panel {
     height: 100%;
 }
 
-.output-tabs fast-tab-panel>* {
+.output-tabs fluent-tab-panel>* {
     height: 100%;
     width: 100%;
 }

src/Phalanx.App/Phalanx.App.csproj

@@ -9,7 +9,9 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.1" PrivateAssets="all" />
     <PackageReference Include="Microsoft.Extensions.Options" Version="6.0.0" />
+    <PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="1.2.1" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
+    <PackageReference Include="NuGet.Versioning" Version="6.1.0" />
     <PackageReference Include="PublishSPAforGitHubPages.Build" Version="1.3.6" />
   </ItemGroup>
 

src/Phalanx.App/Shared/MainLayout.razor

@@ -1,6 +1,7 @@
 @inherits LayoutComponentBase
 
 @using System.Reflection
+@using NuGet.Versioning
 
 <div class="page">
     <main>
@@ -17,7 +18,29 @@
 </div>
 
 @code {
-    static string AppVersion =
-        typeof(Program).Assembly.GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.InformationalVersion
-            ?? "(n/a)";
+    static string AppVersion = GetShortAppVersion();
+
+    private static string GetShortAppVersion()
+    {
+        if (GetFromAttribute() is { } version)
+        {
+            return version.HasMetadata ? version.ToNormalizedString() + "+" + version.Metadata.Substring(0, Math.Min(version.Metadata.Length, 6)) : version.ToFullString();
+        }
+        return "(n/a)";
+
+        static SemanticVersion? GetFromAttribute()
+        {
+            try
+            {
+                var raw = typeof(Program).Assembly
+                .GetCustomAttribute<AssemblyInformationalVersionAttribute>()
+                ?.InformationalVersion;
+                return raw is null ? null : SemanticVersion.TryParse(raw, out var parsed) ? parsed : null;
+            }
+            catch (System.Exception)
+            {
+                return null;
+            }
+        }
+    }
 }