feat(server, modal): added modal on remove hero and moved server files because of watch

Author: Ismaestro

package.json

@@ -5,7 +5,7 @@
   "angular-cli": {},
   "scripts": {
     "start": "npm run server | npm run ng",
-    "server": "json-server --port 3000 --watch src/server/db.json --routes src/server/routes.json",
+    "server": "json-server --port 3000 --watch server/db.json --routes server/routes.json",
     "ng": "ng serve --proxy-config proxy.conf.json",
     "tslint": "tslint \"src/**/*.ts\"; exit 0",
     "test": "ng test",

src/server/db.json renamed to server/db.json

@@ -41,10 +41,31 @@ <h3>Pick a highlight color</h3>
                         <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                     </button>
                     <button class="btn btn-danger"
-                            (click)="remove(hero); $event.stopPropagation()">
+                            (click)="showRemoveModal(hero)">
                         <i class="fa fa-times" aria-hidden="true"></i>
                     </button>
                 </div>
+                <div class="modal fade" id="askForRemove" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="exampleModalLabel">Alert</h5>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                Do you want to remove the hero?
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                                <button type="button" class="btn btn-primary" (click)="remove()">
+                                    Remove hero
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </li>
         </ul>
     </div>

src/server/routes.json renamed to server/routes.json

@@ -6,6 +6,7 @@ import {IAppConfig} from '../../config/iapp.config';
 
 import {Hero} from '../shared/hero.model';
 import {HeroService} from '../shared/hero.service';
+declare const $:any;
 
 @Component({
   selector: 'toh-hero-list',
@@ -16,6 +17,7 @@ import {HeroService} from '../shared/hero.service';
 export class HeroListComponent implements OnInit {
   heroes: Hero[];
   selectedHero: Hero;
+  heroToRemove: Hero;
   color: string;
   createNewHero: boolean;
 
@@ -40,14 +42,20 @@ export class HeroListComponent implements OnInit {
     this.router.navigate([`/${this.appConfig.routes.heroes}/`, this.selectedHero.id]);
   }
 
-  remove(hero: Hero): void {
+  remove(): void {
+    $('#askForRemove').modal('hide');
     this.heroService
-      .remove(hero.id)
+      .remove(this.heroToRemove.id)
       .then(() => {
-        this.heroes = this.heroes.filter(h => h !== hero);
-        if (this.selectedHero === hero) {
+        this.heroes = this.heroes.filter(h => h !== this.heroToRemove);
+        if (this.selectedHero === this.heroToRemove) {
           this.selectedHero = null;
         }
       });
   }
+
+  showRemoveModal(hero: Hero): void {
+    this.heroToRemove = hero;
+    $('#askForRemove').modal('show');
+  }
 }