brewman/overlord/src/app/employee-benefits/employee-benefits.component.html

<mat-card>
  <mat-card-title-group>
    <mat-card-title>Employee Benefits</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
        formGroupName="addRow"
        fxLayout="row"
        fxLayout.lt-md="column"
        fxLayoutGap="20px"
        fxLayoutGap.lt-md="0px"
      >
        <mat-form-field fxFlex="60">
          <input
            type="text"
            matInput
            #employeeElement
            placeholder="Employee"
            [matAutocomplete]="auto"
            formControlName="employee"
            autocomplete="off"
          />
          <mat-autocomplete
            #auto="matAutocomplete"
            autoActiveFirstOption
            [displayWith]="displayFn"
            (optionSelected)="employeeSelected($event)"
          >
            <mat-option *ngFor="let employee of employees | async" [value]="employee">{{
              employee.name
            }}</mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <mat-form-field fxFlex="15">
          <mat-label>Gross Salary</mat-label>
          <input
            type="text"
            matInput
            placeholder="Gross Salary"
            formControlName="grossSalary"
            autocomplete="off"
          />
        </mat-form-field>
        <mat-form-field fxFlex="15">
          <mat-label>Days Worked</mat-label>
          <input
            type="text"
            matInput
            placeholder="Days Worked"
            formControlName="daysWorked"
            autocomplete="off"
          />
        </mat-form-field>

        <button mat-raised-button color="primary" (click)="addRow()" fxFlex="10">Add</button>
      </div>
      <mat-table #table [dataSource]="dataSource">
        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
          <mat-cell *matCellDef="let row">{{ row.employee.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.employee.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.employee.costCentre.name }}</mat-cell>
        </ng-container>

        <!-- GrossSalary Column -->
        <ng-container matColumnDef="grossSalary">
          <mat-header-cell *matHeaderCellDef class="right">GrossSalary</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{
            row.grossSalary | currency: 'INR'
          }}</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>

        <!-- Esi Employee Column -->
        <ng-container matColumnDef="esiEmployee">
          <mat-header-cell *matHeaderCellDef class="right">Esi EE</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{
            row.esiEmployee | currency: 'INR'
          }}</mat-cell>
        </ng-container>

        <!-- Pf Employee Column -->
        <ng-container matColumnDef="pfEmployee">
          <mat-header-cell *matHeaderCellDef class="right">Pf EE</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{
            row.pfEmployee | currency: 'INR'
          }}</mat-cell>
        </ng-container>

        <!-- Esi Employer Column -->
        <ng-container matColumnDef="esiEmployer">
          <mat-header-cell *matHeaderCellDef class="right">Esi ER</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{
            row.esiEmployer | currency: 'INR'
          }}</mat-cell>
        </ng-container>

        <!-- Pf Employer Column -->
        <ng-container matColumnDef="pfEmployer">
          <mat-header-cell *matHeaderCellDef class="right">Pf ER</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{
            row.pfEmployer | currency: 'INR'
          }}</mat-cell>
        </ng-container>

        <!-- Action Column -->
        <ng-container matColumnDef="action">
          <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
          <mat-cell *matCellDef="let row" class="center">
            <button mat-icon-button color="warn" (click)="deleteRow(row)">
              <mat-icon>delete</mat-icon>
            </button>
          </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.allowed('post-vouchers')"
    >
      {{ 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>