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

<mat-card>
  <mat-card-title-group>
    <mat-card-title>Employee Attendance</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"
        fxLayoutAlign="space-around start"
      >
        <mat-form-field fxFlex>
          <input
            matInput
            [matDatepicker]="startDate"
            (focus)="startDate.open()"
            placeholder="Start Date"
            formControlName="startDate"
            autocomplete="off"
          />
          <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
          <mat-datepicker #startDate></mat-datepicker>
        </mat-form-field>
        <mat-form-field fxFlex>
          <input
            matInput
            [matDatepicker]="finishDate"
            (focus)="finishDate.open()"
            placeholder="Finish Date"
            formControlName="finishDate"
            autocomplete="off"
          />
          <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
          <mat-datepicker #finishDate></mat-datepicker>
        </mat-form-field>
      </div>
      <div
        fxLayout="row"
        fxLayout.lt-md="column"
        fxLayoutGap="20px"
        fxLayoutGap.lt-md="0px"
        fxLayoutAlign="space-around start"
      >
        <mat-form-field fxFlex="80">
          <input
            type="text"
            matInput
            #employeeElement
            placeholder="Employee"
            [matAutocomplete]="auto"
            formControlName="employee"
            autocomplete="off"
          />
          <mat-autocomplete
            #auto="matAutocomplete"
            autoActiveFirstOption
            [displayWith]="displayFn"
            (optionSelected)="selected($event)"
          >
            <mat-option *ngFor="let employee of employees | async" [value]="employee">{{
              employee.name
            }}</mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <button fxFlex="20" mat-raised-button color="primary" (click)="show()">Show</button>
      </div>
      <mat-table #table [dataSource]="dataSource" formArrayName="attendances">
        <!-- Date Column -->
        <ng-container matColumnDef="date">
          <mat-header-cell *matHeaderCellDef class="center">Date</mat-header-cell>
          <mat-cell *matCellDef="let row" class="center">{{ row.date }}</mat-cell>
        </ng-container>

        <!-- Status Column -->
        <ng-container matColumnDef="status">
          <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
          <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" fxFlex>
            <mat-select formControlName="attendanceType" name="attendanceType">
              <mat-option *ngFor="let at of attendanceTypes" [value]="at.id">
                {{ at.name }}
              </mat-option>
            </mat-select>
          </mat-cell>
        </ng-container>

        <!-- Prints Column -->
        <ng-container matColumnDef="prints">
          <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
          <mat-cell *matCellDef="let row; let i = index" class="no-bg">
            {{ row.prints }}
            <mat-icon *ngIf="!$any(form.controls.attendances).controls[i].pristine"
              >new_releases</mat-icon
            >
            <mat-chip-list class="no-bg">
              <mat-chip
                *ngIf="row.hoursWorked.length"
                class="no-bg"
                [selected]="true"
                [color]="row.fullDay === true ? 'primary' : 'warn'"
              >
                {{ row.hoursWorked }}
              </mat-chip>
            </mat-chip-list>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row
          *matRowDef="let row; let i = index; columns: displayedColumns"
          [class]="getClass(i)"
        ></mat-row>
      </mat-table>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">
      Save
    </button>
  </mat-card-actions>
</mat-card>