From 07fdbc14b68a9960fab236dce2504d619d8fdb4a Mon Sep 17 00:00:00 2001
From: Luke <lukas.trombach@auckland.ac.nz>
Date: Wed, 19 Jan 2022 14:47:44 +1300
Subject: [PATCH] added filter counter to tab labels

---
 .../search-filters.component.html             | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/research-hub-web/src/app/components/layout/search-filters/search-filters.component.html b/research-hub-web/src/app/components/layout/search-filters/search-filters.component.html
index 113a5c67c..e6b969d1b 100644
--- a/research-hub-web/src/app/components/layout/search-filters/search-filters.component.html
+++ b/research-hub-web/src/app/components/layout/search-filters/search-filters.component.html
@@ -1,6 +1,13 @@
 <div class="search-filters-container">
   <mat-tab-group>
-    <mat-tab [label]="'Categories'">
+    <mat-tab
+      [label]="
+        'Categories' +
+        (activeFilters.category.length > 0
+          ? ' (' + activeFilters.category.length + ')'
+          : '')
+      "
+    >
       <div class="list-container">
         <mat-selection-list #categories [(ngModel)]="activeFilters.category">
           <ng-container *ngFor="let category of allCategories">
@@ -14,7 +21,14 @@
         </mat-selection-list>
       </div>
     </mat-tab>
-    <mat-tab [label]="'Activities'">
+    <mat-tab
+      [label]="
+        'Activities' +
+        (activeFilters.stage.length > 0
+          ? ' (' + activeFilters.stage.length + ')'
+          : '')
+      "
+    >
       <div class="list-container">
         <mat-selection-list #stages [(ngModel)]="activeFilters.stage">
           <mat-list-option
@@ -27,7 +41,14 @@
         </mat-selection-list>
       </div>
     </mat-tab>
-    <mat-tab [label]="'Organisations'">
+    <mat-tab
+      [label]="
+        'Organisations' +
+        (activeFilters.relatedOrgs.length > 0
+          ? ' (' + activeFilters.relatedOrgs.length + ')'
+          : '')
+      "
+    >
       <div class="list-container">
         <mat-selection-list #stages [(ngModel)]="activeFilters.relatedOrgs">
           <mat-list-option
@@ -101,7 +122,12 @@
 
     <span style="flex: 1 1 auto"></span>
 
-    <button id="search" mat-raised-button color="primary" (click)="onSearch($event)">
+    <button
+      id="search"
+      mat-raised-button
+      color="primary"
+      (click)="onSearch($event)"
+    >
       Search
     </button>
   </div>