brewman/overlord/src/app/incentive/incentive.component.html

<mat-card>
  <mat-card-title-group>
    <mat-card-title>Incentives</mat-card-title>
  </mat-card-title-group>
  <mat-card-content>
    <form [formGroup]="form" fxLayout="column">
      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
        <mat-form-field fxFlex>
          <input matInput [matDatepicker]="date" (focus)="date.open()" placeholder="Date" formControlName="date"
                 autocomplete="off">
          <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
          <mat-datepicker #date></mat-datepicker>
        </mat-form-field>
      </div>
      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
        Total Incentive: <strong>{{voucher.incentive | number:'1.2-2'}}</strong>
        Total Points: <strong>{{totalPoints() | number:'1.2-2'}}</strong>
        Point Value: <strong>{{pointValue() | number:'1.2-2'}}</strong>
      </div>
      <mat-table #table [dataSource]="dataSource" formArrayName="incentives">

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
          <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
        </ng-container>

        <!-- Designation Column -->
        <ng-container matColumnDef="designation">
          <mat-header-cell *matHeaderCellDef>Designation</mat-header-cell>
          <mat-cell *matCellDef="let row">{{row.designation}}</mat-cell>
        </ng-container>

        <!-- Department Column -->
        <ng-container matColumnDef="department">
          <mat-header-cell *matHeaderCellDef>Department</mat-header-cell>
          <mat-cell *matCellDef="let row">{{row.department}}</mat-cell>
        </ng-container>

        <!-- DaysWorked Column -->
        <ng-container matColumnDef="daysWorked">
          <mat-header-cell *matHeaderCellDef class="right">DaysWorked</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{row.daysWorked | number:'1.2-2'}}</mat-cell>
        </ng-container>

        <!-- Points Column -->
        <ng-container matColumnDef="points">
          <mat-header-cell *matHeaderCellDef class="center" fxFlex>Service Points</mat-header-cell>
          <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" fxFlex>
            <mat-form-field>
              <button matPrefix (click)="less(row, i)">
                <mat-icon>remove</mat-icon>
              </button>
              <input matInput formControlName="points" autocomplete="off" (change)="change(row, i)">
              <button matSuffix color="warn" (click)="more(row, i)">
                <mat-icon>add</mat-icon>
              </button>
            </mat-form-field>
          </mat-cell>
        </ng-container>

        <!-- Amount Column -->
        <ng-container matColumnDef="amount">
          <mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{amount(row) | currency:'INR'}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
      {{(voucher.id) ? 'Update' : 'Save'}}
    </button>
    <button mat-raised-button (click)="post()" *ngIf="voucher.id"
            [disabled]="voucher.posted || auth.user.perms.indexOf('Post Vouchers') === -1">
      {{(voucher.posted) ? 'Posted' : 'Post'}}
    </button>
    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
      Delete
    </button>
  </mat-card-actions>
  <mat-card-subtitle *ngIf="voucher.id">
    Created on <strong>{{voucher.creationDate | localTime}}</strong> and
    Last Edited on <strong>{{voucher.lastEditDate | localTime}}</strong>
    by <strong>{{voucher.user.name}}</strong>. {{(voucher.poster) ? 'Posted by ' + voucher.poster : ''}}
  </mat-card-subtitle>
</mat-card>