phares3757/oi-metrology
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MudTable

Browse Source
This commit is contained in:
Mike Phares 2023-01-19 21:13:23 -07:00
parent 8c2a6676b5
commit 3145c1b501
3 changed files with 149 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ClientHub/Pages/AwaitingDisposition.razor
View File

@ -12,15 +12,59 @@
<table id="grid"></table> <table id="grid"></table>
</div> </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"> <div class="col-xs-1">
<MudButton Variant="Variant.Filled" Color="Color.Info" id="OpenButton">Open</MudButton> <MudButton Variant="Variant.Filled" Color="Color.Info" id="OpenButton">Open</MudButton>
</div> </div>
<div class="col-xs-1"> <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>
</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"> <script suppress-error="BL9992">
setInterval(function () { $("#RefreshButton").click(); }, 60000); setInterval(function () { $("#RefreshButton").click(); }, 60000);
</script> </script>

59
ClientHub/Pages/AwaitingDisposition.razor.cs
View File

@ -1,5 +1,7 @@
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop; using Microsoft.JSInterop;
using OI.Metrology.ClientHub.Models;
using OI.Metrology.Shared.Models.Stateless;
namespace OI.Metrology.ClientHub.Pages; namespace OI.Metrology.ClientHub.Pages;
@ -7,7 +9,20 @@ public partial class AwaitingDisposition
{ {
[Inject] protected IJSRuntime? JSRuntime { get; set; } [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) protected override Task OnAfterRenderAsync(bool firstRender)
{ {
@ -22,4 +37,46 @@ public partial class AwaitingDisposition
return Task.CompletedTask; 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);
}
}
} }

84
ClientHub/wwwroot/styles/Site.css
View File

@ -1,102 +1,106 @@
body { body {
padding-top: 50px; padding-top: 50px;
padding-bottom: 20px; padding-bottom: 20px;
background-color: #FAFAFA; background-color: #fafafa;
} }
/* Set padding to keep content from hitting the edges */ /* Set padding to keep content from hitting the edges */
.body-content { .body-content {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }
/* Set width on the form input elements since they're 100% wide by default */ /* Set width on the form input elements since they're 100% wide by default */
input, input,
select, select,
textarea { textarea {
max-width: 280px; max-width: 280px;
} }
div.modal-content-error { div.modal-content-error {
background-color: #9e2525; background-color: #9e2525;
color: #ffffff; color: #ffffff;
} }
div.modal-content-success { div.modal-content-success {
background-color: #e5fbe5; background-color: #e5fbe5;
color: #000000; color: #000000;
} }
div.modal-content-info { div.modal-content-info {
background-color: #5bc0de; background-color: #5bc0de;
color: #000000; color: #000000;
} }
div.modal-content-warning { div.modal-content-warning {
background-color: yellow; background-color: yellow;
color: #000000; color: #000000;
} }
.changes-highlight { .changes-highlight {
background-color: yellow; background-color: yellow;
} }
.k-alt .changes-highlight { .k-alt .changes-highlight {
background-color: #f0f050; background-color: #f0f050;
} }
.button-highlight { .button-highlight {
background-color: yellow !important; background-color: yellow !important;
} }
.history-deleted { .history-deleted {
background-color: #FFDDDD; background-color: #ffdddd;
} }
.k-alt.history-deleted { .k-alt.history-deleted {
background-color: #EECCCC !important; background-color: #eecccc !important;
} }
.error-highlight { .error-highlight {
color: red; color: red;
font-weight: bold; font-weight: bold;
} }
.checkbox-container { .checkbox-container {
max-height: 200px; max-height: 200px;
overflow: auto; overflow: auto;
} }
.test-database { .test-database {
background-color: red !important; background-color: red !important;
} }
.test-database .navbar-brand, .test-database .navbar-brand,
.test-database .navbar-text, .test-database .navbar-text,
.test-database .navbar-nav > li > a { .test-database .navbar-nav > li > a {
color: white; color: white;
} }
.test-database .navbar-nav > li > a:hover, .test-database .navbar-nav > li > a:hover,
.test-database .navbar-nav > li > a:focus { .test-database .navbar-nav > li > a:focus {
color: black !important; color: black !important;
} }
.test-database-text { .test-database-text {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
} }
.navbar { .navbar {
border-bottom-color: black; border-bottom-color: black;
background-color: white; background-color: white;
} }
.navbar-nav > li > a { .navbar-nav > li > a {
font-weight: bold; font-weight: bold;
} }
.icon-bar { .icon-bar {
background-color: black; background-color: black;
}
.mud-table-cell {
font-size: 1.875rem;
} }