55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
import { ActivatedRoute } from "@angular/router";
|
|
import { FormBuilder, FormGroup } from "@angular/forms";
|
|
import { BehaviorSubject } from "rxjs";
|
|
import { map } from "rxjs/operators";
|
|
import * as moment from 'moment';
|
|
import {GuestBook, GuestBookList} from "../guest-book";
|
|
import { GuestBookService } from "../guest-book.service";
|
|
import { GuestBookListDataSource } from './guest-book-list-datasource';
|
|
|
|
@Component({
|
|
selector: 'app-guest-book-list',
|
|
templateUrl: './guest-book-list.component.html',
|
|
styleUrls: ['./guest-book-list.component.css']
|
|
})
|
|
export class GuestBookListComponent implements OnInit {
|
|
dataSource: GuestBookListDataSource;
|
|
form: FormGroup;
|
|
data: BehaviorSubject<GuestBook[]>;
|
|
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
|
displayedColumns = ['sno', 'name', 'phone', 'pax', 'action'];
|
|
|
|
constructor(private route: ActivatedRoute, private fb: FormBuilder, private ser: GuestBookService) {
|
|
this.createForm();
|
|
this.data = new BehaviorSubject([]);
|
|
this.listenToDateChange();
|
|
}
|
|
|
|
createForm() {
|
|
this.form = this.fb.group({
|
|
date: ''
|
|
});
|
|
}
|
|
|
|
listenToDateChange(): void {
|
|
this.form.get('date').valueChanges.pipe(
|
|
map(x => moment(x).format('DD-MMM-YYYY'))
|
|
).subscribe(x => {
|
|
return this.ser.list(x)
|
|
.subscribe((list: GuestBookList) => {
|
|
this.data.next(list.list);
|
|
});
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.route.data
|
|
.subscribe((data: { list: GuestBookList }) => {
|
|
this.data.next(data.list.list);
|
|
this.form.setValue({"date": moment(data.list.date, 'DD-MMM-YYYY').toDate()});
|
|
});
|
|
this.dataSource = new GuestBookListDataSource(this.data);
|
|
}
|
|
}
|