From b090c1d9fbcb9c1cd6147d65822223a8901451e6 Mon Sep 17 00:00:00 2001
From: Berkan Sasmaz <berkansasmazz@gmail.com>
Date: Wed, 5 May 2021 02:45:29 +0300
Subject: [PATCH] Improve pagination and filtering for event list

---
 .../Events/Components/EventsArea/Default.cshtml      |  4 +++-
 .../Components/EventsArea/EventsAreaViewComponent.cs |  6 ++++++
 src/EventHub.Web/Pages/Events/Index.cshtml           |  8 ++++----
 src/EventHub.Web/Pages/Events/Index.js               | 12 ++++++------
 src/EventHub.Web/Pages/Organizations/Profile.cshtml  |  4 ++--
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/EventHub.Web/Pages/Events/Components/EventsArea/Default.cshtml b/src/EventHub.Web/Pages/Events/Components/EventsArea/Default.cshtml
index 5c5c25c..2762308 100644
--- a/src/EventHub.Web/Pages/Events/Components/EventsArea/Default.cshtml
+++ b/src/EventHub.Web/Pages/Events/Components/EventsArea/Default.cshtml
@@ -6,7 +6,7 @@
         <partial name="~/Pages/Events/Components/EventsArea/_eventListSection.cshtml" model="@Model.Events"/>
     </div>
 
-    @if (Model.IsPagination && Model.TotalCount >= 10)
+    @if (Model.IsPagination && Model.TotalCount >= 10 && Model.TotalCount > Model.Events.Count)
     {
         <div class="row load-more-section">
             <div class="col text-center">
@@ -19,6 +19,8 @@
                                   maxDate = Model.MaxDate,
                                   organizationId = Model.OrganizationId,
                                   isOnline = Model.IsOnline,
+                                  language = Model.Language,
+                                  countryId = Model.CountryId,
                                   maxResultCount = Model.MaxResultCount
                               })">
                     Load More
diff --git a/src/EventHub.Web/Pages/Events/Components/EventsArea/EventsAreaViewComponent.cs b/src/EventHub.Web/Pages/Events/Components/EventsArea/EventsAreaViewComponent.cs
index 8761bc6..73348ca 100644
--- a/src/EventHub.Web/Pages/Events/Components/EventsArea/EventsAreaViewComponent.cs
+++ b/src/EventHub.Web/Pages/Events/Components/EventsArea/EventsAreaViewComponent.cs
@@ -57,6 +57,8 @@ namespace EventHub.Web.Pages.Events.Components.EventsArea
                    MinDate = minDate,
                    MaxDate = maxDate,
                    IsOnline = isOnline,
+                   Language = language,
+                   CountryId = countryId,
                    SkipCount = skipCount.GetValueOrDefault(),
                    MaxResultCount = maxResultCount,
                    IsPagination = isPagination
@@ -78,6 +80,10 @@ namespace EventHub.Web.Pages.Events.Components.EventsArea
 
             public bool? IsOnline { get; set; }
             
+            public string Language { get; set; }
+        
+            public Guid? CountryId { get; set; }
+            
             public int SkipCount { get; set; }
             
             public int MaxResultCount { get; set; }
diff --git a/src/EventHub.Web/Pages/Events/Index.cshtml b/src/EventHub.Web/Pages/Events/Index.cshtml
index 956f790..8179ccb 100644
--- a/src/EventHub.Web/Pages/Events/Index.cshtml
+++ b/src/EventHub.Web/Pages/Events/Index.cshtml
@@ -43,15 +43,15 @@
                 <div class="row filter-select">
                     <div class="col-4 pr-0">
                         <div class="form-label-group">
-                            <input type="text" id="inputWhen" class="form-control" placeholder="When">
-                            <label for="inputWhen">When</label>
+                            <input type="text" id="WhenInput" class="form-control" placeholder="When">
+                            <label for="WhenInput">When</label>
                             <input type="hidden" asp-for="MinDate" value="">
                             <input type="hidden" asp-for="MaxDate" value="">
                         </div>
                     </div>
                     <div class="col-4 pr-0">
                         <select id="EventType" class="form-select" asp-for="@Model.IsOnline" aria-label="true">
-                            <option selected>Event Type</option>
+                            <option value="" selected>Event Type</option>
                             <option value="true">Online</option>
                             <option value="false">In Person</option>
                         </select>
@@ -59,7 +59,7 @@
                     <div class="col-4">
                         @* ToDo: System of tags or categories needs to be implemented *@
                         <select class="form-select" aria-label="Software">
-                            <option selected>Category</option>
+                            <option value="" selected>Category</option>
                             <option value="1">One</option>
                             <option value="2">Two</option>
                             <option value="3">Three</option>
diff --git a/src/EventHub.Web/Pages/Events/Index.js b/src/EventHub.Web/Pages/Events/Index.js
index f36bbea..158268f 100644
--- a/src/EventHub.Web/Pages/Events/Index.js
+++ b/src/EventHub.Web/Pages/Events/Index.js
@@ -19,12 +19,12 @@ $(function () {
         $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
     }
     
-    var $inputWhen = $("#inputWhen");
+    var when = $("#WhenInput");
     if (minDate !== null && maxDate !== null && minDate.length > 0 && maxDate.length > 0){
-        $inputWhen.val(minDate + ' - ' + maxDate);
+        when.val(minDate + ' - ' + maxDate);
         $("#MinDate").val(minDate);
         $("#MaxDate").val(maxDate);
-        $inputWhen.daterangepicker({
+        when.daterangepicker({
             startDate: minDate,
             endDate: maxDate,
             autoUpdateInput: false,
@@ -40,7 +40,7 @@ $(function () {
             }
         }, cb);
     }else {
-        $inputWhen.daterangepicker({
+        when.daterangepicker({
             autoUpdateInput: false,
             locale: {
                 cancelLabel: 'Clear'
@@ -56,14 +56,14 @@ $(function () {
         }, cb);
     }
     
-    $inputWhen.on('apply.daterangepicker', function(ev, picker) {
+    when.on('apply.daterangepicker', function(ev, picker) {
         $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
         $("#MinDate").val(picker.startDate.format('MM/DD/YYYY'));
         $("#MaxDate").val(picker.endDate.format('MM/DD/YYYY'));
         $('#EventListFilterForm').submit()
     });
     
-    $inputWhen.on('cancel.daterangepicker', function(ev, picker) {
+    when.on('cancel.daterangepicker', function(ev, picker) {
         $(this).val('');
         $("#MinDate").val('');
         $("#MaxDate").val('');
diff --git a/src/EventHub.Web/Pages/Organizations/Profile.cshtml b/src/EventHub.Web/Pages/Organizations/Profile.cshtml
index b63cfa5..38133b0 100644
--- a/src/EventHub.Web/Pages/Organizations/Profile.cshtml
+++ b/src/EventHub.Web/Pages/Organizations/Profile.cshtml
@@ -99,14 +99,14 @@
                                 @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
                                 {
                                     organizationId = Model.Organization.Id,
-                                    maxDate = Clock.Now
+                                    maxDate = Clock.Now.ClearTime()
                                 })
                             </div>
                             <div id="UpcomingEvent" class="tab-pane">
                                 @await Component.InvokeAsync(typeof(EventsAreaViewComponent), new
                                 {
                                     organizationId = Model.Organization.Id,
-                                    minDate = Clock.Now
+                                    minDate = Clock.Now.ClearTime()
                                 })
                             </div>
                         </div>