Category

api/entities/category.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-cycle */
+import {
+    Entity,
+    Column,
+    PrimaryGeneratedColumn,
+    OneToMany,
+    ManyToOne,
+  } from 'typeorm';
+  import ToDo from './todo';
+  import USER from './user';
+
+  @Entity()
+  export default class category {
+    @PrimaryGeneratedColumn()
+    id
+
+    @Column({ type: 'varchar', unique: true })
+    kind
+
+    @OneToMany(() => ToDo, (todo) => todo.categorys, { eager: true })
+    category
+
+    @ManyToOne(() => USER, (user) => user.kind)
+    userCategory
+  }

api/entities/todo.js

@@ -0,0 +1,26 @@
+import {
+  Entity,
+  Column,
+  PrimaryGeneratedColumn,
+  ManyToOne,
+} from 'typeorm';
+import User from './user';
+import Category from './category';
+
+@Entity()
+export default class ToDo {
+  @PrimaryGeneratedColumn()
+  id
+
+  @Column({ type: 'boolean' })
+  done
+
+  @Column({ type: 'varchar' })
+  title
+
+  @ManyToOne(() => User, (user) => user.todos)
+  user
+
+  @ManyToOne(() => Category, (kind) => kind.category)
+  categorys
+}

api/entities/user.js

@@ -1,4 +1,12 @@
-import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';
+/* eslint-disable import/no-cycle */
+import {
+  Entity,
+  Column,
+  PrimaryGeneratedColumn,
+  OneToMany,
+} from 'typeorm';
+import ToDo from './todo';
+import category from './category';
 
 @Entity()
 export default class User {
@@ -10,4 +18,10 @@ export default class User {
 
   @Column({ type: 'varchar', nullable: false })
   password
+
+  @OneToMany(() => ToDo, (todo) => todo.user, { eager: true })
+  todos
+
+  @OneToMany(() => category, (kind) => kind.userCategory, { eager: true })
+  category
 }

api/middleware/isAuthenticated.js

@@ -1,6 +1,8 @@
-export default (req, res, next) => {
+const authenticated = (req, res, next) => {
   if (!req.isAuthenticated()) {
     return res.status(401).send('You are not authenticated');
   }
   return next();
 };
+
+export default authenticated;

api/routes/category.js

@@ -0,0 +1,22 @@
+import { Router } from 'express';
+import { getRepository, getManager } from 'typeorm';
+import isAuthenticated from '../middleware/isAuthenticated';
+import category from '../entities/category';
+
+const router = Router();
+router.route('/category')
+  .all(isAuthenticated)
+  .get((req, res) => {
+    res.send(req.user.category);
+  })
+  .post((req, res) => {
+    const { done, title, kind} = req.body;
+    const manager = getManager();
+    const todo = manager.create(ToDo, {done, title, kind});
+    todo.user = req.user;
+    manager.save(todo).then((savedTodo) => {
+      res.send(savedTodo);
+    });
+  });
+
+  export default router;

api/routes/login.js

@@ -1,4 +1,5 @@
 import { Router } from 'express';
+import isAuth from '../middleware/isAuthenticated';
 
 export default (passport) => {
   const router = Router();
@@ -17,5 +18,8 @@ export default (passport) => {
     req.logout();
     return res.send();
   });
+  router.get('/checkLogin', isAuth, (req, res) => {
+    res.send(req.user);
+  });
   return router;
 };

api/routes/todo.js

@@ -0,0 +1,52 @@
+import { Router } from 'express';
+import { getRepository, getManager } from 'typeorm';
+import isAuthenticated from '../middleware/isAuthenticated';
+import ToDo from '../entities/todo';
+
+const router = Router();
+router.route('/todos')
+  .all(isAuthenticated)
+  .get((req, res) => {
+    res.send(req.user.todos);
+  })
+  .post((req, res) => {
+    const { done, title, kind} = req.body;
+    const manager = getManager();
+    const todo = manager.create(ToDo, {done, title, kind});
+    todo.user = req.user;
+    manager.save(todo).then((savedTodo) => {
+      res.send(savedTodo);
+    });
+  });
+router.route('/todos/:id')
+  .all(isAuthenticated)
+  .all((req, res, next) => {
+    getRepository(ToDo).findOneOrFail(
+      { where: { userId: req.user.id, id: req.params.id } },
+    ).then((_foundTodo) => {
+      req.todo = _foundTodo;
+      next();
+    }, () => {
+      res.send(404);
+    });
+  })
+  .put((req, res) => {
+    const foundTodo = req.todo;
+    const { title, done, kind} = req.body;
+    foundTodo.title = title;
+    foundTodo.done = done;
+    foundTodo.kind = kind;
+    getManager().save(foundTodo).then((updatedTodo) => {
+      res.send(updatedTodo);
+    });
+  })
+  .get((req, res) => {
+    res.send(req.todo);
+  })
+  .delete((req, res) => {
+    getManager().delete(ToDo, req.todo.id).then(() => {
+      res.send(200);
+    });
+  });
+
+export default router;

api/server.js

@@ -6,6 +6,8 @@ import passport from 'passport';
 import config from './config/passport';
 
 import login from './routes/login';
+import todo from './routes/todo';
+import category from './routes/category';
 
 // Setting up port
 const PORT = process.env.PORT || 3000;
@@ -24,12 +26,15 @@ config();
 
 // wire up all the routes
 app.use(login(passport));
+app.use(todo);
+app.use(category);
 
 // respond with "hello world" when a GET request is made to the homepage
 app.get('/', (_req, res) => {
   res.send('hello world');
 });
 
 createConnection().then(() => {
+  // eslint-disable-next-line no-console
   app.listen(PORT, () => console.log('Example app listening on port 3000!'));
 });

webapp/src/App.vue

@@ -57,8 +57,13 @@ export default {
   },
   methods: {
     logout: function() {
-      this.$store.dispatch("logout");
+      this.$store.dispatch("logout").then(() => {
+        return this.$router.push("/");
+      });
     }
+  },
+  mounted: function() {
+    this.$store.dispatch("checkLoggedIn");
   }
 };
 </script>

webapp/src/components/ToDo.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="todo">
-    <b-checkbox v-model="todo.done" />
-    <span class="todo-title">
-      {{ todo.title }}
+  <div class="todo columns">
+    <b-checkbox v-model="todo.done" v-on:input="handleCheck" />
+    <span class="todo-title column">
+      {{todo.title}}
     </span>
+    <span class="todo-title column">
+      {{todo.kind}}
+    </span>
+    <b-button v-on:click="handleDelete">Delete</b-button>
   </div>
 </template>
 
@@ -17,6 +21,14 @@ export default {
         return {};
       }
     }
+  },
+  methods: {
+    handleCheck: function(value) {
+      this.$store.dispatch("updateTodo", { ...this.todo, done: value });
+    },
+    handleDelete: function() {
+      this.$store.dispatch("deleteTodo", this.todo);
+    }
   }
 };
 </script>

webapp/src/store.js

@@ -1,15 +1,9 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import VuexPersist from "vuex-persist";
 import axios from "axios";
 
 Vue.use(Vuex);
 
-const vuexPersist = new VuexPersist({
-  key: "project-template",
-  storage: window.localStorage
-});
-
 export const mutations = {
   login: function(state) {
     state.loginState = { ...state.loginState, loggedIn: true };
@@ -18,18 +12,29 @@ export const mutations = {
     state.loginState = { ...state.loginState, loggedIn: false };
   },
   addToDo(state, todo) {
-    state.todos = [
-      ...state.todos,
-      { ...todo, done: false, id: state.todos.length + 1 }
-    ];
+    state.todoIdx = state.todoIdx + 1;
+    state.todos = [...state.todos, { ...todo, done: false, id: state.todoIdx}];
+  },
+  updateToDo(state, todo) {
+    state.todos = state.todos.map(td => (td.id === todo.id ? todo : td));
+  },
+  deleteToDo(state, todo) {
+    state.todos = state.todos.filter(td => td.id !== todo.id);
+  },
+  todosLoaded(state, todos) {
+    state.todos = todos;
+  },
+  categoryLoaded(state, category) {
+    state.categorys = category;
   }
 };
 
 export const actions = {
-  login: function({ commit }, payload) {
+  login: function({ commit, dispatch }, payload) {
     const { email, password } = payload;
     return axios.post("/api/login", { email, password }).then(() => {
       commit("login");
+      return dispatch("loadTodos");
     });
   },
   logout: function({ commit }) {
@@ -38,18 +43,46 @@ export const actions = {
     });
   },
   addToDo({ commit }, toDo) {
-    debugger;
-    commit("addToDo", toDo);
+    return axios.post("/api/todos", toDo).then(response => {
+      commit("addToDo", response.data);
+    });
+  },
+
+  updateTodo({ commit }, toDo) {
+    return axios.put(`/api/todos/${toDo.id}`, toDo).then(response => {
+      commit("updateToDo", response.data);
+    });
+  },
+  deleteTodo({ commit }, toDo) {
+    return axios.delete(`/api/todos/${toDo.id}`).then(() => {
+      commit("deleteToDo", toDo);
+    });
+  },
+  loadToDos({ commit }) {
+    return axios.get("/api/todos").then(response => {
+      commit("todosLoaded", response.data);
+    });
+  },
+  loadCategory({ commit }) {
+    return axios.get("/api/category").then(response => {
+      commit("categoryLoaded", response.data);
+    });
+  },
+  checkLoggedIn({ commit }) {
+    return axios.get("/api/checkLogin").then(() => {
+      commit("login");
+    });
   }
 };
 
 export default new Vuex.Store({
-  plugins: [vuexPersist.plugin],
   state: {
     todos: [],
     loginState: {
       loggedIn: false
-    }
+    },
+    todoIdx: 0,
+    categorys:[],
   },
   mutations,
   actions