Completata gestione filtro show/hide charts

This commit is contained in:
Samuele Locatelli
2021-05-24 09:47:51 +02:00
parent 567a0e3375
commit e57755af2f
4 changed files with 92 additions and 49 deletions
+65 -46
View File
@@ -2,63 +2,82 @@
@using MP.Stats.Data
<EditForm Model="@SelFilter">
<div class="row">
<div class="col">
<div class="d-flex justify-content-between">
<div class="p-2">
<div class="form-group mb-0">
<label for="dtInizio" class="small">inizio:</label>
<InputDateTime id="dtInizio" class="form-control form-control-sm" @bind-Value="@DateStart"></InputDateTime>
</div>
</div>
<div class="col">
<div class="form-group mb-0">
<label for="dtFine" class="small">fine:</label>
<InputDateTime id="dtFine" class="form-control form-control-sm" @bind-Value="@DateEnd"></InputDateTime>
</div>
</div>
<div class="col">
<div class="form-group mb-0">
<label for="idxMacc" class="small">macchina:</label>
<InputSelect @bind-Value="@IdxMacchina" id="maccSel" class="form-control form-control-sm" title="idxMacc">
@foreach (var item in ddlMacchine)
<label for="btnReset" class="small">chart</label><br />
<Button id="btnReset" class="btn btn-info btn-sm" Clicked="toggleChart">
@if (chartVisible)
{
<option value="@item.ValueField">@item.LabelField</option>
<span class="oi oi-chevron-top"></span>
}
</InputSelect>
else
{
<span class="oi oi-chevron-bottom"></span>
}
</Button>
</div>
</div>
<div class="col">
<div class="form-group mb-0">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<label class="input-group-text">commessa:</label>
<div class="p-2">
<div class="row">
<div class="col">
<div class="form-group mb-0">
<label for="dtInizio" class="small">inizio:</label>
<InputDateTime id="dtInizio" class="form-control form-control-sm" @bind-Value="@DateStart"></InputDateTime>
</div>
<input class="form-control form-control-sm" @bind="@SearchCom" placeholder="search (> @minChar char)" />
</div>
<InputSelect @bind-Value="@KeyRichiesta" id="KeyRich" class="form-control form-control-sm" title="Macchina">
@foreach (var item in ddlCommesse)
{
<option value="@item.ValueField">@item.LabelField</option>
}
</InputSelect>
</div>
</div>
<div class="col">
<div class="form-group mb-0">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<label class="input-group-text">articolo:</label>
<div class="col">
<div class="form-group mb-0">
<label for="dtFine" class="small">fine:</label>
<InputDateTime id="dtFine" class="form-control form-control-sm" @bind-Value="@DateEnd"></InputDateTime>
</div>
</div>
<div class="col">
<div class="form-group mb-0">
<label for="idxMacc" class="small">macchina:</label>
<InputSelect @bind-Value="@IdxMacchina" id="maccSel" class="form-control form-control-sm" title="idxMacc">
@foreach (var item in ddlMacchine)
{
<option value="@item.ValueField">@item.LabelField</option>
}
</InputSelect>
</div>
</div>
<div class="col">
<div class="form-group mb-0">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<label class="input-group-text">commessa:</label>
</div>
<input class="form-control form-control-sm" @bind="@SearchCom" placeholder="search (> @minChar char)" />
</div>
<InputSelect @bind-Value="@KeyRichiesta" id="KeyRich" class="form-control form-control-sm" title="Macchina">
@foreach (var item in ddlCommesse)
{
<option value="@item.ValueField">@item.LabelField</option>
}
</InputSelect>
</div>
</div>
<div class="col">
<div class="form-group mb-0">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<label class="input-group-text">articolo:</label>
</div>
<input class="form-control form-control-sm" @bind="@SearchArt" placeholder="search (> @minChar char)" />
</div>
<InputSelect @bind-Value="@CodArticolo" class="form-control form-control-sm" title="Macchina">
@foreach (var item in ddlArticoli)
{
<option value="@item.ValueField">@item.LabelField</option>
}
</InputSelect>
</div>
<input class="form-control form-control-sm" @bind="@SearchArt" placeholder="search (> @minChar char)" />
</div>
<InputSelect @bind-Value="@CodArticolo" class="form-control form-control-sm" title="Macchina">
@foreach (var item in ddlArticoli)
{
<option value="@item.ValueField">@item.LabelField</option>
}
</InputSelect>
</div>
</div>
<div class="col-1 text-right">
<div class="p-2">
<div class="form-group mb-0">
<label for="btnReset" class="small">reset</label><br />
<Button id="btnReset" class="btn btn-info btn-sm btn-block" Clicked="resetFilter"><span class="oi oi-loop-circular"></span></Button>
@@ -150,6 +150,12 @@ namespace MP.Stats.Components
#region Public Properties
[Parameter]
public EventCallback<bool> chartsToggle { get; set; }
[Parameter]
public bool chartVisible { get; set; } = false;
[Parameter]
public EventCallback<SelectData> filterChanged { get; set; }
@@ -194,6 +200,11 @@ namespace MP.Stats.Components
filterReset.InvokeAsync(SelFilter);
}
protected void toggleChart()
{
chartsToggle.InvokeAsync(chartVisible);
}
#endregion Protected Methods
}
}
+6 -3
View File
@@ -3,11 +3,14 @@
@using MP.Stats.Components
<div class="card">
<div class="card-header table-primary py-1">
<SelectionFilter SelFilter="currFilter" filterChanged="DoFilter" filterReset="ResetFilter"></SelectionFilter>
<div class="card-header table-primary p-1">
<SelectionFilter SelFilter="currFilter" filterChanged="DoFilter" filterReset="ResetFilter" chartVisible="ShowCharts" chartsToggle="ToggleChart"></SelectionFilter>
</div>
<div class="card-body py-0 px-1">
<ChartScarti ListScarti="@SearchRecords"></ChartScarti>
@if (ShowCharts == true)
{
<ChartScarti ListScarti="@SearchRecords"></ChartScarti>
}
@if (ListRecords == null)
{
<LoadingData></LoadingData>
+10
View File
@@ -36,6 +36,7 @@ namespace MP.Stats.Pages
private int currPage { get; set; } = 1;
private bool isLoading { get; set; } = false;
private int numRecord { get; set; } = 10;
private bool ShowCharts { get; set; } = false;
#endregion Private Properties
@@ -127,6 +128,15 @@ namespace MP.Stats.Pages
await reloadData();
}
protected async Task ToggleChart(bool doShow)
{
ShowCharts = !ShowCharts;
if (ShowCharts)
{
await reloadData();
}
}
protected async Task UpdateData()
{
currRecord = null;