persist todos with TypeORM

Author: championswimmer

app/components/App.js

@@ -1,11 +1,12 @@
 import Vue from 'nativescript-vue'
 import TaskItem from './TaskItem'
-import Todo from "~/models/Todo";
+import Todo from "../models/Todo";
 
 class App extends Vue {
     surprise: boolean
     newtask: string
     todos: Array<Todo>
+    refreshTodos: () => void
 }
 export default Vue.extend<App>({
     data() {
@@ -18,10 +19,21 @@ export default Vue.extend<App>({
             ]
         };
     },
+    mounted() {
+        this.refreshTodos()
+    },
     methods: {
+        refreshTodos() {
+            Todo.find().then((todos) => {
+                console.log(todos)
+                this.todos = todos
+            }).catch(console.error)
+        },
+
         addTodo() {
-            this.todos.push(new Todo(this.newtask, false))
-            console.log(this.todos)
+            const todo = new Todo(this.newtask, false);
+            todo.save().then(() => this.refreshTodos())
+                .catch(console.error)
         }
     },
     template: `
@@ -32,7 +44,7 @@ export default Vue.extend<App>({
         <Button @tap="addTodo" text="ADD TASK"></Button>
         <ListView id="todolist" for="todo in todos">
             <v-template>
-                <TaskItem :todo="todo"></TaskItem>
+                <TaskItem :todo="todo" @requestRefresh="refreshTodos"></TaskItem>
             </v-template>
         </ListView>
       </StackLayout>

app/components/App.ts

@@ -8,13 +8,16 @@ class TaskItem extends Vue {
 export default Vue.extend<TaskItem>({
     props: ['todo'],
     methods: {
-        created() {
-            console.log(this.todo)
+        async removeSelf() {
+            if (this.todo.id) {
+                await Todo.delete({id: this.todo.id})
+                this.$emit('requestRefresh')
+            }
         }
     },
     template: `
 <StackLayout class="task-item" orientation="horizontal" xmlns="http://schemas.nativescript.org/tns.xsd">
-    <Label class="task-item-task" :text="todo.task"></Label>
+    <Label @tap="removeSelf" class="task-item-task" :text="todo.task"></Label>
 </StackLayout>
     `
 })

app/components/TaskItem.ts

@@ -2,14 +2,34 @@ import Vue from 'nativescript-vue'
 import App from './components/App'
 import 'nativescript-sqlite'
 
-import {createConnection} from "typeorm/browser";
-
-createConnection({
-    database: 'test.db',
-    type: 'nativescript'
-}).then((connection) => {
-    console.log("Connection Created")
-}).catch((err: Error) => console.log(err))
+import {createConnection, getManager} from "typeorm/browser";
+
+import Todo from '~/models/Todo';
+
+(async () => {
+    try {
+        const connection = await createConnection({
+            database: 'test.db',
+            type: 'nativescript',
+            entities: [
+                Todo
+            ],
+            logging: true
+        })
+
+        console.log("Connection Created")
+
+        await connection.synchronize(false)
+
+        console.log("Synchronized")
+
+
+    } catch (err) {
+        console.error(err)
+    }
+})();
+
+
 
 Vue.config.silent = false
 

app/main.js

@@ -1,18 +1,20 @@
-import {Entity, PrimaryGeneratedColumn, Column} from "typeorm/browser";
+import {BaseEntity, Entity, PrimaryGeneratedColumn, Column} from "typeorm/browser";
 
 @Entity()
-export default class Todo {
-    @PrimaryGeneratedColumn('increment')
+export default class Todo extends BaseEntity {
+    @PrimaryGeneratedColumn()
     id?: number;
 
     @Column()
     task: string;
 
     @Column()
     done: boolean;
-    constructor(task, done) {
-        this.task = task
-        this.done = done
+
+    constructor(task: string, done: boolean) {
+        super();
+        this.task = task;
+        this.done = done;
     }
 
 }