├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── CreateModal.vue
    │   ├── EditModal.vue
    │   ├── TaskItem.vue
    │   ├── TaskList.vue
    │   └── TaskListItem.vue
    ├── main.ts
    ├── shims-vue.d.ts
    └── store
    │   ├── actions.ts
    │   ├── getters.ts
    │   ├── index.ts
    │   ├── mutations.ts
    │   └── state.ts
└── tsconfig.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: false,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/typescript/recommended'
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 2020
13 |   },
14 |   rules: {
15 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vuex-ts-app
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuex-ts-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "bulma": "^0.9.1",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^3.0.0",
14 |     "vuex": "^4.0.0-0"
15 |   },
16 |   "devDependencies": {
17 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
18 |     "@typescript-eslint/parser": "^2.33.0",
19 |     "@vue/cli-plugin-babel": "~4.5.0",
20 |     "@vue/cli-plugin-eslint": "~4.5.0",
21 |     "@vue/cli-plugin-typescript": "~4.5.0",
22 |     "@vue/cli-plugin-vuex": "~4.5.0",
23 |     "@vue/cli-service": "~4.5.0",
24 |     "@vue/compiler-sfc": "^3.0.0",
25 |     "@vue/eslint-config-typescript": "^5.0.2",
26 |     "eslint": "^6.7.2",
27 |     "eslint-plugin-vue": "^7.0.0-0",
28 |     "typescript": "~3.9.3"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emmanuelhashy/vue3-task-manager/5134f3c70a18f146f180230adccb5f033b6c22dc/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 9 |     <title><%= htmlWebpackPlugin.options.title %></title>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { computed, defineComponent, onMounted } from 'vue'
 3 | import TaskList from './components/TaskList.vue'
 4 | import { useStore } from './store'
 5 | import { ActionTypes } from './store/actions'
 6 | 
 7 | export default defineComponent({
 8 |   components: { TaskList },
 9 |   setup() {
10 |     const store = useStore()
11 | 
12 |     const loading = computed(() => store.state.loading)
13 |     onMounted(() => store.dispatch(ActionTypes.GetTaskItems))
14 | 
15 |     const completedCount = computed(() => store.getters.completedTaskCount)
16 |     const totalCount = computed(() => store.getters.totalTaskCount)
17 | 
18 |     return { loading, completedCount, totalCount }
19 |   }
20 | })
21 | </script>
22 | 
23 | <template>
24 |   <div class="container mx-auto mt-4">
25 |     <h1 class="is-size-3 has-text-centered p-2 has-text-weight-bold">
26 |       Vue 3 Task Management App with Typescript and Vuex 4
27 |     </h1>
28 | 
29 |     <div v-if="loading">
30 |       <h3 class="has-text-centered mt-4">Loading...</h3>
31 |     </div>
32 |     <div v-else>
33 |       <p class="has-text-centered mt-2">
34 |         {{ completedCount }} of {{ totalCount }} completed.
35 |       </p>
36 |       <TaskList/>
37 |     </div>
38 |   </div>
39 | </template>
40 | <style>
41 | @import '~bulma/css/bulma.css';
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/emmanuelhashy/vue3-task-manager/5134f3c70a18f146f180230adccb5f033b6c22dc/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/CreateModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="modal is-active">
  3 |     <div class="modal-background"></div>
  4 |     <div class="modal-content">
  5 |       <form @submit.prevent="createTask">
  6 |         <div class="field">
  7 |           <label class="label">Task Title</label>
  8 |           <div class="control">
  9 |             <input
 10 |               v-model="title"
 11 |               class="input"
 12 |               type="text"
 13 |               placeholder="Enter task"
 14 |             />
 15 |           </div>
 16 |         </div>
 17 | 
 18 |         <div class="field">
 19 |           <label class="label">Description</label>
 20 |           <div class="control">
 21 |             <textarea
 22 |               v-model="description"
 23 |               class="textarea"
 24 |               placeholder="Textarea"
 25 |             ></textarea>
 26 |           </div>
 27 |         </div>
 28 | 
 29 |         <div class="field">
 30 |           <label class="label">Assigned By</label>
 31 |           <div class="control">
 32 |             <input
 33 |               v-model="createdBy"
 34 |               class="input"
 35 |               type="text"
 36 |               placeholder="Enter Assigner's name"
 37 |             />
 38 |           </div>
 39 |         </div>
 40 | 
 41 |         <div class="field">
 42 |           <label class="label">Assigned To</label>
 43 |           <div class="control">
 44 |             <input
 45 |               v-model="assignedTo"
 46 |               class="input"
 47 |               type="text"
 48 |               placeholder="Enter task creator's name"
 49 |             />
 50 |           </div>
 51 |         </div>
 52 | 
 53 |         <div class="field is-grouped">
 54 |           <div class="control">
 55 |             <button type="submit" class="button is-link">Submit</button>
 56 |           </div>
 57 |           <div class="control" @click="closeModal">
 58 |             <button class="button is-link is-light">Cancel</button>
 59 |           </div>
 60 |         </div>
 61 |       </form>
 62 |     </div>
 63 |     <button
 64 |       class="modal-close is-large"
 65 |       @click="closeModal"
 66 |       aria-label="close"
 67 |     ></button>
 68 |   </div>
 69 | </template>
 70 | <script lang="ts">
 71 | import { defineComponent, reactive, toRefs } from 'vue'
 72 | import { useStore } from '@/store'
 73 | import { TaskItem } from '@/store/state'
 74 | import { MutationType } from '@/store/mutations'
 75 | export default {
 76 |   name: 'CreateModal',
 77 |   setup() {
 78 |     const state = reactive({
 79 |       title: '',
 80 |       description: '',
 81 |       createdBy: '',
 82 |       assignedTo: ''
 83 |     })
 84 |     const store = useStore()
 85 | 
 86 |     const createTask = () => {
 87 |       if (
 88 |         state.title === '' ||
 89 |         state.description === '' ||
 90 |         state.createdBy === '' ||
 91 |         state.assignedTo === ''
 92 |       )
 93 |         return
 94 | 
 95 |       const task: TaskItem = {
 96 |         id: Date.now(),
 97 |         title: state.title,
 98 |         description: state.description,
 99 |         createdBy: state.createdBy,
100 |         assignedTo: state.assignedTo,
101 |         completed: false,
102 |         editing: false
103 |       }
104 |       store.commit(MutationType.CreateTask, task)
105 |       state.title = ''
106 |       state.createdBy = ''
107 |       state.assignedTo = ''
108 |       state.description = ''
109 |     }
110 | 
111 |     const closeModal = () => {
112 |       store.commit(MutationType.SetCreateModal, false)
113 |     }
114 | 
115 |     return { closeModal, ...toRefs(state), createTask }
116 |   }
117 | }
118 | </script>
119 | 


--------------------------------------------------------------------------------
/src/components/EditModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="modal is-active">
  3 |     <div class="modal-background"></div>
  4 |     <div class="modal-content">
  5 |       <form @submit.prevent="updateTask">
  6 |           <h1>Edit Modal</h1>
  7 |         <div class="field">
  8 |           <label class="label">Task Title</label>
  9 |           <div class="control">
 10 |             <input
 11 |               v-model="title"
 12 |               class="input"
 13 |               type="text"
 14 |               placeholder="Enter task"
 15 |             />
 16 |           </div>
 17 |         </div>
 18 | 
 19 |         <div class="field">
 20 |           <label class="label">Description</label>
 21 |           <div class="control">
 22 |             <textarea
 23 |               v-model="description"
 24 |               class="textarea"
 25 |               placeholder="Textarea"
 26 |             ></textarea>
 27 |           </div>
 28 |         </div>
 29 | 
 30 |         <div class="field">
 31 |           <label class="label">Assigned By</label>
 32 |           <div class="control">
 33 |             <input
 34 |               v-model="createdBy"
 35 |               class="input"
 36 |               type="text"
 37 |               placeholder="Enter Assigner's name"
 38 |             />
 39 |           </div>
 40 |         </div>
 41 | 
 42 |         <div class="field">
 43 |           <label class="label">Assigned To</label>
 44 |           <div class="control">
 45 |             <input
 46 |               v-model="assignedTo"
 47 |               class="input"
 48 |               type="text"
 49 |               placeholder="Enter task creator's name"
 50 |             />
 51 |           </div>
 52 |         </div>
 53 | 
 54 |         <div class="field is-grouped">
 55 |           <div class="control">
 56 |             <button type="submit" class="button is-link">Submit</button>
 57 |           </div>
 58 |           <div class="control" @click="closeModal">
 59 |             <button class="button is-link is-light">Cancel</button>
 60 |           </div>
 61 |         </div>
 62 |       </form>
 63 |     </div>
 64 |     <button
 65 |       class="modal-close is-large"
 66 |       @click="closeModal"
 67 |       aria-label="close"
 68 |     ></button>
 69 |   </div>
 70 | </template>
 71 | <script lang="ts">
 72 | import { defineComponent, reactive, toRefs, computed, onMounted } from 'vue'
 73 | import { useStore } from '@/store'
 74 | import { TaskItem } from '@/store/state'
 75 | import { MutationType } from '@/store/mutations'
 76 | export default {
 77 |   name: 'EditModal',
 78 |   props: {
 79 |       id: { type: Number, required: true }
 80 |   },
 81 |   setup(props: any) {
 82 |     const state = reactive({
 83 |       title: '',
 84 |       description: '',
 85 |       createdBy: '',
 86 |       assignedTo: ''
 87 |     })
 88 |     const store = useStore()
 89 | 
 90 |     const getTaskById = computed(() => store.getters.getTaskById(Number(props.id)))
 91 |     console.log("task by id", getTaskById)
 92 | 
 93 | 
 94 | 
 95 |     const setFields = () => {
 96 |        const task = store.getters.getTaskById(Number(props.id))
 97 |        if(task) {
 98 |            console.log("task si kolo", task)
 99 |            state.title = task.title
100 |            state.createdBy = task.createdBy
101 |            state.assignedTo = task.assignedTo
102 |            state.description = task.description
103 |        }
104 |     }
105 | 
106 |     onMounted(() => { setFields() });
107 | 
108 |     const updateTask = () => {
109 |       if (
110 |         state.title === '' ||
111 |         state.description === '' ||
112 |         state.createdBy === '' ||
113 |         state.assignedTo === ''
114 |       )
115 |         return
116 | 
117 |       const task: TaskItem = {
118 |         id: props.id,
119 |         title: state.title,
120 |         description: state.description,
121 |         createdBy: state.createdBy,
122 |         assignedTo: state.assignedTo,
123 |         completed: false,
124 |         editing: false
125 |       }
126 |       store.commit(MutationType.UpdateTask, task)
127 |       state.title = ''
128 |       state.createdBy = ''
129 |       state.assignedTo = ''
130 |       state.description = ''
131 |     }
132 | 
133 |     const closeModal = () => {
134 |       store.commit(MutationType.SetEditModal, {showModal: false, taskId: undefined})
135 |     }
136 | 
137 |     return { closeModal, ...toRefs(state), updateTask }
138 |   }
139 | }
140 | </script>
141 | <style scoped>
142 | label {
143 |     color: #ffffff;
144 | }
145 | h1 {
146 |     color: #ffffff;
147 |     text-align: center;
148 |     font-size: 2rem;
149 |     margin-bottom: 3rem;
150 | }
151 | </style>


--------------------------------------------------------------------------------
/src/components/TaskItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal is-active">
 3 |     <div class="modal-background"></div>
 4 |     <div class="modal-content">
 5 |       <h1>VIEW TASK</h1>
 6 |       <div class="card">
 7 |         <div class="card-content">
 8 |           <div class="media">
 9 |             <div class="media-content">
10 |               <p class="title is-4">Title: {{ task.title }}</p>   
11 |               <p class="subtitle is-6"> <b>Assigned To:</b>  {{ task.assignedTo }}</p>
12 |               <p class="subtitle is-6"> <b>Created By:</b>  {{ task.createdBy }}</p>
13 |             </div>
14 |           </div>
15 |           <div class="content">
16 |             <p class="subtitle is-6">Description: {{ task.description }}</p>
17 |           </div>
18 |         </div>
19 |       </div>
20 |     </div>
21 |     <button
22 |       class="modal-close is-large"
23 |       @click="closeModal"
24 |       aria-label="close"
25 |     ></button>
26 |   </div>
27 | </template>
28 | <script lang="ts">
29 | import { defineComponent, reactive, toRefs, computed, onMounted } from "vue";
30 | import { useStore } from "@/store";
31 | import { TaskItem } from "@/store/state";
32 | import { MutationType } from "@/store/mutations";
33 | export default {
34 |   name: "EditModal",
35 |   props: {
36 |     id: { type: Number, required: true },
37 |   },
38 |   setup(props: any) {
39 |     const store = useStore();
40 | 
41 |     const task = computed(() => store.getters.getTaskById(Number(props.id)));
42 | 
43 |     const closeModal = () => {
44 |       store.commit(MutationType.SetTaskModal, {
45 |         showModal: false,
46 |         taskId: undefined,
47 |       });
48 |     };
49 | 
50 |     return { closeModal, task };
51 |   },
52 | };
53 | </script>
54 | <style scoped>
55 | h1 {
56 |     color: #ffffff;
57 |     text-align: center;
58 |     font-size: 2rem;
59 |     margin-bottom: 3rem;
60 | }
61 | </style>


--------------------------------------------------------------------------------
/src/components/TaskList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <table class="table">
 3 |     <thead>
 4 |       <tr>
 5 |         <th><abbr title="Position">Task Id</abbr></th>
 6 |         <th>Completed</th>
 7 |         <th>Task</th>
 8 |         <th><abbr title="Won">Created By</abbr></th>
 9 |         <th><abbr title="Drawn">Assigned To</abbr></th>
10 |         <th><abbr title="Lost">Actions</abbr></th>
11 |       </tr>
12 |     </thead>
13 |     <tbody v-if="tasks">
14 |       <tr v-for="task in tasks" :key="task.id">
15 |         <TaskListItem  v-bind="task" />
16 |       </tr>
17 |     </tbody>
18 |     <tfoot>
19 |       <CreateModal v-show="showCreateModal"></CreateModal>
20 |       <button class="button is-link" @click="setModal">Create Task</button>
21 |     </tfoot>
22 |   </table>
23 |   <EditModal v-if="showEditModal" :id="editTaskId"></EditModal>
24 |   <TaskItem v-if="showTaskModal" :id="showTaskId"></TaskItem>
25 | </template>
26 | <script>
27 | import CreateModal from './CreateModal'
28 | import EditModal from './EditModal'
29 | import TaskItem from './TaskItem'
30 | import TaskListItem from './TaskListItem'
31 | import { defineComponent, computed } from 'vue'
32 | import { useStore } from '@/store'
33 | import { MutationType } from '@/store/mutations'
34 | export default defineComponent({
35 |   name: 'Table',
36 |   components: {
37 |     CreateModal,
38 |     TaskListItem,
39 |     TaskItem,
40 |     EditModal
41 |   },
42 |   setup() {
43 |     const store = useStore()
44 | 
45 |     const setModal = () => {
46 |       store.commit(MutationType.SetCreateModal, true)
47 |     }
48 | 
49 |     const showCreateModal = computed(() => store.state.showCreateModal)
50 |     const showEditModal = computed(() => store.state.showEditModal)
51 |     const editTaskId = computed(() => store.state.editModalTaskId)
52 |     const showTaskModal = computed(() => store.state.showTaskModal)
53 |     const showTaskId = computed(()=> store.state.showTaskId)
54 | 
55 |     const tasks = computed(() => {console.log(store.state.tasks); return store.state.tasks})
56 |     console.log({ tasks })
57 |     return { showCreateModal, setModal, tasks, showEditModal,showTaskModal, editTaskId, showTaskId }
58 |   }
59 | })
60 | </script>
61 | <style scoped>  
62 | table {
63 |   width: 100%;
64 | }
65 | .fa {
66 |   font-size: 1.2rem;
67 |   margin-left: 15px;
68 | }
69 | .fa:hover {
70 |   font-size: 1.4rem;
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/components/TaskListItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <th>{{ id }}</th>
 3 |   <td>
 4 |     <input type="checkbox" :checked="completed" @change="toggleCompletion()" />
 5 |   </td>
 6 |   <td>{{ title }} <strong>(C)</strong></td>
 7 |   <td>{{ createdBy }}</td>
 8 |   <td>{{ assignedTo }}</td>
 9 |   <td>
10 |     <span class="icon" @click="viewTask()">
11 |       <i class="fa fa-eye"></i>
12 |     </span>
13 |     <span class="icon" @click="editTask()">
14 |       <i class="fa fa-edit"></i>
15 |     </span>
16 |     <span class="icon" @click="removeTask()">
17 |       <i class="fa fa-trash"></i>
18 |     </span>
19 |   </td>
20 | </template>
21 | <script lang="ts">
22 | import { defineComponent, computed } from 'vue'
23 | import TaskItem from './TaskItem.vue'
24 | import { useStore } from '@/store'
25 | import { MutationType } from '@/store/mutations'
26 | 
27 | export default defineComponent({
28 |   props: {
29 |     id: { type: Number, required: true },
30 |     title: { type: String, required: true },
31 |     createdBy: { type: String, required: true },
32 |     assignedTo: { type: String, required: true },
33 |     completed: { type: Boolean, required: true }
34 |   },
35 |   components: {
36 |     
37 |   },
38 |   setup(props) {
39 |     const store = useStore()
40 | 
41 |     const toggleCompletion = () => {
42 |       store.commit(MutationType.CompleteTask, {
43 |         id: props.id,
44 |         completed: !props.completed
45 |       })
46 |     }
47 |     
48 | 
49 |     const removeTask = () => {
50 |       store.commit(MutationType.RemoveTask, {
51 |         id: props.id
52 |       })
53 |     }
54 | 
55 |     const viewTask = () => {
56 |       store.commit(MutationType.SetTaskModal, {showModal:true, taskId:props.id})
57 |     }
58 | 
59 |     const editTask = () => {
60 |       store.commit(MutationType.SetEditModal, {showModal:true, taskId: props.id})
61 |     }
62 | 
63 |     return { toggleCompletion, removeTask, editTask, viewTask }
64 |   }
65 | })
66 | </script>
67 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import {store} from './store'
4 | 
5 | createApp(App).use(store).mount('#app')
6 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 |   const component: DefineComponent<{}, {}, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/src/store/actions.ts:
--------------------------------------------------------------------------------
 1 | import { ActionContext, ActionTree } from 'vuex'
 2 | import { Mutations, MutationType } from './mutations'
 3 | import { State } from './state'
 4 | 
 5 | export enum ActionTypes {
 6 |   GetTaskItems = 'GET_Task_ITEMS',
 7 |   SetCreateModal = 'SET_CREATE_MODAL',
 8 |   SetEditModal = 'SET_EDIT_MODAL'
 9 | }
10 | 
11 | type ActionAugments = Omit<ActionContext<State, State>, 'commit'> & {
12 |   commit<K extends keyof Mutations>(
13 |     key: K,
14 |     payload: Parameters<Mutations[K]>[1]
15 |   ): ReturnType<Mutations[K]>;
16 | }
17 | 
18 | 
19 | export type Actions = {
20 |   [ActionTypes.GetTaskItems](context: ActionAugments): void;
21 |   [ActionTypes.SetCreateModal](context: ActionAugments): void;
22 |   [ActionTypes.SetEditModal](context: ActionAugments): void;
23 | 
24 | }
25 | 
26 | const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
27 | 
28 | export const actions: ActionTree<State, State> & Actions = {
29 |   async [ActionTypes.GetTaskItems]({ commit }) {
30 |     commit(MutationType.SetLoading, true)
31 | 
32 |     await sleep(1000)
33 | 
34 |     commit(MutationType.SetLoading, false)
35 |     commit(MutationType.SetTasks, [
36 |       {
37 |         id: 1,
38 |         title: 'Create a new programming language',
39 |         description: "The programing language should have full typescript support ",
40 |         createdBy: "Emmanuel John",
41 |         assignedTo: "Saviour Peter",
42 |         completed: false,
43 |         editing: false
44 | 
45 |       }
46 |     ])
47 |   },
48 | 
49 |   async [ActionTypes.SetCreateModal]({ commit }) {
50 |     commit(MutationType.SetCreateModal, true)
51 |   },
52 |   async [ActionTypes.SetEditModal]({ commit }) {
53 |     commit(MutationType.SetEditModal, {showModal: true, taskId: 1})
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/store/getters.ts:
--------------------------------------------------------------------------------
 1 | import { GetterTree } from 'vuex'
 2 | import { State, TaskItem } from './state'
 3 | 
 4 | export type Getters = {
 5 |   completedTaskCount(state: State): number
 6 |   totalTaskCount(state: State): number
 7 |   getTaskById(state: State): (id :number) => TaskItem | undefined
 8 | }
 9 | 
10 | export const getters: GetterTree<State, State> & Getters = {
11 |   completedTaskCount(state) {
12 |     return state.tasks.filter(element => element.completed).length
13 |   },
14 |   totalTaskCount(state) {
15 |     return state.tasks.length
16 |   },
17 |   getTaskById: (state) => (id: number) => {
18 |     return state.tasks.find(task => task.id === id)
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createStore,
 3 |   Store as VuexStore,
 4 |   CommitOptions,
 5 |   DispatchOptions,
 6 |   createLogger
 7 | } from 'vuex'
 8 | 
 9 | import { State, state } from './state'
10 | import { Mutations, mutations } from './mutations'
11 | import { Actions, actions } from './actions'
12 | import { Getters, getters } from './getters'
13 | 
14 | export const store = createStore<State>({
15 |   plugins: process.env.NODE_ENV === 'development' ? [createLogger()] : [],
16 |   state,
17 |   mutations,
18 |   actions,
19 |   getters
20 | })
21 | 
22 | export function useStore() {
23 |   return store as Store
24 | }
25 | 
26 | export type Store = Omit<
27 |   VuexStore<State>,
28 |   'getters' | 'commit' | 'dispatch'
29 | > & {
30 |   commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(
31 |     key: K,
32 |     payload: P,
33 |     options?: CommitOptions
34 |   ): ReturnType<Mutations[K]>;
35 | } & {
36 |   dispatch<K extends keyof Actions>(
37 |     key: K,
38 |     payload?: Parameters<Actions[K]>[1],
39 |     options?: DispatchOptions
40 |   ): ReturnType<Actions[K]>;
41 | } & {
42 |   getters: {
43 |     [K in keyof Getters]: ReturnType<Getters[K]>
44 |   };
45 | }


--------------------------------------------------------------------------------
/src/store/mutations.ts:
--------------------------------------------------------------------------------
 1 | import { MutationTree } from 'vuex'
 2 | import { State, TaskItem } from './state'
 3 | 
 4 | export enum MutationType {
 5 |   CreateTask = 'CREATE_TASK',
 6 |   SetTasks = 'SET_TASKS',
 7 |   CompleteTask = 'COMPLETE_TASK',
 8 |   RemoveTask = 'REMOVE_TASK',
 9 |   EditTask = 'EDIT_TASK',
10 |   UpdateTask = `UPDATE_TASK`,
11 | 
12 |   SetLoading = 'SET_LOADING',
13 |   SetCreateModal = 'SET_CREATE_MODAL',
14 |   SetEditModal = 'SET_EDIT_MODAL',
15 |   SetTaskModal = 'SET_TASK_MODAL'
16 | }
17 | 
18 | export type Mutations = {
19 | 
20 |   [MutationType.CreateTask](state: State, task: TaskItem): void;
21 |   [MutationType.SetTasks](state: State, tasks: TaskItem[]): void;
22 |   [MutationType.CompleteTask](
23 |     state: State,
24 |     task: Partial<TaskItem> & { id: number }
25 |   ): void;
26 |   [MutationType.RemoveTask](
27 |     state: State,
28 |     task: Partial<TaskItem> & { id: number }
29 |   ): void;
30 |   [MutationType.EditTask](
31 |     state: State,
32 |     task: Partial<TaskItem> & { id: number }
33 |   ): void;
34 |   [MutationType.UpdateTask](
35 |     state: State,
36 |     task: Partial<TaskItem> & { id: number }
37 |   ): void;
38 | 
39 |   [MutationType.SetLoading](state: State, value: boolean): void;
40 |   [MutationType.SetCreateModal](state: State, value: boolean): void;
41 |   [MutationType.SetEditModal](state: State, value: {showModal: boolean, taskId: number|undefined}): void;
42 |   [MutationType.SetTaskModal](state: State, value: {showModal: boolean, taskId: number|undefined}): void;
43 | };
44 | 
45 | export const mutations: MutationTree<State> & Mutations = {
46 |   [MutationType.CreateTask](state, task) {
47 |     state.tasks.unshift(task)
48 |   },
49 |   [MutationType.SetTasks](state, tasks) {
50 |     state.tasks = tasks
51 |   },
52 |   [MutationType.CompleteTask](state, newTask) {
53 |     const task = state.tasks.findIndex(element => element.id === newTask.id)
54 |     if (task === -1) return
55 |     state.tasks[task] = { ...state.tasks[task], ...newTask }
56 |   },
57 |   [MutationType.RemoveTask](state, Task) {
58 |     const task = state.tasks.findIndex(element => element.id === Task.id)
59 |     if (task === -1) return
60 |     //If Task exist in the state, remove it
61 |     state.tasks.splice(task, 1) 
62 |   },
63 |   [MutationType.EditTask](state, Task) {
64 |     const task = state.tasks.findIndex(element => element.id === Task.id)
65 |     if (task === -1) return
66 |     //If Task exist in the state, toggle the editing property
67 |     state.tasks[task] = { ...state.tasks[task], editing: !state.tasks[task].editing } 
68 |     console.log("taskino", state.tasks[task])
69 |   },
70 |   [MutationType.UpdateTask](state, Task) {
71 |     state.tasks = state.tasks.map(task => {
72 |       if(task.id === Task.id) {
73 |         return {...task, ...Task}
74 |       }
75 |       return task;
76 |     })
77 |   },
78 | 
79 |   [MutationType.SetLoading](state, value) {
80 |     state.loading = value
81 |     console.log("I am loading...")
82 |   },
83 |   [MutationType.SetCreateModal](state, value) {
84 |     state.showCreateModal = value
85 |   },
86 |   [MutationType.SetEditModal](state, value) {
87 |     state.showEditModal = value.showModal
88 |     state.editModalTaskId = value.taskId
89 |   },
90 |   [MutationType.SetTaskModal](state, {showModal, taskId}) {
91 |     state.showTaskModal = showModal
92 |     state.showTaskId = taskId
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/src/store/state.ts:
--------------------------------------------------------------------------------
 1 | export type TaskItem = {
 2 |   id: number;
 3 |   title: string;
 4 |   description: string;
 5 |   createdBy: string;
 6 |   assignedTo: string;
 7 |   completed: boolean;
 8 |   editing: boolean;
 9 | };
10 | 
11 | export type State = {
12 |   loading: boolean;
13 |   tasks: TaskItem[];
14 |   showCreateModal: boolean;
15 |   showEditModal: boolean;
16 |   showTaskModal: boolean;
17 |   editModalTaskId: number | undefined;
18 |   showTaskId: number | undefined;
19 | };
20 | 
21 | export const state: State = {
22 |   loading: false,
23 |   tasks: [],
24 |   showCreateModal: false,
25 |   showEditModal: false,
26 |   showTaskModal: false,
27 |   editModalTaskId: undefined,
28 |   showTaskId: undefined,
29 | };
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------