From b3e67dcd5d99e82d377f6d4d92a6b0fce5964d26 Mon Sep 17 00:00:00 2001 From: hassansribet Date: Sun, 1 Nov 2020 00:00:13 +0100 Subject: [PATCH] integrate ngx-toastr & add confirmation messages --- package-lock.json | 8 ++++ package.json | 3 +- .../note-card/note-card.component.html | 3 +- .../note-card/note-card.component.scss | 2 + .../note-card/note-card.component.ts | 2 +- .../note-details/note-details.component.html | 3 -- .../notes-list/notes-list.component.html | 8 +++- .../notes-list/notes-list.component.scss | 10 ++++- .../_pages/notes-list/notes-list.component.ts | 41 +++++++++++++++++- src/app/_shared/services/notes.service.ts | 8 ++-- src/app/app.module.ts | 7 +++- src/assets/images/notes.svg | 42 +++++++++++++++++++ src/styles.scss | 13 ++++++ 13 files changed, 134 insertions(+), 16 deletions(-) create mode 100644 src/assets/images/notes.svg diff --git a/package-lock.json b/package-lock.json index 8070db1..acb6646 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11285,6 +11285,14 @@ "tslib": "^2.0.0" } }, + "ngx-toastr": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-13.1.0.tgz", + "integrity": "sha512-TS4rIfg/oPmmjKadsXLSNIN/A9LktcYPZayGhqLpzcjMud7XLLubLqbrmnH34UakMrUq6QCXXYYiU0QTMW5Qhw==", + "requires": { + "tslib": "^2.0.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index 2956e5f..c8ca77c 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ }, "private": true, "dependencies": { - "@angular/animations": "~10.2.0", + "@angular/animations": "^10.2.1", "@angular/common": "~10.2.0", "@angular/compiler": "~10.2.0", "@angular/core": "~10.2.0", @@ -23,6 +23,7 @@ "bulma": "^0.9.1", "firebase": "^8.0.0", "ngx-timeago": "^2.0.0", + "ngx-toastr": "^13.1.0", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.10.2" diff --git a/src/app/_components/note-card/note-card.component.html b/src/app/_components/note-card/note-card.component.html index 9b4b06a..b089914 100644 --- a/src/app/_components/note-card/note-card.component.html +++ b/src/app/_components/note-card/note-card.component.html @@ -1,4 +1,4 @@ -{{note.createdAt | timeago}} +{{ note.createdAt | timeago:live }}
@@ -15,3 +15,4 @@

{{ note.title }}

+ diff --git a/src/app/_components/note-card/note-card.component.scss b/src/app/_components/note-card/note-card.component.scss index 8e117bc..be29bdf 100644 --- a/src/app/_components/note-card/note-card.component.scss +++ b/src/app/_components/note-card/note-card.component.scss @@ -93,4 +93,6 @@ .createdAt { color: #555555; + font-size: 12px; + text-decoration: underline; } diff --git a/src/app/_components/note-card/note-card.component.ts b/src/app/_components/note-card/note-card.component.ts index ff4efd9..1c385bc 100644 --- a/src/app/_components/note-card/note-card.component.ts +++ b/src/app/_components/note-card/note-card.component.ts @@ -16,7 +16,7 @@ export class NoteCardComponent implements OnInit, AfterViewInit { @ViewChild('bodyText') bodyText: ElementRef; @ViewChild('truncator') truncator: ElementRef; - currentDate = new Date(); + live = false; constructor( private router: Router, private renderer: Renderer2, diff --git a/src/app/_pages/note-details/note-details.component.html b/src/app/_pages/note-details/note-details.component.html index 13fd7d8..2d5476e 100644 --- a/src/app/_pages/note-details/note-details.component.html +++ b/src/app/_pages/note-details/note-details.component.html @@ -1,6 +1,3 @@ -{{ action }} -{{ note.id }} -
diff --git a/src/app/_pages/notes-list/notes-list.component.html b/src/app/_pages/notes-list/notes-list.component.html index dbf4300..c874371 100644 --- a/src/app/_pages/notes-list/notes-list.component.html +++ b/src/app/_pages/notes-list/notes-list.component.html @@ -1,5 +1,5 @@
-
+
+
+ notes +

No note found. Try to add first one.

+
+
+ diff --git a/src/app/_pages/notes-list/notes-list.component.scss b/src/app/_pages/notes-list/notes-list.component.scss index 830d47b..6d8e99b 100644 --- a/src/app/_pages/notes-list/notes-list.component.scss +++ b/src/app/_pages/notes-list/notes-list.component.scss @@ -19,9 +19,17 @@ font-weight: bold; } + + .no-notes { + text-align: center; + + img { + width: 200px; + } + } } .notes-list { - margin-top: 35px; + margin-top: 20px; } diff --git a/src/app/_pages/notes-list/notes-list.component.ts b/src/app/_pages/notes-list/notes-list.component.ts index 7a07c40..b209afb 100644 --- a/src/app/_pages/notes-list/notes-list.component.ts +++ b/src/app/_pages/notes-list/notes-list.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { NotesService } from '../../_shared/services/notes.service'; import { Note } from '../../_shared/models/note.model'; import {Router} from '@angular/router'; +import {ToastrService} from 'ngx-toastr'; @Component({ selector: 'app-notes-list', @@ -9,27 +10,47 @@ import {Router} from '@angular/router'; styleUrls: ['./notes-list.component.scss'] }) export class NotesListComponent implements OnInit { + loading = false; inputSelected = false; notes: Note[] = []; constructor( private router: Router, + private toast: ToastrService, private notesService: NotesService, ) { } ngOnInit(): void { - console.log(new Date()); + this.loading = true; if (window.history.state.action !== undefined && window.history.state.result !== undefined) { console.log(window.history.state.action, window.history.state.result); + switch (window.history.state.result) { + case 'success': + if (window.history.state.action === 'add') { // add new note + this.onSuccess('Note added successfully!', 'Add Note'); + } else { // update note + this.onSuccess('Note updated successfully!', 'Update Note'); + } + break; + case 'error': + this.onError(); + break; + default: + // do nothing + break; + } } this.notesService.getNotes().subscribe(data => { + this.loading = false; this.notes = data.map(e => { return { id: e.payload.doc.id, ...e.payload.doc.data() } as Note; }); + }, err => { + this.onError(); }); } @@ -42,7 +63,23 @@ export class NotesListComponent implements OnInit { } deleteNote(noteId: any): void { - this.notesService.deleteNote(noteId); + if (confirm('Are you sure ?')) { + this.notesService.deleteNote(noteId) + .then(r => { + this.onSuccess('Note deleted successfully!', 'Delete Note'); + }) + .catch(err => { + this.onError(); + }); + } + } + + onSuccess(message: string, title: string): void { + this.toast.success(message, title); + } + + onError(): void { + this.toast.error('Sorry, try later!', 'Error'); } } diff --git a/src/app/_shared/services/notes.service.ts b/src/app/_shared/services/notes.service.ts index 06c03f8..5baa15d 100644 --- a/src/app/_shared/services/notes.service.ts +++ b/src/app/_shared/services/notes.service.ts @@ -13,7 +13,7 @@ export class NotesService { ) { } getNotes(): any { - return this.firestore.collection(this.notesCollectionName).snapshotChanges(); + return this.firestore.collection(this.notesCollectionName, ref => ref.orderBy('createdAt', 'desc')).snapshotChanges(); } addNote(note: Note): Promise { @@ -24,9 +24,7 @@ export class NotesService { return this.firestore.doc(this.notesCollectionName + '/' + note.id).update(note); } - deleteNote(id: string): any { - this.firestore.doc(this.notesCollectionName + '/' + id).delete().then(r => { - console.log('note deleted successfully!'); - }); + deleteNote(id: string): Promise { + return this.firestore.doc(this.notesCollectionName + '/' + id).delete(); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3757ba9..1e22a52 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,6 +16,9 @@ import { AngularFireDatabaseModule } from '@angular/fire/database'; import { environment } from '../environments/environment'; import { TimeagoModule } from 'ngx-timeago'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { ToastrModule } from 'ngx-toastr'; + @NgModule({ declarations: [ @@ -32,7 +35,9 @@ import { TimeagoModule } from 'ngx-timeago'; ReactiveFormsModule, AngularFireModule.initializeApp(environment.firebaseConfig), AngularFireDatabaseModule, - TimeagoModule.forRoot() + TimeagoModule.forRoot(), + BrowserAnimationsModule, + ToastrModule.forRoot(), ], providers: [], bootstrap: [AppComponent] diff --git a/src/assets/images/notes.svg b/src/assets/images/notes.svg new file mode 100644 index 0000000..e334f11 --- /dev/null +++ b/src/assets/images/notes.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles.scss b/src/styles.scss index 95f9919..8e874c0 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -2,3 +2,16 @@ @import './customizedStyle.scss'; @import '../node_modules/bulma/bulma.sass'; +@import '~ngx-toastr/toastr'; + +#toast-container>.toast-success { + background-color: $light-blue !important; +} + +#toast-container>.toast-error { + background-color: #e74c3c !important; +} + +#toast-container>.toast-warning { + background-color: $yellow !important; +}