open-learning-exchange/planet

<mat-card-header>
  <img mat-card-avatar [src]="member?.avatar" class="cursor-pointer" (click)="openMemberDialog(member)">
  <a mat-card-title class="cursor-pointer" (click)="openMemberDialog(member)">{{ member?.userDoc?.fullName || member?.userDoc?.firstName || member?.name }}</a>
  <mat-card-subtitle>
    <p class="primary-text-color" *ngIf="member?.userPlanetCode !== planetCode"><ng-container i18n>Member of Planet</ng-container> {{member?.userPlanetCode}}</p>
    <span i18n *ngIf="member?.userId === user._id && member?.userPlanetCode === planetCode">(You)</span>{{' '}}
    <span i18n *ngIf="member?.userId === teamLeader?.userId && member?.userPlanetCode === teamLeader?.userPlanetCode">(Team Leader)</span>{{' '}}<span *ngIf="visits">({{ visits?.count || 0 }} <ng-container i18n>visits</ng-container>)</span>
    <p *ngIf="visits && (userStatus === 'member' || user.isUserAdmin)"><ng-container i18n>Last visit:</ng-container> {{ visits?.recentTime | date }}</p>
    <p class="primary-text-color" *ngIf="member?.doc?.leadershipTitle">{{member?.doc?.leadershipTitle}}</p>
    <p class="primary-text-color" *ngIf="member?.role">{{member?.role}}</p>
  </mat-card-subtitle>
  <button *ngIf="actionMenu.length" class="top-right-icon" mat-icon-button [matMenuTriggerFor]="memberMenu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #memberMenu="matMenu">
    <button mat-menu-item (click)="openDialog({ member: member, change: 'remove' })" *ngIf="actionMenu.indexOf('remove') > -1">
      <mat-icon>clear</mat-icon>
      <span i18n>Remove</span>
    </button>
    <button *ngIf="actionMenu.indexOf('leader') > -1"
      (click)="openDialog({ member: member, change: 'leader' })" mat-menu-item>
      <mat-icon>person</mat-icon>
      <span i18n>Make Leader</span>
    </button>
    <button *ngIf="actionMenu.indexOf('title') > -1"
      (click)="openDialog({ member: member, change: 'title' })" mat-menu-item>
      <mat-icon>edit</mat-icon>
      <span *ngIf="memberType === 'community'" i18n>{ titleChangeText, select, Add {Add Title} Change {Change Title}}</span>
      <span *ngIf="memberType === 'other'" i18n>{ hasRole, select, true {Change Role} false {Add Role}}</span>
    </button>
  </mat-menu>
</mat-card-header>
<mat-card-content *ngIf="member?.tasks && member?.tasks.length > 0">
  <span class="mat-caption" i18n>Tasks</span>
  <mat-selection-list (selectionChange)="toggleTask($event)" [disabled]="userStatus !== 'member'" [disableRipple]="userStatus !== 'member'">
    <mat-list-option checkboxPosition="before" *ngFor="let task of member?.tasks" [selected]="task.completed" [value]="task">
      <p class="ellipsis-title">{{task.title}}</p>
    </mat-list-option>
  </mat-selection-list>
</mat-card-content>