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

<mat-card>
  <mat-card-title-group>
    <mat-card-title>Purchase</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" (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>
        <mat-form-field fxFlex="40">
          <input type="text" matInput placeholder="Account" #accountElement [matAutocomplete]="autoA"
                 formControlName="account" autocomplete="off">
          <mat-hint *ngIf="accBal">
            Balance as on Date: <strong>{{accBal.date | currency:'INR' | accounting}}</strong> /
            Final balance: <strong>{{accBal.total | currency:'INR' | accounting}}</strong>
          </mat-hint>
          <mat-autocomplete #autoA="matAutocomplete" autoActiveFirstOption [displayWith]="displayAccount"
                            (optionSelected)="accountSelected($event)">
            <mat-option *ngFor="let account of accounts | async" [value]="account">{{account.name}}</mat-option>
          </mat-autocomplete>
        </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="50">
          <input type="text" matInput placeholder="Product" #productElement [matAutocomplete]="autoP"
                 formControlName="product" autocomplete="off">
          <mat-autocomplete #autoP="matAutocomplete" autoActiveFirstOption [displayWith]="displayProductName"
                            (optionSelected)="productSelected($event)">
            <mat-option *ngFor="let product of products | async" [value]="product">{{product.name}}</mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <mat-form-field fxFlex="10">
          <mat-label>Quantity</mat-label>
          <input type="text" matInput placeholder="Quantity" formControlName="quantity" autocomplete="off">
        </mat-form-field>
        <mat-form-field fxFlex="10">
          <mat-label>Price</mat-label>
          <input type="text" matInput placeholder="Price" formControlName="price" autocomplete="off">
        </mat-form-field>
        <mat-form-field fxFlex="10">
          <mat-label>Tax</mat-label>
          <input type="text" matInput placeholder="Tax" formControlName="tax" autocomplete="off">
        </mat-form-field>
        <mat-form-field fxFlex="10">
          <mat-label>Discount</mat-label>
          <input type="text" matInput placeholder="Discount" formControlName="discount" autocomplete="off">
        </mat-form-field>

        <button mat-raised-button color="primary" (click)="addRow()" fxFlex="10">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.product.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>

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

        <!-- Discount Column -->
        <ng-container matColumnDef="discount">
          <mat-header-cell *matHeaderCellDef class="right">Discount</mat-header-cell>
          <mat-cell *matCellDef="let row" class="right">{{row.discount | percent:'1.2-2'}}</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 (click)="editRow(row)">
              <mat-icon>edit</mat-icon>
            </button>
            <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>
      <mat-form-field>
        <mat-label>Narration</mat-label>
        <textarea matInput matTextareaAutosize matAutosizeMinRows="5" placeholder="Narration"
                  formControlName="narration"></textarea>
      </mat-form-field>
      <div fxLayout="row" fxLayoutGap="0.5%" fxLayoutAlign="center">
        <div class="img-container" fxFlex="20%" *ngFor="let item of voucher.files">
          <img [src]="item.thumbnail" (click)="zoomImage(item)">
          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
            <mat-icon>delete</mat-icon>
          </button>
        </div>
        <div class="img-container" fxFlex="20%">
          <label ng-href for="fileUp">
            <img
              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg==">
          </label>
          <input type="file" id="fileUp" multiple accept="image/*" style="display: none;"
                 (change)="detectFiles($event)">
        </div>
      </div>
    </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.user.perms.indexOf('Post Vouchers') === -1">
      {{(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>