From 10ee85e1ad590424d85a6d79f5a4876aeb87fb5a Mon Sep 17 00:00:00 2001
From: Robbert Stapel <robbert.stapel@live.nl>
Date: Mon, 19 Dec 2022 22:54:03 +0100
Subject: [PATCH] input-output and array functions

---
 db.json                                       |  5 ----
 src/app/app.module.ts                         |  4 +--
 .../restaurant-add.component.ts               |  3 +--
 .../restaurant-edit.component.html            |  8 ------
 .../restaurant-edit.component.scss            |  3 ---
 .../restaurant-edit.component.spec.ts         | 23 ----------------
 .../restaurant-edit.component.ts              | 27 -------------------
 .../restaurant-list.component.html            | 21 ++++++++++++---
 .../restaurant-list.component.scss            |  4 +++
 .../restaurant-list.component.ts              | 17 ++++++++++--
 .../restaurants/restaurants.component.html    |  4 +--
 src/app/restaurants/restaurants.component.ts  | 16 ++++++-----
 .../restaurants/shared/restaurant.service.ts  | 22 ++++++---------
 13 files changed, 57 insertions(+), 100 deletions(-)
 delete mode 100644 src/app/restaurants/restaurant-edit/restaurant-edit.component.html
 delete mode 100644 src/app/restaurants/restaurant-edit/restaurant-edit.component.scss
 delete mode 100644 src/app/restaurants/restaurant-edit/restaurant-edit.component.spec.ts
 delete mode 100644 src/app/restaurants/restaurant-edit/restaurant-edit.component.ts

diff --git a/db.json b/db.json
index b881d2f..bb08ffd 100644
--- a/db.json
+++ b/db.json
@@ -14,11 +14,6 @@
       "title": "Restaurant",
       "category": "Italian",
       "id": 3
-    },
-    {
-      "title": "Restaurant",
-      "category": "Italian",
-      "id": 4
     }
   ]
 }
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 14c1f4a..7f7e79b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -16,7 +16,6 @@ import { RestaurantsComponent } from './restaurants/restaurants.component';
 import { RestaurantListComponent } from './restaurants/restaurant-list/restaurant-list.component';
 import { RestaurantComponent } from './restaurants/restaurant/restaurant.component';
 import { RestaurantAddComponent } from './restaurants/restaurant-add/restaurant-add.component';
-import { RestaurantEditComponent } from './restaurants/restaurant-edit/restaurant-edit.component';
 
 @NgModule({
   declarations: [
@@ -24,8 +23,7 @@ import { RestaurantEditComponent } from './restaurants/restaurant-edit/restauran
     RestaurantsComponent,
     RestaurantListComponent,
     RestaurantComponent,
-    RestaurantAddComponent,
-    RestaurantEditComponent
+    RestaurantAddComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/restaurants/restaurant-add/restaurant-add.component.ts b/src/app/restaurants/restaurant-add/restaurant-add.component.ts
index 6d409d7..d1121b6 100644
--- a/src/app/restaurants/restaurant-add/restaurant-add.component.ts
+++ b/src/app/restaurants/restaurant-add/restaurant-add.component.ts
@@ -7,7 +7,6 @@ import { IRestaurant } from '../shared/restaurant.model';
   styleUrls: ['./restaurant-add.component.scss']
 })
 export class RestaurantAddComponent {
-  @Input() restaurants: IRestaurant[] = [];
   @Output() newRestaurantEvent = new EventEmitter<any>();
 
   restaurant: IRestaurant = {title: "Restaurant", category: "Italian"}
@@ -15,7 +14,7 @@ export class RestaurantAddComponent {
 
   newRestaurant(value: IRestaurant) {
     this.newRestaurantEvent.emit(value);
-    console.log('clicked', value)
+    console.log('newRestaurant Event emitted ',value)
   }
 
 }
diff --git a/src/app/restaurants/restaurant-edit/restaurant-edit.component.html b/src/app/restaurants/restaurant-edit/restaurant-edit.component.html
deleted file mode 100644
index 1f396ab..0000000
--- a/src/app/restaurants/restaurant-edit/restaurant-edit.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="container">
-    <button mat-mini-fab color="none" aria-label="Example icon button with a menu icon">
-        <mat-icon (click)="delRestaurant(1)">delete</mat-icon>
-    </button>
-    <button mat-mini-fab color="none" aria-label="Example icon button with a menu icon">
-        <mat-icon>edit</mat-icon>
-    </button>
-</div>
\ No newline at end of file
diff --git a/src/app/restaurants/restaurant-edit/restaurant-edit.component.scss b/src/app/restaurants/restaurant-edit/restaurant-edit.component.scss
deleted file mode 100644
index e819f13..0000000
--- a/src/app/restaurants/restaurant-edit/restaurant-edit.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-button{
-    margin: 0 10px 10px 0;
-}
\ No newline at end of file
diff --git a/src/app/restaurants/restaurant-edit/restaurant-edit.component.spec.ts b/src/app/restaurants/restaurant-edit/restaurant-edit.component.spec.ts
deleted file mode 100644
index f2bed1d..0000000
--- a/src/app/restaurants/restaurant-edit/restaurant-edit.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RestaurantEditComponent } from './restaurant-edit.component';
-
-describe('RestaurantEditComponent', () => {
-  let component: RestaurantEditComponent;
-  let fixture: ComponentFixture<RestaurantEditComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ RestaurantEditComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(RestaurantEditComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/restaurants/restaurant-edit/restaurant-edit.component.ts b/src/app/restaurants/restaurant-edit/restaurant-edit.component.ts
deleted file mode 100644
index 81e029c..0000000
--- a/src/app/restaurants/restaurant-edit/restaurant-edit.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-
-@Component({
-  selector: 'app-restaurant-edit',
-  templateUrl: './restaurant-edit.component.html',
-  styleUrls: ['./restaurant-edit.component.scss']
-})
-export class RestaurantEditComponent implements OnInit {
-  
-  @Output() delRestaurantEvent = new EventEmitter<any>();
-  
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  delRestaurant(value: any) {
-    this.delRestaurantEvent.emit(value);
-    console.log('clicked', value)
-  }
-
-  // removeRestaurant(value: any) {
-  //   this.delRestaurantEvent.emit(value);
-  //   console.log('clicked', value)
-  // }
-
-}
diff --git a/src/app/restaurants/restaurant-list/restaurant-list.component.html b/src/app/restaurants/restaurant-list/restaurant-list.component.html
index 04c0273..a83960d 100644
--- a/src/app/restaurants/restaurant-list/restaurant-list.component.html
+++ b/src/app/restaurants/restaurant-list/restaurant-list.component.html
@@ -3,14 +3,27 @@
         <mat-card *ngFor="let restaurant of restaurants" class="spacer">
             <mat-card-content>
                 {{restaurant.title}} {{restaurant.id}}
-                {{restaurant.category}}
+                # {{restaurant.category}}
             </mat-card-content>
             <mat-card-footer>
-                <app-restaurant-edit>
-                    
-                </app-restaurant-edit>
+                <div class="container">
+                    <button  mat-mini-fab color="none" aria-label="Example icon button with a menu icon">
+                        <mat-icon (click)="deleteRestaurant(restaurant.id)">delete</mat-icon>
+                    </button>
+                    <button (click)="editRestaurant(restaurant.id)" mat-mini-fab color="none" aria-label="Example icon button with a menu icon">
+                        <mat-icon>edit</mat-icon>
+                    </button>
+                </div>
             </mat-card-footer>
         </mat-card>
     </div>
 </div>
 
+<div class="container" [ngClass]="">
+    <input type="text" #bindTitle placeholder="Title here...">
+    <select name="category" id="cat">
+        <option #bindCategory value="Italian">Italian</option>
+        <option #bindCategory value="Italian">Greek</option>
+        <option #bindCategory value="Italian">Chinese</option>        
+    </select>
+</div>
diff --git a/src/app/restaurants/restaurant-list/restaurant-list.component.scss b/src/app/restaurants/restaurant-list/restaurant-list.component.scss
index 8bcc128..c68a950 100644
--- a/src/app/restaurants/restaurant-list/restaurant-list.component.scss
+++ b/src/app/restaurants/restaurant-list/restaurant-list.component.scss
@@ -1,3 +1,7 @@
 .spacer{
     margin: 10px 0;
+}
+
+.visible{
+    display: block;
 }
\ No newline at end of file
diff --git a/src/app/restaurants/restaurant-list/restaurant-list.component.ts b/src/app/restaurants/restaurant-list/restaurant-list.component.ts
index 7a541f7..62e2cf4 100644
--- a/src/app/restaurants/restaurant-list/restaurant-list.component.ts
+++ b/src/app/restaurants/restaurant-list/restaurant-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { IRestaurant } from '../shared/restaurant.model';
 import { RestaurantsService } from '../shared/restaurant.service';
 
@@ -9,9 +9,22 @@ import { RestaurantsService } from '../shared/restaurant.service';
 })
 export class RestaurantListComponent {
   @Input() restaurants: IRestaurant[] = [];
-  
+  @Output() delRestaurantEvent = new EventEmitter<any>();
+  @Output() editRestaurantEvent = new EventEmitter<any>();
+
+  constructor(private restaurantsService: RestaurantsService) {}
+
+  deleteRestaurant(value: any) {
+    this.delRestaurantEvent.emit(value);
+  }
+
+  editRestaurant(value: any) {
+    this.editRestaurantEvent.emit(value);
+    console.log('From editRestaurant Event emitter', value)
+  }
 
 }
 
 
 
+
diff --git a/src/app/restaurants/restaurants.component.html b/src/app/restaurants/restaurants.component.html
index fa5a656..dc4a8b4 100644
--- a/src/app/restaurants/restaurants.component.html
+++ b/src/app/restaurants/restaurants.component.html
@@ -1,8 +1,8 @@
 <div class="container">
-    <app-restaurant-add [restaurants]="restaurants" (newRestaurantEvent)="addRestaurant($event)">
+    <app-restaurant-add (newRestaurantEvent)="addRestaurant($event)">
         
     </app-restaurant-add>
-    <app-restaurant-list [restaurants]="restaurants">
+    <app-restaurant-list [restaurants]="restaurants" (delRestaurantEvent)="deleteRestaurant($event)">
         
     </app-restaurant-list>
 </div>
\ No newline at end of file
diff --git a/src/app/restaurants/restaurants.component.ts b/src/app/restaurants/restaurants.component.ts
index 3cde8d6..287fdc7 100644
--- a/src/app/restaurants/restaurants.component.ts
+++ b/src/app/restaurants/restaurants.component.ts
@@ -9,8 +9,7 @@ import { RestaurantsService } from './shared/restaurant.service';
 })
 export class RestaurantsComponent implements OnInit {
   restaurants: IRestaurant[] = [];
-  // @Input() restaurants: IRestaurant[] = [];
-  
+
   constructor(private restaurantsService: RestaurantsService) {}
 
   ngOnInit(): void {
@@ -24,15 +23,18 @@ export class RestaurantsComponent implements OnInit {
 
   addRestaurant(restaurant: IRestaurant){
     this.restaurantsService.addRestaurant(restaurant)
-    .subscribe(restaurant => this.restaurants.push(restaurant));
+    .subscribe((restaurant) => {
+      this.restaurants.push(restaurant)
+    });
   }
 
   deleteRestaurant(restaurantId: any){
     this.restaurantsService.deleteRestaurant(restaurantId)
-    .subscribe((res) => {
-      console.log(`In: ${res}`)
-      this.restaurants.filter( (restaurant)=> { restaurant.id == 1 } )
-    });
+    .subscribe(
+      ()=> {
+        this.restaurants = this.restaurants.filter(elem => elem.id != restaurantId)
+      }
+    )
   }
 
 }
diff --git a/src/app/restaurants/shared/restaurant.service.ts b/src/app/restaurants/shared/restaurant.service.ts
index 5e892e2..f84439b 100644
--- a/src/app/restaurants/shared/restaurant.service.ts
+++ b/src/app/restaurants/shared/restaurant.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, tap } from 'rxjs';
+import { Observable } from 'rxjs';
 import { IRestaurant } from './restaurant.model';
 
 @Injectable({
@@ -10,8 +10,6 @@ import { IRestaurant } from './restaurant.model';
 export class RestaurantsService {
   private restaurantsUrl = 'http://localhost:3000/restaurants/';
 
-  // restaurants$ = this.http.get<IRestaurant[]>(this.restaurantsUrl); 
-  
   constructor(private http: HttpClient) { }
     
     /** GET restaurants from the server */
@@ -23,21 +21,17 @@ export class RestaurantsService {
     addRestaurant(restaurant: IRestaurant): Observable<IRestaurant> {
       return this.http.post<IRestaurant>(this.restaurantsUrl, restaurant);
     }
-    
-    /** DELETE: a specific restaurant from the server */
-    // deleteRestaurant(restaurantId: any): Observable<any> {
-    //   return this.http.delete<any>(this.restaurantsUrl + restaurantId);
-    // }
-
 
     /** DELETE: delete a restaurant from the server */
     deleteRestaurant(id: number): Observable<any> {
       const url = `${this.restaurantsUrl}${id}`;
       return this.http.delete<any>(url)
-      .pipe(
-        tap((res) => console.log(`deleted res id=${id}`))
-      );
-  }
-    
+    }
+
+    /** PUT: edit a restaurant from the server */
+    editRestaurant(restaurant: IRestaurant): Observable<any> {
+      const url = `${this.restaurantsUrl}${restaurant.id}`;
+      return this.http.put<any>(url, restaurant)
+    }
 
 }
\ No newline at end of file