Chore: Removed @angular/flex-layout and replaced it with tailwind.
Chore: Upgraded some packages
This commit is contained in:
@ -1,57 +1,35 @@
|
||||
<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
|
||||
<mat-card fxFlex>
|
||||
<div class="flex flex-auto flex-row justify-around content-center items-center lg:max-w-[50%]">
|
||||
<mat-card class="flex-auto">
|
||||
<mat-card-title-group>
|
||||
<mat-card-title>Product</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>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Code</mat-label>
|
||||
<input matInput placeholder="Code" formControlName="code" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-form-field fxFlex="80">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput #nameElement placeholder="Name" formControlName="name" />
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="20">
|
||||
<mat-form-field class="flex-auto basis-1/5">
|
||||
<mat-label>Fraction Units</mat-label>
|
||||
<input matInput placeholder="Fraction Units" formControlName="fractionUnits" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-checkbox formControlName="isPurchased">Is Purchased?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isSold">Is Sold?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-checkbox formControlName="isPurchased" class="flex-auto mr-5"
|
||||
>Is Purchased?</mat-checkbox
|
||||
>
|
||||
<mat-checkbox formControlName="isSold" class="flex-auto mr-5">Is Sold?</mat-checkbox>
|
||||
<mat-checkbox formControlName="isActive" class="flex-auto">Is Active?</mat-checkbox>
|
||||
</div>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
>
|
||||
<mat-form-field fxFlex>
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Product Type</mat-label>
|
||||
<mat-select placeholder="Product Group" formControlName="productGroup">
|
||||
<mat-option *ngFor="let pg of productGroups" [value]="pg.id">
|
||||
@ -63,25 +41,21 @@
|
||||
<h2>Stock Keeping Units</h2>
|
||||
<div
|
||||
formGroupName="addRow"
|
||||
fxLayout="row wrap"
|
||||
fxLayoutAlign="space-around start"
|
||||
fxLayout.lt-md="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutGap.lt-md="0px"
|
||||
class="flex flex-row flex-wrap justify-around content-start items-start sm:max-lg:flex-col"
|
||||
>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Units</mat-label>
|
||||
<input matInput placeholder="Units" formControlName="units" />
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Fraction</mat-label>
|
||||
<input matInput type="number" placeholder="Fraction" formControlName="fraction" />
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Yield</mat-label>
|
||||
<input matInput type="number" placeholder="Yield" formControlName="productYield" />
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@ -90,11 +64,13 @@
|
||||
formControlName="costPrice"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex>
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Sale Price</mat-label>
|
||||
<input matInput type="number" placeholder="Sale Price" formControlName="salePrice" />
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary" (click)="addRow()" fxFlex>Add</button>
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-table [dataSource]="dataSource" aria-label="Elements">
|
||||
|
||||
Reference in New Issue
Block a user