teams: smoother finances loading message (fixes #9085) (#9092)

Co-authored-by: dogi <[email protected]>

Author: jessewashburn

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.20.29",
+  "version": "0.20.30",
   "myplanet": {
     "latest": "v0.32.3",
     "min": "v0.31.3"

src/app/community/community.component.html

@@ -100,7 +100,7 @@
           <planet-community-list></planet-community-list>
         </mat-tab>
         <mat-tab i18n-label label="Finances" *ngIf="isLoggedIn">
-          <planet-teams-view-finances [finances]="finances" [team]="team" (financesChanged)="dataChanged()" [editable]="isCommunityLeader && !planetCode"></planet-teams-view-finances>
+          <planet-teams-view-finances [finances]="finances" [isLoading]="financesLoading" [team]="team" (financesChanged)="dataChanged()" [editable]="isCommunityLeader && !planetCode"></planet-teams-view-finances>
         </mat-tab>
         <mat-tab i18n-label label="Reports" *ngIf="isLoggedIn">
           <planet-teams-reports [reports]="reports" [editable]="isCommunityLeader && !planetCode" [team]="team" (reportsChanged)="dataChanged()"></planet-teams-reports>

src/app/community/community.component.ts

@@ -47,6 +47,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
   filteredNews: any[] = [];
   links: any[] = [];
   finances: any[] = [];
+  financesLoading = false;
   councillors: any[] = [];
   reports: any[] = [];
   showNewsButton = true;
@@ -192,6 +193,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
         this.team = this.teamObject(this.planetCode);
         this.teamId = this.team._id;
         this.requestNewsAndUsers(this.planetCode);
+        this.financesLoading = true;
         return this.getLinks(this.planetCode);
       }),
       switchMap((res) => {
@@ -301,6 +303,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
     this.deleteMode = this.deleteMode && this.links.length !== 0;
     this.finances = finances;
     this.reports = reports;
+  this.financesLoading = false;
   }
 
   dataChanged() {

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

@@ -21,6 +21,7 @@
 <mat-card class="margin-lr" *ngIf="showBalanceWarning">
   <div class="warning-container"><mat-icon color="accent">warning</mat-icon><span i18n>The current balance is negative!</span></div>
 </mat-card>
+<ng-container *ngIf="!isLoading; else loadingTpl">
 <mat-table [dataSource]="table" *ngIf="!emptyTable; else emptyMessage">
   <ng-container matColumnDef="date">
     <mat-header-cell *matHeaderCellDef class="narrow-column" i18n>Date</mat-header-cell>
@@ -53,7 +54,11 @@
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-</mat-table>
+  </mat-table>
+</ng-container>
+<ng-template #loadingTpl>
+  <p i18n>Loading transactions...</p>
+</ng-template>
 <ng-template #emptyMessage>
   <p i18n>There are no transactions</p>
 </ng-template>

src/app/teams/teams-view-finances.component.ts

@@ -24,6 +24,7 @@ export class TeamsViewFinancesComponent implements OnInit, OnChanges {
   @Input() team: any = {};
   @Input() getMembers;
   @Input() editable = true;
+  @Input() isLoading = false;
   @Output() financesChanged = new EventEmitter<void>();
   table = new MatTableDataSource<any>();
   displayedColumns = [ 'date', 'description', 'credit', 'debit', 'balance' ];
@@ -59,16 +60,17 @@ export class TeamsViewFinancesComponent implements OnInit, OnChanges {
       if (transactions.length > 0 && transactions[0].filter !== this.filterString()) {
         transactions[0] = this.setTransactionsTable(transactions)[0];
       }
-      this.showBalanceWarning = (this.finances && this.finances.length) === (this.table.filteredData.length - 1) &&
-        transactions[0].balance < 0;
+      const hasRows = this.table.filteredData && this.table.filteredData.length > 0;
+      this.showBalanceWarning = hasRows && (this.finances && this.finances.length) === (this.table.filteredData.length - 1) &&
+        this.table.filteredData[0].balance < 0;
     });
   }
 
   ngOnChanges() {
     if (this.editable !== this.displayedColumns.indexOf('action') > -1) {
       this.displayedColumns = [ ...this.displayedColumns, this.editable ? 'action' : [] ].flat();
     }
-    if (this.finances) {
+    if (!this.isLoading && this.finances) {
       this.table.data = this.setTransactionsTable(this.finances);
     }
   }

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

@@ -161,7 +161,7 @@ <h4 i18n>Members ({{members.length}})</h4>
           <ng-template mat-tab-label>
             <ng-container i18n>Finances</ng-container> ({{ financesCount }})
           </ng-template>
-          <planet-teams-view-finances [finances]="finances" [team]="team" [getMembers]="getMembers" (financesChanged)="resetData()" [editable]="userStatus === 'member'"></planet-teams-view-finances>
+          <planet-teams-view-finances [isLoading]="financesLoading" [finances]="finances" [team]="team" [getMembers]="getMembers" (financesChanged)="resetData()" [editable]="userStatus === 'member'"></planet-teams-view-finances>
         </mat-tab>
       </ng-container>
       <mat-tab *ngIf="mode==='enterprise'" i18n-label label="Reports">

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

@@ -59,6 +59,7 @@ export class TeamsViewComponent implements OnInit, AfterViewChecked, OnDestroy {
   readonly dbName = 'teams';
   leaderDialog: any;
   finances: any[] = [];
+  financesLoading = true;
   reports: any[] = [];
   tasks: any[];
   tabSelectedIndex = 0;
@@ -195,8 +196,10 @@ export class TeamsViewComponent implements OnInit, AfterViewChecked, OnDestroy {
 
   getMembers() {
     if (this.team === undefined) {
+      this.financesLoading = false;
       return of([]);
     }
+    this.financesLoading = true;
     return this.teamsService.getTeamMembers(this.team, true).pipe(switchMap((docs: any[]) => {
       const src = (member) => {
         const { attachmentDoc, userId, userPlanetCode, userDoc } = member;
@@ -220,7 +223,7 @@ export class TeamsViewComponent implements OnInit, AfterViewChecked, OnDestroy {
       this.setStatus(this.team, this.leader, this.userService.get());
       this.setTasks(this.tasks);
       return this.teamsService.getTeamResources(docs.filter(doc => doc.docType === 'resourceLink'));
-    }), map(resources => this.resources = resources));
+    }), map(resources => this.resources = resources), finalize(() => this.financesLoading = false));
   }
 
   setTasks(tasks = []) {