From 76ea0a77b86fdabba4b857edd005069730fb3ac6 Mon Sep 17 00:00:00 2001 From: Berkan Sasmaz Date: Tue, 4 May 2021 16:45:22 +0300 Subject: [PATCH] Add pagination in EventAreaViewComponent --- .../Controllers/EventController.cs | 14 ++++ .../Components/EventsArea/Default.cshtml | 29 +++++++ .../EventsArea/EventsAreaViewComponent.cs | 84 +++++++++++++++++++ .../EventsArea/_eventListSection.cshtml | 39 +++++++++ .../Components/EventsArea/events-area.js | 35 ++++++++ .../Events/Components/ListArea/Default.cshtml | 45 ---------- .../ListArea/ListAreaViewComponent.cs | 58 ------------- src/EventHub.Web/Pages/Events/Index.cshtml | 60 ++++++++++++- src/EventHub.Web/Pages/Index.cshtml | 8 +- .../Pages/Organizations/Profile.cshtml | 6 +- 10 files changed, 267 insertions(+), 111 deletions(-) create mode 100644 src/EventHub.Web/Pages/Events/Components/EventsArea/Default.cshtml create mode 100644 src/EventHub.Web/Pages/Events/Components/EventsArea/EventsAreaViewComponent.cs create mode 100644 src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml create mode 100644 src/EventHub.Web/Pages/Events/Components/EventsArea/events-area.js delete mode 100644 src/EventHub.Web/Pages/Events/Components/ListArea/Default.cshtml delete mode 100644 src/EventHub.Web/Pages/Events/Components/ListArea/ListAreaViewComponent.cs diff --git a/src/EventHub.Web/Controllers/EventController.cs b/src/EventHub.Web/Controllers/EventController.cs index 12d92bf..c497a2a 100644 --- a/src/EventHub.Web/Controllers/EventController.cs +++ b/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 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")] diff --git a/src/EventHub.Web/Pages/Events/Components/EventsArea/Default.cshtml b/src/EventHub.Web/Pages/Events/Components/EventsArea/Default.cshtml new file mode 100644 index 0000000..5c5c25c --- /dev/null +++ b/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) +{ +
+ +
+ + @if (Model.IsPagination && Model.TotalCount >= 10) + { +
+
+ +
+
+ } +} \ No newline at end of file diff --git a/src/EventHub.Web/Pages/Events/Components/EventsArea/EventsAreaViewComponent.cs b/src/EventHub.Web/Pages/Events/Components/EventsArea/EventsAreaViewComponent.cs new file mode 100644 index 0000000..a653e04 --- /dev/null +++ b/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 Events { get; set; } + + public EventsAreaViewComponent(IEventAppService eventAppService) + { + _eventAppService = eventAppService; + } + + public async Task 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 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; } + } + } +} \ No newline at end of file diff --git a/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml b/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml new file mode 100644 index 0000000..7771422 --- /dev/null +++ b/src/EventHub.Web/Pages/Events/Components/EventsArea/_eventListSection.cshtml @@ -0,0 +1,39 @@ +@using System.Globalization +@using EventHub.Web.Pages.Events +@model List + +@foreach (var eventDto in Model) +{ +
+
+ @if (eventDto.CoverImageContent is null) + { + @eventDto.Title + } + else + { + @eventDto.Title + } +
+
+
+
+
+ @eventDto.StartTime.ToString("MMM") + @eventDto.StartTime.Day +
+
+
+
+
@eventDto.Title
+ @eventDto.StartTime.ToString("hh tt", CultureInfo.InvariantCulture) - @eventDto.EndTime.ToString("hh tt", CultureInfo.InvariantCulture) | @EventDateHelper.GetLocationInfo(eventDto) +

@eventDto.Description

+
+ Learn More +
+
+
+
+
+
+} \ No newline at end of file diff --git a/src/EventHub.Web/Pages/Events/Components/EventsArea/events-area.js b/src/EventHub.Web/Pages/Events/Components/EventsArea/events-area.js new file mode 100644 index 0000000..8c2b332 --- /dev/null +++ b/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 + }; + }; +})(); diff --git a/src/EventHub.Web/Pages/Events/Components/ListArea/Default.cshtml b/src/EventHub.Web/Pages/Events/Components/ListArea/Default.cshtml deleted file mode 100644 index c5f0037..0000000 --- a/src/EventHub.Web/Pages/Events/Components/ListArea/Default.cshtml +++ /dev/null @@ -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) -{ -
- - @foreach (var eventDto in Model.Events) - { -
-
- @if (eventDto.CoverImageContent is null) - { - @eventDto.Title - } - else - { - @eventDto.Title - } -
-
-
-
-
- @eventDto.StartTime.ToString("MMM") - @eventDto.StartTime.Day -
-
-
-
-
@eventDto.Title
- @eventDto.StartTime.ToString("hh tt", CultureInfo.InvariantCulture) - @eventDto.EndTime.ToString("hh tt", CultureInfo.InvariantCulture) | @EventDateHelper.GetLocationInfo(@eventDto) -

@eventDto.Description

-
- Learn More -
-
-
-
-
-
- } -
-} \ No newline at end of file diff --git a/src/EventHub.Web/Pages/Events/Components/ListArea/ListAreaViewComponent.cs b/src/EventHub.Web/Pages/Events/Components/ListArea/ListAreaViewComponent.cs deleted file mode 100644 index 170caee..0000000 --- a/src/EventHub.Web/Pages/Events/Components/ListArea/ListAreaViewComponent.cs +++ /dev/null @@ -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 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 Events { get; set; } - - public long TotalCount { get; set; } - } - } -} \ No newline at end of file diff --git a/src/EventHub.Web/Pages/Events/Index.cshtml b/src/EventHub.Web/Pages/Events/Index.cshtml index b0dd51f..e853dd2 100644 --- a/src/EventHub.Web/Pages/Events/Index.cshtml +++ b/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 -

TODO: Events

\ No newline at end of file +
+
+
+
+
+

Upcoming Events

+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ + @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new + { + maxResultCount = 9, + skipCount = 0 + }) +
\ No newline at end of file diff --git a/src/EventHub.Web/Pages/Index.cshtml b/src/EventHub.Web/Pages/Index.cshtml index d61961e..5e9ff3e 100644 --- a/src/EventHub.Web/Pages/Index.cshtml +++ b/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 @@ - @await Component.InvokeAsync(typeof(ListAreaViewComponent), new + @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new { minDate = Clock.Now, - MaxResultCount = 15 - + MaxResultCount = 15, + isPagination = false })
diff --git a/src/EventHub.Web/Pages/Organizations/Profile.cshtml b/src/EventHub.Web/Pages/Organizations/Profile.cshtml index 67a618c..b63cfa5 100644 --- a/src/EventHub.Web/Pages/Organizations/Profile.cshtml +++ b/src/EventHub.Web/Pages/Organizations/Profile.cshtml @@ -1,7 +1,7 @@ @page "/organizations/{name}" @inject IHtmlLocalizer 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 @@
- @await Component.InvokeAsync(typeof(ListAreaViewComponent), new + @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new { organizationId = Model.Organization.Id, maxDate = Clock.Now })
- @await Component.InvokeAsync(typeof(ListAreaViewComponent), new + @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new { organizationId = Model.Organization.Id, minDate = Clock.Now