MudTable

2023-01-19 21:13:23 -07:00 · 2023-01-19 21:13:23 -07:00 · 3145c1b501
commit 3145c1b501
parent 8c2a6676b5
3 changed files with 149 additions and 44 deletions
--- a/ClientHub/Pages/AwaitingDisposition.razor
+++ b/ClientHub/Pages/AwaitingDisposition.razor
@ -12,15 +12,59 @@
    <table id="grid"></table>
 </div>

-<div class="row" style="margin-top: 10px; margin-bottom: 20px; min-height:480px;">
+<div class="row" style="margin-top: 10px; margin-bottom: 20px;">
    <div class="col-xs-1">
        <MudButton Variant="Variant.Filled" Color="Color.Info" id="OpenButton">Open</MudButton>
    </div>
    <div class="col-xs-1">
-        <MudButton Variant="Variant.Filled" Color="Color.Primary" id="RefreshButton">Refresh</MudButton>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" id="RefreshButton" OnClick=RefreshClick>Refresh</MudButton>
+    </div>
+    <div class="col-xs-1">
+        <MudButton Variant="Variant.Filled" Color="Color.Default" OnClick=LoadClickAsync>View</MudButton>
    </div>
 </div>

+@if (_Records == null)
+{
+    <MudProgressCircular Color="Color.Default" Indeterminate="true" />
+}
+else if (_Records.Any())
+{
+    <MudTable Items="_Records" FixedHeader="true" SortLabel="Sort By" Elevation="0" Dense="true" Hover="true" Bordered="true" Striped="true" Height="400px" Filter="new Func<Metrology.Shared.DataModels.AwaitingDisposition, bool>(FilterRecords)">
+        <ToolBarContent>
+            <MudTextField @bind-Value="@_ToolTypeFilter" Placeholder="Tool Type" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
+            <MudTextField @bind-Value="@_ToolFilter" Placeholder="Tool" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
+            <MudTextField @bind-Value="@_ReactorFilter" Placeholder="Reactor" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
+            <MudTextField @bind-Value="@_RdsFilter" Placeholder="RDS" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
+            <MudTextField @bind-Value="@_PSNFilter" Placeholder="PSN" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
+            <MudTextField @bind-Value="@_LayerFilter" Placeholder="Layer" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
+            <MudTextField @bind-Value="@_ZoneFilter" Placeholder="Zone" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
+        </ToolBarContent>
+        <HeaderContent>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.ToolType)">ToolType</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.Tool)">Tool</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.Reactor)">Reactor</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.RDS)">RDS</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.PSN)">PSN</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.Layer)">Layer</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.Zone)">Zone</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, object>(x=>x.InsertDate)">InsertDate</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, object>(x=>x.Expiration)">Expiration</MudTableSortLabel></MudTh>
+        </HeaderContent>
+        <RowTemplate>
+            <MudTd DataLabel="ToolType">@context.ToolType</MudTd>
+            <MudTd DataLabel="Tool">@context.Tool</MudTd>
+            <MudTd DataLabel="Reactor">@context.Reactor</MudTd>
+            <MudTd DataLabel="RDS">@context.RDS</MudTd>
+            <MudTd DataLabel="PSN">@context.PSN</MudTd>
+            <MudTd DataLabel="Layer">@context.Layer</MudTd>
+            <MudTd DataLabel="Zone">@context.Zone</MudTd>
+            <MudTd DataLabel="InsertDate">@context.InsertDate</MudTd>
+            <MudTd DataLabel="Expiration">@context.Expiration</MudTd>
+        </RowTemplate>
+    </MudTable>
+}
+
 <script suppress-error="BL9992">
    setInterval(function () { $("#RefreshButton").click(); }, 60000);
 </script>
--- a/ClientHub/Pages/AwaitingDisposition.razor.cs
+++ b/ClientHub/Pages/AwaitingDisposition.razor.cs
@ -1,5 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
+using OI.Metrology.ClientHub.Models;
+using OI.Metrology.Shared.Models.Stateless;

 namespace OI.Metrology.ClientHub.Pages;

@ -7,7 +9,20 @@ public partial class AwaitingDisposition
 {

    [Inject] protected IJSRuntime? JSRuntime { get; set; }
-    [Inject] protected Models.AppSettings? AppSettings { get; set; }
+    [Inject] protected HttpClient? HttpClient { get; set; }
+    [Inject] protected AppSettings? AppSettings { get; set; }
+    [Inject] protected ILogger<AwaitingDisposition>? Logger { get; set; }
+
+    private string? _ToolTypeFilter;
+    private string? _ToolFilter;
+    private string? _ReactorFilter;
+    private string? _RdsFilter;
+    private string? _PSNFilter;
+    private string? _LayerFilter;
+    private string? _ZoneFilter;
+    private readonly List<Metrology.Shared.DataModels.AwaitingDisposition> _Records;
+
+    public AwaitingDisposition() => _Records = new();

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
@ -22,4 +37,46 @@ public partial class AwaitingDisposition
        return Task.CompletedTask;
    }

+    private bool FilterRecords(Metrology.Shared.DataModels.AwaitingDisposition? record)
+    {
+        bool? result = _ToolTypeFilter is not null ? record?.ToolType?.Contains(_ToolTypeFilter, StringComparison.CurrentCultureIgnoreCase) : null;
+        if (result is null || result.Value)
+            result = _ToolFilter is not null ? record?.Tool?.Contains(_ToolFilter, StringComparison.CurrentCultureIgnoreCase) : null;
+        if (result is null || result.Value)
+            result = _ReactorFilter is not null ? record?.Reactor?.Contains(_ReactorFilter, StringComparison.CurrentCultureIgnoreCase) : null;
+        if (result is null || result.Value)
+            result = _RdsFilter is not null ? record?.RDS?.Contains(_RdsFilter, StringComparison.CurrentCultureIgnoreCase) : null;
+        if (result is null || result.Value)
+            result = _PSNFilter is not null ? record?.PSN?.Contains(_PSNFilter, StringComparison.CurrentCultureIgnoreCase) : null;
+        if (result is null || result.Value)
+            result = _LayerFilter is not null ? record?.Layer?.Contains(_LayerFilter, StringComparison.CurrentCultureIgnoreCase) : null;
+        if (result is null || result.Value)
+            result = _ZoneFilter is not null ? record?.Zone?.Contains(_ZoneFilter, StringComparison.CurrentCultureIgnoreCase) : null;
+        result ??= true;
+        return result.Value;
+    }
+
+    private void RefreshClick() => _Records.Clear();
+
+    private async Task LoadClickAsync()
+    {
+        if (Logger is null)
+            throw new NullReferenceException(nameof(Logger));
+        if (HttpClient is null)
+            throw new NullReferenceException(nameof(HttpClient));
+        _Records.Clear();
+        string controllerName = IAwaitingDispoController<object>.GetRouteName();
+        try
+        {
+            Metrology.Shared.DataModels.AwaitingDisposition[]? collection = await HttpClient.GetFromJsonAsync<Metrology.Shared.DataModels.AwaitingDisposition[]>($"api/{controllerName}");
+            if (collection is not null)
+                _Records.AddRange(collection);
+        }
+        catch (Exception)
+        {
+            string json = await HttpClient.GetStringAsync($"api/{controllerName}");
+            Logger.LogInformation(message: json);
+        }
+    }
+
 }
--- a/ClientHub/wwwroot/styles/Site.css
+++ b/ClientHub/wwwroot/styles/Site.css
@ -1,102 +1,106 @@
 body {
-    padding-top: 50px;
-    padding-bottom: 20px;
-    background-color: #FAFAFA;
+  padding-top: 50px;
+  padding-bottom: 20px;
+  background-color: #fafafa;
 }

 /* Set padding to keep content from hitting the edges */
 .body-content {
-    padding-left: 15px;
-    padding-right: 15px;
+  padding-left: 15px;
+  padding-right: 15px;
 }

 /* Set width on the form input elements since they're 100% wide by default */
 input,
 select,
 textarea {
-    max-width: 280px;
+  max-width: 280px;
 }

 div.modal-content-error {
-    background-color: #9e2525;
-    color: #ffffff;
+  background-color: #9e2525;
+  color: #ffffff;
 }

 div.modal-content-success {
-    background-color: #e5fbe5;
-    color: #000000;
+  background-color: #e5fbe5;
+  color: #000000;
 }

 div.modal-content-info {
-    background-color: #5bc0de;
-    color: #000000;
+  background-color: #5bc0de;
+  color: #000000;
 }

 div.modal-content-warning {
-    background-color: yellow;
-    color: #000000;
+  background-color: yellow;
+  color: #000000;
 }

 .changes-highlight {
-    background-color: yellow;
+  background-color: yellow;
 }

 .k-alt .changes-highlight {
-    background-color: #f0f050;
+  background-color: #f0f050;
 }

 .button-highlight {
-    background-color: yellow !important;
+  background-color: yellow !important;
 }

 .history-deleted {
-    background-color: #FFDDDD;
+  background-color: #ffdddd;
 }

 .k-alt.history-deleted {
-    background-color: #EECCCC !important;
+  background-color: #eecccc !important;
 }

 .error-highlight {
-    color: red;
-    font-weight: bold;
+  color: red;
+  font-weight: bold;
 }

 .checkbox-container {
-    max-height: 200px;
-    overflow: auto;
+  max-height: 200px;
+  overflow: auto;
 }

 .test-database {
-    background-color: red !important;
+  background-color: red !important;
 }

-    .test-database .navbar-brand,
-    .test-database .navbar-text,
-    .test-database .navbar-nav > li > a {
-        color: white;
-    }
+.test-database .navbar-brand,
+.test-database .navbar-text,
+.test-database .navbar-nav > li > a {
+  color: white;
+}

-        .test-database .navbar-nav > li > a:hover,
-        .test-database .navbar-nav > li > a:focus {
-            color: black !important;
-        }
+.test-database .navbar-nav > li > a:hover,
+.test-database .navbar-nav > li > a:focus {
+  color: black !important;
+}

 .test-database-text {
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 20px;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 20px;
 }

 .navbar {
-    border-bottom-color: black;
-    background-color: white;
+  border-bottom-color: black;
+  background-color: white;
 }

 .navbar-nav > li > a {
-    font-weight: bold;
+  font-weight: bold;
 }

 .icon-bar {
-    background-color: black;
-}
+  background-color: black;
+}
+
+.mud-table-cell {
+  font-size: 1.875rem;
+}