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

<mat-card>
  <mat-card-title-group>
    <mat-card-title>Issue</mat-card-title>
  </mat-card-title-group>
  <mat-card-content>
    <form [formGroup]="form" fxLayout="column">
      <div
        fxLayout="row"
        fxLayoutAlign="space-around start"
        fxLayout.lt-md="column"
        fxLayoutGap="20px"
        fxLayoutGap.lt-md="0px"
      >
        <mat-form-field fxFlex="40">
          <input
            matInput
            [matDatepicker]="date"
            placeholder="Date"
            formControlName="date"
            autocomplete="off"
            #dateElement
            (focus)="dateElement.select()"
          />
          <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
          <mat-datepicker #date></mat-datepicker>
        </mat-form-field>
        <mat-form-field fxFlex="40">
          <mat-select formControlName="source">
            <mat-option *ngFor="let costCentre of costCentres" [value]="costCentre.id">
              {{ costCentre.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field fxFlex="40">
          <mat-select formControlName="destination">
            <mat-option *ngFor="let costCentre of costCentres" [value]="costCentre.id">
              {{ costCentre.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field fxFlex="20">
          <mat-label>Amount</mat-label>
          <span matPrefix>₹ </span>
          <input type="text" matInput formControlName="amount" />
        </mat-form-field>
      </div>

      <div
        formGroupName="addRow"
        fxLayout="row"
        fxLayoutAlign="space-around start"
        fxLayout.lt-md="column"
        fxLayoutGap="20px"
        fxLayoutGap.lt-md="0px"
      >
        <mat-form-field fxFlex="55">
          <input
            type="text"
            matInput
            placeholder="Product"
            #batchElement
            [matAutocomplete]="autoB"
            formControlName="batch"
            autocomplete="off"
          />
          <mat-autocomplete
            #autoB="matAutocomplete"
            autoActiveFirstOption
            [displayWith]="displayFn"
            (optionSelected)="batchSelected($event)"
          >
            <mat-option *ngFor="let batch of batches | async" [value]="batch">{{
              batch.name
            }}</mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <mat-form-field fxFlex="25">
          <mat-label>Quantity</mat-label>
          <input
            type="text"
            matInput
            placeholder="Quantity"
            formControlName="quantity"
            autocomplete="off"
          />
        </mat-form-field>

        <button mat-raised-button color="primary" (click)="addRow()" fxFlex="20">Add</button>
      </div>
      <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
        <!-- Product Column -->
        <ng-container matColumnDef="product">
          <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
          <mat-cell *matCellDef="let row">{{ row.batch.sku.name }}</mat-cell>
        </ng-container>

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

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

        <!-- Rate Column -->
        <ng-container matColumnDef="rate">
          <mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</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">{{
            row.amount | 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 tabindex="-1" (click)="editRow(row)">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button tabindex="-1" 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>
      <mat-form-field>
        <mat-label>Narration</mat-label>
        <textarea
          matInput
          matAutosizeMinRows="5"
          placeholder="Narration"
          formControlName="narration"
        ></textarea>
      </mat-form-field>
    </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 color="warn" (click)="newVoucher()" *ngIf="voucher.id">
      New Entry
    </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-title>Other issues for the day</mat-card-title>
  <mat-card-footer>
    <mat-table #table [dataSource]="gridDataSource" matSort aria-label="Elements">
      <!-- Source Column -->
      <ng-container matColumnDef="source">
        <mat-header-cell *matHeaderCellDef class="right">Source</mat-header-cell>
        <mat-cell *matCellDef="let row" class="right">{{ row.source }}</mat-cell>
      </ng-container>

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

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

      <!-- Load Column -->
      <ng-container matColumnDef="load">
        <mat-header-cell *matHeaderCellDef class="center">Load</mat-header-cell>
        <mat-cell *matCellDef="let row" class="center">
          <button mat-icon-button (click)="goToVoucher(row.id)">
            <mat-icon>restore</mat-icon>
          </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="gridColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: gridColumns"></mat-row>
    </mat-table>
  </mat-card-footer>
</mat-card>