Improve filters area for Events page

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

@@ -41,7 +41,27 @@
         <form method="get" id="EventListFilterForm">
             <div class="col-md-auto">
                 <div class="row filter-select">
-                    <div class="col-8 pr-0">
+                    <div class="col-4 pr-0">
+                        <select id="LanguageSelect" asp-for="Language" class="form-select" aria-label="en">
+                            <option value="" selected>Looking for</option>
+                            @foreach (var language in Model.Languages)
+                            {
+                                <option value=@language.TwoLetterISOLanguageName>@language.EnglishName</option>
+                            }
+                        </select>
+                    </div>
+                    <div class="col-4 pr-0">
+                        <div class="form-label-group locationGroup">
+                            <select id="CountrySelect" asp-for="CountryId" class="form-select" aria-label="Turkey">
+                                <option value="" selected>Location</option>
+                                @foreach (var country in Model.Countries)
+                                {
+                                    <option value=@country.Id>@country.Name</option>
+                                }
+                            </select>
+                        </div>
+                    </div>
+                    <div class="col-4 pr-0">
                         <div class="form-label-group">
                             <input type="text" id="WhenInput" class="form-control" placeholder="When">
                             <label for="WhenInput">When</label>
@@ -49,17 +69,9 @@
                             <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 value="" selected>Event Type</option>
-                            <option value="true">Online</option>
-                            <option value="false">In Person</option>
-                        </select>
-                    </div>
                 </div>
             </div>
         </form>
-
     </div>
 
     <div id="EventsAreaViewComponent" data-widget-filter="#EventListFilterForm">

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

@@ -1,5 +1,11 @@
 using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using System.Threading.Tasks;
+using EventHub.Events;
 using Microsoft.AspNetCore.Mvc;
+using NUglify.Helpers;
 
 namespace EventHub.Web.Pages.Events
 {
@@ -23,9 +29,39 @@ namespace EventHub.Web.Pages.Events
         [BindProperty(SupportsGet = true)]
         public Guid? CountryId { get; set; }
         
-        public void OnGet()
+        public List<CultureInfo> Languages { get; private set; }
+        public List<CountryLookupDto> Countries { get; private set; }
+        
+        private readonly IEventAppService _eventAppService;
+
+        public IndexModel(IEventAppService eventAppService)
+        {
+            _eventAppService = eventAppService;
+        }
+        
+        public async Task OnGetAsync()
+        {
+            await FillCountriesAsync();
+            FillLanguages();
+        }
+
+        private async Task FillCountriesAsync()
+        {
+            Countries = await _eventAppService.GetCountriesLookupAsync();
+            Countries.Insert(0, new CountryLookupDto
+            {
+                Id = Guid.Empty,
+                Name = "Online"
+            });
+        }
+
+        private void FillLanguages()
         {
-            
+            Languages = CultureInfo.GetCultures(CultureTypes.NeutralCultures)
+                .DistinctBy(x => x.EnglishName)
+                .OrderBy(x => x.EnglishName)
+                .ToList();
+            Languages.Remove(Languages.Single(x => x.TwoLetterISOLanguageName == "iv")); // Invariant Language
         }
     }
 }

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

@@ -2,7 +2,14 @@ $(function () {
     var params = new window.URLSearchParams(window.location.search);
     var minDate = Date.parse(params.get('MinDate')) || 0;
     var maxDate = Date.parse(params.get('MaxDate')) || 0;
-
+    var isOnline = params.get('IsOnline') || "false";
+    var countryId = params.get('CountryId');
+    
+    if (isOnline === "true" || countryId === "00000000-0000-0000-0000-000000000000"){
+        $('#CountrySelect').val("00000000-0000-0000-0000-000000000000")
+        isOnline = true
+    }
+    
     if (!isNaN(minDate)){
         minDate = params.get('MinDate')
     }else{
@@ -50,22 +57,61 @@ $(function () {
             ranges: getRanges()
         }, cb);
     }
+
+    function submitEventFilter() {
+        var language = $('#LanguageSelect').find(":selected").val();
+        var countryId = $('#CountrySelect').find(":selected").val();
+        var minDate = $("#MinDate").val()
+        var maxDate = $("#MaxDate").val()
+
+        var location = "/Events?"
+
+        if (!isNullOrEmpty(minDate)) {
+            location += "MinDate=" + minDate
+        }
+
+        if (!isNullOrEmpty(maxDate)) {
+            location += "&MaxDate=" + maxDate
+        }
+
+        if (!isNullOrEmpty(language)) {
+            location += "&Language=" + language
+        }
+
+        if (!isNullOrEmpty(countryId)) {
+            if (countryId === "00000000-0000-0000-0000-000000000000") {
+                location += "&IsOnline=true"
+            } else {
+                location += "&CountryId=" + countryId + "&IsOnline=false"
+            }
+        }
+
+        if (!isNullOrEmpty(location) && location !== "/Events?") {
+            window.location.replace(location)
+        } else {
+            $('#EventListFilterForm').submit()
+        }
+    }
     
     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()
+        submitEventFilter()
     });
     
     when.on('cancel.daterangepicker', function(ev, picker) {
         $(this).val('');
         $("#MinDate").val('');
         $("#MaxDate").val('');
-        $('#EventListFilterForm').submit()
+        submitEventFilter()
     });
 
-    $("#EventType").on('change', function () {
-        $('#EventListFilterForm').submit()
+    function isNullOrEmpty(str){
+        return str === null || str.match(/^ *$/) !== null;
+    }
+
+    $("#CountrySelect, #LanguageSelect").on('change', function () {
+        submitEventFilter();
     });
 });

src/EventHub.Web/Pages/Index.js

@@ -68,14 +68,15 @@
     $('#SearchButton').on('click', '', function () {
         var language = $('#LanguageSelect').find(":selected").val();
         var countryId = $('#CountrySelect').find(":selected").val();
-        
+        console.log(language)
+        console.log(countryId)
         var location = "/Events?"
 
-        if (!isNullOrEmpty(minDate)){
+        if (minDate.length > 0 && !isNullOrEmpty(minDate)){
             location += "MinDate=" + minDate
         }
 
-        if (!isNullOrEmpty(maxDate)){
+        if (maxDate.length > 0 && !isNullOrEmpty(maxDate)){
             location += "&MaxDate=" + maxDate
         }