diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/EnterRecipeDataSubmitEvent.ts b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/EnterRecipeDataSubmitEvent.ts index c8ee008..1c249c5 100644 --- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/EnterRecipeDataSubmitEvent.ts +++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/EnterRecipeDataSubmitEvent.ts @@ -1,13 +1,6 @@ -import { ImageView } from '../../../../shared/models/ImageView.model'; +import { RecipeDraftViewModel } from '../../../../shared/models/RecipeDraftView.model'; -export interface EnterRecipeDataSubmitEvent { - title: string; - slug: string; - ingredients: Array<{ - amount?: string | null; - name: string; - notes?: string | null; - }>; - mainImage: ImageView | null; - rawText: string; -} +export type EnterRecipeDataSubmitEvent = Omit< + RecipeDraftViewModel, + 'id' | 'created' | 'modified' | 'state' | 'owner' | 'lastInference' +>; diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css index 918b5a9..81e7dc5 100644 --- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css +++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css @@ -27,6 +27,12 @@ textarea { row-gap: 10px; } +.times-container { + display: flex; + flex-direction: column; + row-gap: 10px; +} + .mat-column-reorder { width: 32px; text-align: center; diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html index e5bc9c4..255d392 100644 --- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html +++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html @@ -96,6 +96,34 @@ [selectedUsernameFilename]="mainImageUsernameFilename()" > +
+

Times

+

Enter all as number of minutes, eg. 45

+ + Preparation Time (minutes) + + @if (recipeFormGroup.controls.preparationTime.hasError("pattern")) { + Must be a valid number. + } + + + + Cooking Time (minutes) + + @if (recipeFormGroup.controls.cookingTime.hasError("pattern")) { + Must be a valid number. + } + + + + Total Time (minutes) + + @if (recipeFormGroup.controls.totalTime.hasError("pattern")) { + Must be a valid number. + } + +
+

Recipe Text

Recipe Text @@ -106,5 +134,5 @@ (input)="onRecipeTextChange($event)" > - + diff --git a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts index af810dc..692f354 100644 --- a/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts +++ b/src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts @@ -13,7 +13,7 @@ import { viewChild, } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { MatFormField, MatInput, MatLabel } from '@angular/material/input'; +import { MatError, MatFormField, MatInput, MatLabel } from '@angular/material/input'; import { MatButton } from '@angular/material/button'; import { EnterRecipeDataSubmitEvent } from './EnterRecipeDataSubmitEvent'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; @@ -67,6 +67,7 @@ import { ImageView } from '../../../../shared/models/ImageView.model'; CdkDrag, DatePipe, ImageSelect, + MatError, ], templateUrl: './enter-recipe-data.html', styleUrl: './enter-recipe-data.css', @@ -83,6 +84,9 @@ export class EnterRecipeData implements OnInit { protected readonly recipeFormGroup = new FormGroup({ title: new FormControl('', Validators.required), slug: new FormControl('', Validators.required), + preparationTime: new FormControl('', Validators.pattern(/^\d+$/)), + cookingTime: new FormControl('', Validators.pattern(/^\d+$/)), + totalTime: new FormControl('', Validators.pattern(/^\d+$/)), text: new FormControl('', Validators.required), }); @@ -106,6 +110,9 @@ export class EnterRecipeData implements OnInit { this.recipeFormGroup.patchValue({ title: draft.title ?? '', slug: draft.slug ?? '', + preparationTime: draft.preparationTime?.toString() ?? '', + cookingTime: draft.cookingTime?.toString() ?? '', + totalTime: draft.totalTime?.toString() ?? '', text: draft.rawText ?? '', }); if (draft.ingredients) { @@ -204,6 +211,16 @@ export class EnterRecipeData implements OnInit { this.ingredientsTable()!.renderRows(); } + private getTime(s?: string | null): number | null { + if (!s) return null; + try { + return parseInt(s); + } catch (e) { + console.error(`Should not have had a parse error because of form validators: ${e}`); + return null; + } + } + protected onSubmit(event: SubmitEvent): void { event.preventDefault(); const value = this.recipeFormGroup.value; @@ -211,6 +228,9 @@ export class EnterRecipeData implements OnInit { title: value.title!, slug: value.slug!, ingredients: this.ingredientModels().map((ingredientModel) => ingredientModel.draft), + preparationTime: this.getTime(value.preparationTime), + cookingTime: this.getTime(value.cookingTime), + totalTime: this.getTime(value.totalTime), mainImage: this.mainImage(), rawText: value.text!, }); diff --git a/src/app/shared/services/RecipeDraftService.ts b/src/app/shared/services/RecipeDraftService.ts index 5745819..a7d636c 100644 --- a/src/app/shared/services/RecipeDraftService.ts +++ b/src/app/shared/services/RecipeDraftService.ts @@ -86,7 +86,7 @@ export class RecipeDraftService { amount?: string | null; name: string; notes?: string | null; - }>; + }> | null; mainImage?: ImageView | null; rawText?: string | null; },