Before we get data from the Firebase Realtime Database that we set up, let's do some refactoring. Here, we will remove the list route from our application. For that, we need to delete the list folder, remove the route from AppRoutingModule, and remove the list route from the appPages of AppComponent, as well as change the home routes title to Appointments.
Now, use the AngularFireDatabase list method to gather appointments and use snapshotChanges as an observable to gather data. We will use a map pipe to format the data that we get from Firebase in order to set the label, color, and a string to display the total number of rooms and bathrooms. We are using snapshotChanges here because we need the keys for our appointments. If we had used valueChanges, we wouldn't have received the keys for the objects.
First, let's add a helper function so that we can get the label and color based on the status, as well as a reducer function so that we can calculate the number of beds and baths in the HomePage component, as follows:
...
function statusLabel(status) {
return status === 'incomplete' ? 'Incomplete' : status === 'complete' ?
'Complete' : 'Not Started';
}
function statusColor(status) {
return status ==='incomplete' ? 'danger' : status === 'complete' ?
'success' : 'primary';
}
function bedsAndBathsCalc(acc, curr) {
if (curr.type === 'room') {
acc.beds += 1;
}
if (curr.type === 'bath') {
acc.baths += 1;
}
return acc;
}
...
Let's get the collection of items and transform the response. Afterward, we will calculate the number of bedrooms and bathrooms to display, as shown in the following code:
import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { map } from 'rxjs/operators';
import { IAppointment } from '../appointment.model';
import { Observable } from 'rxjs';
...
export class HomePage {
itemRef: AngularFireList<IAppointment>;
appointments$: Observable<IAppointment[]>;
constructor(private database: AngularFireDatabase) {
this.itemRef = this.database.list('/appointments');
this.appointments$ = this.itemRef.snapshotChanges().pipe(
map((res) => {
return res.map(value => {
const appointment: IAppointment = value.payload.val();
const count = appointment.units.reduce(bedsAndBathCalc,
{ beds: 0, baths: 0 });
const label = statusLabel(appointment.status);
const color = statusColor(appointment.status);
const roomsAndBaths = `${count.beds} BD ${count.baths}
BT`;
return {
...appointment,
key: value.key,
label,
color,
roomsAndBaths,
};
});
}),
);
}
}
Let's use the Ionic card component and Ionic badge component to display the appointment details on our home page. We will use the async pipe on the appointments observable that we got by using snapshotChanges:
<ion-header>
<ion-toolbar color="primary">
...
<ion-title>
Appointments
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card class="welcome-card" *ngFor="let appointment of appointments$
| async">
<ion-card-header>
<ion-badge class="card-end"[attr.color]="appointment.color">
{{appointment.label}}</ion-badge>
<ion-card-title>Apt {{appointment.number}}</ion-card-title>
<ion-card-subtitle>{{appointment.roomsAndBaths}}</ion-card-
subtitle>
<ion-card-subtitle>{{appointment.assignedTo}}</ion-card-
subtitle>
</ion-card-header>
</ion-card>
</ion-content>
You should see that the cards have been populated with all of this information, as shown in the following screenshot:
Now that we have our Appointments page set up, let's go ahead and create the page for when we wish to view a single appointment. We will call this page audit:
> ionic generate page audit
Let's modify the path that was created to also include the key that we will pass from our Appointments page:
{ path: 'audit/:key', loadChildren: './audit/audit.module#AuditPageModule' }
Let's use routerLink to go to our audit page:
<ion-content>
<ion-card class="welcome-card" [routerLink]="['/audit',
appointment.key]" *ngFor="let appointment of appointments$ | async">
...
</ion-card>
</ion-content>
Now, when you click on the appointment, you should see that it goes to a new page with the audit as the title of the header. Let's add a back button to our start slot in the toolbar:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>audit</ion-title>
</ion-toolbar>
</ion-header>
...
Now, let's use the object method of AngularFireDatabase to get a particular appointment and use valueChanges to view the appointment object in the console:
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import { ActivatedRoute } from '@angular/router';
import { IAppointment } from '../appointment.model';
...
export class AuditPage implements OnInit {
itemRef: AngularFireObject<IAppointment>;
constructor(private db: AngularFireDatabase, private route:
ActivatedRoute) {
const params = this.route.snapshot.params;
this.itemRef = this.db.object<IAppointment>
(`/appointments/${params.key}`);
this.itemRef.valueChanges().subscribe(appointment => {
console.log(appointment);
});
}
...
}
Now that we are on the AuditPage with the data for the appointment, we need to create our dynamic form by installing and using ngx-formly.