src/app/teams/teams.component.html
<mat-toolbar>
<mat-toolbar-row>
<button mat-icon-button [routerLink]="[ '..' ]" *ngIf="!isDialog"><mat-icon>arrow_back</mat-icon></button>
<span i18n>{ mode, select,
team {{ myTeamsFilter, select, on {myTeams} off {Teams} }}
enterprise {Enterprises}
}</span>
<span class="toolbar-fill"></span>
<ng-container *ngIf="!isMobile">
<ng-container *ngTemplateOutlet="searchView"></ng-container>
</ng-container>
<button mat-icon-button *ngIf="isMobile" (click)="this.showFiltersRow = !this.showFiltersRow" ><mat-icon>filter_list</mat-icon></button>
</mat-toolbar-row>
<mat-toolbar-row *ngIf="showFiltersRow">
<ng-container *ngIf="isMobile">
<ng-container *ngTemplateOutlet="searchView"></ng-container>
</ng-container>
</mat-toolbar-row>
</mat-toolbar>
<ng-template #searchView>
<span class="toolbar-fill"></span>
<mat-icon>search</mat-icon>
<mat-form-field class="font-size-1">
<input matInput (keyup)="applyFilter($event.target.value)" [(ngModel)]="filter" i18n-placeholder placeholder="Type name to search...">
</mat-form-field>
<button mat-raised-button color="primary" (click)="resetSearch()" [disabled]="teams.filter === ' '"><span i18n>Clear</span></button>
</ng-template>
<div [ngClass]="{'space-container':!isDialog}">
<mat-toolbar class="primary-color font-size-1" *ngIf="!isDialog">
<ng-container *ngIf="isAuthorized">
<button mat-mini-fab (click)="addTeam()"><mat-icon>add</mat-icon></button>
<span class="toolbar-fill"></span>
<div class="margin-lr-3" *ngIf="mode==='team'">
<button mat-stroked-button routerLink='/teams/users' i18n>All Members</button>
</div>
</ng-container>
</mat-toolbar>
<div class="primary-link-hover" *ngIf="!emptyData; else notFoundMessage" [ngClass]="{'view-container view-table view-full-height':!isDialog}">
<mat-table #table [dataSource]="teams" matSortActive="visitLog.visitCount" matSortDirection="desc" 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">
<h3>
{{element.doc.name}}
<mat-icon class="margin-lr-3" i18n-title title="Joined Team" [inline]="true" *ngIf="element.userStatus=='member'">check</mat-icon>
</h3>
</mat-cell>
</ng-container>
<ng-container matColumnDef="visitLog.lastVisit">
<mat-header-cell *matHeaderCellDef mat-sort-header="visitLog.lastVisit" i18n>Most recent visit</mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.visitLog.lastVisit | date: 'medium') || 'N/A'}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="visitLog.visitCount">
<mat-header-cell *matHeaderCellDef mat-sort-header="visitLog.visitCount" i18n>Total visits from last 30 days</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.visitLog.visitCount}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="doc.teamType">
<mat-header-cell *matHeaderCellDef mat-sort-header="doc.teamType" i18n>Type</mat-header-cell>
<mat-cell *matCellDef="let element">
<ng-container [ngSwitch]="element.doc.teamType">
<ng-container *ngSwitchCase="'local'" i18n>Local</ng-container>
<ng-container *ngSwitchCase="'sync'">
<ng-container *ngIf="planetCode === element.doc.teamPlanetCode" i18n>
{planetType, select, community {Connected with Nation} nation {Connected with Earth}}
</ng-container>
<ng-container *ngIf="planetCode !== element.doc.teamPlanetCode">
<ng-container i18n>Connected with</ng-container> {{element.teamPlanetName}}
</ng-container>
</ng-container>
</ng-container>
</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef i18n>Action</mat-header-cell>
<mat-cell *matCellDef="let element" class>
<div [ngClass]="{'horizontal-align button-container': isMobile}">
<button *planetAuthorizedRoles="''" mat-raised-button color="primary" class="margin-lr-3" (click)="archiveClick(element.doc); $event.stopPropagation()">
<mat-icon>delete_forever</mat-icon>
<label *ngIf="!isMobile" i18n> Delete </label>
</button>
<ng-container [ngSwitch]="element.userStatus" *ngIf="user.isUserAdmin || user.roles.length">
<ng-container *ngSwitchCase="'member'">
<ng-container *ngIf="!element.isLeader">
<button mat-raised-button color="primary" class="margin-lr-3" (click)="openLeaveDialog(element.doc, element.membershipDoc); $event.stopPropagation()">
<mat-icon>remove_circle</mat-icon>
<label *ngIf="!isMobile" i18n> Leave </label>
</button>
</ng-container>
<button *ngIf="element.isLeader" mat-raised-button color="primary" (click)="addTeam(element.doc); $event.stopPropagation()">
<mat-icon>edit</mat-icon>
<label *ngIf="!isMobile" i18n> Edit </label>
</button>
</ng-container>
<button *ngSwitchCase="'unrelated'" mat-raised-button color="primary" class="margin-lr-3" (click)="requestToJoin(element.doc); $event.stopPropagation()">
<mat-icon>add_circle</mat-icon>
<label *ngIf="!isMobile" i18n> Request to Join </label>
</button>
<button *ngSwitchCase="'requesting'" mat-raised-button color="primary" disabled>
<mat-icon>hourglass_empty</mat-icon>
<label *ngIf="!isMobile" i18n> Request pending </label>
</button>
</ng-container>
<button mat-raised-button color="primary" planetFeedback [feedbackOf]="{'state': mode + 's', 'item': element.doc._id}" (click)="$event.stopPropagation()">
<mat-icon>feedback</mat-icon>
<label *ngIf="!isMobile" i18n> Feedback </label>
</button>
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row (click)="teamClick(row.doc._id, row.doc.teamType)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<div *ngIf="userNotInShelf" i18n style="text-align: center;">
Oops ... Error: no full access in Teams and Enterprises (data missing) ... please contact the manager of this site
</div>
<mat-paginator #paginator
[pageSize]="50"
[pageSizeOptions]="[5, 10, 20, 50, 100, 200]">
</mat-paginator>
</div>
<ng-template #notFoundMessage>
<div class="view-container" i18n>No { mode, select, team {Teams} enterprise {Enterprises} } Found</div>
</ng-template>
</div>