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 @@
-
+
+
+
+
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;
+}