From: Bastian Dehn <hhaalo@arcor.de>
Date: Thu, 9 Jun 2022 15:56:49 +0000 (+0200)
Subject: add: food component with edit button
X-Git-Tag: v1.0^2~19^2~3
X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=6c72e47a9bce18f2ebae0d28783494d8e0bd8f09;p=speisekarten-editor.git

add: food component with edit button
---

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4e4319e..89e9f6b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -63,11 +63,6 @@
 		id="insertFood"
 		[disabled]="edit || !disableByInsertMode()"
 		(click)="insertFoodAfter()">Einfügen</button>
-	<button class="button"
-		type="button"
-		id="editFood"
-		[disabled]="!edit || disableByInsertMode()"
-		(click)="saveFood()">Speichern</button>
 </form>
 
 <div *ngFor="let title of foodcard.Titles; let i = index">
@@ -104,12 +99,7 @@
 			(click)="addNewFood(title, i)">Speise hinzufügen</button>
 		<div *ngFor="let food of subtitle.Foods; let i = index"
 			class="foodmenu grid">
-			<div class="food">{{food.Food}}</div>
-			<div class="sideDish">{{food.sideDish}}</div>
-			<div class="price">{{food.price}}</div>
-			<button class="button"
-				type="button"
-				(click)="editFood(food)">Bearbeiten</button>
+			<app-food [food]="food"></app-food>
 			<button class="button"
 				type="button"
 				(click)="insertFood(title, subtitle, food)">Einfügen</button>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2472b79..112b334 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -190,20 +190,6 @@ export class AppComponent
 		this.formFoodVisible = false;
 	}
 
-	public saveFood(): void
-	{
-		this.food = { Food: "", sideDish: "", price: "" };
-		this.formFoodVisible = false;
-		this.edit = false;
-	}
-
-	public editFood(food: IFood): void
-	{
-		this.formFoodVisible = true;
-		this.food = food;
-		this.edit = true;
-	}
-
 	public insertFoodAfter(): void
 	{
 		let title = this.foodcard.Titles[this.insertIndicies[0]];
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 054ef9d..025ff35 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,10 +4,12 @@ import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
+import { FoodComponent } from './food/food.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    FoodComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/food/food.component.css b/src/app/food/food.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/food/food.component.html b/src/app/food/food.component.html
new file mode 100644
index 0000000..cfba741
--- /dev/null
+++ b/src/app/food/food.component.html
@@ -0,0 +1,19 @@
+<div class="food">{{food.Food}}</div>
+<div class="sideDish">{{food.sideDish}}</div>
+<div class="price">{{food.price}}</div>
+<button class="button"
+	type="button"
+	(click)="editFood()">Bearbeiten</button>
+
+<form #formFood="ngForm" *ngIf="formFoodVisible" class="form">
+	<label>Speise</label>
+	<input [(ngModel)]="food.Food" name="food" type="text" />
+	<label>Beilage</label>
+	<input [(ngModel)]="food.sideDish" name="sideDish" type="text" />
+	<label>Preis</label>
+	<input [(ngModel)]="food.price" name="price" type="text" />
+	<button class="button"
+		type="button"
+		id="editFood"
+		(click)="saveFood()">Speichern</button>
+</form>
diff --git a/src/app/food/food.component.spec.ts b/src/app/food/food.component.spec.ts
new file mode 100644
index 0000000..415a0b2
--- /dev/null
+++ b/src/app/food/food.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FoodComponent } from './food.component';
+
+describe('FoodComponent', () => {
+  let component: FoodComponent;
+  let fixture: ComponentFixture<FoodComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FoodComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FoodComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/food/food.component.ts b/src/app/food/food.component.ts
new file mode 100644
index 0000000..1a4e0e7
--- /dev/null
+++ b/src/app/food/food.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { IFood } from '../ifood';
+
+@Component({
+	selector: 'app-food',
+	templateUrl: './food.component.html',
+	styleUrls: ['./food.component.css']
+})
+export class FoodComponent
+{
+	@Input() food: IFood = { Food: "", sideDish: "", price: "" };
+	public formFoodVisible: boolean = false;
+
+	constructor() {}
+
+	public editFood(): void
+	{
+		this.formFoodVisible = true;
+	}
+
+	public saveFood(): void
+	{
+		this.formFoodVisible = false;
+	}
+}