Improve pagination and filtering for event list

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

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; }

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>

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('');

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>