Add pagination with widget on Organization list

src/EventHub.Web/Controllers/OrganizationController.cs

@@ -1,9 +1,11 @@
 using System.IO;
+using System.Linq;
 using System.Threading.Tasks;
 using EventHub.Organizations;
 using EventHub.Web.Pages.Organizations;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.Application.Dtos;
 using Volo.Abp.AspNetCore.Mvc;
 
 namespace EventHub.Web.Controllers
@@ -18,6 +20,19 @@ namespace EventHub.Web.Controllers
             _organizationAppService = organizationAppService;
         }
         
+        [HttpGet]
+        [Route("get-list")]
+        public async Task<IActionResult> GetList(PagedResultRequestDto input)
+        {
+            ViewData.Model = (await _organizationAppService.GetListAsync(input)).Items.ToList();
+            
+            return new PartialViewResult
+            {
+                ViewName = "~/Pages/Organizations/Components/OrganizationsArea/_organizationListSection.cshtml",
+                ViewData = ViewData
+            };
+        }
+        
         [HttpPost]
         [Authorize]
         [Route("save-profile-picture")]

src/EventHub.Web/Pages/Organizations/Components/OrganizationsArea/Default.cshtml

@@ -0,0 +1,22 @@
+@model EventHub.Web.Pages.Organizations.Components.OrganizationsArea.OrganizationsAreaViewComponent.ListAreaViewComponentModel
+
+@if (Model.Organizations != null && Model.Organizations.Count > 0)
+{
+    <div id="OrganizationList" class="row" data-total-count="@Model.TotalCount" data-skip-count="@Model.SkipCount" data-max-result-count="@Model.MaxResultCount">
+        <partial name="~/Pages/Organizations/Components/OrganizationsArea/_organizationListSection.cshtml" model="@Model.Organizations"/>
+    </div>
+
+    @if (Model.IsPagination && Model.TotalCount > Model.MaxResultCount && Model.TotalCount > Model.Organizations.Count)
+    {
+        <div class="row load-more-section">
+            <div class="col text-center">
+                <button
+                    id="LoadMoreButton"
+                    class="btn btn-secondary btn-lg"
+                    data-url="@Url.Action("GetList", "Organization", new {maxResultCount = Model.MaxResultCount})">
+                    Load More
+                </button>
+            </div>
+        </div>
+    }
+}

src/EventHub.Web/Pages/Organizations/Components/OrganizationsArea/OrganizationsAreaViewComponent.cs

@@ -0,0 +1,62 @@
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using EventHub.Organizations;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.Application.Dtos;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace EventHub.Web.Pages.Organizations.Components.OrganizationsArea
+{
+    [Widget(
+        AutoInitialize = true,
+        ScriptFiles = new[] {"/Pages/Organizations/Components/OrganizationsArea/organizations-area.js"})]
+    public class OrganizationsAreaViewComponent : AbpViewComponent
+    {
+        private readonly IOrganizationAppService _organizationAppService;
+
+        public OrganizationsAreaViewComponent(IOrganizationAppService organizationAppService)
+        {
+            _organizationAppService = organizationAppService;
+        }
+
+        public async Task<IViewComponentResult> InvokeAsync(
+            int? skipCount,
+            int maxResultCount = 15,
+            bool isPagination = true)
+        {
+            var result = await _organizationAppService.GetListAsync(
+                new PagedResultRequestDto
+                {
+                    SkipCount = skipCount.GetValueOrDefault(),
+                    MaxResultCount = maxResultCount
+                }
+            );
+
+            return View(
+                "~/Pages/Organizations/Components/OrganizationsArea/Default.cshtml",
+                new OrganizationsAreaViewComponent.ListAreaViewComponentModel
+                {
+                    Organizations = result.Items,
+                    TotalCount = result.TotalCount,
+                    SkipCount = skipCount.GetValueOrDefault(),
+                    MaxResultCount = maxResultCount,
+                    IsPagination = isPagination
+                }
+            );
+        }
+        
+        public class ListAreaViewComponentModel
+        {
+            public IReadOnlyList<OrganizationInListDto> Organizations { get; set; }
+            
+            public long TotalCount { get; set; }
+
+            public int SkipCount { get; set; }
+            
+            public int MaxResultCount { get; set; }
+
+            public bool IsPagination { get; set; }
+        }
+    }
+}

src/EventHub.Web/Pages/Organizations/Components/OrganizationsArea/organizations-area.js

@@ -0,0 +1,35 @@
+(function () {
+    abp.widgets.OrganizationsArea = function ($wrapper) {
+        var totalCount = Number($wrapper.find('[data-total-count]').attr('data-total-count'))
+        var skipCount = Number($wrapper.find('[data-skip-count]').attr('data-skip-count'))
+        var maxResultCount = Number($wrapper.find('[data-max-result-count]').attr('data-max-result-count'))
+
+        function init() {
+            var loadMoreButton = $wrapper.find('#LoadMoreButton');
+            loadMoreButton.click(function (e) {
+                e.preventDefault();
+                skipCount += maxResultCount;
+                loadMoreButton.buttonBusy(true);
+                abp.ajax({
+                    type: 'GET',
+                    dataType: 'html',
+                    contentType: 'text/html; charset=utf-8',
+                    url: (loadMoreButton.attr('data-url') + '&skipCount=' + skipCount)
+                }).then(function (response) {
+                    var organizationList = $wrapper.find('#OrganizationList')
+                    organizationList.append(response);
+                }).always(function () {
+                    var organizationCount = $('.organization').length;
+                    if (Number(organizationCount) >= totalCount) {
+                        $('.load-more-section').hide();
+                    }
+                    loadMoreButton.buttonBusy(false);
+                });
+            });
+        }
+
+        return {
+            init: init
+        };
+    };
+})();

src/EventHub.Web/Pages/Organizations/Index.cshtml

@@ -1,6 +1,7 @@
 @page "/organizations"
 @inject IHtmlLocalizer<EventHubResource> L
 @using EventHub.Localization
+@using EventHub.Web.Pages.Organizations.Components.OrganizationsArea
 @using Microsoft.AspNetCore.Mvc.Localization
 @model EventHub.Web.Pages.Organizations.IndexPageModel
 
@@ -25,41 +26,8 @@
 </div>
 
 <div class="container">
-
-    <div class="row">
-        @foreach (var organization in Model.Organizations)
-        {
-            <div class="col-lg-4 col-md-6">
-                <div class="card">
-                     @if (organization.ProfilePictureContent == null)
-                     {
-                        <img src="assets/card-img.png" class="card-img-top" alt="@organization.Name">
-                     }
-                     else
-                     {
-                         <img src="@($"data:image/png;base64,{Convert.ToBase64String(organization.ProfilePictureContent)}")" class="card-img-top" alt="@organization.Name">
-                     }
-                    <div class="card-body">
-                        <div class="event-container">
-                            <div class="event-info">
-                                <h5>@organization.DisplayName</h5>
-                                <p>
-                                    @organization.Description
-                                </p>
-                            </div>
-                            <a href="@Url.Page("/Organizations/Profile", new {name = organization.Name})" class="btn btn-link p-0">Details <img src="assets/more-btn.svg"></a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        }
-    </div>
-
-    <div class="row">
-        <div class="col text-center">
-            <button class="btn btn-secondary btn-lg ">
-                Load More
-            </button>
-        </div>
-    </div>
+    @await Component.InvokeAsync(typeof(OrganizationsAreaViewComponent), new
+    {
+        maxResultCount = 12
+    })
 </div>