Made new formula dialog more pretty
This commit is contained in:
parent
c87273fa1e
commit
8fc0dc16d4
@ -1,17 +1,13 @@
|
|||||||
<mat-dialog-content>
|
<mat-dialog-content>
|
||||||
<h3 mat-dialog-title>
|
<div class="mb-5">
|
||||||
<span *ngIf="data">Update</span>
|
<mat-form-field class="d-inline">
|
||||||
<span *ngIf="!data">Create</span> Formula
|
<input matInput placeholder="Formula Name" name="name" [(ngModel)]="name">
|
||||||
</h3>
|
|
||||||
<div class="mb-4">
|
|
||||||
<mat-form-field class="w-100">
|
|
||||||
<input matInput placeholder="Name" name="name" [(ngModel)]="name">
|
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<div class="text-right">
|
<div class="text-right">
|
||||||
<mat-checkbox [(ngModel)]="approved">Approved</mat-checkbox>
|
<mat-checkbox [(ngModel)]="approved">Approved</mat-checkbox>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="border-bottom w-100 py-2 text-center">
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-select placeholder="Component" [(ngModel)]="component">
|
<mat-select placeholder="Component" [(ngModel)]="component">
|
||||||
<mat-option *ngFor="let c of componentsList" [value]="c.name">
|
<mat-option *ngFor="let c of componentsList" [value]="c.name">
|
||||||
@ -30,30 +26,20 @@
|
|||||||
<mat-option value="lb">lb</mat-option>
|
<mat-option value="lb">lb</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<button mat-raised-button class="ml-3" (click)="add()">Add</button>
|
<button mat-raised-button color="primary" class="ml-3" (click)="add()" [disabled]="!component || !amount">Add</button>
|
||||||
</div>
|
</div>
|
||||||
<table class="w-100 table">
|
<div>
|
||||||
<thead>
|
<div class="border-bottom font-weight-bold d-flex w-100" style="border-width: 3px !important;">
|
||||||
<tr>
|
<div class="p-2" style="flex-grow: 1">Name</div>
|
||||||
<th>Name</th>
|
<div class="p-2">Quantity</div>
|
||||||
<th>Quantity</th>
|
</div>
|
||||||
<th style="width: 50px"></th>
|
<div *ngFor="let c of components; let i = index" class="border-bottom d-flex w-100 py-2">
|
||||||
</tr>
|
<div class="px-2" style="flex-grow: 1">{{c.component.name}}</div>
|
||||||
</thead>
|
<div class="px-2">{{c.quantity | convertFromG: unit}} {{unit}}</div>
|
||||||
<tbody>
|
</div>
|
||||||
<tr *ngFor="let c of components; let i = index">
|
</div>
|
||||||
<td>{{c.component.name}}</td>
|
<div class="text-right m-2">
|
||||||
<td>{{c.quantity | convertFromG: unit}} {{unit}}</td>
|
<strong>Total Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
|
||||||
<td>
|
|
||||||
<button mat-icon-button (click)="remove(i)">
|
|
||||||
<mat-icon>delete</mat-icon>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="text-right mb-3">
|
|
||||||
<strong>Yield: </strong>{{total() | convertFromG: unit}} {{unit}}
|
|
||||||
</div>
|
</div>
|
||||||
</mat-dialog-content>
|
</mat-dialog-content>
|
||||||
<mat-divider></mat-divider>
|
<mat-divider></mat-divider>
|
||||||
|
Loading…
Reference in New Issue
Block a user