Add Patch Customers Pagination 2
All checks were successful
CI/CD Pipeline / Build and Deploy with Docker Compose (push) Successful in 4m37s
All checks were successful
CI/CD Pipeline / Build and Deploy with Docker Compose (push) Successful in 4m37s
This commit is contained in:
parent
c93eb192ca
commit
97fb2d247f
@ -19,7 +19,8 @@
|
||||
{
|
||||
<PhTable Columns="TableColumns"
|
||||
Data="TablaClientes"
|
||||
RowsPerPage="50"
|
||||
RowsPerPage=SearchParams.PageSize
|
||||
ShowPageButtons="false"
|
||||
ShowQuickSearch="false"
|
||||
RenderSelect="false"
|
||||
RenderButtons="false" />
|
||||
@ -101,150 +102,3 @@ else
|
||||
private bool PuedeAvanzar => PagedResult != null && SearchParams.Page < TotalPaginas;
|
||||
private bool PuedeRetroceder => PagedResult != null && SearchParams.Page > 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@* @page "/customers"
|
||||
@using phronCare.UIBlazor.Services.Sales
|
||||
@using phronCare.UIBlazor.Data
|
||||
@using Domain.Generics
|
||||
|
||||
@inject CustomerHttpService CustomerService
|
||||
@inject NavigationManager Nav
|
||||
|
||||
<h3 class="text-xl font-bold mb-4">Buscar Clientes</h3>
|
||||
|
||||
<div class="mb-4 space-y-2">
|
||||
<input @bind="SearchParams.Name" placeholder="Nombre" class="border rounded p-1 w-full" />
|
||||
<input @bind="SearchParams.Email" placeholder="Email" class="border rounded p-1 w-full" />
|
||||
<input @bind="SearchParams.Document" placeholder="Documento" class="border rounded p-1 w-full" />
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded" @onclick="BuscarClientes">Buscar</button>
|
||||
</div>
|
||||
|
||||
@if (PagedResult != null)
|
||||
{
|
||||
<table class="table-auto w-full border">
|
||||
<thead>
|
||||
<tr class="bg-gray-200">
|
||||
<th class="px-2 py-1">Id</th>
|
||||
<th>Name</th>
|
||||
<th>BusinessName</th>
|
||||
<th>Active</th>
|
||||
<th>ExternalCode</th>
|
||||
<th>HasCreditAccount</th>
|
||||
<th>CreditLimit</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Dirección</th>
|
||||
<th>Documento</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var c in PagedResult.Items)
|
||||
{
|
||||
var addr = c.PhSCustomerAddresses.FirstOrDefault();
|
||||
var doc = c.PhSCustomerDocuments.FirstOrDefault();
|
||||
<tr class="border-b">
|
||||
<td>@c.Id</td>
|
||||
<td>@c.Name</td>
|
||||
<td>@c.BusinessName</td>
|
||||
<td>@(c.Active ? "Sí" : "No")</td>
|
||||
<td>@c.ExternalCode</td>
|
||||
<td>@(c.HasCreditAccount ? "Sí" : "No")</td>
|
||||
<td>@c.CreditLimit</td>
|
||||
<td>@addr?.Email</td>
|
||||
<td>@addr?.Phonenumber</td>
|
||||
<td>
|
||||
@addr?.Streetaddress1 @addr?.Streetaddress2 <br />
|
||||
@addr?.City, @addr?.Postalcode, @addr?.Country
|
||||
</td>
|
||||
<td>
|
||||
@doc?.DocumentNumber <br />
|
||||
@doc?.IssueDate?.ToString("yyyy-MM-dd") <br />
|
||||
@doc?.ExpiryDate?.ToString("yyyy-MM-dd")
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="mt-4 flex justify-between items-center">
|
||||
<button class="bg-gray-300 px-4 py-2 rounded" @onclick="AnteriorPagina" disabled="@(!PuedeRetroceder)">Anterior</button>
|
||||
<span>Página @SearchParams.Page de @TotalPaginas</span>
|
||||
<button class="bg-gray-300 px-4 py-2 rounded" @onclick="SiguientePagina" disabled="@(!PuedeAvanzar)">Siguiente</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p>No hay resultados.</p>
|
||||
}
|
||||
|
||||
@code {
|
||||
private CustomerSearchParams SearchParams = new();
|
||||
private PagedResult<ECustomer>? PagedResult;
|
||||
|
||||
[Parameter, SupplyParameterFromQuery] public string? Name { get; set; }
|
||||
[Parameter, SupplyParameterFromQuery] public string? Email { get; set; }
|
||||
[Parameter, SupplyParameterFromQuery] public string? Document { get; set; }
|
||||
[Parameter, SupplyParameterFromQuery] public int? Page { get; set; }
|
||||
[Parameter, SupplyParameterFromQuery] public int? PageSize { get; set; }
|
||||
|
||||
protected override async Task OnParametersSetAsync()
|
||||
{
|
||||
SearchParams = new CustomerSearchParams
|
||||
{
|
||||
Name = Name,
|
||||
Email = Email,
|
||||
Document = Document,
|
||||
Page = Page ?? 1,
|
||||
PageSize = PageSize ?? 10
|
||||
};
|
||||
|
||||
await CargarClientes();
|
||||
}
|
||||
|
||||
private async Task BuscarClientes()
|
||||
{
|
||||
SearchParams.Page = 1;
|
||||
ActualizarUrl();
|
||||
await CargarClientes();
|
||||
}
|
||||
|
||||
private async Task CargarClientes()
|
||||
{
|
||||
PagedResult = await CustomerService.SearchCustomersAsync(SearchParams);
|
||||
}
|
||||
|
||||
private async Task SiguientePagina()
|
||||
{
|
||||
if (PuedeAvanzar)
|
||||
{
|
||||
SearchParams.Page++;
|
||||
ActualizarUrl();
|
||||
await CargarClientes();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task AnteriorPagina()
|
||||
{
|
||||
if (PuedeRetroceder)
|
||||
{
|
||||
SearchParams.Page--;
|
||||
ActualizarUrl();
|
||||
await CargarClientes();
|
||||
}
|
||||
}
|
||||
|
||||
private void ActualizarUrl()
|
||||
{
|
||||
var query = $"/customers?name={SearchParams.Name}&email={SearchParams.Email}&document={SearchParams.Document}&page={SearchParams.Page}&pageSize={SearchParams.PageSize}";
|
||||
Nav.NavigateTo(query);
|
||||
}
|
||||
|
||||
private int TotalPaginas => PagedResult is null ? 1 :
|
||||
(int)Math.Ceiling((double)(PagedResult.TotalItems) / SearchParams.PageSize);
|
||||
|
||||
private bool PuedeAvanzar => PagedResult != null && SearchParams.Page < TotalPaginas;
|
||||
private bool PuedeRetroceder => PagedResult != null && SearchParams.Page > 1;
|
||||
}
|
||||
*@
|
||||
@ -14,58 +14,62 @@
|
||||
}
|
||||
</div>
|
||||
<!-- CONTROLES DE PAGINACION-->
|
||||
|
||||
<div class="col-md-2">
|
||||
<nav aria-label="Page Navigation">
|
||||
<ul class="pagination justify-content-end">
|
||||
<li class="page-item @(CurrentPage == 1 ? "disabled" : "")">
|
||||
<a class="page-link" href="#" tabindex="-1" @onclick:preventDefault @onclick="GoToPreviousPage">Anterior</a>
|
||||
</li>
|
||||
@if(TotalPages<=10)
|
||||
{
|
||||
@for (int i = 1; i <=TotalPages; i++ )
|
||||
@if (ShowPageButtons)
|
||||
{
|
||||
<nav aria-label="Page Navigation">
|
||||
<ul class="pagination justify-content-end">
|
||||
<li class="page-item @(CurrentPage == 1 ? "disabled" : "")">
|
||||
<a class="page-link" href="#" tabindex="-1" @onclick:preventDefault @onclick="GoToPreviousPage">Anterior</a>
|
||||
</li>
|
||||
@if(TotalPages<=10)
|
||||
{
|
||||
int pageNumber = i;
|
||||
<li class="page-item @(i==CurrentPage ? "active" : "")">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="(()=>ChangePage(pageNumber))">@i</a>
|
||||
</li>
|
||||
@for (int i = 1; i <=TotalPages; i++ )
|
||||
{
|
||||
int pageNumber = i;
|
||||
<li class="page-item @(i==CurrentPage ? "active" : "")">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="(()=>ChangePage(pageNumber))">@i</a>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
int maxVIsiblePages = 4;
|
||||
int startPage = Math.Max(1, CurrentPage - maxVIsiblePages / 2);
|
||||
int endPage = Math.Min(TotalPages, startPage + maxVIsiblePages - 1);
|
||||
if (CurrentPage > maxVIsiblePages / 2)
|
||||
else
|
||||
{
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="(()=>ChangePage(1))">1</a>
|
||||
</li>
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link">...</span>
|
||||
</li>
|
||||
int maxVIsiblePages = 4;
|
||||
int startPage = Math.Max(1, CurrentPage - maxVIsiblePages / 2);
|
||||
int endPage = Math.Min(TotalPages, startPage + maxVIsiblePages - 1);
|
||||
if (CurrentPage > maxVIsiblePages / 2)
|
||||
{
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="(()=>ChangePage(1))">1</a>
|
||||
</li>
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link">...</span>
|
||||
</li>
|
||||
}
|
||||
@for (int i = startPage; i<=endPage; i++)
|
||||
{
|
||||
int pageNumber = i;
|
||||
<li class="page-item @(i==CurrentPage ? "active" : "")">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="(()=>ChangePage(pageNumber))">@i</a>
|
||||
</li>
|
||||
}
|
||||
if (endPage<TotalPages)
|
||||
{
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link">...</span>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="(()=>ChangePage(TotalPages))">@TotalPages</a>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
@for (int i = startPage; i<=endPage; i++)
|
||||
{
|
||||
int pageNumber = i;
|
||||
<li class="page-item @(i==CurrentPage ? "active" : "")">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="(()=>ChangePage(pageNumber))">@i</a>
|
||||
</li>
|
||||
}
|
||||
if (endPage<TotalPages)
|
||||
{
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link">...</span>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="(()=>ChangePage(TotalPages))">@TotalPages</a>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
<li class="page-item @(CurrentPage == TotalPages ? "disabled" : "")">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="GoToNextPage">Siguiente</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<li class="page-item @(CurrentPage == TotalPages ? "disabled" : "")">
|
||||
<a class="page-link" href="#" @onclick:preventDefault @onclick="GoToNextPage">Siguiente</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -211,6 +215,8 @@
|
||||
[Parameter]
|
||||
public int RowsPerPage { get; set; } = 10;
|
||||
[Parameter]
|
||||
public bool ShowPageButtons { get; set; } = true;
|
||||
[Parameter]
|
||||
public string SelectionField { get; set; } = string.Empty;
|
||||
[Parameter]
|
||||
public string TableTitle { get; set; } = string.Empty;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user