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

85 lines
2.2 KiB
TypeScript

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { GuestBookService } from "../guest-book.service";
import { ToasterService } from "../../core/toaster.service";
import { GuestBook } from "../guest-book";
import { ActivatedRoute, Router } from "@angular/router";
@Component({
selector: 'app-guest-book-detail',
templateUrl: './guest-book-detail.component.html',
styleUrls: ['./guest-book-detail.component.css']
})
export class GuestBookDetailComponent implements OnInit, AfterViewInit {
@ViewChild('name', { static: true }) nameElement: ElementRef;
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);
});
}
ngAfterViewInit() {
setTimeout(() => {
this.nameElement.nativeElement.focus();
}, 0);
}
showItem(item: GuestBook) {
this.item = item;
this.form.setValue({
company: item.company,
name: item.name,
phone: item.phone,
pax: '' + item.pax,
address: item.address
});
}
save() {
this.ser.saveOrUpdate(this.getItem())
.subscribe(
(result) => {
this.toaster.show('Success', '');
this.router.navigateByUrl('/guest-book');
},
(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;
}
}