53 lines
2.4 KiB
HTML
53 lines
2.4 KiB
HTML
<mat-dialog-content>
|
|
<div class="mb-5">
|
|
<mat-form-field class="d-inline">
|
|
<input matInput placeholder="Formula Name" name="name" [(ngModel)]="name" (keyup)="checkExists($event.target.value)">
|
|
<mat-hint *ngIf="exists" class="text-danger">This formula already exists</mat-hint>
|
|
</mat-form-field>
|
|
<div class="text-right">
|
|
<mat-checkbox [(ngModel)]="approved">Approved</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
<div class="border-bottom w-100 py-2 text-center">
|
|
<mat-form-field>
|
|
<mat-select placeholder="Component" [(ngModel)]="component">
|
|
<mat-option *ngFor="let c of componentsList" [value]="c.name">
|
|
{{c.name}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field style="width: 75px">
|
|
<input matInput type="number" placeholder="Amount" min="1" [(ngModel)]="amount">
|
|
</mat-form-field>
|
|
<mat-form-field style="width: 40px">
|
|
<mat-select placeholder="Unit" [(ngModel)]="unit">
|
|
<mat-option value="g">g</mat-option>
|
|
<mat-option value="oz">oz</mat-option>
|
|
<mat-option value="kg">kg</mat-option>
|
|
<mat-option value="lb">lb</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<button mat-raised-button color="primary" class="ml-3" (click)="add()" [disabled]="!component || !amount">Add</button>
|
|
</div>
|
|
<div>
|
|
<div class="border-bottom font-weight-bold d-flex w-100" style="border-width: 3px !important;">
|
|
<div class="p-2" style="flex-grow: 1">Name</div>
|
|
<div class="p-2">Quantity</div>
|
|
</div>
|
|
<div *ngFor="let c of components; let i = index" class="border-bottom d-flex w-100 py-2">
|
|
<div class="px-2" style="flex-grow: 1">{{c.component.name}}</div>
|
|
<div class="px-2">{{c.quantity | convertFromG: unit}} {{unit}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right m-2 mb-5">
|
|
<strong>Total Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
|
|
</div>
|
|
</mat-dialog-content>
|
|
<mat-divider></mat-divider>
|
|
<mat-dialog-actions class="justify-content-end">
|
|
<button mat-button type="submit" form="createForm" (click)="submit()" [disabled]="components.length < 1 || !name || exists">
|
|
<span *ngIf="data">Update</span>
|
|
<span *ngIf="!data">Create</span>
|
|
</button>
|
|
</mat-dialog-actions>
|