Refactor the whole structure

Author: kiaking

package.json

@@ -6,17 +6,17 @@
     "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-eslint": "^3.0.4",
-    "@vue/cli-service": "^3.0.4",
-    "@vue/eslint-config-standard": "^3.0.4",
-    "@vuex-orm/core": "^0.31.12",
-    "normalize.css": "^8.0.0",
-    "postcss-css-variables": "^0.10.0",
-    "postcss-import": "^12.0.0",
-    "postcss-nested": "^4.1.0",
-    "vue": "^2.5.17",
-    "vue-template-compiler": "^2.5.17",
+    "@vue/cli-plugin-babel": "^3.9.2",
+    "@vue/cli-plugin-eslint": "^3.9.2",
+    "@vue/cli-service": "^3.9.3",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vuex-orm/core": "^0.32.0",
+    "normalize.css": "^8.0.1",
+    "postcss-css-variables": "^0.13.0",
+    "postcss-import": "^12.0.1",
+    "postcss-nested": "^4.1.2",
+    "vue": "^2.6.10",
+    "vue-template-compiler": "^2.6.10",
     "vuex": "^3.1.1"
   }
 }

src/components/App.vue

@@ -2,34 +2,35 @@
   <div class="App">
     <AppHeader />
 
-    <Description />
+    <AppDescription />
 
     <div class="container">
-      <div class="users"><Users /></div>
-      <div class="todos"><Todos /></div>
+      <div class="users"><UsersSection /></div>
+      <div class="todos"><TodosSection /></div>
     </div>
 
     <AppFooter />
   </div>
 </template>
 
 <script>
-import data from '../data'
-import store from '../store'
+import data from '@/data'
+import store from '@/store'
+import Todo from '@/models/Todo'
 import AppHeader from './AppHeader'
-import Description from './Description'
-import Users from './Users'
-import Todos from './Todos'
+import AppDescription from './AppDescription'
+import UsersSection from './UsersSection'
+import TodosSection from './TodosSection'
 import AppFooter from './AppFooter'
 
 export default {
   store,
 
   components: {
     AppHeader,
-    Description,
-    Users,
-    Todos,
+    AppDescription,
+    UsersSection,
+    TodosSection,
     AppFooter
   },
 
@@ -44,11 +45,7 @@ export default {
     // should be the response from the API Backend.
     const initialData = data
 
-    this.$store.dispatch('entities/todos/create', { data: initialData })
-  },
-
-  mounted () {
-    this.$store.dispatch('entities/users/test')
+    Todo.insert({ data: initialData })
   }
 }
 </script>

src/components/Description.vue renamed to src/components/AppDescription.vue

@@ -2,54 +2,55 @@
   <div class="TodosList">
     <div class="todo" :class="{ done: todo.done }" :key="todo.id" v-for="todo in todos">
       <button class="icon" @click="toggle(todo)">
-        <CheckCircle class="svg check" />
+        <IconCheckCircle class="svg check" />
       </button>
 
       <input
         class="input"
         :value="todo.title"
         placeholder="Type in the title of the task!"
-        @input="e => { update(todo.id, e.target.value) }"
+        @input="e => { update(todo, e.target.value) }"
       >
 
-      <Assignee :todoId="todo.id" />
+      <TodoListAssignee :todoId="todo.id" />
 
-      <button class="icon" @click="destroy(todo.id)">
-        <Trash class="svg" />
+      <button class="icon" @click="destroy(todo)">
+        <IconTrash class="svg" />
       </button>
     </div>
   </div>
 </template>
 
 <script>
-import CheckCircle from './icons/CheckCircle'
-import Trash from './icons/Trash'
-import Assignee from './TodosAssignee'
+import Todo from '@/models/Todo'
+import IconCheckCircle from './icons/IconCheckCircle'
+import IconTrash from './icons/IconTrash'
+import TodoListAssignee from './TodoListAssignee'
 
 export default {
   components: {
-    CheckCircle,
-    Trash,
-    Assignee
+    IconCheckCircle,
+    IconTrash,
+    TodoListAssignee
   },
 
   computed: {
     todos () {
-      return this.$store.getters['entities/todos/query']().orderBy('id', 'desc').get()
+      return Todo.query().orderBy('id', 'desc').get()
     }
   },
 
   methods: {
     toggle (todo) {
-      this.$store.dispatch('entities/todos/update', { id: todo.id, done: !todo.done })
+      todo.$update({ done: !todo.done })
     },
 
-    update (id, title) {
-      this.$store.dispatch('entities/todos/update', { id, title })
+    update (todo, title) {
+      todo.$update({ title })
     },
 
-    destroy (id) {
-      this.$store.dispatch('entities/todos/delete', id)
+    destroy (todo) {
+      todo.$delete()
     }
   }
 }

src/components/TodosList.vue renamed to src/components/TodoList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="TodosAssignee">
-    <User class="user" />
+    <IconUser class="user" />
 
     <select class="select" :class="{ selected: !!todo.assignee }" @change="update">
       <option class="option" value="">Choose assignee</option>
@@ -15,18 +15,20 @@
       </option>
     </select>
 
-    <ChevronDown class="down" />
+    <IconChevronDown class="down" />
   </div>
 </template>
 
 <script>
-import User from './icons/User'
-import ChevronDown from './icons/ChevronDown'
+import User from '@/models/User'
+import Todo from '@/models/Todo'
+import IconUser from './icons/IconUser'
+import IconChevronDown from './icons/IconChevronDown'
 
 export default {
   components: {
-    User,
-    ChevronDown
+    IconUser,
+    IconChevronDown
   },
 
   props: {
@@ -35,17 +37,17 @@ export default {
 
   computed: {
     users () {
-      return this.$store.getters['entities/users/query']().orderBy('name').get()
+      return User.query().orderBy('name').get()
     },
 
     todo () {
-      return this.$store.getters['entities/todos/query']().with('assignee').find(this.todoId)
+      return Todo.query().with('assignee').find(this.todoId)
     }
   },
 
   methods: {
     update (e) {
-      this.$store.dispatch('entities/todos/update', {
+      Todo.update({
         id: this.todoId,
         user_id: e.target.value
       })

src/components/TodosAssignee.vue renamed to src/components/TodoListAssignee.vue

@@ -6,22 +6,23 @@
         <button class="button" @click="add">ADD TODO</button>
       </div>
 
-      <TodosList />
+      <TodoList />
     </div>
   </section>
 </template>
 
 <script>
-import TodosList from './TodosList'
+import Todo from '@/models/Todo'
+import TodoList from './TodoList'
 
 export default {
   components: {
-    TodosList
+    TodoList
   },
 
   methods: {
     add () {
-      this.$store.dispatch('entities/todos/insert', {
+      Todo.insert({
         data: { title: '' }
       })
     }

src/components/Todos.vue renamed to src/components/TodosSection.vue

@@ -5,39 +5,40 @@
         class="input"
         :value="user.name"
         placeholder="Type in user's name!"
-        @input="e => { update(user.id, e.target.value) }"
+        @input="e => { update(user, e.target.value) }"
       >
 
       <p class="tasks">{{ user.todos.length }} Tasks</p>
 
-      <button class="icon" @click="destroy(user.id)">
-        <Trash class="trash" />
+      <button class="icon" @click="destroy(user)">
+        <IconTrash class="trash" />
       </button>
     </div>
   </div>
 </template>
 
 <script>
-import Trash from './icons/Trash'
+import User from '@/models/User'
+import IconTrash from './icons/IconTrash'
 
 export default {
   components: {
-    Trash
+    IconTrash
   },
 
   computed: {
     users () {
-      return this.$store.getters['entities/users/query']().with('todos').orderBy('id', 'desc').get()
+      return User.query().with('todos').orderBy('id', 'desc').get()
     }
   },
 
   methods: {
-    update (id, name) {
-      this.$store.dispatch('entities/users/update', { id, name })
+    update (user, name) {
+      user.$update({ name })
     },
 
-    destroy (id) {
-      this.$store.dispatch('entities/users/delete', id)
+    destroy (user) {
+      user.$delete()
     }
   }
 }

src/components/UsersList.vue renamed to src/components/UserList.vue

@@ -6,22 +6,23 @@
         <button class="button" @click="add">ADD USER</button>
       </div>
 
-      <UsersList />
+      <UserList />
     </div>
   </section>
 </template>
 
 <script>
-import UsersList from './UsersList'
+import User from '@/models/User'
+import UserList from './UserList'
 
 export default {
   components: {
-    UsersList
+    UserList
   },
 
   methods: {
     add () {
-      this.$store.dispatch('entities/users/insert', {
+      User.insert({
         data: { name: '' }
       })
     }

src/components/Users.vue renamed to src/components/UsersSection.vue

@@ -1,12 +1,10 @@
 import { Database } from '@vuex-orm/core'
 import User from '@/models/User'
 import Todo from '@/models/Todo'
-import users from './modules/users'
-import todos from './modules/todos'
 
 const database = new Database()
 
-database.register(User, users)
-database.register(Todo, todos)
+database.register(User)
+database.register(Todo)
 
 export default database

src/components/icons/CheckCircle.vue renamed to src/components/icons/IconCheckCircle.vue

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexORM from '@vuex-orm/core'
-import database from './database'
+import database from '@/database'
 
 Vue.use(Vuex)