open-learning-exchange/planet

<button i18n mat-stroked-button (click)="addTask()" *ngIf="editable">Add a task</button>
<mat-button-toggle-group
  class="margin-lr-5"
  (change)="setFilter($event.value)"
  #filterGroup="matButtonToggleGroup"
  *ngIf="editable">
  <mat-button-toggle value="self" [checked]="filter === 'self'" [disabled]="myTasks.length === 0" i18n>
    myTasks
  </mat-button-toggle>
  <mat-button-toggle value="all" [checked]="filter === 'all'" i18n>
    All Tasks
  </mat-button-toggle>
</mat-button-toggle-group>
<mat-action-list [disableRipple]="!editable">
  <button mat-list-item *ngFor="let task of filteredTasks; trackBy: trackById" (click)="openTaskDetail(task)" [disabled]="!editable">
    <mat-checkbox [checked]="task.completed" [disabled]="!editable" (change)="toggleTaskComplete(task)" (click)="$event.stopPropagation()"></mat-checkbox>
    <p matLine>{{task.title}}</p>
    <p matLine><ng-container i18n>Deadline:</ng-container> {{task.deadline | date}} {{task.deadline | date: 'shortTime'}}</p>
    <p matLine *ngIf="task.completed"><ng-container i18n>Completed:</ng-container> {{task.completedTime | date}} {{task.completedTime | date: 'shortTime'}}</p>
    <img (click)="openMemberDialog(task.assignee); $event.stopPropagation()" matTooltip="{{task.assignee | assigneeName}}" *ngIf="task.assignee" matListAvatar [src]="
      task.assignee.attachmentDoc ?
        imgUrlPrefix + '/attachments/' + task.assignee.attachmentDoc._id + '/' + (task.assignee.attachmentDoc._attachments.img ? 'img' : 'img_') :
        task.assignee.avatar ?
        imgUrlPrefix + task.assignee.avatar :
        'assets/image.png'
    ">
    <ng-container *ngIf="editable">
      <button mat-icon-button (click)="addTask(task); $event.stopPropagation()"><mat-icon>edit</mat-icon></button>
      <button mat-icon-button (click)="archiveClick(task); $event.stopPropagation()"><mat-icon>delete</mat-icon></button>
      <button mat-icon-button [matMenuTriggerFor]="assigneeMenu" (click)="openAssigneeMenu($event)"><mat-icon>add</mat-icon></button>
    </ng-container>
    <mat-menu #assigneeMenu="matMenu">
      <button *ngIf="task.assignee" (click)="addAssignee(task)" mat-menu-item><mat-icon>clear</mat-icon> <ng-container i18n>Remove</ng-container> {{task.assignee | assigneeName}}</button>
      <button *ngFor="let assignee of (assignees | filterAssignee: task.assignee)" mat-menu-item (click)="addAssignee(task, assignee)">{{assignee | assigneeName}}</button>
    </mat-menu>
  </button>
</mat-action-list>