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

<mat-card>
  <mat-card-title-group>
    <mat-card-title>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">
        <mat-form-field fxFlex="80">
          <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>
        <button mat-raised-button color="primary" (click)="show()" fxFlex="20">Show</button>
      </div>
      <mat-table #table [dataSource]="dataSource" formArrayName="attendances">

        <!-- Code Column -->
        <ng-container matColumnDef="code">
          <mat-header-cell *matHeaderCellDef class="right">Code</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{row.code}}</mat-cell>
        </ng-container>

        <!-- 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>

        <!-- 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="!form.controls.attendances.controls[i].pristine">new_releases</mat-icon>
            <mat-chip-list class="no-bg">
              <mat-chip *ngIf="row.hours.length" class="no-bg" [selected]="row.worked !== 'Error'"
                        [color]="row.worked === true ? 'primary' : 'warn'">
                {{row.hours}}
              </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>