add "advanced" search functionality

WebfrontCore/wwwroot/css/src/main.scss

@@ -1,5 +1,9 @@
 @import 'profile.scss';
 
+$dp-background-color: #191c20;
+$dp-cell-focus-background-color: rgba(255, 255, 255, 0.05);  
+@import '../../lib/vanillajs-datepicker/sass/datepicker';
+
 :root {
   --blue-color: #117ac0;
 
@@ -471,3 +475,25 @@ table.no-cell-divider td.first-row, table.no-cell-divider th.first-row {
 table.no-cell-divider td.last-row, table.no-cell-divider th.last-row {
   padding-bottom: 1.5rem;
 }
+
+.datepicker-picker {
+  padding: 1rem;
+}
+
+.view-switch {
+  margin: 0 1rem 0 1rem;
+}
+
+.datepicker-header {
+  margin-bottom: 1rem;
+}
+
+.datepicker-view .days {
+  margin: auto !important
+}
+
+@media (max-width: 768px) {
+  :root {
+    --sidebar-width: 90%;
+  }
+}

WebfrontCore/wwwroot/js/loader.js

@@ -5,7 +5,7 @@ let startAt = null;
 let isLoaderLoading = false;
 let loadUri = '';
 let loaderResponseId = '';
-let additionalParams = [];
+let additionalParams = undefined;
 
 function initLoader(location, loaderId, count = 10, start = count, additional = []) {
     loadUri = location;
@@ -52,14 +52,23 @@ function loadMoreItems() {
     showLoader();
     isLoaderLoading = true;
     let params = {offset: loaderOffset, count: loadCount, startAt: startAt};
-    for (let i = 0; i < additionalParams.length; i++) {
-        let param = additionalParams[i];
-        params[param.name] = param.value instanceof Function ? param.value() : param.value;
+    
+    if (additionalParams instanceof Function) {
+        params = {
+            ...params,
+            ...flatParams(additionalParams())
+        }
+    } else {
+        for (let i = 0; i < additionalParams.length; i++) {
+            let param = additionalParams[i];
+            params[param.name] = param.value instanceof Function ? param.value() : param.value;
+        }
     }
 
     $.get(loadUri, params)
         .done(function (response) {
             $(loaderResponseId).append(response);
+                
             if (response.trim().length === 0) {
                 staleLoader();
                 loaderReachedEnd = true;
@@ -82,3 +91,12 @@ function loadMoreItems() {
         });
     loaderOffset += loadCount;
 }
+
+function flatParams(params) {
+    return params.map(function (b) {
+        return {[b.name]: b.value}
+    }).reduce(function (prev, curr) {
+        for (const key in curr) prev[key] = curr[key];
+        return prev;
+    })
+}

WebfrontCore/wwwroot/js/search.js

@@ -1,27 +1,35 @@
-$(document).ready(function() {
-        $('.form-inline').submit(function(e) {
-            const id = $(e.currentTarget).find('input');
-            if ($(id).val().length < 3) {
-                e.preventDefault();
-                $(id)
-                    .addClass('input-text-danger')
-                    .delay(25)
-                    .queue(function () {
-                        $(this).addClass('input-border-transition').dequeue();
-                    })
-                    .delay(1000)
-                    .queue(function () {
-                        $(this).removeClass('input-text-danger').dequeue();
-                    })
-                    .delay(500)
-                    .queue(function () {
-                        $(this).removeClass('input-border-transition').dequeue();
-                    });
-            }
+$(document).ready(function () {
+    $('.form-inline').submit(function (e) {
+        const id = $(e.currentTarget).find('input');
+        if ($(id).val().length < 3) {
+            e.preventDefault();
+            $(id)
+                .addClass('input-text-danger')
+                .delay(25)
+                .queue(function () {
+                    $(this).addClass('input-border-transition').dequeue();
+                })
+                .delay(1000)
+                .queue(function () {
+                    $(this).removeClass('input-text-danger').dequeue();
+                })
+                .delay(500)
+                .queue(function () {
+                    $(this).removeClass('input-border-transition').dequeue();
+                });
+        } else if ($(id).val().startsWith("chat|")) {
+            e.preventDefault();
+            window.location = "/Message/Find?query=" + $(id).val();
+        }
+    });
 
-            else if ($(id).val().startsWith("chat|")) {
-                e.preventDefault();
-                window.location = "/Message/Find?query=" + $(id).val();
-            }
-        });  
+    $('.date-picker-input').each((index, selector) => {
+        new Datepicker(selector, {
+            buttonClass: 'btn',
+            format: 'yyyy-mm-dd',
+            nextArrow: '>',
+            prevArrow: '<',
+            orientation: 'auto top'
+        });
+    })
 });