Files
mapo-core/MP.Stats/Components/DataPager.razor
T
2022-05-23 11:10:04 +02:00

67 lines
3.2 KiB
Plaintext

<div class="row">
<div class="col-12 col-lg-8 text-left">
<div class="row">
<div class="col-12 small">
@if (totalCount > 0)
{
<ul class="pagination pagination-sm mb-1">
<li class="page-item"><button class="page-link" @onclick="() => PaginationItemClick(1)"><i class="fas fa-angle-double-left"></i></button></li>
<li class="page-item"><button class="page-link" @onclick="() => PaginationItemClick(prevBlock)"><i class="fas fa-angle-left"></i></button></li>
@for (int i = @startPage; i <= endPage; ++i)
{
var pageNum = i;
<li class="page-item @cssActive(pageNum)"><button class="page-link" @onclick="() => PaginationItemClick(pageNum)">@pageNum</button></li>
}
<li class="page-item"><button class="page-link" @onclick="() => PaginationItemClick(nextBlock)"><i class="fas fa-angle-right"></i></button></li>
<li class="page-item"><button class="page-link" @onclick="() => PaginationItemClick(LastPage)"><i class="fas fa-angle-double-right"></i></button></li>
</ul>
}
</div>
</div>
<div class="row">
<div class="col-12 small">
@if (showLoading)
{
<div class="progress" style="height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:@percLoading%;"></div>
</div>
}
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="d-flex">
<div class="p-1 flex-fill text-right">
@if (!showLoading)
{
<span>@totalCount records</span>
}
@if (totalCount > 0)
{
if (!fileExist)
{
<button class="btn btn-block btn-sm btn-primary" @onclick="() => requestSave()"><span class="oi oi-wrench"></span> Prepare Data</button>
}
else
{
<a target="_blank" href="Download?fileName=@fileName" class="btn btn-block btn-sm btn-success"><span class="oi oi-cloud-download"></span> Download Data</a>
}
}
</div>
<div class="p-1 flex-fill text-right small">
@if (totalCount > 0)
{
<div class="input-group input-group-sm">
<select @bind="@PageSize" class="form-control form-control-sm">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
}
</div>
</div>
</div>
</div>