82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { Component, inject, computed, effect, input, linkedSignal } from '@angular/core';
|
|
import { form, FormField } from '@angular/forms/signals';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
import { MatTableModule } from '@angular/material/table';
|
|
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
|
import moment from 'moment';
|
|
|
|
import { LocalTimePipe } from '../../shared/local-time.pipe';
|
|
import { GuestBookService } from '../guest-book.service';
|
|
|
|
export interface GuestBookListFormData {
|
|
date: Date;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-guest-book-list',
|
|
templateUrl: './guest-book-list.component.html',
|
|
styleUrls: ['./guest-book-list.component.sass'],
|
|
imports: [
|
|
LocalTimePipe,
|
|
MatButtonModule,
|
|
MatButtonModule,
|
|
MatDatepickerModule,
|
|
MatFormFieldModule,
|
|
MatIconModule,
|
|
MatInputModule,
|
|
MatTableModule,
|
|
FormField,
|
|
RouterLink,
|
|
],
|
|
})
|
|
export class GuestBookListComponent {
|
|
private route = inject(ActivatedRoute);
|
|
private router = inject(Router);
|
|
private snackBar = inject(MatSnackBar);
|
|
private ser = inject(GuestBookService);
|
|
|
|
date = input(new Date(), {
|
|
transform: (v: string | null | undefined): Date => {
|
|
if (v) {
|
|
const parsed = moment(v, 'DD-MMM-YYYY', true);
|
|
if (parsed.isValid()) return parsed.toDate();
|
|
}
|
|
return new Date();
|
|
},
|
|
});
|
|
|
|
formModel = linkedSignal({
|
|
source: this.date,
|
|
computation: (d): GuestBookListFormData => ({
|
|
date: d,
|
|
}),
|
|
});
|
|
|
|
form = form(this.formModel);
|
|
|
|
displayedColumns = ['sno', 'name', 'phone', 'pax', 'date', 'action'];
|
|
|
|
dateSignal = computed(() => moment(this.formModel().date).format('DD-MMM-YYYY'));
|
|
listResource = this.ser.list(this.dateSignal);
|
|
|
|
dataSource = computed(() => this.listResource.value()?.list ?? []);
|
|
|
|
constructor() {
|
|
// Keep the query string in sync with the form date
|
|
effect(() => {
|
|
const date = this.dateSignal();
|
|
this.router.navigate([], {
|
|
relativeTo: this.route,
|
|
queryParams: { date },
|
|
queryParamsHandling: 'merge',
|
|
replaceUrl: true,
|
|
});
|
|
});
|
|
}
|
|
}
|