Removed all Material Cards
Removed Tailwind Moved to scss Moved to material theme 3
This commit is contained in:
@@ -1,129 +1,125 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Recipe Detail</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form" class="flex flex-col">
|
||||
<div class="flex flex-row justify-around content-start items-start">
|
||||
<mat-form-field class="flex-auto mr-5">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Source</mat-label>
|
||||
<input type="text" matInput formControlName="source" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-4/5 mr-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#productElement
|
||||
[matAutocomplete]="autoP"
|
||||
formControlName="product"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#autoP="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayProduct"
|
||||
(optionSelected)="productSelected($event)"
|
||||
>
|
||||
@for (product of products | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/5">
|
||||
<mat-label>Yield</mat-label>
|
||||
<input type="text" matInput formControlName="recipeYield" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div formGroupName="addRow" class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
|
||||
<mat-form-field class="flex-auto basis-2/5 mr-5">
|
||||
<mat-label>Ingredient</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#ingredientElement
|
||||
[matAutocomplete]="autoI"
|
||||
formControlName="ingredient"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#autoI="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayIngredient"
|
||||
(optionSelected)="ingredientSelected($event)"
|
||||
>
|
||||
@for (product of ingredients | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }} ({{ product.fractionUnits }})</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1/5 mr-5">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-[30%] mr-5">
|
||||
<mat-label>Description</mat-label>
|
||||
<input type="text" matInput formControlName="description" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<h2>Recipe Detail</h2>
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-[10%]">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Ingredient Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.product.name }} {{ row.description }}</mat-cell>
|
||||
</ng-container>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Date</mat-label>
|
||||
<input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Source</mat-label>
|
||||
<input type="text" matInput formControlName="source" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto basis-4-5">
|
||||
<mat-label>Product</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#productElement
|
||||
[matAutocomplete]="autoP"
|
||||
formControlName="product"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#autoP="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayProduct"
|
||||
(optionSelected)="productSelected($event)"
|
||||
>
|
||||
@for (product of products | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }}</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-5">
|
||||
<mat-label>Yield</mat-label>
|
||||
<input type="text" matInput formControlName="recipeYield" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div formGroupName="addRow" class="row-container">
|
||||
<mat-form-field class="flex-auto basis-2-5">
|
||||
<mat-label>Ingredient</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#ingredientElement
|
||||
[matAutocomplete]="autoI"
|
||||
formControlName="ingredient"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<mat-autocomplete
|
||||
#autoI="matAutocomplete"
|
||||
autoActiveFirstOption
|
||||
[displayWith]="displayIngredient"
|
||||
(optionSelected)="ingredientSelected($event)"
|
||||
>
|
||||
@for (product of ingredients | async; track product) {
|
||||
<mat-option [value]="product">{{ product.name }} ({{ product.fractionUnits }})</mat-option>
|
||||
}
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-1-5">
|
||||
<mat-label>Quantity</mat-label>
|
||||
<input type="text" matInput formControlName="quantity" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto basis-30">
|
||||
<mat-label>Description</mat-label>
|
||||
<input type="text" matInput formControlName="description" autocomplete="off" />
|
||||
</mat-form-field>
|
||||
|
||||
<!-- 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' }} {{ row.product.fractionUnits }}</mat-cell
|
||||
>
|
||||
</ng-container>
|
||||
<button mat-raised-button color="primary" (click)="addRow()" class="flex-auto basis-10">Add</button>
|
||||
</div>
|
||||
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
||||
<!-- Ingredient Column -->
|
||||
<ng-container matColumnDef="product">
|
||||
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{ row.product.name }} {{ row.description }}</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 tabindex="-1" color="warn" (click)="deleteRow(row)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</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' }} {{ row.product.fractionUnits }}</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 class="flex-auto">
|
||||
<mat-label>Instructions</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="instructions"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Garnishing</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="garnishing"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Plating</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="plating"></textarea>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-raised-button (click)="save()" color="primary" class="mr-5">
|
||||
{{ item.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<!-- 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 tabindex="-1" 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 class="flex-auto">
|
||||
<mat-label>Instructions</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="instructions"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Garnishing</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="garnishing"></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-label>Plating</mat-label>
|
||||
<textarea matInput matAutosizeMinRows="5" formControlName="plating"></textarea>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
||||
<div class="row-container">
|
||||
<button mat-raised-button (click)="save()" color="primary" class="">
|
||||
{{ item.id ? 'Update' : 'Save' }}
|
||||
</button>
|
||||
@if (item.id) {
|
||||
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@ import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -34,7 +33,6 @@ import { RecipeDetailDatasource } from './recipe-detail-datasource';
|
||||
templateUrl: './recipe-detail.component.html',
|
||||
styleUrls: ['./recipe-detail.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
|
||||
@@ -1,73 +1,68 @@
|
||||
<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">
|
||||
@for (p of periods; track p) {
|
||||
<mat-option [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>
|
||||
@for (mc of productGroups; track mc) {
|
||||
<mat-option [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>
|
||||
<h2 class="row-container space-between">
|
||||
<span>Recipes</span>
|
||||
<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>
|
||||
</h2>
|
||||
|
||||
<!-- 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>
|
||||
<form [formGroup]="form" class="flex-col">
|
||||
<div class="row-container">
|
||||
<mat-form-field class="flex-auto">
|
||||
<mat-select formControlName="period">
|
||||
@for (p of periods; track p) {
|
||||
<mat-option [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>
|
||||
@for (mc of productGroups; track mc) {
|
||||
<mat-option [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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 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>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
||||
</mat-table>
|
||||
<!-- 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-paginator #paginator [length]="0" [pageIndex]="0" [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Component, inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatOptionModule } from '@angular/material/core';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
@@ -22,7 +22,6 @@ import { RecipeListDatasource } from './recipe-list-datasource';
|
||||
templateUrl: './recipe-list.component.html',
|
||||
styleUrls: ['./recipe-list.component.css'],
|
||||
imports: [
|
||||
MatCardModule,
|
||||
MatIconModule,
|
||||
RouterModule,
|
||||
ReactiveFormsModule,
|
||||
@@ -33,6 +32,7 @@ import { RecipeListDatasource } from './recipe-list-datasource';
|
||||
MatTableModule,
|
||||
MatSortModule,
|
||||
MatPaginatorModule,
|
||||
MatButtonModule,
|
||||
],
|
||||
})
|
||||
export class RecipeListComponent implements OnInit {
|
||||
|
||||
Reference in New Issue
Block a user