open-learning-exchange/planet

<div class="action-buttons">
  <button mat-raised-button color="primary" i18n (click)="openEditTransactionDialog()" *ngIf="editable">Add Transaction</button>
  <mat-form-field>
    <input matInput [matDatepicker]="dateFilterStart" [(ngModel)]="startDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick Start Date">
    <mat-datepicker-toggle matSuffix [for]="dateFilterStart"></mat-datepicker-toggle>
    <mat-datepicker #dateFilterStart></mat-datepicker>
  </mat-form-field>
  <mat-form-field>
    <input matInput [matDatepicker]="dateFilterEnd" [(ngModel)]="endDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick End Date">
    <mat-datepicker-toggle matSuffix [for]="dateFilterEnd"></mat-datepicker-toggle>
    <mat-datepicker #dateFilterEnd></mat-datepicker>
  </mat-form-field>
  <button mat-raised-button color="primary" i18n (click)="resetDateFilter()" [disabled]="table.filter === ''">View All Transactions</button>
  <button class="margin-lr-10" color="accent" mat-raised-button i18n (click)="exportTableData()">
    Export Transactions
  </button>
</div>
<mat-card class="margin-lr" *ngIf="showBalanceWarning">
  <mat-icon color="accent">warning</mat-icon><span i18n>The current balance is negative!</span>
</mat-card>
<mat-table [dataSource]="table" *ngIf="!emptyTable; else emptyMessage">
  <ng-container matColumnDef="date">
    <mat-header-cell *matHeaderCellDef class="narrow-column" i18n>Date</mat-header-cell>
    <mat-cell *matCellDef="let element" class="narrow-column">{{ element.date === 'Total' ? element.date : (element.date | date) }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef i18n>Note</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.description }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="credit">
    <mat-header-cell *matHeaderCellDef class="narrow-column" i18n>Credits</mat-header-cell>
    <mat-cell *matCellDef="let element" class="narrow-column" [style.color]="'green'">{{ element.credit ? (element.credit | currency:this.curCode?.code:this.curCode?.symbol) : '' }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="debit">
    <mat-header-cell *matHeaderCellDef class="narrow-column" i18n>Debits</mat-header-cell>
    <mat-cell *matCellDef="let element" class="narrow-column" [style.color]="'red'">{{ element.debit ? (element.debit | currency:this.curCode?.code:this.curCode?.symbol) : '' }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="balance">
    <mat-header-cell *matHeaderCellDef class="narrow-column" i18n>Balance</mat-header-cell>
    <mat-cell *matCellDef="let element" [ngClass]="element.balance < 0 ? 'negative-balance' : 'narrow-column'" [style.color]="element.balance < 0 ? 'red' : 'black'">{{ element.balance | currency:this.curCode?.code:this.curCode?.symbol }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="action">
    <mat-header-cell *matHeaderCellDef class="narrow-column" i18n>Actions</mat-header-cell>
    <mat-cell *matCellDef="let element" class="narrow-column">
      <ng-container *ngIf="element.date !== 'Total'">
        <button mat-icon-button (click)="openEditTransactionDialog(element); $event.stopPropagation()"><mat-icon>edit</mat-icon></button>
        <button mat-icon-button (click)="openArchiveTransactionDialog(element); $event.stopPropagation()"><mat-icon>delete</mat-icon></button>
      </ng-container>
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<ng-template #emptyMessage>
  <p i18n>There are no transactions</p>
</ng-template>