Add Patch Customers Pagination 2
All checks were successful
CI/CD Pipeline / Build and Deploy with Docker Compose (push) Successful in 4m37s

This commit is contained in:
Leandro Hernan Rojas 2025-04-06 19:22:37 -03:00
parent c93eb192ca
commit 97fb2d247f
2 changed files with 56 additions and 196 deletions

View File

@ -19,7 +19,8 @@
{
<PhTable Columns="TableColumns"
Data="TablaClientes"
RowsPerPage="50"
RowsPerPage=SearchParams.PageSize
ShowPageButtons="false"
ShowQuickSearch="false"
RenderSelect="false"
RenderButtons="false" />
@ -100,151 +101,4 @@ 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;
}
*@
}

View File

@ -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;