Handle search errors better

lolibrary · Feb 8, 2024 · 315338b · 315338b
1 parent e3c15f9
commit 315338b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/resources/js/search.js b/resources/js/search.js
@@ -10,6 +10,7 @@ $(() => {
             searchJs.year_slider = $("#year-slider").slider();
             searchJs.loader = $('#search-results-loading');
             searchJs.results = $('#search-results');
+            searchJs.error = $('#search-results-error');
             searchJs.year_slider.on('slideStop', (evt) => {
                 searchJs.yearMatchVisibility();
                 searchJs.doSearch();
@@ -79,14 +80,24 @@ $(() => {
             let form_values = searchJs.getFormValues();
             searchJs.loader.css('display', 'block');
             searchJs.results.css('display', 'none');
+            searchJs.error.css('display', 'none');
             window.history.pushState(null, null, '/search/?' + $.param(form_values));
             fetch('/search', { method: "POST", headers: searchJs.headers, body: new FormData(form)})
-                .then((response) => response.text())
-                .then((text) => {
-                    searchJs.loader.css('display', 'none');
-                    searchJs.results.css('display', 'block');
-                    searchJs.results.html(text);
-                });
+                .then((response) => {
+                    if (response.ok()) {
+                        return response.text()
+                        .then((text) => {
+                            searchJs.loader.css('display', 'none');
+                            searchJs.results.css('display', 'block');
+                            searchJs.results.html(text);
+                        });
+
+                    } else {
+                        searchJs.loader.css('display', 'none');
+                        searchJs.error.css('display', 'block');
+                    }
+                })
+
         },
         matchVisibility: (filter, val) => {
             let matcher = $(filter.wrapper).nextAll('.match_type');
@@ -101,7 +112,8 @@ $(() => {
             const min = $("#year-slider").data('slider-min');
             const max = $("#year-slider").data('slider-max');
             if (val[0] == min && val[1] == max) {
-                return false;
+                const match_type = $(".year_match_type input:checked").val();
+                return (match_type == "NOT");
             } else {
                 return true;
             }
@@ -111,6 +123,13 @@ $(() => {
             if (searchJs.useYear()) {
                 matcher.show();
             } else {
+                let any = $('.match-any');
+                any.find('input').prop('checked', true);
+                any.addClass('active');
+
+                let none = $('.match-none');
+                none.find('input').prop('checked', false);
+                none.removeClass('active');
                 matcher.hide();
             }
         },

diff --git a/resources/lang/en/ui.php b/resources/lang/en/ui.php
@@ -108,6 +108,7 @@
         'match_any' => 'Any',
         'match_all' => 'All',
         'match_none' => 'None',
+        'error' => 'Something went wrong, please try again later!'
     ],
 
     'item' => [

diff --git a/resources/views/search.blade.php b/resources/views/search.blade.php
@@ -31,6 +31,12 @@
             <i class="far fa-5x fa-spinner fa-pulse"></i>
           </div>
         </div>
+        <div class="row text-center p-5" id="search-results-error" style="display: none">
+          <div class="col text-center">
+          <img style="max-height: 300px; max-width: 100%" src="{{ cdn_link('assets/banners/banner01.png') }}" alt="">
+          <p>{{__('ui.search.error')}}</p>
+          </div>
+        </div>
       </div>
     </div>
     </form>