Initial commit for the Angular part. We are nowhere yet.

bookie/src/app/guest-book/guest-book-detail/guest-book-detail.component.ts

@@ -0,0 +1,78 @@
+import {Component, OnInit} from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {RoleService} from "../../role/role.service";
+import {GuestBookService} from "../guest-book.service";
+import {ToasterService} from "../../core/toaster.service";
+import {Role} from "../../role/role";
+import {GuestBook} from "../guest-book";
+import {ActivatedRoute, Router} from "@angular/router";
+import {User} from "../../user/user";
+
+@Component({
+  selector: 'app-guest-book-detail',
+  templateUrl: './guest-book-detail.component.html',
+  styleUrls: ['./guest-book-detail.component.css']
+})
+export class GuestBookDetailComponent implements OnInit {
+  form: FormGroup;
+  item: GuestBook;
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private toaster: ToasterService,
+    private ser: GuestBookService
+  ) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      company: null,
+      name: [null, Validators.required],
+      phone: [null, Validators.required],
+      pax: ['0', Validators.required],
+      address: null
+    });
+  }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { item: GuestBook }) => {
+        this.showItem(data.item);
+      });
+  }
+
+  showItem(item: GuestBook) {
+    this.item = item;
+    this.form.get('company').setValue(item.company);
+    this.form.get('name').setValue(item.name);
+    this.form.get('phone').setValue(item.phone);
+    this.form.get('pax').setValue('' + item.pax);
+    this.form.get('address').setValue(item.address);
+  }
+
+  onSubmit() {
+    this.ser.saveOrUpdate(this.getItem())
+      .subscribe(
+        (result) => {
+          this.toaster.show('Success', '');
+          this.router.navigateByUrl('/guest-book/list');
+        },
+        (error) => {
+          this.toaster.show('Danger', error.error);
+        }
+      );
+  }
+
+  getItem(): GuestBook {
+    const formModel = this.form.value;
+    this.item.company = formModel.company;
+    this.item.name = formModel.name;
+    this.item.phone = formModel.phone;
+    this.item.pax = parseInt(formModel.pax);
+    this.item.address = formModel.address;
+    return this.item;
+  }
+}