From 6ad70f15edc4890b152b301f019f471ac19f685e Mon Sep 17 00:00:00 2001
From: blfuentes <epiphonetodie@gmail.com>
Date: Sun, 2 Jun 2024 12:30:29 +0200
Subject: [PATCH] Mudblazor components for TuningComponent (#29)

* working on: fixing unit testing generator component

* working on generator unit testing

* fixed unit testig for components

* fixes for generator unit testing

* removed 'id' from Generator component, working on replacement of form elements for TuningComponent

* replaced html tags with mudblazor components for tuning component

---------

Co-authored-by: blfuentes <blfuentes@mundo-r.com>
---
 .../Components/Pages/Generator.razor          |  3 +-
 .../Parts/DisplayChartComponent.razor         | 10 +---
 .../Components/Parts/TuningComponent.razor    | 57 +++++++++----------
 3 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/src/GuitarStringTensionCalculator/Components/Pages/Generator.razor b/src/GuitarStringTensionCalculator/Components/Pages/Generator.razor
index f2ea551..eb15ffe 100644
--- a/src/GuitarStringTensionCalculator/Components/Pages/Generator.razor
+++ b/src/GuitarStringTensionCalculator/Components/Pages/Generator.razor
@@ -47,7 +47,6 @@ else
     <MudChip Color="Color.Tertiary">@(selectedTuning?.Name ?? "Select tuning")</MudChip>
 </div>
 
-<label for="_tuningDisplay" class="col-2 font-weight-bold">Editor: </label>
 @if (string.IsNullOrWhiteSpace(numberOfStrings) || string.IsNullOrWhiteSpace(scaleLength) || string.IsNullOrWhiteSpace(semitones))
 {
     <p><em>Please select &lt;number of strings&gt;, &lt;scale&gt; and &lt;tuning&gt;</em></p>
@@ -55,7 +54,7 @@ else
 else
 {
     <div class="col-10">
-        <TuningComponent id="component-tuning" NumberOfStrings="@_numOfStrings" ScaleLength="@_scaleLength" Tuning="@selectedTuning" />
+        <TuningComponent NumberOfStrings="@_numOfStrings" ScaleLength="@_scaleLength" Tuning="@selectedTuning" />
     </div>
 }
 
diff --git a/src/GuitarStringTensionCalculator/Components/Parts/DisplayChartComponent.razor b/src/GuitarStringTensionCalculator/Components/Parts/DisplayChartComponent.razor
index bd9c54e..8e5328b 100644
--- a/src/GuitarStringTensionCalculator/Components/Parts/DisplayChartComponent.razor
+++ b/src/GuitarStringTensionCalculator/Components/Parts/DisplayChartComponent.razor
@@ -3,15 +3,7 @@
 @rendermode InteractiveServer
 
 <div>
-    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@XAxisLabels" Width="100%" Height="350px" ChartOptions="@Options" />
-    <MudGrid>
-        <MudItem xs="6">
-            <MudText Typo="Typo.body1" Class="py-3">Selected: @(Index < 0 ? "None" : Series[Index].Name)</MudText>
-        </MudItem>
-        <MudItem xs="6">
-            <MudSlider @bind-Value="Options.LineStrokeWidth" Min="1" Max="10" Color="Color.Info">Line Width: @Options.LineStrokeWidth.ToString()</MudSlider>
-        </MudItem>
-    </MudGrid>
+    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@XAxisLabels" Width="800px" Height="350px" ChartOptions="@Options" />
 </div>
 
 @code {
diff --git a/src/GuitarStringTensionCalculator/Components/Parts/TuningComponent.razor b/src/GuitarStringTensionCalculator/Components/Parts/TuningComponent.razor
index 99dfb3a..b18e1b7 100644
--- a/src/GuitarStringTensionCalculator/Components/Parts/TuningComponent.razor
+++ b/src/GuitarStringTensionCalculator/Components/Parts/TuningComponent.razor
@@ -1,5 +1,6 @@
 @using System.Reflection;
 @using System.ComponentModel;
+@using Calculator.DLL
 @using Calculator = Calculator.DLL
 @using System.Threading.Tasks
 
@@ -15,47 +16,45 @@
     {
         <div class="row">
             <div class="col-2"><span style="font-weight:bold;">Note</span></div>
-            <div class="col-3"><span style="font-weight:bold;">Scale ("/mm)</span></div>
+            <div class="col-2"><span style="font-weight:bold;">Scale ("/mm)</span></div>
             <div class="col-2"><span style="font-weight:bold" class="bi bi-slash-circle">Type</span></div>
-            <div class="col-1"><span style="font-weight:bold;">Tension</span></div>
+            <div class="col-2"><span style="font-weight:bold;">Tension</span></div>
         </div>
+
         foreach (var gString in StringSet.StringCollection)
         {
             <div class="row">
                 <div class="col-2">
-                    <select id="_stringnoteselector" class="form-select" value="@gString.Note.FullName" @onchange="args => SelectNote(gString.Position, args)">
+                    <MudSelect id="_stringnoteselector" T="string" Value="@gString.Note.FullName" Text="@gString.Note.FullName"
+                               ValueChanged="@(note=>SelectNote(gString.Position, note))">
                         @foreach (var note in Notes)
                         {
-                            <option value=@note.FullName>@note.FullName</option>
+                            <MudSelectItem Value="@(note.FullName)">@note.FullName</MudSelectItem>
                         }
-                    </select>
+                    </MudSelect>
                 </div>
-                <div class="col-3">
-                    <div class="row">
-                        <div class="col">
-                            <input style="width:60px;" id="_stringlengthinch" value="@gString.Length_INCH"
-                                @onchange="args => SetStringLength(gString.Position, true, args)" />
-                        </div>
-                        <div class="col">
-                            <input style="width:60px;" id="_stringlengthmm" value="@Math.Round(@gString.Length_MM, 0)"
-                                @onchange="args => SetStringLength(gString.Position, false, args)" />
-                        </div>
-                    </div>
+                <div class="col-2">
+                    <MudNumericField T="double" id="_stringlengthinch" Value="@gString.Length_INCH" Label="@($"{Math.Round(@gString.Length_MM, 0)}mm")"
+                                     ValueChanged="@(scaleLength => SetStringLength(gString.Position, scaleLength))" />
                 </div>
                 <div class="col-2">
-                    <select id="_prefixdiameterselector" class="form-select" value="@gString.UW.FullName" 
-                        @onchange="args => SelectPrefixDiameter(gString.Position, args)">
+                    <MudSelect id="_prefixdiameterselector" T="string" Value="@gString.UW.FullName" Text="@gString.UW.FullName"
+                               ValueChanged="@(diameter => SelectPrefixDiameter(gString.Position, diameter))">
                         @foreach (var pd in PrefixDiameters)
                         {
-                            <option value=@pd>@pd</option>
+                            <MudSelectItem Value="@(pd)">@pd</MudSelectItem>
                         }
-                    </select>
+                    </MudSelect>
+                </div>
+                <div class="col-2">
+                    <MudField id="_stringtensiondisplay" Label="@gString.TensionDisplay" />
                 </div>
-                <div class="col-1"><label for="@gString.TensionDisplay">@gString.TensionDisplay</label></div>
             </div>
         }
 
-        <DisplayChartComponent StringSet="@StringSet"/>
+        <div class="row">
+            <DisplayChartComponent StringSet="@StringSet" />
+        </div>
     }
 </div>
 
@@ -114,28 +113,28 @@
 
         return await obTask;
     }
-    async Task SelectNote(int position, ChangeEventArgs e)
+
+    async Task SelectNote(int position, string noteValue)
     {
-        Calculator.MusicalNote newNote = new Calculator.MusicalNote(e.Value?.ToString());
+        Calculator.MusicalNote newNote = new Calculator.MusicalNote(noteValue);
         var oldString = StringSet.StringCollection.First(_n => _n.Position == position);
         oldString.Note = newNote;
         await StringSetChanged.InvokeAsync(StringSet);
     }
 
-    async Task SelectPrefixDiameter(int position, ChangeEventArgs e)
+    async Task SelectPrefixDiameter(int position, string value)
     {
         var oldString = StringSet.StringCollection.First(_n => _n.Position == position);
-        var newUW = Calculator.UnitWeightRepo.Repository.FirstOrDefault(_s => _s.FullName == e.Value?.ToString());
+        var newUW = Calculator.UnitWeightRepo.Repository.FirstOrDefault(_s => _s.FullName == value);
         oldString.UW = newUW;
         oldString.Diameter = newUW.StringDiameter_INCH;
         await StringSetChanged.InvokeAsync(StringSet);
     }
 
-    async Task SetStringLength(int position, bool isInches, ChangeEventArgs e)
+    async Task SetStringLength(int position, double value)
     {
         var oldString = StringSet.StringCollection.First(_n => _n.Position == position);
-        var newLength = isInches ? double.Parse(e.Value?.ToString()) : Math.Round(double.Parse(e.Value?.ToString()) / 25.4, 1);
-        oldString.Length_INCH = newLength;
+        oldString.Length_INCH = value;
         await StringSetChanged.InvokeAsync(StringSet);
     }