|
|
|
@ -19,7 +19,7 @@ import { IngredientRecipe } from '../models/ingredient-recipe';
|
|
|
|
|
FormsModule,
|
|
|
|
|
MatButtonModule,
|
|
|
|
|
MatFormFieldModule,
|
|
|
|
|
MatSelectModule
|
|
|
|
|
MatSelectModule,
|
|
|
|
|
],
|
|
|
|
|
templateUrl: './recipe-add.component.html',
|
|
|
|
|
styleUrls: ['./recipe-add.component.scss'],
|
|
|
|
@ -30,8 +30,8 @@ export class RecipeAddComponent implements OnInit {
|
|
|
|
|
ingredientQuantities: { [key: number]: number } = {};
|
|
|
|
|
selectedIngredient: number | null = null;
|
|
|
|
|
imageError: string | null = null;
|
|
|
|
|
maxDescriptionLength: number = 200; // Maximum length for description
|
|
|
|
|
isSubmitting: boolean = false; // Flag to prevent multiple submissions
|
|
|
|
|
maxDescriptionLength: number = 200;
|
|
|
|
|
isSubmitting: boolean = false;
|
|
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
|
private ingredientService: IngredientService,
|
|
|
|
@ -68,9 +68,12 @@ export class RecipeAddComponent implements OnInit {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
addIngredient(): void {
|
|
|
|
|
if (this.selectedIngredient !== null && !this.ingredientQuantities[this.selectedIngredient]) {
|
|
|
|
|
this.ingredientQuantities[this.selectedIngredient] = 1; // Default quantity
|
|
|
|
|
this.selectedIngredient = null; // Clear the selection
|
|
|
|
|
if (
|
|
|
|
|
this.selectedIngredient !== null &&
|
|
|
|
|
!this.ingredientQuantities[this.selectedIngredient]
|
|
|
|
|
) {
|
|
|
|
|
this.ingredientQuantities[this.selectedIngredient] = 1;
|
|
|
|
|
this.selectedIngredient = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -79,44 +82,46 @@ export class RecipeAddComponent implements OnInit {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getIngredientKeys(): number[] {
|
|
|
|
|
return Object.keys(this.ingredientQuantities).map(key => parseInt(key, 10));
|
|
|
|
|
return Object.keys(this.ingredientQuantities).map((key) =>
|
|
|
|
|
parseInt(key, 10)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
findIngredientName(id: number): string {
|
|
|
|
|
const ingredient = this.ingredients.find(ingredient => ingredient.id === id);
|
|
|
|
|
const ingredient = this.ingredients.find(
|
|
|
|
|
(ingredient) => ingredient.id === id
|
|
|
|
|
);
|
|
|
|
|
return ingredient ? ingredient.name : '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onSubmit(): void {
|
|
|
|
|
if (this.isSubmitting) return; // Prevent multiple submissions
|
|
|
|
|
if (this.isSubmitting) return;
|
|
|
|
|
|
|
|
|
|
this.isSubmitting = true; // Set flag to prevent multiple submissions
|
|
|
|
|
this.isSubmitting = true;
|
|
|
|
|
|
|
|
|
|
// Get the current recipes
|
|
|
|
|
const recipes = this.recipeService.getRecipes();
|
|
|
|
|
|
|
|
|
|
// Set the new recipe ID
|
|
|
|
|
this.recipe.id = recipes.length ? recipes[recipes.length - 1].id + 1 : 1;
|
|
|
|
|
|
|
|
|
|
// Add the ingredients with quantities
|
|
|
|
|
this.recipe.ingredients = this.getIngredientKeys().map(id => {
|
|
|
|
|
this.recipe.ingredients = this.getIngredientKeys().map((id) => {
|
|
|
|
|
const ingredient = this.ingredientService.getIngredient(id);
|
|
|
|
|
return new Ingredient(id, ingredient.name);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Save the recipe
|
|
|
|
|
this.recipeService.addRecipe(this.recipe);
|
|
|
|
|
|
|
|
|
|
// Save the ingredient quantities
|
|
|
|
|
this.getIngredientKeys().forEach(id => {
|
|
|
|
|
this.getIngredientKeys().forEach((id) => {
|
|
|
|
|
const quantity = this.ingredientQuantities[id];
|
|
|
|
|
const ingredientRecipe = new IngredientRecipe(id, this.recipe.id, quantity);
|
|
|
|
|
const ingredientRecipe = new IngredientRecipe(
|
|
|
|
|
id,
|
|
|
|
|
this.recipe.id,
|
|
|
|
|
quantity
|
|
|
|
|
);
|
|
|
|
|
this.recipeService.addIngredientRecipe(ingredientRecipe);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Navigate back to the list
|
|
|
|
|
this.router.navigate(['/list']).then(() => {
|
|
|
|
|
this.isSubmitting = false; // Reset flag after navigation
|
|
|
|
|
this.isSubmitting = false;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|