add allow advancedSearch with empty search

a.k.a. filters on all videos

also added a badge showing the rough number of active filters

4 files changed, 26 insertions, 4 deletions

diff --git a/client/src/app/search/advanced-search.model.ts b/client/src/app/search/advanced-search.model.ts
index 48616a9ae..033fa9bba 100644
--- a/client/src/app/search/advanced-search.model.ts
+++ b/client/src/app/search/advanced-search.model.ts
@@ -110,6 +110,19 @@ export class AdvancedSearch {
     }
   }
 
+  size () {
+    let acc = 0
+
+    const obj = this.toUrlObject()
+    for (const k of Object.keys(obj)) {
+      if (k === 'sort') continue // Exception
+
+      if (obj[k] !== undefined) acc++
+    }
+
+    return acc
+  }
+
   private intoArray (value: any) {
     if (!value) return undefined
 
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 61a05895e..3a87ea1de 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -13,7 +13,10 @@
         [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="collapseBasic"
       >
         <span class="icon icon-filter"></span>
-        <ng-container i18n>Filters</ng-container>
+        <ng-container i18n>
+          Filters
+          <span *ngIf="numberOfFilters() > 0" class="badge badge-secondary">{{ numberOfFilters() }}</span>
+        </ng-container>
       </div>
     </div>
 
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index 475fdd277..b86b5083a 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -30,7 +30,7 @@ export class SearchComponent implements OnInit, OnDestroy {
   currentSearch: string
 
   private subActivatedRoute: Subscription
-  private isInitialLoad = true
+  private isInitialLoad = false // set to false to show the search filters on first arrival
   private firstSearch = true
 
   private channelsPerPage = 2
@@ -137,6 +137,10 @@ export class SearchComponent implements OnInit, OnDestroy {
     this.updateUrlFromAdvancedSearch()
   }
 
+  numberOfFilters () {
+    return this.advancedSearch.size()
+  }
+
   private resetPagination () {
     this.pagination.currentPage = 1
     this.pagination.totalItems = null
@@ -150,9 +154,11 @@ export class SearchComponent implements OnInit, OnDestroy {
   }
 
   private updateUrlFromAdvancedSearch () {
+    const search = (this.currentSearch && this.currentSearch !== '') ? this.currentSearch : undefined
+
     this.router.navigate([], {
       relativeTo: this.route,
-      queryParams: Object.assign({}, this.advancedSearch.toUrlObject(), { search: this.currentSearch })
+      queryParams: Object.assign({}, this.advancedSearch.toUrlObject(), { search })
     })
   }
 }
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 9c7464873..0a9c9a903 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -23,7 +23,7 @@
 //@import '~bootstrap/scss/card';
 //@import '~bootstrap/scss/breadcrumb';
 //@import '~bootstrap/scss/pagination';
-//@import '~bootstrap/scss/badge';
+@import '~bootstrap/scss/badge';
 //@import '~bootstrap/scss/jumbotron';
 @import '~bootstrap/scss/alert';
 //@import '~bootstrap/scss/progress';