teams: smoother list default sorting (fixes #9931) (#9932)

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

Author: Mutugiii

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.22.82",
+  "version": "0.22.83",
   "myplanet": {
     "latest": "v0.55.45",
     "min": "v0.53.91"

src/app/teams/teams.component.html

@@ -44,7 +44,7 @@
   </div>
 
   <div class="primary-link-hover" [ngClass]="{'view-container view-table view-full-height':!isDialog}">
-    <mat-table #table class="responsive-table" [dataSource]="teams" matSortActive="visitLog.visitCount" matSortDirection="desc" matSort [matSortDisableClear]="true">
+    <mat-table #table class="responsive-table" [dataSource]="teams" matSort [matSortDisableClear]="true">
       <ng-container matColumnDef="doc.name">
         <mat-header-cell *matHeaderCellDef mat-sort-header="doc.name" i18n>Name</mat-header-cell>
         <mat-cell *matCellDef="let element">
@@ -85,17 +85,8 @@ <h3 class="team-name">
           </ng-container>
         </mat-cell>
       </ng-container>
-      <ng-container matColumnDef="membership">
-        <mat-header-cell *matHeaderCellDef mat-sort-header="membership" hidden>Membership</mat-header-cell>
-        <mat-cell *matCellDef="let element" hidden>{{ element.userStatus }}</mat-cell>
-      </ng-container>
       <ng-container matColumnDef="action">
-        <mat-header-cell *matHeaderCellDef i18n>
-          <span>Action</span>
-          <button mat-button *ngIf="showUserTeamsFilter" (click)="sortbyUserTeams()" i18n-title title="Toggle myTeams">
-            <mat-icon>check</mat-icon>
-          </button>
-        </mat-header-cell>
+        <mat-header-cell *matHeaderCellDef i18n>Action</mat-header-cell>
         <mat-cell *matCellDef="let element">
           <div class="button-container" [ngClass]="{'horizontal-align': isMobile}">
             <ng-container [ngSwitch]="element.userStatus" *ngIf="user.isUserAdmin || user.roles.length">

src/app/teams/teams.component.ts

@@ -86,7 +86,6 @@ export class TeamsComponent implements OnInit, AfterViewInit {
   get tableData() {
     return this.teams;
   }
-  showUserTeamsFilter = false;
 
   constructor(
     private userService: UserService,
@@ -110,16 +109,7 @@ export class TeamsComponent implements OnInit, AfterViewInit {
       filterSpecificFieldsByWord([ 'doc.name' ]),
       (data, filter) => filterSpecificFields([ 'userStatus' ])(data, this.myTeamsFilter === 'on' ? 'member' : '')
     ]);
-    this.teams.sortingDataAccessor = (item, property) => {
-      if (property === 'membership') {
-        switch (item.userStatus) {
-          case 'member': return 2;
-          case 'requesting': return 1;
-          default: return 0;
-        }
-      }
-      return deepSortingDataAccessor(item, property);
-    };
+    this.teams.sortingDataAccessor = deepSortingDataAccessor;
     this.couchService.checkAuthorization('teams').subscribe((isAuthorized) => this.isAuthorized = isAuthorized);
     this.displayedColumns = this.isDialog ?
       [ 'doc.name', 'visitLog.lastVisit', 'visitLog.visitCount', 'doc.teamType' ] :
@@ -160,8 +150,6 @@ export class TeamsComponent implements OnInit, AfterViewInit {
       }
       this.dialogsLoadingService.stop();
       this.isLoading = false;
-      this.showUserTeamsFilter = this.myTeamsFilter === 'off' &&
-       this.teams.data.some(e => e.userStatus === 'member' || e.userStatus === 'requesting');
     }, (error) => {
       if (this.userNotInShelf) {
         this.displayedColumns = [ 'doc.name', 'visitLog.lastVisit', 'visitLog.visitCount', 'doc.teamType' ];
@@ -219,6 +207,20 @@ export class TeamsComponent implements OnInit, AfterViewInit {
         default:
           return { ...team, userStatus: 'unrelated' };
       }
+    }).sort((teamA, teamB) => {
+      const membershipOrder = { member: 2, requesting: 1, unrelated: 0 };
+      const membershipDifference = membershipOrder[teamB.userStatus] - membershipOrder[teamA.userStatus];
+      if (membershipDifference !== 0) {
+        return membershipDifference;
+      }
+
+      const lastVisitA = teamA.visitLog.lastVisit || 0;
+      const lastVisitB = teamB.visitLog.lastVisit || 0;
+      if (lastVisitB !== lastVisitA) {
+        return lastVisitB - lastVisitA;
+      }
+
+      return teamA.doc.name.localeCompare(teamB.doc.name);
     });
   }
 
@@ -342,19 +344,6 @@ export class TeamsComponent implements OnInit, AfterViewInit {
     this.teams.filter = filterValue || (this.myTeamsFilter ? ' ' : '');
   }
 
-  sortbyUserTeams() {
-    if (!this.teams.data.some(e => e.userStatus === 'member' || e.userStatus === 'requesting')) {
-      return;
-    }
-
-    this.sort.active = 'membership';
-    this.sort.direction = 'desc';
-    this.sort.sortChange.emit({
-      active: this.sort.active,
-      direction: this.sort.direction
-    });
-  }
-
   getTeamTypeLabel(team: any): string {
     return team.doc.type === 'enterprise' ? $localize`enterprise` : $localize`team`;
   }