Add pagination in EventAreaViewComponent

src/EventHub.Web/Controllers/EventController.cs

@@ -1,4 +1,5 @@
 using System.IO;
+using System.Linq;
 using System.Threading.Tasks;
 using EventHub.Events;
 using EventHub.Web.Pages.Events;
@@ -19,6 +20,19 @@ namespace EventHub.Web.Controllers
             _eventAppService = eventAppService;
         }
         
+        [HttpGet]
+        [Route("get-list")]
+        public async Task<IActionResult> GetList(EventListFilterDto input)
+        {
+            ViewData.Model = (await _eventAppService.GetListAsync(input)).Items.ToList();
+            
+            return new PartialViewResult
+            {
+                ViewName = "~/Pages/Events/Components/EventsArea/_eventListSection.cshtml",
+                ViewData = ViewData
+            };
+        }
+        
         [Authorize]
         [HttpPost]
         [Route("update-timing")]

src/EventHub.Web/Pages/Events/Components/EventsArea/Default.cshtml

@@ -0,0 +1,29 @@
+@model EventHub.Web.Pages.Events.Components.EventsArea.EventsAreaViewComponent.ListAreaViewComponentModel
+
+@if (Model.Events != null && Model.Events.Count > 0)
+{
+    <div id="EventList" class="row" data-total-count="@Model.TotalCount" data-skip-count="@Model.SkipCount" data-max-result-count="@Model.MaxResultCount">
+        <partial name="~/Pages/Events/Components/EventsArea/_eventListSection.cshtml" model="@Model.Events"/>
+    </div>
+
+    @if (Model.IsPagination && Model.TotalCount >= 10)
+    {
+        <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","Event", 
+                              new {
+                                  minDate = Model.MinDate,
+                                  maxDate = Model.MaxDate,
+                                  organizationId = Model.OrganizationId,
+                                  isOnline = Model.IsOnline,
+                                  maxResultCount = Model.MaxResultCount
+                              })">
+                    Load More
+                </button>
+            </div>
+        </div>
+    }
+}

src/EventHub.Web/Pages/Events/Components/EventsArea/EventsAreaViewComponent.cs

@@ -0,0 +1,84 @@
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using EventHub.Events;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace EventHub.Web.Pages.Events.Components.EventsArea
+{
+    [Widget(
+        AutoInitialize = true,
+        ScriptFiles = new[] {"/Pages/Events/Components/EventsArea/events-area.js"})]
+    public class EventsAreaViewComponent : AbpViewComponent
+    {
+        private readonly IEventAppService _eventAppService;
+
+        public List<EventInListDto> Events { get; set; }
+        
+        public EventsAreaViewComponent(IEventAppService eventAppService)
+        {
+            _eventAppService = eventAppService;
+        }
+
+        public async Task<IViewComponentResult> InvokeAsync(
+            Guid? organizationId,
+            DateTime? minDate, 
+            DateTime? maxDate,
+            bool? isOnline,
+            int? skipCount,
+            int maxResultCount = 15,
+            bool isPagination = true)
+        {
+            var result = await _eventAppService.GetListAsync(
+                new EventListFilterDto
+                {
+                    OrganizationId = organizationId,
+                    MinDate = minDate,
+                    MaxDate = maxDate,
+                    IsOnline = isOnline,
+                    SkipCount = skipCount.GetValueOrDefault(),
+                    MaxResultCount = maxResultCount
+                }
+            );
+            
+            return View(
+                "~/Pages/Events/Components/EventsArea/Default.cshtml",
+                new ListAreaViewComponentModel
+                {
+                   Events = result.Items,
+                   TotalCount = result.TotalCount,
+                   OrganizationId = organizationId,
+                   MinDate = minDate,
+                   MaxDate = maxDate,
+                   IsOnline = isOnline,
+                   SkipCount = skipCount.GetValueOrDefault(),
+                   MaxResultCount = maxResultCount,
+                   IsPagination = isPagination
+                }
+            );
+        }
+        
+        public class ListAreaViewComponentModel
+        {
+            public IReadOnlyList<EventInListDto> Events { get; set; }
+            
+            public long TotalCount { get; set; }
+
+            public Guid? OrganizationId { get; set; }
+
+            public DateTime? MinDate { get; set; }
+
+            public DateTime? MaxDate { get; set; }
+
+            public bool? IsOnline { get; set; }
+            
+            public int SkipCount { get; set; }
+            
+            public int MaxResultCount { get; set; }
+
+            public bool IsPagination { get; set; }
+        }
+    }
+}

src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml

@@ -0,0 +1,39 @@
+@using System.Globalization
+@using EventHub.Web.Pages.Events
+@model List<EventHub.Events.EventInListDto>
+
+@foreach (var eventDto in Model)
+{
+    <div class="col-lg-4 col-md-6 event">
+        <div class="card">
+            @if (eventDto.CoverImageContent is null)
+            {
+                <img abp-card-image="Top" src="/assets/card-img.png" alt="@eventDto.Title"/>
+            }
+            else
+            {
+                <img abp-card-image="Top" style="max-height: 400px; min-height: 160px;" src="@($"data:image/png;base64,{Convert.ToBase64String(eventDto.CoverImageContent)}")" alt="@eventDto.Title"/>
+            }
+            <div class="card-body">
+                <div class="event-container">
+                    <div class="form-row">
+                        <div class="col-3">
+                            <div class="event-date text-center">
+                                <small>@eventDto.StartTime.ToString("MMM")</small>
+                                <span>@eventDto.StartTime.Day</span>
+                            </div>
+                        </div>
+                        <div class="col-9">
+                            <div class="event-info">
+                                <h5>@eventDto.Title</h5>
+                                <small>@eventDto.StartTime.ToString("hh tt", CultureInfo.InvariantCulture) - @eventDto.EndTime.ToString("hh tt", CultureInfo.InvariantCulture) | @EventDateHelper.GetLocationInfo(eventDto)</small>
+                                <p>@eventDto.Description</p>
+                            </div>
+                            <a href="@Url.Page("/Events/Detail", new {url = eventDto.Url})" class="btn btn-link p-0">Learn More <img src="/assets/more-btn.svg"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}

src/EventHub.Web/Pages/Events/Components/EventsArea/events-area.js

@@ -0,0 +1,35 @@
+(function () {
+    abp.widgets.EventsArea = 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 eventList = $wrapper.find('#EventList')
+                    eventList.append(response);
+                }).always(function () {
+                    var eventCount = $('.event').length;
+                    if (Number(eventCount) >= totalCount) {
+                        $('.load-more-section').hide();
+                    }
+                    loadMoreButton.buttonBusy(false);
+                });
+            });
+        }
+
+        return {
+            init: init
+        };
+    };
+})();

src/EventHub.Web/Pages/Events/Components/ListArea/Default.cshtml

@@ -1,45 +0,0 @@
-@using System.Globalization
-@using EventHub.Web.Pages.Events
-@model EventHub.Web.Pages.Events.Components.ListArea.ListAreaViewComponent.ListAreaViewComponentModel
-
-@if (Model.Events != null && Model.Events.Count > 0)
-{
-    <div class="row">
-
-        @foreach (var eventDto in Model.Events)
-        {
-            <div class="col-lg-4 col-md-6">
-                <div class="card">
-                    @if (eventDto.CoverImageContent is null)
-                    {
-                        <img abp-card-image="Top" src="/assets/card-img.png" alt="@eventDto.Title"/>
-                    }
-                    else
-                    {
-                        <img abp-card-image="Top" style="max-height: 400px; min-height: 160px;" src="@($"data:image/png;base64,{Convert.ToBase64String(eventDto.CoverImageContent)}")" alt="@eventDto.Title"/>
-                    }
-                    <div class="card-body">
-                        <div class="event-container">
-                            <div class="form-row">
-                                <div class="col-3">
-                                    <div class="event-date text-center">
-                                        <small>@eventDto.StartTime.ToString("MMM")</small>
-                                        <span>@eventDto.StartTime.Day</span>
-                                    </div>
-                                </div>
-                                <div class="col-9">
-                                    <div class="event-info">
-                                        <h5>@eventDto.Title</h5>
-                                        <small>@eventDto.StartTime.ToString("hh tt", CultureInfo.InvariantCulture) - @eventDto.EndTime.ToString("hh tt", CultureInfo.InvariantCulture) | @EventDateHelper.GetLocationInfo(@eventDto)</small>
-                                        <p>@eventDto.Description</p>
-                                    </div>
-                                    <a href="@Url.Page("/Events/Detail", new {url = @eventDto.Url})" class="btn btn-link p-0">Learn More <img src="/assets/more-btn.svg"></a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        }
-    </div>
-}

src/EventHub.Web/Pages/Events/Components/ListArea/ListAreaViewComponent.cs

@@ -1,58 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Threading.Tasks;
-using EventHub.Events;
-using Microsoft.AspNetCore.Mvc;
-using Volo.Abp.AspNetCore.Mvc;
-using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
-
-namespace EventHub.Web.Pages.Events.Components.ListArea
-{
-    [Widget(AutoInitialize = true)]
-    public class ListAreaViewComponent : AbpViewComponent
-    {
-        private readonly IEventAppService _eventAppService;
-
-        public ListAreaViewComponent(IEventAppService eventAppService)
-        {
-            _eventAppService = eventAppService;
-        }
-
-        public async Task<IViewComponentResult> InvokeAsync(
-            Guid? organizationId,
-            DateTime? minDate, 
-            DateTime? maxDate, 
-            bool? isOnline, 
-            int? skipCount, 
-            int maxResultCount = 15)
-        {
-            var result = await _eventAppService.GetListAsync(
-                new EventListFilterDto
-                {
-                    OrganizationId = organizationId,
-                    MinDate = minDate,
-                    MaxDate = maxDate,
-                    IsOnline = isOnline,
-                    SkipCount = skipCount.GetValueOrDefault(),
-                    MaxResultCount = maxResultCount
-                }
-            );
-
-            return View(
-                "~/Pages/Events/Components/ListArea/Default.cshtml",
-                new ListAreaViewComponentModel
-                {
-                   Events = result.Items,
-                   TotalCount = result.TotalCount
-                }
-            );
-        }
-        
-        public class ListAreaViewComponentModel
-        {
-            public IReadOnlyList<EventInListDto> Events { get; set; }
-            
-            public long TotalCount { get; set; }
-        }
-    }
-}

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

@@ -1,4 +1,62 @@
 @page
+@using EventHub.Web.Pages.Events.Components.EventsArea
 @model EventHub.Web.Pages.Events.IndexModel
 
-<h1>TODO: Events</h1>
+<div class="container-fluid p-0">
+    <div class="inner-banner">
+        <div class="container">
+            <div class="row align-items-center" style="min-height: 250px;">
+                <div class="col">
+                    <h1>Upcoming Events</h1>
+                    <nav aria-label="breadcrumb" class="breadcrumb-container">
+                        <ol class="breadcrumb">
+                            <li class="breadcrumb-item">
+                                <a href="#">Home</a>
+                            </li>
+                            <li class="breadcrumb-item active" aria-current="page">Library</li>
+                        </ol>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="row mb-4">
+        <div class="col-md-auto">
+            <div class="row filter-select">
+                <div class="col-4 pr-0">
+                    <select class="form-select" aria-label="Default select example">
+                        <option selected>When</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </div>
+                <div class="col-4 pr-0">
+                    <select class="form-select" aria-label="Default select example">
+                        <option selected>Event Type</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </div>
+                <div class="col-4">
+                    <select class="form-select" aria-label="Default select example">
+                        <option selected>Category</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
+    {
+        maxResultCount = 9,
+        skipCount = 0
+    })
+</div>

src/EventHub.Web/Pages/Index.cshtml

@@ -4,7 +4,7 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using EventHub.Localization
 @using EventHub.Web
-@using EventHub.Web.Pages.Events.Components.ListArea
+@using EventHub.Web.Pages.Events.Components.EventsArea
 @using Volo.Abp.Timing
 @using Volo.Abp.Users
 @inject ICurrentUser CurrentUser
@@ -98,11 +98,11 @@
         </div>
     </div>
 
-    @await Component.InvokeAsync(typeof(ListAreaViewComponent), new 
+    @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new 
     {
         minDate = Clock.Now, 
-        MaxResultCount = 15
+        MaxResultCount = 15,
-        
+        isPagination = false
     })
 
     <div class="row">

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

@@ -1,7 +1,7 @@
 @page "/organizations/{name}"
 @inject IHtmlLocalizer<EventHubResource> L
 @using EventHub.Localization
-@using EventHub.Web.Pages.Events.Components.ListArea
+@using EventHub.Web.Pages.Events.Components.EventsArea
 @using EventHub.Web.Pages.Organizations.Components.JoinArea
 @using EventHub.Web.Pages.Organizations.Components.MembersArea
 @using Microsoft.AspNetCore.Mvc.Localization
@@ -96,14 +96,14 @@
                         </div>
                         <div class="tab-content">
                             <div id="PastEvent" class="tab-pane active">
-                                @await Component.InvokeAsync(typeof(ListAreaViewComponent), new
+                                @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
                                 {
                                     organizationId = Model.Organization.Id,
                                     maxDate = Clock.Now
                                 })
                             </div>
                             <div id="UpcomingEvent" class="tab-pane">
-                                @await Component.InvokeAsync(typeof(ListAreaViewComponent), new
+                                @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
                                 {
                                     organizationId = Model.Organization.Id,
                                     minDate = Clock.Now