Let's start with each page, we want to make sure the Index.razor page have link to each of the pages hosting each database.
<div class="card">
<img src="/images/MetricExternalPNG.PNG" alt="Metric External Thread" class="card-img-top">
<div class="card-body">
<h3>Metric External Thread Info Per ISO</h3>
<button class="btn btn-info btn-outline-success col-12" @onclick="()=>OpenMetricExternalPage()">Details</button>
</div>
</div>
This is a card component to the Metric External ISO page.
For each of the Metric External info set, we also use card to display:
<div class="card mt-3 border-5">
<table>
<thead>
<tr>
<th scope="col">Thread Designition</th>
<th scope="col">Thread Class</th>
<th scope="col">Major Diameter</th>
<th scope="col">Pitch Diameter</th>
<th scope="col">Minor Diameter</th>
<th scope="col"><button type="button" class=" btn btn-outline-dark btn-secondary" @onclick ="()=>OpenDrafterDetails(me)">Drafter Details</button></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">@me.CustomThreadDesignition</th>
<th scope="col">@me.Classification</th>
<th scope="col">@me.MajorDiaMin - @me.MajorDiaMax</th>
<th scope="col">@me.PitchDiaMin - @me.PitchDiaMax</th>
<th scope="col">@me.MinorDiaMin - @me.MinorDiaMax</th>
<th scope="col"><button type="button" class="btn btn-outline-info btn-primary" @onclick = "()=>OpenInspectorDetails(me)">Inspector Details</button></th>
</tr>
</tbody>
</table>
</div>
Each card contains a table to display the most used data, and we also have a search bar for more convenient search functionality:
<div class="row">
<input type="text" placeholder = "Type Designition To Search" aria-label = "Search Box" class="col-lg-8" @oninput="((txt)=>OnSearchInput((string)txt.Value))"/>
</div>
private async Task FilterMetricExternals()
{
var output = await metricExternalData.GetAllMetricExternalsAsync();
if (string.IsNullOrWhiteSpace(searchText)==false)
{
output = output.Where(me => me.CustomThreadDesignition.Contains(searchText, StringComparison.InvariantCultureIgnoreCase))
.OrderBy(me => me.InternalId)
.ToList();
}
metricExternals = output;
await SaveFilterState();
}
private async Task OnSearchInput(string searchInput)
{
searchText = searchInput;
await FilterMetricExternals();
}
Top comments (0)