11# :zap : Ionic Todo App
22
3- * App created using the [ Ionic 5 framework] ( https://ionicframework.com/docs ) , using a firebase cloud database to store to-do data.
3+ * App created using the [ Ionic framework] ( https://ionicframework.com/docs ) , using a firebase cloud database to store to-do data.
44* All CRUD operations can be carried out using the Ionic UI.
55* ** Note:** to open web links in a new window use: _ ctrl+click on link_
66
2222
2323## :books : General info
2424
25- * Note: Angular imports for Firestore are now from '@angular/fire /firestore'.
25+ * Note: Angular imports for Firestore are now from '@angular/fire /compat/ firestore'.
2626* Todos are passed to/from the firestore database as [ observables] ( https://angular.io/guide/observables ) .
27+ * Todos are now sorted by priority using ` this.todosCollection = db.collection<Todo>("todos", ref => ref.orderBy("priority")); ` in ` todo.service.ts `
2728
2829## :camera : Screenshots
2930
30- ![ todo items shown on ionic frontend and Firestore database] ( ./img/todo_items.png )
31+ ![ todo items shown on ionic frontend and Firestore database] ( ./imgs/todo_items.png )
32+ ![ todo items shown on ionic frontend and Firestore database] ( ./imgs/todos.png )
3133
3234## :signal_strength : Technologies
3335
34- * [ Ionic/angular v5 ] ( https://ionicframework.com/ )
35- * [ Ionic v5 ] ( https://ionicframework.com/ )
36- * [ Angular v12 ] ( https://angular.io/ )
37- * [ Firebase cloudstore v8 ] ( https://firebase.google.com/ )
36+ * [ Ionic/angular v6 ] ( https://ionicframework.com/ )
37+ * [ Ionic v6 ] ( https://ionicframework.com/ )
38+ * [ Angular v13 ] ( https://angular.io/ )
39+ * [ Firebase cloudstore v9 ] ( https://firebase.google.com/ )
3840
3941## :floppy_disk : Setup
4042
4345
4446## :computer : Code Examples
4547
46- * It was necessary to clear the setting for the firestore timestampsInSnapshots in app.module.ts - see below.
48+ * It was necessary to clear the setting for the firestore timestampsInSnapshots & add ` merge: true ` in ` app.module.ts ` to avoid errors - see below.
4749
4850``` typescript
4951import { AngularFirestoreModule , FirestoreSettingsToken } from ' @angular/fire/firestore' ;
@@ -54,7 +56,7 @@ import { AngularFirestoreModule, FirestoreSettingsToken } from '@angular/fire/fi
5456 AngularFirestoreModule ,
5557 ...
5658 ],
57- providers: [{ provide: FirestoreSettingsToken , useValue: {} }],
59+ providers: [{ provide: FirestoreSettingsToken , useValue: { timestampsInSnapshot: true , merge: true } }],
5860 bootstrap: [AppComponent ]
5961})
6062export class AppModule { }
@@ -71,8 +73,8 @@ export class AppModule { }
7173
7274## :clipboard : Status & To-do list
7375
74- * Status: Working. Updated june 2021.
75- * To-do: Add more detail/styling to front page.
76+ * Status: Working.
77+ * To-do: Add more detail/styling to front page. Add ESLint. Limit priority number to ` 1 to 10 `
7678
7779## :clap : Inspiration
7880
0 commit comments