create CRUD operations

package.json

@@ -22,6 +22,7 @@
     "@angular/router": "~10.2.0",
     "bulma": "^0.9.1",
     "firebase": "^8.0.0",
+    "ngx-timeago": "^2.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

src/app/_components/note-card/note-card.component.html

@@ -1,15 +1,17 @@
+<span class="createdAt">{{note.createdAt | timeago}}</span>
+
 <div #card class="note-card">
   <div class="content">
-    <h1 class="title">{{ title }}</h1>
+    <h1 class="title" (click)="goToNote('update', note)">{{ note.title }}</h1>
 
     <div #bodyText class="body">
-      <p>{{ description }}</p>
+      <p>{{ note.description }}</p>
 
       <div #truncator class="fade-out-truncation"></div>
     </div>
   </div>
 
-  <div class="delete-btn">
+  <div class="delete-btn" (click)="onDeleteNote()">
     <i class="fas fa-times"></i>
   </div>
 </div>

src/app/_components/note-card/note-card.component.scss

@@ -29,6 +29,10 @@
       font-weight: bold;
       color: $light-blue;
       margin-bottom: 10px !important;
+
+      &:hover {
+        text-decoration: underline;
+      }
     }
 
     .body {
@@ -86,3 +90,7 @@
     }
   }
 }
+
+.createdAt {
+  color: #555555;
+}

src/app/_components/note-card/note-card.component.ts

@@ -1,18 +1,26 @@
-import {AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild} from '@angular/core';
+import {Note} from '../../_shared/models/note.model';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-note-card',
   templateUrl: './note-card.component.html',
   styleUrls: ['./note-card.component.scss']
 })
 export class NoteCardComponent implements OnInit, AfterViewInit {
-  @Input() title: string;
-  @Input() description: string;
+  @Input() note: Note;
+
+  @Output() clickDelete: EventEmitter<string> = new EventEmitter<string>();
+  @Output() saveNote: EventEmitter<string> = new EventEmitter<string>();
 
   @ViewChild('bodyText') bodyText: ElementRef<HTMLElement>;
   @ViewChild('truncator') truncator: ElementRef<HTMLElement>;
 
-  constructor(private renderer: Renderer2) { }
+  currentDate = new Date();
+  constructor(
+    private router: Router,
+    private renderer: Renderer2,
+  ) { }
 
   ngOnInit(): void {
 
@@ -29,4 +37,38 @@ export class NoteCardComponent implements OnInit, AfterViewInit {
     }
   }
 
+  onDeleteNote(): void {
+    this.clickDelete.emit(this.note.id);
+  }
+
+  /**
+   *
+   * @param action: add or update
+   * navigate to noteDetails page for add or update a note
+   */
+  goToNote(action: string, noteP?: Note): any {
+    let note: Note = new Note();
+    switch (action) {
+      case 'add':
+        note = {
+          id: '',
+          title: '',
+          description: ''
+        };
+        break;
+      case 'update':
+        note = noteP;
+        break;
+    }
+
+    this.router.navigate(
+      ['note/'],
+      {
+        state: {
+          action,
+          note
+        }
+      }).then();
+  }
+
 }

src/app/_pages/note-details/note-details.component.html

@@ -1,3 +1,6 @@
+{{ action }}
+{{ note.id }}
+
 <div class="form-container">
   <form [formGroup]="noteForm" (ngSubmit)="onSubmit()">
     <div class="field">
@@ -31,8 +34,22 @@
     </div>
 
     <div class="actions is-grouped is-pulled-right">
-      <button class="button is-small is-text" type="button"><span class="cancel">Cancel</span></button>
-      <button class="button is-small is-primary" type="submit" [disabled]="noteForm.invalid"><span class="save">Save</span></button>
+      <button
+        class="button is-small is-text"
+        (click)="onClickCancel()"
+        type="button"
+        [disabled]="loading"
+      >
+        <span class="cancel">Cancel</span>
+      </button>
+      <button
+        class="button is-small is-primary btn-save"
+        type="submit"
+        [ngClass]="{ ' is-link is-loading': loading }"
+        [disabled]="noteForm.invalid || loading"
+      >
+        <span *ngIf="!loading" class="save">Save</span>
+      </button>
     </div>
   </form>
 </div>

src/app/_pages/note-details/note-details.component.scss

@@ -7,6 +7,10 @@
   padding-top: 50px;
 
   .actions {
+    .btn-save {
+      width: 65px;
+    }
+
     button {
       border-radius: 5px;
     }

src/app/_pages/note-details/note-details.component.ts

@@ -1,33 +1,135 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Note } from '../../_shared/models/note.model';
+import { Router } from '@angular/router';
+import { NotesService } from '../../_shared/services/notes.service';
 
 @Component({
   selector: 'app-note-details',
   templateUrl: './note-details.component.html',
   styleUrls: ['./note-details.component.scss']
 })
 export class NoteDetailsComponent implements OnInit {
+  action = '';
   note: Note;
   firstTime = true;
+  loading = false;
   noteForm: FormGroup;
 
-  constructor(private formBuilder: FormBuilder) { }
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder,
+    private notesService: NotesService,
+  ) { }
 
   ngOnInit(): void {
-    this.noteForm = this.formBuilder.group({
-      title: ['', Validators.required],
-      description: ['']
-    });
-    console.log(this.f.title);
+    if (window.history.state.action !== undefined && window.history.state.note !== undefined) {
+      this.action = window.history.state.action;
+      this.note = window.history.state.note;
+
+      this.noteForm = this.formBuilder.group({
+        title: [this.note.title, Validators.required],
+        description: [this.note.description]
+      });
+    } else {
+      this.action = 'add';
+      this.note = {
+        id: '',
+        title: '',
+        description: ''
+      };
+
+      this.noteForm = this.formBuilder.group({
+        title: ['', Validators.required],
+        description: ['']
+      });
+    }
   }
 
   get f(): any {
     return this.noteForm.controls;
   }
 
   onSubmit(): void {
-    this.firstTime = false;
-    console.log(this.noteForm, this.f.title);
+    if (this.firstTime) {
+      this.firstTime = false; // to hide the error message when the page is loaded
+    }
+
+    this.loading = true;
+    if (this.noteForm.valid) {
+      switch (this.action) {
+        case 'add':
+          this.addNote();
+          break;
+        case 'update':
+          this.updateNote();
+          break;
+      }
+    }
+  }
+
+  onClickCancel(): void {
+    this.router.navigate(
+      ['/'], {
+        state: {
+          action: this.action,
+          result: 'canceled'
+        }
+      });
+  }
+
+  addNote(): void {
+    this.notesService.addNote({
+      title: this.noteForm.value.title,
+      description: this.noteForm.value.description,
+      createdAt: new Date().toString()
+    })
+      .then(r => {
+        this.loading = false;
+        this.router.navigate(
+          ['/'], {
+            state: {
+              action: this.action,
+              result: 'success'
+            }
+          });
+      })
+      .catch(err => {
+        this.router.navigate(
+          ['/'], {
+            state: {
+              action: this.action,
+              result: 'error'
+            }
+          });
+      });
+  }
+
+  updateNote(): void {
+    this.notesService.updateNote({
+      id: this.note.id,
+      title: this.noteForm.value.title,
+      description: this.noteForm.value.description,
+    })
+      .then(r => {
+        this.loading = false;
+        this.router.navigate(
+          ['/'], {
+            state: {
+              action: this.action,
+              result: 'success'
+            }
+          });
+      })
+      .catch(err => {
+        console.log(err.message);
+        this.router.navigate(
+          ['/'], {
+            state: {
+              action: this.action,
+              result: 'error'
+            }
+          });
+      });
   }
 }

src/app/_pages/notes-list/notes-list.component.html

@@ -20,6 +20,16 @@
   </div>
 
   <div class="notes-list">
-    <app-note-card *ngFor="let n of notes;" [title]="n.title" [description]="n.description"></app-note-card>
+    <app-note-card
+      *ngFor="let n of notes;"
+      [note]="n"
+      (clickDelete)="deleteNote($event)"></app-note-card>
   </div>
+
+  <button [routerLink]="['/note']" class="button floating-add-button is-primary">
+    <span class="icon">
+      <i class="fas fa-plus"></i>
+    </span>
+    <span>Add</span>
+  </button>
 </div>

src/app/_pages/notes-list/notes-list.component.scss

@@ -1,3 +1,5 @@
+@import '../../../customizedStyle';
+
 .main-container {
   display: flex;
   flex-direction: column;
@@ -6,9 +8,20 @@
 
   margin: 0 auto;
   padding: 50px 10px 0 10px;
-}
 
+  .floating-add-button {
+    position: fixed;
+    bottom: 5px;
+    width: 500px;
+    border-radius: 5px;
+
+    box-shadow: 0 0 15px 5px rgba($light-blue, .2);
+
+    font-weight: bold;
+  }
+}
 
 .notes-list {
   margin-top: 35px;
 }
+