108 lines
3.8 KiB
HTML
108 lines
3.8 KiB
HTML
<h2>Enter Recipe</h2>
|
|
<div class="draft-info-container">
|
|
<div>
|
|
<p>Draft started: {{ draft().created | date: "short" }}</p>
|
|
<p>Last saved: {{ draft().modified | date: "short" }}</p>
|
|
</div>
|
|
<div>
|
|
<button matButton="text" [matMenuTriggerFor]="draftActionsMenu" class="draft-actions-button">
|
|
<fa-icon [icon]="faEllipsis" size="3x"></fa-icon>
|
|
</button>
|
|
<mat-menu #draftActionsMenu="matMenu">
|
|
<button mat-menu-item (click)="onDraftDelete()">Delete draft</button>
|
|
</mat-menu>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
|
|
<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="let model">
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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">Review</button>
|
|
</form>
|