open-learning-exchange/planet

<mat-toolbar>
  <button mat-icon-button (click)="goBack()">
    <mat-icon>arrow_back</mat-icon>
  </button>
  <span i18n>Surveys</span>
  <span class="toolbar-fill"></span>
  <mat-icon class="input-icon">search</mat-icon>
  <mat-form-field class="font-size-1">
    <input matInput (keyup)="applyFilter($event.target.value)" i18n-placeholder placeholder="Type title to search...">
  </mat-form-field>
</mat-toolbar>

<div class="space-container primary-link-hover">
  <mat-toolbar class="primary-color font-size-1">
    <button mat-mini-fab (click)="routeToEditSurvey('add')" *ngIf="isAuthorized" >
      <mat-icon>add</mat-icon>
    </button>
    <span class="toolbar-fill"></span>
    <ng-container *planetAuthorizedRoles="'manager'">
      <button mat-button (click)="deleteSelected()" [disabled]="!selection.selected.length" *ngIf="!emptyData">
        <mat-icon aria-hidden="true" class="margin-lr-3">delete_forever</mat-icon><span i18n>Delete</span>
        <span *ngIf="selection?.selected?.length"> ({{selection?.selected?.length}})</span>
      </button>
    </ng-container>
  </mat-toolbar>
  <div class="view-container view-full-height view-table" *ngIf="!emptyData; else notFoundMessage">
    <mat-table #table [dataSource]="surveys" matSort matSortActive="createdDate" matSortDirection="desc" [matSortDisableClear]="true">
      <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._id) : null"
            [checked]="selection.isSelected(row._id)"
            *ngIf="!row.parent === true">
          </mat-checkbox>
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header="name" i18n>Survey</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="taken">
        <mat-header-cell *matHeaderCellDef mat-sort-header="taken" i18n>Number of Times Taken</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.taken}}</mat-cell>
      </ng-container>
      <ng-container matColumnDef="courseTitle">
        <mat-header-cell *matHeaderCellDef mat-sort-header="courseTitle" i18n>Course Linked</mat-header-cell>
        <mat-cell *matCellDef="let element"><span class="cursor-pointer course-title" *ngIf="element.course" [routerLink]="['/courses/view', element.course._id]">{{element.courseTitle}}</span></mat-cell>
      </ng-container>
      <ng-container matColumnDef="createdDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header="createdDate" i18n>Created/Updated on</mat-header-cell>
        <mat-cell *matCellDef="let element">
          {{element.createdDate | date: 'mediumDate'}}
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="action">
        <mat-header-cell *matHeaderCellDef i18n>Action</mat-header-cell>
        <mat-cell *matCellDef="let element">
          <ng-container *ngIf="!element.parent === true">
            <button mat-raised-button color="primary" (click)="routeToEditSurvey('update', element._id)" i18n><mat-icon>edit</mat-icon> Edit Survey</button>
            <button mat-raised-button color="primary" [disabled]="!element.questions.length" (click)="openSendSurveyDialog(element)" i18n><mat-icon>send</mat-icon> Send Survey</button>
            <button mat-raised-button color="primary" [disabled]="!element.questions.length" (click)="recordSurvey(element)"
              i18n-matTooltip matTooltip="Record survey information from a person who is not a member of {{configuration.name}}" i18n>
              <mat-icon>fiber_manual_record</mat-icon> Record Survey
            </button>
          </ng-container>
          <div i18n-matTooltip matTooltip="There is no data to export" [matTooltipDisabled]="!!element.taken">
            <button mat-raised-button color="primary" [disabled]="!element.taken" [matMenuTriggerFor]="exportMenu"  i18n><mat-icon>move_to_inbox</mat-icon> Export Survey</button>
            <mat-menu #exportMenu="matMenu">
              <button mat-menu-item (click)="exportCSV(element)" i18n>Excel (CSV)</button>
              <button mat-menu-item (click)="exportPdf(element)" i18n>Print (PDF)</button>
            </mat-menu>
          </div>
        </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator #paginator
      [pageSize]="50"
      [pageSizeOptions]="[5, 10, 20, 50, 100, 200]"
      (page)="onPaginateChange($event)">
    </mat-paginator>
    </div>
    <ng-template #notFoundMessage>
      <div class="view-container" i18n>No Survey Found</div>
    </ng-template>
</div>