add: food component with edit button

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4e4319ec580fa8431c697cfa19fdb7c2fff16641..89e9f6bf0e88e5d1c6e692cc3d85f6dcd77b060f 100644 (file)
--- 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 2472b79558311cedd905f6549cdd050e6f60963c..112b334d7a4cb49f986874aaec48cc975faeeb9e 100644 (file)
--- 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 054ef9d6a554cada5ab90cbe7d190254fe8a6bcf..025ff3570ae9f81eb04dfa45bd4c1387ca3ac90f 100644 (file)
--- 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 (file)
index 0000000..e69de29

diff --git a/src/app/food/food.component.html b/src/app/food/food.component.html
new file mode 100644 (file)
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 (file)
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 (file)
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;
+       }
+}