70 lines
2.8 KiB
HTML
70 lines
2.8 KiB
HTML
<mat-card>
|
|
<mat-card-header>
|
|
<mat-card-title-group>
|
|
<mat-card-title>Recipes</mat-card-title>
|
|
<a mat-icon-button [href]="'/api/recipes/xlsx?t=' + period.id">
|
|
<mat-icon>save_alt</mat-icon>
|
|
</a>
|
|
<a mat-icon-button href="/api/recipes/nutrition">
|
|
<mat-icon>save_alt</mat-icon>
|
|
</a>
|
|
<a mat-button [routerLink]="['/recipes', 'new']">
|
|
<mat-icon>add_box</mat-icon>
|
|
Add
|
|
</a>
|
|
</mat-card-title-group>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<form [formGroup]="form" class="flex flex-col">
|
|
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
|
<mat-form-field class="flex-auto">
|
|
<mat-select formControlName="period">
|
|
<mat-option *ngFor="let p of periods" [value]="p"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field class="flex-auto">
|
|
<mat-label>Product Type</mat-label>
|
|
<mat-select formControlName="productGroup" (selectionChange)="filterProductGroup($event.value)">
|
|
<mat-option>-- All Products --</mat-option>
|
|
<mat-option *ngFor="let mc of productGroups" [value]="mc.id">
|
|
{{ mc.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</form>
|
|
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
|
<!-- Name Column -->
|
|
<ng-container matColumnDef="name">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
|
<mat-cell *matCellDef="let row"
|
|
><a [routerLink]="['/recipes', row.id]">{{ row.sku.name }}</a></mat-cell
|
|
>
|
|
</ng-container>
|
|
<!-- Yield Column -->
|
|
<ng-container matColumnDef="yield">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Yield</mat-header-cell>
|
|
<mat-cell *matCellDef="let row">{{ row.recipeYield }} {{ row.units }}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Date Column -->
|
|
<ng-container matColumnDef="date">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
|
<mat-cell *matCellDef="let row">{{ row.date }}</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Source Column -->
|
|
<ng-container matColumnDef="source">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Source</mat-header-cell>
|
|
<mat-cell *matCellDef="let row">{{ row.source }}</mat-cell>
|
|
</ng-container>
|
|
|
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
|
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
|
</mat-table>
|
|
|
|
<mat-paginator #paginator [length]="0" [pageIndex]="0" [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
|
|
</mat-paginator>
|
|
</mat-card-content>
|
|
</mat-card>
|