Personal-Test-Ground-NG/src/app/ffb/ffb-harvest.component.html

<mat-card>
  <mat-card-title>FFB Harvests</mat-card-title>

  <mat-card-content>
    <div class="controls">
      <button mat-flat-button color="primary" (click)="startCreate()">
        <mat-icon>add</mat-icon> New
      </button>

      <mat-form-field appearance="outline" class="small">
        <mat-label>Filter site</mat-label>
        <input matInput (keyup.enter)="filterBySite($any($event.target).value)" placeholder="type site then Enter">
      </mat-form-field>

      <button mat-button color="accent" (click)="load()">Refresh</button>
    </div>

    <div class="table-wrap" *ngIf="harvests?.length; else noData">
      <table mat-table [dataSource]="harvests" class="mat-elevation-z2">
        <ng-container matColumnDef="harvestDate">
          <th mat-header-cell *matHeaderCellDef>Date</th>
          <td mat-cell *matCellDef="let el">{{ el.harvestDate | date: 'yyyy-MM-dd' }}</td>
        </ng-container>

        <ng-container matColumnDef="site">
          <th mat-header-cell *matHeaderCellDef>Site</th>
          <td mat-cell *matCellDef="let el">{{ el.site }}</td>
        </ng-container>

        <ng-container matColumnDef="phase">
          <th mat-header-cell *matHeaderCellDef>Phase</th>
          <td mat-cell *matCellDef="let el">{{ el.phase }}</td>
        </ng-container>

        <ng-container matColumnDef="block">
          <th mat-header-cell *matHeaderCellDef>Block</th>
          <td mat-cell *matCellDef="let el">{{ el.block }}</td>
        </ng-container>

        <ng-container matColumnDef="weight">
          <th mat-header-cell *matHeaderCellDef>Weight</th>
          <td mat-cell *matCellDef="let el">{{ el.weight }} {{ el.weightUOM }}</td>
        </ng-container>

        <ng-container matColumnDef="quantity">
          <th mat-header-cell *matHeaderCellDef>Qty</th>
          <td mat-cell *matCellDef="let el">{{ el.quantity }} {{ el.quantityUOM }}</td>
        </ng-container>

        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let el">
            <button mat-icon-button color="accent" (click)="showDetails(el._id)" title="Details">
              <mat-icon>visibility</mat-icon>
            </button>
            <button mat-icon-button color="warn" (click)="remove(el._id)" title="Delete">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

    <ng-template #noData>
      <p>No harvest data found.</p>
    </ng-template>

    <div class="chart" *ngIf="harvests && harvests.length">
      <canvas baseChart [data]="chartData" [options]="chartOptions" chartType="line"></canvas>
    </div>

    <div id="ffb-form" class="form-area" *ngIf="editing">
      <h3>Create Harvest</h3>
      <form [formGroup]="form" (ngSubmit)="submit()">

        <div class="row">
          <mat-form-field appearance="outline">
            <mat-label>Harvest Date</mat-label>
            <input matInput [matDatepicker]="picker" formControlName="harvestDate" placeholder="Choose a date" />
            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>Site</mat-label>
            <input matInput formControlName="site">
          </mat-form-field>
        </div>

        <div class="row">
          <mat-form-field appearance="outline">
            <mat-label>Phase</mat-label>
            <input matInput formControlName="phase">
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>Block</mat-label>
            <input matInput formControlName="block">
          </mat-form-field>
        </div>

        <div class="row">
          <mat-form-field appearance="outline">
            <mat-label>Harvester</mat-label>
            <input matInput formControlName="harvester">
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>Days of Work</mat-label>
            <input matInput type="number" formControlName="daysOfWork">
          </mat-form-field>
        </div>

        <div class="row">
          <mat-form-field appearance="outline">
            <mat-label>Weight</mat-label>
            <input matInput type="number" formControlName="weight">
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>Weight UOM</mat-label>
            <mat-select formControlName="weightUOM">
              <mat-option value="kg">kg</mat-option>
              <mat-option value="ton">ton</mat-option>
            </mat-select>
          </mat-form-field>
        </div>

        <div class="row">
          <mat-form-field appearance="outline">
            <mat-label>Quantity</mat-label>
            <input matInput type="number" formControlName="quantity">
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label>Quantity UOM</mat-label>
            <mat-select formControlName="quantityUOM">
              <mat-option value="bunch">bunch</mat-option>
              <mat-option value="kg">kg</mat-option>
            </mat-select>
          </mat-form-field>
        </div>

        <div class="form-actions">
          <button mat-flat-button color="primary" type="submit">Create</button>
          <button mat-button type="button" (click)="cancel()">Cancel</button>
        </div>
      </form>
    </div>

  </mat-card-content>
</mat-card>