teams: smoother surveys count (fixes #8110) (#8122)

Co-authored-by: dogi <dogi@users.noreply.github.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.72",
+  "version": "0.16.73",
   "myplanet": {
     "latest": "v0.22.29",
     "min": "v0.21.29"

src/app/surveys/surveys.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormGroup } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
@@ -34,6 +34,7 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
   surveys = new MatTableDataSource<any>();
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  @Output() surveyCount = new EventEmitter<number>();
   displayedColumns = (this.userService.doesUserHaveRole([ '_admin', 'manager' ]) ? [ 'select' ] : []).concat(
     [ 'name', 'taken', 'courseTitle', 'createdDate', 'action' ]
   );
@@ -97,7 +98,10 @@ export class SurveysComponent implements OnInit, AfterViewInit, OnDestroy {
       this.dialogsLoadingService.stop();
     });
     this.couchService.checkAuthorization(this.dbName).subscribe((isAuthorized) => this.isAuthorized = isAuthorized);
-    this.surveys.connect().subscribe(surveys => this.parentCount = surveys.filter(survey => survey.parent === true).length);
+    this.surveys.connect().subscribe(surveys => {
+      this.parentCount = surveys.filter(survey => survey.parent === true).length;
+      this.surveyCount.emit(surveys.length);
+    });
   }
 
   ngAfterViewInit() {

src/app/teams/teams-view.component.html

@@ -213,7 +213,10 @@ <h3 *ngIf="mode==='services'" class="margin-lr-3 ellipsis-title">{{configuration
           </ng-template>
         </mat-tab>
         <mat-tab i18n-label label="Surveys">
-          <planet-surveys [teamId]="teamId"></planet-surveys>
+          <ng-template mat-tab-label>
+            <ng-container i18n>Surveys</ng-container> ({{surveysCount}})
+          </ng-template>
+          <planet-surveys [teamId]="teamId" (surveyCount)="surveysCount = $event"></planet-surveys>
         </mat-tab>
         <mat-tab *ngIf="mode!=='services'" #applicantTab>
           <ng-template mat-tab-label>