#272 - Paginação no MVC - feature/sp8/#272

Author: jeffreysSharp

src/web/JSE.WebApp.MVC/Controllers/CatalogoController.cs

@@ -1,6 +1,7 @@
 using JSE.WebApp.MVC.Controllers;
 using JSE.WebApp.MVC.Services;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Routing.Constraints;
 
 
 namespace JSE.WebApp.MVC.Controllers
@@ -17,9 +18,10 @@ public CatalogoController(ICatalogoService catalogoService)
         [HttpGet]
         [Route("")]
         [Route("vitrine")]
-        public async Task<IActionResult> Index()
+        public async Task<IActionResult> Index([FromQuery] int ps = 8, [FromQuery] int page = 1, [FromQuery] string q = null)
         {
-            var produtos = await _catalogoService.ObterTodos();
+            var produtos = await _catalogoService.ObterTodos(ps, page, q);
+            ViewBag.Pesquisa = q;
 
             return View(produtos);
         }

src/web/JSE.WebApp.MVC/Models/IPagedList.cs

@@ -0,0 +1,12 @@
+namespace JSE.WebApp.MVC.Models
+{
+    public interface IPagedList
+    {
+        public string ReferenceAction { get; set; }
+        public int PageIndex { get; set; }
+        public int PageSize { get; set; }
+        public string Query { get; set; }
+        public int TotalResults { get; set; }
+        public double TotalPages { get; }
+    }
+}

src/web/JSE.WebApp.MVC/Models/PagedViewModel.cs

@@ -0,0 +1,13 @@
+namespace JSE.WebApp.MVC.Models
+{
+    public class PagedViewModel<T> : IPagedList where T : class
+    {
+        public string ReferenceAction { get; set; }
+        public IEnumerable<T> List { get; set; }
+        public int PageIndex { get; set; }
+        public int PageSize { get; set; }
+        public string Query { get; set; }
+        public int TotalResults { get; set; }
+        public double TotalPages => Math.Ceiling((double)TotalResults / PageSize);
+    }
+}

src/web/JSE.WebApp.MVC/Services/CatalogoService.cs

@@ -25,13 +25,13 @@ public async Task<ProdutoViewModel> ObterPorId(Guid id)
             return await DeserializarObjetoResponse<ProdutoViewModel>(response);
         }
 
-        public async Task<IEnumerable<ProdutoViewModel>> ObterTodos()
+        public async Task<PagedViewModel<ProdutoViewModel>> ObterTodos(int pageSize, int pageIndex, string query = null)
         {
-            var response = await _httpClient.GetAsync("/catalogo/produtos/");
+            var response = await _httpClient.GetAsync($"/catalogo/produtos?ps={pageSize}&page={pageIndex}&q={query}");
 
             TratarErrosResponse(response);
 
-            return await DeserializarObjetoResponse<IEnumerable<ProdutoViewModel>>(response);
+            return await DeserializarObjetoResponse<PagedViewModel<ProdutoViewModel>>(response);
         }
     }
 }

src/web/JSE.WebApp.MVC/Services/ICatalogoService.cs

@@ -4,7 +4,7 @@ namespace JSE.WebApp.MVC.Services
 {
     public interface ICatalogoService
     {
-        Task<IEnumerable<ProdutoViewModel>> ObterTodos();
+        Task<PagedViewModel<ProdutoViewModel>> ObterTodos(int pageSize, int pageIndex, string query = null);
         Task<ProdutoViewModel> ObterPorId(Guid id);
     }
 }

src/web/JSE.WebApp.MVC/Views/Catalogo/Index.cshtml

@@ -1,5 +1,5 @@
 @using JSE.WebApp.MVC.Extensions
-@model IEnumerable<JSE.WebApp.MVC.Models.ProdutoViewModel>
+@model PagedViewModel<ProdutoViewModel>
 
 @{
     ViewData["Title"] = "Todos os produtos";
@@ -10,7 +10,7 @@
 
         <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
             @{
-                foreach (var produto in Model.Where(p => p.Ativo).OrderBy(p => p.Nome))
+                foreach (var produto in Model.List.Where(p => p.Ativo).OrderBy(p => p.Nome))
                 {
 
                     <div class="col">
@@ -43,5 +43,27 @@
             }
 
         </div>
+
+        <nav aria-label="...">
+            <ul class="pagination">
+                @{
+                    for (var i = 1; i < Model.TotalPages + 1; i++)
+                    {
+                        if (i == Model.PageIndex)
+                        {
+                            <li class="page-item active">
+                                <a class="page-link" asp-action="Index" asp-route-ps="@Model.PageSize" asp-route-page="@i" asp-route-q="@Model.Query">@i</a>
+                            </li>
+                        }
+                        else
+                        {
+                            <li class="page-item">
+                                <a class="page-link" asp-action="Index" asp-route-ps="@Model.PageSize" asp-route-page="@i" asp-route-q="@Model.Query">@i</a>
+                            </li>
+                        }
+                    }
+                }
+            </ul>
+        </nav>
     </div>
 </div>

src/web/JSE.WebApp.MVC/Views/Shared/_Layout.cshtml

@@ -50,6 +50,19 @@
                     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                 </div>
 
+                <div class="col-lg-5 col-sm-12">
+                    <form method="get" asp-controller="Catalogo" asp-action="Index" class="search">
+                        <div class="input-group w-100">
+                            <input type="text" id="q" name="q" class="form-control" value="@ViewBag.Pesquisa" placeholder="O que você está procurando?">
+                            <div class="input-group-append">
+                                <button class="btn btn-primary" type="submit">
+                                    <i class="fa fa-search"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+
                 <div class="offcanvas-header nav border-top px-0 py-3 mt-3 d-md-none">
                     <a class="nav-link justify-content-center w-100" href="">
                         <i class="ci-user fs-lg opacity-60 ms-n2 me-2"></i>