src/app/users/users-table.component.html
<div [ngClass]="containerClass">
<mat-table #table [dataSource]="usersTable" [trackBy]="trackByFn" matSort [matSortActive]="matSortActive" matSortDirection="desc">
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (change)="$event ? selection.toggle(row.doc) : null"
(click)="$event.stopPropagation()"
[checked]="isSelected(row.doc)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="profile">
<mat-header-cell *matHeaderCellDef i18n>Profile Image</mat-header-cell>
<mat-cell *matCellDef="let element">
<div *ngIf="element.imageSrc; else noImage">
<img class="profile-image" [src]="element.imageSrc">
</div>
<ng-template #noImage>
<img class="profile-image" src="assets/avatar.png">
</ng-template>
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header="name" i18n>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.fullName}}</mat-cell>
</ng-container>
<ng-container matColumnDef="planet">
<mat-header-cell *matHeaderCellDef mat-sort-header="planet" i18n>Planet</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.planet.nameDoc?.name || element.planet.doc.name}}
<mat-chip class="planet-chip-label margin-lr-5 chip-no-style" i18n>{ element.planet.doc.planetType, select, community {Community} nation {Nation} center {Earth}}</mat-chip>
</mat-cell>
</ng-container>
<ng-container matColumnDef="visitCount">
<mat-header-cell *matHeaderCellDef mat-sort-header="visitCount" i18n>No. of Visits</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.visitCount}}</mat-cell>
</ng-container>
<ng-container matColumnDef="joinDate">
<mat-header-cell *matHeaderCellDef mat-sort-header="joinDate" i18n>Joined Date</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.doc.joinDate | date: 'mediumDate'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="lastLogin">
<mat-header-cell *matHeaderCellDef mat-sort-header="lastLogin" i18n>Last Login</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.lastLogin | date: 'mediumDate'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="startDate">
<mat-header-cell *matHeaderCellDef mat-sort-header="startDate" i18n>Date Started</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.activityDates.createdDate | date: 'mediumDate'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="recentDate">
<mat-header-cell *matHeaderCellDef mat-sort-header="recentDate" i18n>Most Recent Activity</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.activityDates.updatedDate | date: 'mediumDate'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="contact">
<mat-header-cell *matHeaderCellDef i18n>Emergency Contact</mat-header-cell>
<mat-cell *matCellDef="let element">
<div *ngIf="element.health?.profile?.emergencyContact; else noneBlock">
<p><b i18n>Name:</b> {{element.health?.profile.emergencyContactName}}</p>
<p><b i18n>Type:</b> {{element.health?.profile.emergencyContactType}}</p>
<p>{{element.health?.profile.emergencyContact}}</p>
</div>
<ng-template #noneBlock>
<span *ngIf="element.health" i18n>None</span>
<mat-progress-bar mode="buffer" *ngIf="!element.health"></mat-progress-bar>
</ng-template>
</mat-cell>
</ng-container>
<ng-container matColumnDef="birthDate">
<mat-header-cell *matHeaderCellDef mat-sort-header="birthDate" i18n>Birthdate</mat-header-cell>
<mat-cell *matCellDef="let element" i18n>{{(element.doc.birthDate | date: 'mediumDate') || 'Missing'}}</mat-cell>
</ng-container>
<ng-container matColumnDef="lastVisit">
<mat-header-cell *matHeaderCellDef mat-sort-header="lastVisit" i18n>Last Examination</mat-header-cell>
<mat-cell *matCellDef="let element">
{{(element.health?.lastVisit | date: 'mediumDate')}}
<span *ngIf="element.health && !element.health?.lastVisit" i18n>Never</span>
<mat-progress-bar mode="buffer" *ngIf="!element.health"></mat-progress-bar>
</mat-cell>
</ng-container>
<ng-container class="member-action-buttons" matColumnDef="roles">
<mat-header-cell *matHeaderCellDef i18n>Roles</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-chip-list>
<mat-chip class="chip-no-style" *ngIf="element.doc.roles.length > 0 || element.doc.isUserAdmin" i18n>Learner</mat-chip>
<ng-container *ngFor="let role of element.doc.roles; index as i">
<mat-chip class="chip-no-style" *ngIf="role !== 'learner'" [removable]="!element.doc.isUserAdmin && !isDialog" (removed)="removeRole(element.doc,i)">
<planet-role [role]="role"></planet-role>
<mat-icon matChipRemove *ngIf="isUserAdmin && !element.doc.isUserAdmin && !isDialog">cancel</mat-icon>
</mat-chip>
</ng-container>
<mat-chip class="chip-no-style" *ngIf="element.doc.isUserAdmin && element.doc.roles.length === 0" i18n>Admin</mat-chip>
</mat-chip-list>
<span *ngIf="!element.doc.isUserAdmin && element.doc.roles.length === 0" i18n>Inactive</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef i18n>Action</mat-header-cell>
<mat-cell *matCellDef="let element">
<div [ngClass]="{'horizontal-align button-container': isMobile}">
<span *ngIf="isUserAdmin && filterType === 'local' && !isDialog">
<span *ngIf="!element.doc.isUserAdmin">
<button mat-raised-button color="primary" *ngIf="element.doc.roles.length === 0" (click)="setRoles(element.doc, element.doc.oldRoles || ['learner'], $event)">
<mat-icon>lock_open</mat-icon>
<label *ngIf="!isMobile">Activate</label>
</button>
<button mat-raised-button color="primary" *ngIf="element.doc.roles.length > 0" (click)="setRoles(element.doc, [], $event)">
<mat-icon>lock</mat-icon>
<label *ngIf="!isMobile">Deactivate</label>
</button>
</span>
<button mat-raised-button color="primary" (click)="deleteClick(element.doc, $event)" *ngIf="!element.doc.isUserAdmin || element.doc.roles.length > 0" i18n>
<mat-icon>delete</mat-icon>
<label *ngIf="!isMobile"> Delete </label>
</button>
<button *ngIf="!element.doc.isUserAdmin && filterType === 'local'" (click)="toggleStatus($event, element.doc, 'admin', false)" mat-raised-button color="primary" i18n>
<mat-icon>vertical_align_top</mat-icon>
<label *ngIf="!isMobile"> Promote </label>
</button>
<button *ngIf="element.doc.isUserAdmin && filterType === 'local' && (element.doc.name + '@' + configuration.code) !== configuration.adminName"
(click)="toggleStatus($event, element.doc, element.doc.roles.length === 0 ? 'admin' : 'manager', true)" mat-raised-button color="primary" i18n>
<mat-icon>vertical_align_bottom</mat-icon>
<label *ngIf="!isMobile"> Demote </label>
</button>
</span>
<a class="visibility-cell" (click)="gotoProfileView(element.doc.name)" mat-raised-button color="primary" i18n>
<mat-icon>visibility</mat-icon>
<label *ngIf="!isMobile"> View Profile </label>
</a>
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row [ngClass]="{'cursor-pointer':!isDialog}" *matRowDef= "let row; columns: displayedColumns;" (click)="gotoProfileView(row.doc.name)" [ngClass]="{highlight:isSelected(row.doc)}"></mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="50"
[pageSizeOptions]="[5, 10, 20, 50, 100, 200]"
(page)="onPaginateChange($event)">
</mat-paginator>
</div>