128 lines
5.0 KiB
HTML
128 lines
5.0 KiB
HTML
<form [formGroup]="recipeFormGroup" (submit)="onSubmit($event)">
|
|
<h3>Basic Info</h3>
|
|
<mat-form-field>
|
|
<mat-label>Title</mat-label>
|
|
<input matInput [formControl]="recipeFormGroup.controls.title" />
|
|
</mat-form-field>
|
|
<mat-form-field>
|
|
<mat-label>Slug</mat-label>
|
|
<input matInput [formControl]="recipeFormGroup.controls.slug" />
|
|
</mat-form-field>
|
|
|
|
<div class="ingredients-container">
|
|
<h3>Ingredients</h3>
|
|
|
|
<table
|
|
#ingredientsTable
|
|
mat-table
|
|
[dataSource]="ingredientModels()"
|
|
cdkDropList
|
|
(cdkDropListDropped)="onIngredientDrop($event)"
|
|
>
|
|
<ng-container matColumnDef="reorder">
|
|
<th mat-header-cell *matHeaderCellDef></th>
|
|
<td mat-cell *matCellDef>
|
|
<fa-icon [icon]="faBars"></fa-icon>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="amount">
|
|
<th mat-header-cell *matHeaderCellDef>Amount</th>
|
|
<td mat-cell *matCellDef="let model">
|
|
{{ model.draft.amount }}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef>Name</th>
|
|
<td mat-cell *matCellDef="let model">
|
|
{{ model.draft.name }}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="notes">
|
|
<th mat-header-cell *matHeaderCellDef>Notes</th>
|
|
<td mat-cell *matCellDef="let model">
|
|
{{ model.draft.notes }}
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
|
<td mat-cell *matCellDef="let model">
|
|
<button matButton="text" [matMenuTriggerFor]="ingredientActionsMenu" type="button">
|
|
<fa-icon [icon]="faEllipsis" size="2x"></fa-icon>
|
|
</button>
|
|
<mat-menu #ingredientActionsMenu="matMenu">
|
|
<button mat-menu-item (click)="editIngredient(model)" type="button">Edit</button>
|
|
<button mat-menu-item (click)="onIngredientDelete(model)" type="button">Delete</button>
|
|
</mat-menu>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="['reorder', 'amount', 'name', 'notes', 'actions']"></tr>
|
|
<tr
|
|
mat-row
|
|
*matRowDef="let row; columns: ['reorder', 'amount', 'name', 'notes', 'actions']"
|
|
cdkDrag
|
|
[cdkDragData]="row"
|
|
></tr>
|
|
</table>
|
|
|
|
<button matButton="outlined" (click)="addIngredient()" type="button">Add Ingredient</button>
|
|
</div>
|
|
|
|
<h3>Images</h3>
|
|
<button matButton="outlined" (click)="openImageUploadDialog()" type="button">Upload Image</button>
|
|
|
|
<h4>Select Main Image</h4>
|
|
<app-image-select
|
|
(select)="onMainImageSelect($event)"
|
|
[selectedUsernameFilename]="mainImageUsernameFilename()"
|
|
></app-image-select>
|
|
|
|
<div class="times-container">
|
|
<h3>Times</h3>
|
|
<p>Enter all as number of minutes, <em>eg.</em> 45</p>
|
|
<mat-form-field>
|
|
<mat-label>Preparation Time (minutes)</mat-label>
|
|
<input
|
|
matInput
|
|
[formControl]="recipeFormGroup.controls.preparationTime"
|
|
data-test-role="preparation-time-input"
|
|
/>
|
|
@if (recipeFormGroup.controls.preparationTime.hasError("pattern")) {
|
|
<mat-error data-test-role="preparation-time-error">Must be a valid number.</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field>
|
|
<mat-label>Cooking Time (minutes)</mat-label>
|
|
<input matInput [formControl]="recipeFormGroup.controls.cookingTime" data-test-role="cooking-time-input" />
|
|
@if (recipeFormGroup.controls.cookingTime.hasError("pattern")) {
|
|
<mat-error data-test-role="cooking-time-error">Must be a valid number.</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<mat-form-field>
|
|
<mat-label>Total Time (minutes)</mat-label>
|
|
<input matInput [formControl]="recipeFormGroup.controls.totalTime" data-test-role="total-time-input" />
|
|
@if (recipeFormGroup.controls.totalTime.hasError("pattern")) {
|
|
<mat-error data-test-role="total-time-error">Must be a valid number.</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<h3>Recipe Text</h3>
|
|
<mat-form-field>
|
|
<mat-label>Recipe Text</mat-label>
|
|
<textarea
|
|
#recipeTextTextarea
|
|
matInput
|
|
[formControl]="recipeFormGroup.controls.text"
|
|
(input)="onRecipeTextChange($event)"
|
|
></textarea>
|
|
</mat-form-field>
|
|
<button matButton="filled" type="submit" [disabled]="recipeFormGroup.invalid">Submit</button>
|
|
</form>
|