chore: moving data storage to firebase

package.json

@@ -15,11 +15,14 @@
     "@angular/common": "~13.0.0",
     "@angular/compiler": "~13.0.0",
     "@angular/core": "~13.0.0",
+    "@angular/fire": "^7.2.0",
     "@angular/forms": "~13.0.0",
     "@angular/material": "^13.0.3",
     "@angular/platform-browser": "~13.0.0",
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
+    "firebase": "^9.6.1",
+    "rxfire": "^6.0.0",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app.component.html

@@ -5,11 +5,24 @@
   <button class="new-record" (click)="newRecord()" mat-button>
     <mat-icon>add</mat-icon> Add Record
   </button>
+  <mat-form-field appearance="fill">
+    <mat-icon matPrefix>search</mat-icon>
+    <mat-label>Search</mat-label>
+    <input matInput [value]="searchValue" (input)="search($event)" />
+  </mat-form-field>
 
   <div class="container-wrapper">
     <div class="container">
       <mat-card>
-        <app-record *ngFor="let record of phoneBook" [record]="record" (edit)="editRecord($event)" (delete)="deleteRecord($event)"></app-record>
+        <app-record
+          *ngFor="let record of filteredPhoneBook()"
+          [record]="record"
+          (edit)="editRecord($event)"
+          (delete)="deleteRecord($event)"
+        ></app-record>
+        <p class="empty-label" *ngIf="filteredPhoneBook().length === 0">
+          No results
+        </p>
       </mat-card>
     </div>
   </div>

src/app/app.component.less

@@ -37,3 +37,7 @@ mat-toolbar {
     text-align: center;
     opacity: 0.2;
   }
+
+  .content-wrapper > *{
+    margin: 4px 4px 0px;
+  }

src/app/app.component.ts

@@ -1,29 +1,38 @@
 import { Component } from '@angular/core';
 import { Record } from './record/record';
 import { MatDialog } from '@angular/material/dialog';
-import { RecordDialogComponent, RecordDialogResult } from './record-dialog/record-dialog.component';
+import {
+  RecordDialogComponent,
+  RecordDialogResult,
+} from './record-dialog/record-dialog.component';
+import { AngularFirestore, Query } from '@angular/fire/compat/firestore';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.less']
+  styleUrls: ['./app.component.less'],
 })
 export class AppComponent {
   title = 'PhoneBook';
-  phoneBook: Record[] = [
-    {
-      name: 'Erdélyi Áron',
-      phoneNumber: '+36707746229'
+  phoneBook = this.store
+    .collection('phoneBook')
+    .valueChanges({ idField: 'id' }) as Observable<Record[]>;
+  searchValue = '';
+  phoneBookLocal : Record[] = [];
+  phoneBookObserver = {
+    next: (x: Record[]) => {
+      this.phoneBookLocal = x;
     },
-    {
-      name: 'Erdélyi Zsombor',
-      phoneNumber: '+36707746230'
-    }
-  ];
+    error: (err: String) => console.error('Observer got an error: ' + err),
+    complete: () => console.log('Observer got a complete notification'),
+  };
 
-  constructor(private dialog: MatDialog) {}
+  constructor(private dialog: MatDialog, private store: AngularFirestore) {
+    this.phoneBook.subscribe(this.phoneBookObserver);
+  }
 
-  newRecord() : void {
+  newRecord(): void {
     const dialogRef = this.dialog.open(RecordDialogComponent, {
       width: '270px',
       data: {
@@ -32,11 +41,11 @@ export class AppComponent {
     });
     dialogRef
       .afterClosed()
-      .subscribe((result: RecordDialogResult|undefined) => {
+      .subscribe((result: RecordDialogResult | undefined) => {
         if (!result) {
           return;
         }
-        this.phoneBook.push(result.record);
+        this.store.collection('phoneBook').add(result.record);
       });
   }
 
@@ -44,23 +53,34 @@ export class AppComponent {
     const dialogRef = this.dialog.open(RecordDialogComponent, {
       width: '270px',
       data: {
-          record: {
-            name: record.name,
-            phoneNumber: record.phoneNumber
-          }
+        record: {
+          name: record.name,
+          phoneNumber: record.phoneNumber,
+        },
       },
     });
-    dialogRef.afterClosed().subscribe((result: RecordDialogResult|undefined) => {
-      if (!result) {
-        return;
-      }
-      const index = this.phoneBook.indexOf(record);
-      this.phoneBook[index] = result.record;
-    });
+    dialogRef
+      .afterClosed()
+      .subscribe((result: RecordDialogResult | undefined) => {
+        if (!result) {
+          return;
+        }
+        this.store.collection('phoneBook').doc(record.id).update(result.record);
+      });
   }
 
   deleteRecord(record: Record): void {
-    const index = this.phoneBook.indexOf(record);
-    this.phoneBook.splice(index, 1);
+    this.store.collection('phoneBook').doc(record.id).delete();
+  }
+
+  search(event: Event): void {
+    this.searchValue = (event.target as HTMLInputElement).value;
+  }
+
+  filteredPhoneBook(): Record[]{
+    if(this.searchValue == "")
+      return this.phoneBookLocal;
+
+    return this.phoneBookLocal.filter(p => p.name.includes(this.searchValue) || p.phoneNumber.includes(this.searchValue));
   }
 }

src/app/app.module.ts

@@ -15,6 +15,9 @@ import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { environment } from 'src/environments/environment';
+import { AngularFireModule } from '@angular/fire/compat';
+import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
 
 @NgModule({
   declarations: [
@@ -33,7 +36,9 @@ import { MatGridListModule } from '@angular/material/grid-list';
     MatInputModule,
     FormsModule,
     MatIconModule,
-    MatGridListModule
+    MatGridListModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFirestoreModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/record/record.component.ts

@@ -11,7 +11,7 @@ export class RecordComponent implements OnInit {
   @Output() edit = new EventEmitter<Record>();
   @Output() delete = new EventEmitter<Record>();
 
-  constructor() { }
+  constructor() {}
 
   ngOnInit(): void {
   }

src/environments/environment.ts

@@ -3,9 +3,16 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  firebase: {
+    apiKey: 'AIzaSyBSQFwnziIRFH7qNPO4K0_hDh-DYZYep20',
+    authDomain: 'phonebook-f0c58.firebaseapp.com',
+    databaseURL: 'https://phonebook-f0c58-default-rtdb.europe-west1.firebasedatabase.app',
+    projectId: 'phonebook-f0c58',
+    storageBucket: 'phonebook-f0c58.appspot.com',
+    messagingSenderId: '733111274248'
+  }
 };
-
 /*
  * For easier debugging in development mode, you can import the following file
  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.