From 23e250e165e98e80ee1b4280b3a5b8b34fcfbd3b Mon Sep 17 00:00:00 2001
From: Koki Oyatsu <kaishuu0123@gmail.com>
Date: Mon, 2 Dec 2019 16:11:37 +0900
Subject: [PATCH 1/2] Implement error handling for frontend.

---
 app/javascript/commons/custom-axios.js        | 49 +++++++++++++++++++
 .../components/backlogs/StoryModal.vue        |  1 -
 .../components/kanban/TaskModal.vue           |  1 -
 app/javascript/packs/backlogs.js              |  2 +
 app/javascript/packs/closed_sprints.js        |  2 +
 app/javascript/packs/kanban.js                |  2 +
 app/javascript/packs/project_settings.js      |  2 +
 .../ProjectSettings/GeneralSettingsPage.vue   |  1 -
 app/javascript/stores/backlogs.js             | 24 ++++-----
 app/javascript/stores/kanban.js               | 28 +++++------
 app/javascript/stores/project_settings.js     | 12 +++--
 .../stores/project_settings/generals.js       | 13 ++---
 .../project_settings/group_managements.js     | 13 ++---
 .../project_settings/ticket_categories.js     | 16 ++----
 .../project_settings/ticket_statuses.js       | 18 +++----
 app/javascript/stores/stories.js              | 30 +++++-------
 app/javascript/stores/tasks.js                | 30 +++++-------
 app/javascript/stores/tickets.js              | 26 +++++-----
 18 files changed, 147 insertions(+), 123 deletions(-)
 create mode 100644 app/javascript/commons/custom-axios.js

diff --git a/app/javascript/commons/custom-axios.js b/app/javascript/commons/custom-axios.js
new file mode 100644
index 0000000..5b6a4b7
--- /dev/null
+++ b/app/javascript/commons/custom-axios.js
@@ -0,0 +1,49 @@
+import axios from 'axios'
+
+axios.defaults.headers['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content')
+axios.defaults.headers.common['Accept'] = 'application/json'
+
+const http = axios;
+
+export default (Vue, { store }) => {
+  http.interceptors.request.use((config) => {
+    store.commit('SET_IS_LOADING', true)
+    return config;
+  }, (error) => {
+    const errorMsg = `${error.response.status} ${error.response.statusText}`
+    const vm = new Vue()
+    vm.$bvToast.toast(error.toString(), {
+      title: errorMsg,
+      noCloseButton: false,
+      noAutoHide: true,
+      variant: 'danger',
+    })
+
+    return Promise.reject(error)
+  });
+
+  http.interceptors.response.use((response) => {
+    store.commit('SET_IS_LOADING', true);
+    return response;
+  }, (error) => {
+    const errorMsg = `${error.response.status} ${error.response.statusText}`
+    const vm = new Vue()
+    vm.$bvToast.toast(error.toString(), {
+      title: errorMsg,
+      noCloseButton: false,
+      noAutoHide: true,
+      variant: 'danger',
+    })
+
+    return Promise.reject(error)
+  });
+
+  Vue.http = http;
+  Object.defineProperties(Vue.prototype, {
+    $http: {
+      get () {
+        return http;
+      }
+    }
+  });
+};
\ No newline at end of file
diff --git a/app/javascript/components/backlogs/StoryModal.vue b/app/javascript/components/backlogs/StoryModal.vue
index d0fcd33..735e844 100644
--- a/app/javascript/components/backlogs/StoryModal.vue
+++ b/app/javascript/components/backlogs/StoryModal.vue
@@ -162,7 +162,6 @@
 <script>
 import Vue from 'vue'
 import { mapActions, mapMutations, mapState } from 'vuex'
-import axios from 'axios'
 import MarkdownText from '../MarkdownText'
 import TicketForm from '../commons/TicketForm'
 import TicketPreview from '../commons/TicketPreview'
diff --git a/app/javascript/components/kanban/TaskModal.vue b/app/javascript/components/kanban/TaskModal.vue
index 78251f9..1a9f92a 100644
--- a/app/javascript/components/kanban/TaskModal.vue
+++ b/app/javascript/components/kanban/TaskModal.vue
@@ -155,7 +155,6 @@
 <script>
 import Vue from 'vue'
 import { mapActions, mapMutations, mapState } from 'vuex'
-import axios from 'axios'
 import MarkdownText from '../MarkdownText'
 import TicketForm from '../commons/TicketForm'
 import TicketPreview from '../commons/TicketPreview'
diff --git a/app/javascript/packs/backlogs.js b/app/javascript/packs/backlogs.js
index a4d72bc..1808c25 100644
--- a/app/javascript/packs/backlogs.js
+++ b/app/javascript/packs/backlogs.js
@@ -3,12 +3,14 @@ import VueI18n from 'vue-i18n'
 import store from '../stores/backlogs'
 import VueRouter from 'vue-router';
 import BacklogsPage from '../pages/BacklogsPage'
+import http from '../commons/custom-axios'
 
 document.addEventListener('DOMContentLoaded', () => {
   const rootElement = document.getElementById('content')
   const projectId = rootElement.dataset.projectId
   Vue.use(VueRouter)
   Vue.use(VueI18n)
+  Vue.use(http, { store })
 
   const router = new VueRouter({
     routes: [
diff --git a/app/javascript/packs/closed_sprints.js b/app/javascript/packs/closed_sprints.js
index 1b6e976..9f0eff6 100644
--- a/app/javascript/packs/closed_sprints.js
+++ b/app/javascript/packs/closed_sprints.js
@@ -3,12 +3,14 @@ import VueI18n from 'vue-i18n'
 import store from '../stores/backlogs'
 import VueRouter from 'vue-router';
 import ClosedSprintsPage from '../pages/ClosedSprintsPage'
+import http from '../commons/custom-axios'
 
 document.addEventListener('DOMContentLoaded', () => {
   const rootElement = document.getElementById('content')
   const projectId = rootElement.dataset.projectId
   Vue.use(VueRouter)
   Vue.use(VueI18n)
+  Vue.use(http, { store })
 
   const router = new VueRouter({
     routes: [
diff --git a/app/javascript/packs/kanban.js b/app/javascript/packs/kanban.js
index 6c51b6b..11a65ec 100644
--- a/app/javascript/packs/kanban.js
+++ b/app/javascript/packs/kanban.js
@@ -3,6 +3,7 @@ import VueI18n from 'vue-i18n'
 import store from '../stores/kanban'
 import VueRouter from 'vue-router';
 import KanbanPage from '../pages/KanbanPage'
+import http from '../commons/custom-axios'
 
 document.addEventListener('DOMContentLoaded', () => {
   const rootElement = document.getElementById('content')
@@ -11,6 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const sprintTitle = rootElement.dataset.sprintTitle
   Vue.use(VueRouter)
   Vue.use(VueI18n)
+  Vue.use(http, { store })
 
   const router = new VueRouter({
     routes: [
diff --git a/app/javascript/packs/project_settings.js b/app/javascript/packs/project_settings.js
index 5b53d06..8fd4658 100644
--- a/app/javascript/packs/project_settings.js
+++ b/app/javascript/packs/project_settings.js
@@ -7,12 +7,14 @@ import GeneralSettingsPage from '../pages/ProjectSettings/GeneralSettingsPage'
 import GroupManagementsPage from '../pages/ProjectSettings/GroupManagementsPage'
 import TicketCategories from '../pages/ProjectSettings/TicketCategories'
 import TicketStatuses from '../pages/ProjectSettings/TicketStatuses'
+import http from '../commons/custom-axios'
 
 document.addEventListener('DOMContentLoaded', () => {
   const rootElement = document.getElementById('content')
   const projectId = rootElement.dataset.projectId
   Vue.use(VueRouter)
   Vue.use(VueI18n)
+  Vue.use(http, { store })
 
   const router = new VueRouter({
     routes: [
diff --git a/app/javascript/pages/ProjectSettings/GeneralSettingsPage.vue b/app/javascript/pages/ProjectSettings/GeneralSettingsPage.vue
index e9bfe1a..830cd43 100644
--- a/app/javascript/pages/ProjectSettings/GeneralSettingsPage.vue
+++ b/app/javascript/pages/ProjectSettings/GeneralSettingsPage.vue
@@ -84,7 +84,6 @@
 <script>
 import Vue from 'vue'
 import { mapActions, mapState } from 'vuex'
-import axios from 'axios'
 import { FormPlugin } from 'bootstrap-vue'
 Vue.use(FormPlugin)
 
diff --git a/app/javascript/stores/backlogs.js b/app/javascript/stores/backlogs.js
index 291177c..9524b5e 100644
--- a/app/javascript/stores/backlogs.js
+++ b/app/javascript/stores/backlogs.js
@@ -1,23 +1,20 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import VueAxios from 'vue-axios'
 import Stories from './stories'
 import Tickets from './tickets'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers.common['Accept'] = 'application/json'
 
 export default new Vuex.Store({
   state: {
     sprints: [],
-    storiesInBacklogs: []
+    storiesInBacklogs: [],
+    isLoading: false
   },
   actions: {
     getSprintsWithStories ({ commit }, projectId) {
-      axios
+      Vue.http
         .get(`/projects/${projectId}/sprints`)
         .then(r => r.data)
         .then(data => {
@@ -26,7 +23,7 @@ export default new Vuex.Store({
         })
     },
     getClosedSprintsWithStories ({ commit }, projectId) {
-      axios
+      Vue.http
         .get(`/projects/${projectId}/api/closed_sprints`)
         .then(r => r.data)
         .then(data => {
@@ -35,7 +32,7 @@ export default new Vuex.Store({
         })
     },
     createSprint({ commit }, { projectId, sprint }) {
-      axios
+      Vue.http
         .post(`/projects/${projectId}/sprints`, sprint)
         .then(r => r.data)
         .then(data => {
@@ -43,7 +40,7 @@ export default new Vuex.Store({
         })
     },
     updateSprint({ commit }, { projectId, sprint }) {
-      axios
+      Vue.http
         .put(`/projects/${projectId}/sprints/${sprint.id}`, sprint)
         .then(r => r.data)
         .then(data => {
@@ -56,7 +53,7 @@ export default new Vuex.Store({
         row_order_position: to.newIndex
       }
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/stories/${storyId}`, story)
         .then(r => r.data)
         .then(data => {
@@ -68,7 +65,7 @@ export default new Vuex.Store({
         closed: true
       })
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/sprints/${sprint.id}`, closedSprint)
         .then(r => r.data)
         .then(data => {
@@ -80,7 +77,7 @@ export default new Vuex.Store({
         closed: false
       })
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/sprints/${sprint.id}`, openSprint)
         .then(r => r.data)
         .then(data => {
@@ -94,6 +91,9 @@ export default new Vuex.Store({
     },
     SET_STORIES_IN_BACKLOGS (state, storiesInBacklogs) {
       state.storiesInBacklogs = storiesInBacklogs
+    },
+    SET_IS_LOADING (state, isLoading) {
+      state.isLoading = isLoading
     }
   },
   modules: {
diff --git a/app/javascript/stores/kanban.js b/app/javascript/stores/kanban.js
index 213744f..cca2e40 100644
--- a/app/javascript/stores/kanban.js
+++ b/app/javascript/stores/kanban.js
@@ -1,26 +1,23 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import VueAxios from 'vue-axios'
 import Stories from './stories'
 import Tasks from './tasks'
 import Tickets from './tickets'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers.common['Accept'] = 'application/json'
 
 export default new Vuex.Store({
   state: {
     sprintId: null,
     selectedTask: null,
     stories: [],
-    projectTicketStatuses: []
+    projectTicketStatuses: [],
+    isLoading: false
   },
   actions: {
     getStoriesWithTasks ({ commit }) {
-      axios
+      Vue.http
         .get(`/projects/${this.state.projectId}/sprints/${this.state.sprintId}/kanban/api`)
         .then(r => r.data)
         .then(data => {
@@ -29,13 +26,13 @@ export default new Vuex.Store({
     },
     getProjectTicketStatuses ({ commit }) {
       return new Promise((resolve, reject) => {
-        axios
-        .get(`/projects/${this.state.projectId}/project_ticket_statuses`)
-        .then(r => r.data)
-        .then(data => {
-          commit('SET_PROJECT_TICKET_STATUSES', data)
-          resolve(data)
-        })
+        Vue.http
+          .get(`/projects/${this.state.projectId}/project_ticket_statuses`)
+          .then(r => r.data)
+          .then(data => {
+            commit('SET_PROJECT_TICKET_STATUSES', data)
+            resolve(data)
+          })
       })
     },
     updateTaskByDrag ({ commit }, { from, to, taskId }) {
@@ -46,7 +43,7 @@ export default new Vuex.Store({
         row_order_position: to.newIndex
       }
 
-      axios
+      Vue.http
         .patch(`/projects/${this.state.projectId}/tasks/${taskId}`, task)
         .then(r => r.data)
         .then(data => {
@@ -75,6 +72,9 @@ export default new Vuex.Store({
     },
     SET_SELECTED_TASK (state, task) {
       state.selectedTask = task
+    },
+    SET_IS_LOADING (state, isLoading) {
+      state.isLoading = isLoading
     }
   },
   modules: {
diff --git a/app/javascript/stores/project_settings.js b/app/javascript/stores/project_settings.js
index aba6a93..16ca40d 100644
--- a/app/javascript/stores/project_settings.js
+++ b/app/javascript/stores/project_settings.js
@@ -1,18 +1,22 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import VueAxios from 'vue-axios'
 import Generals from './project_settings/generals'
 import GroupManagements from './project_settings/group_managements'
 import TicketCategories from './project_settings/ticket_categories'
 import TicketStatuses from './project_settings/ticket_statuses'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers.common['Accept'] = 'application/json'
 
 export default new Vuex.Store({
+  state: {
+    isLoading: false
+  },
+  mutations: {
+    SET_IS_LOADING (state, isLoading) {
+      state.isLoading = isLoading
+    }
+  },
   modules: {
     Generals,
     GroupManagements,
diff --git a/app/javascript/stores/project_settings/generals.js b/app/javascript/stores/project_settings/generals.js
index 1f2abca..d61dd8c 100644
--- a/app/javascript/stores/project_settings/generals.js
+++ b/app/javascript/stores/project_settings/generals.js
@@ -1,13 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import VueAxios from 'vue-axios'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content')
-axios.defaults.headers.common['Accept'] = 'application/json'
 
 export default {
   namespaced: true,
@@ -16,7 +11,7 @@ export default {
   },
   actions: {
     getProject({ commit, state }, projectId) {
-      axios
+      Vue.http
         .get(`/projects/${projectId}`)
         .then(r => r.data)
         .then(project => {
@@ -28,7 +23,7 @@ export default {
     },
     updateProject({ commit, state }, { projectId, project }) {
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .patch(`/projects/${projectId}`, project)
           .then(r => r.data)
           .then(project => {
@@ -48,7 +43,7 @@ export default {
       }
 
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .patch(`/projects/${projectId}`, formData, config)
           .then(result => {
             resolve(result)
@@ -60,7 +55,7 @@ export default {
     },
     deleteImage({ commit, state }, projectId) {
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .delete(`/projects/${projectId}/delete_image`)
           .then(result => {
             resolve(result)
diff --git a/app/javascript/stores/project_settings/group_managements.js b/app/javascript/stores/project_settings/group_managements.js
index e95ce38..fbe3eff 100644
--- a/app/javascript/stores/project_settings/group_managements.js
+++ b/app/javascript/stores/project_settings/group_managements.js
@@ -1,13 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import VueAxios from 'vue-axios'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content')
-axios.defaults.headers.common['Accept'] = 'application/json'
 
 export default {
   namespaced: true,
@@ -17,7 +12,7 @@ export default {
   actions: {
     getGroups ({ commit, state }, { projectId }) {
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .get(`/projects/${projectId}/groups`)
           .then(r => r.data)
           .then(groups => {
@@ -31,7 +26,7 @@ export default {
     },
     getGroupsByName({ commit, state }, name) {
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .get('/groups_by_name', { params: { name: name } })
           .then(r => r.data)
           .then(groups => {
@@ -43,14 +38,14 @@ export default {
       })
     },
     addGroup ({ dispatch, commit, state }, { projectId, group }) {
-      axios
+      Vue.http
         .post(`/projects/${projectId}/add_group`, { group_id: group.id })
         .then(r => {
           dispatch('getGroups', { projectId: projectId })
         })
     },
     deleteGroup ({ dispatch, commit, state }, { projectId, groupId }) {
-      axios
+      Vue.http
         .delete(`/projects/${projectId}/delete_group/${groupId}`)
         .then(r => {
           dispatch('getGroups', { projectId: projectId })
diff --git a/app/javascript/stores/project_settings/ticket_categories.js b/app/javascript/stores/project_settings/ticket_categories.js
index 8a88447..5337110 100644
--- a/app/javascript/stores/project_settings/ticket_categories.js
+++ b/app/javascript/stores/project_settings/ticket_categories.js
@@ -1,13 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import axios from 'axios'
-import VueAxios from 'vue-axios'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content')
-axios.defaults.headers.common['Accept'] = 'application/json'
 
 export default {
   namespaced: true,
@@ -16,7 +10,7 @@ export default {
   },
   actions: {
     getTicketCategories({ commit, state }, projectId) {
-      axios
+      Vue.http
         .get(`/projects/${projectId}/project_ticket_categories`)
         .then(r => r.data)
         .then(ticketCategories => {
@@ -28,7 +22,7 @@ export default {
     },
     getTicketCategory({ commit, state }, { projectId, categoryId }) {
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .get(`/projects/${projectId}/project_ticket_categories/${categoryId}`)
           .then(r => r.data)
           .then(category => {
@@ -40,21 +34,21 @@ export default {
       })
     },
     createTicketCategory({ dispatch, commit, state }, { projectId, category }) {
-      axios
+      Vue.http
         .post(`/projects/${projectId}/project_ticket_categories`, category)
         .then(r => {
           dispatch('getTicketCategories', projectId)
         })
     },
     updateTicketCategory({ dispatch, commit, state }, { projectId, category }) {
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/project_ticket_categories/${category.id}`, category)
         .then(r => {
           dispatch('getTicketCategories', projectId)
         })
     },
     deleteTicketCategory({ dispatch, commit, state }, { projectId, category }) {
-      axios
+      Vue.http
         .delete(`/projects/${projectId}/project_ticket_categories/${category.id}`)
         .then(r => {
           dispatch('getTicketCategories', projectId)
diff --git a/app/javascript/stores/project_settings/ticket_statuses.js b/app/javascript/stores/project_settings/ticket_statuses.js
index 85e86bd..2674ac0 100644
--- a/app/javascript/stores/project_settings/ticket_statuses.js
+++ b/app/javascript/stores/project_settings/ticket_statuses.js
@@ -1,13 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import axios from 'axios'
-import VueAxios from 'vue-axios'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content')
-axios.defaults.headers.common['Accept'] = 'application/json'
 
 export default {
   namespaced: true,
@@ -16,7 +10,7 @@ export default {
   },
   actions: {
     getTicketStatuses({ commit, state }, projectId) {
-      axios
+      Vue.http
         .get(`/projects/${projectId}/project_ticket_statuses`)
         .then(r => r.data)
         .then(ticketStatuses => {
@@ -28,7 +22,7 @@ export default {
     },
     getTicketStatus({ commit, state }, { projectId, statusId }) {
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .get(`/projects/${projectId}/project_ticket_statuses/${statusId}`)
           .then(r => r.data)
           .then(status => {
@@ -40,7 +34,7 @@ export default {
       })
     },
     updateTicketStatus({ dispatch, commit, state }, { projectId, status }) {
-      axios
+      Vue.http
         .patch(`//projects/${projectId}/project_ticket_statuses`)
         .then(r => r.data)
         .then(ticketStatus => {
@@ -48,21 +42,21 @@ export default {
         })
     },
     createTicketStatus({ dispatch, commit, state }, { projectId, status }) {
-      axios
+      Vue.http
         .post(`/projects/${projectId}/project_ticket_statuses`, status)
         .then(r => {
           dispatch('getTicketStatuses', projectId)
         })
     },
     updateTicketStatus({ dispatch, commit, state }, { projectId, status }) {
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/project_ticket_statuses/${status.id}`, status)
         .then(r => {
           dispatch('getTicketStatuses', projectId)
         })
     },
     deleteTicketStatus({ dispatch, commit, state }, { projectId, status }) {
-      axios
+      Vue.http
         .delete(`/projects/${projectId}/project_ticket_statuses/${status.id}`)
         .then(r => {
           dispatch('getTicketStatuses', projectId)
diff --git a/app/javascript/stores/stories.js b/app/javascript/stores/stories.js
index f562db4..6c88325 100644
--- a/app/javascript/stores/stories.js
+++ b/app/javascript/stores/stories.js
@@ -1,13 +1,9 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import VueAxios from 'vue-axios'
 import { request } from 'http';
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content')
 
 export default {
   namespaced: true,
@@ -17,36 +13,36 @@ export default {
   actions: {
     getStory ({ commit, state }, { projectId, storyId }) {
       return new Promise((resolve, reject) => {
-        axios
-        .get(`/projects/${projectId}/stories/${storyId}`)
-        .then(r => r.data)
-        .then(story => {
-          commit('SET_SELECTED_STORY', story)
-          resolve(story)
-        })
-        .catch(error => {
-          reject()
-        })
+        Vue.http
+          .get(`/projects/${projectId}/stories/${storyId}`)
+          .then(r => r.data)
+          .then(story => {
+            commit('SET_SELECTED_STORY', story)
+            resolve(story)
+          })
+          .catch(error => {
+            reject()
+          })
       })
     },
     createStory ({ commit, state, getters }, {projectId, story}) {
       const requestStory = getters.getRequestStory(story);
 
-      axios
+      Vue.http
         .post(`/projects/${projectId}/stories`, requestStory)
         .then(() => {
           this.dispatch('getSprintsWithStories', projectId, { root: true })
         })
     },
     updateStory ({ commit, state }, { projectId, story }) {
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/stories/${story.id}`, story)
         .then(() => {
           this.dispatch('getSprintsWithStories', projectId, { root: true })
         })
     },
     deleteStory ({ commit, state }, { projectId, storyId }) {
-      axios
+      Vue.http
         .delete(`/projects/${projectId}/stories/${storyId}`)
         .then(() => {
           this.dispatch('getSprintsWithStories', projectId, { root: true })
diff --git a/app/javascript/stores/tasks.js b/app/javascript/stores/tasks.js
index a07fda7..35f0356 100644
--- a/app/javascript/stores/tasks.js
+++ b/app/javascript/stores/tasks.js
@@ -1,12 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import VueAxios from 'vue-axios'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content')
 
 export default {
   namespaced: true,
@@ -16,22 +12,22 @@ export default {
   actions: {
     getTask ({ commit, state }, { projectId, taskId }) {
       return new Promise((resolve, reject) => {
-        axios
-        .get(`/projects/${projectId}/tasks/${taskId}`)
-        .then(r => r.data)
-        .then(task => {
-          commit('SET_SELECTED_TASK', task, { root: true })
-          resolve(task)
-        })
-        .catch(error => {
-          reject()
-        })
+        Vue.http
+          .get(`/projects/${projectId}/tasks/${taskId}`)
+          .then(r => r.data)
+          .then(task => {
+            commit('SET_SELECTED_TASK', task, { root: true })
+            resolve(task)
+          })
+          .catch(error => {
+            reject()
+          })
       })
     },
     createTask ({ commit, state, getters }, {projectId, task}) {
       const requestTask = getters.getRequestTask(task)
 
-      axios
+      Vue.http
         .post(`/projects/${projectId}/tasks`, requestTask)
         .then(() => {
           this.dispatch('getStoriesWithTasks', projectId, { root: true })
@@ -40,14 +36,14 @@ export default {
     updateTask ({ commit, state }, {storyId, projectId, task }) {
       task.story_id = storyId
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/tasks/${task.id}`, task)
         .then(() => {
           this.dispatch('getStoriesWithTasks', projectId, { root: true })
         })
     },
     deleteTask ({ commit, state }, { projectId, taskId }) {
-      axios
+      Vue.http
         .delete(`/projects/${projectId}/tasks/${taskId}`)
         .then(() => {
           this.dispatch('getStoriesWithTasks', projectId, { root: true })
diff --git a/app/javascript/stores/tickets.js b/app/javascript/stores/tickets.js
index beb495c..4291f66 100644
--- a/app/javascript/stores/tickets.js
+++ b/app/javascript/stores/tickets.js
@@ -1,12 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
-import VueAxios from 'vue-axios'
 
 Vue.use(Vuex)
-Vue.use(VueAxios, axios)
-
-axios.defaults.headers['X-CSRF-TOKEN'] = $('meta[name=csrf-token]').attr('content')
 
 const getDefaultState = () => {
   return {
@@ -35,7 +31,7 @@ export default {
   actions: {
     getAssignees({ commit, state }, { projectId }) {
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .get(`/projects/${projectId}/users`)
           .then(result => {
             let assignees = [
@@ -55,7 +51,7 @@ export default {
         assignee_id: state.assignee.selected.id
       }
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/${ticketType}/${ticketId}`, ticket)
         .then(result => {
           if (ticketType === 'stories') {
@@ -71,14 +67,14 @@ export default {
         assignee_id: assigneeId
       }
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/${ticketType}/${ticketId}`, ticket)
         .then(result => {
           this.dispatch('getStoriesWithTasks', {root: true})
         })
     },
     getProjectTicketStatuses({ commit, state }, { projectId }) {
-      axios
+      Vue.http
         .get(`/projects/${projectId}/project_ticket_statuses`)
         .then(result => {
           commit('SET_PROJECT_TICKET_STATUSES', result.data)
@@ -90,7 +86,7 @@ export default {
         project_ticket_status_id: state.projectTicketStatus.selected.id
       }
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/${ticketType}/${ticketId}`, ticket)
         .then(result => {
           if (ticketType === 'stories') {
@@ -101,7 +97,7 @@ export default {
         })
     },
     getProjectTicketCategories({ commit, state }, { projectId }) {
-      axios
+      Vue.http
         .get(`/projects/${projectId}/project_ticket_categories`)
         .then(result => {
           commit('SET_PROJECT_TICKET_CATEGORIES', result.data)
@@ -113,7 +109,7 @@ export default {
         project_ticket_category_id: state.projectTicketCategory.selected.id
       }
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/${ticketType}/${ticketId}`, ticket)
         .then(result => {
           if (ticketType === 'stories') {
@@ -128,7 +124,7 @@ export default {
         point: point
       }
 
-      axios
+      Vue.http
         .patch(`/projects/${projectId}/${ticketType}/${ticketId}`, ticket)
         .then(result => {
           if (ticketType === 'stories') {
@@ -139,7 +135,7 @@ export default {
         })
     },
     getProjectTags({ commit, state }, { projectId }) {
-      axios
+      Vue.http
         .get(`/projects/${projectId}/project_tags`)
         .then(result => {
           commit('SET_PROJECT_TAGS', result.data)
@@ -152,7 +148,7 @@ export default {
       }
 
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .post(`/projects/${projectId}/${ticketType}/${ticketId}/comments`, comment)
           .then((result) => {
             resolve(result)
@@ -164,7 +160,7 @@ export default {
     },
     deleteComment({ commit, state }, { projectId, ticketType, ticketId, commentId }) {
       return new Promise((resolve, reject) => {
-        axios
+        Vue.http
           .delete(`/projects/${projectId}/${ticketType}/${ticketId}/comments/${commentId}`)
           .then((result) => {
             resolve(result)

From b1faf21fa9cb39058f23ec3976d1609784a8ee4b Mon Sep 17 00:00:00 2001
From: Koki Oyatsu <kaishuu0123@gmail.com>
Date: Thu, 5 Dec 2019 11:26:31 +0900
Subject: [PATCH 2/2] Add Loading Animation

---
 app/javascript/commons/custom-axios.js        |  2 +-
 .../components/backlogs/StoryModal.vue        | 46 +++++++++++++++----
 .../components/kanban/TaskModal.vue           | 38 +++++++++++++--
 app/javascript/pages/BacklogsPage.vue         | 20 +++++++-
 app/javascript/pages/ClosedSprintsPage.vue    | 16 ++++++-
 app/javascript/pages/KanbanPage.vue           | 27 +++++++++--
 package.json                                  |  1 +
 yarn.lock                                     |  5 ++
 8 files changed, 134 insertions(+), 21 deletions(-)

diff --git a/app/javascript/commons/custom-axios.js b/app/javascript/commons/custom-axios.js
index 5b6a4b7..8a5cfbd 100644
--- a/app/javascript/commons/custom-axios.js
+++ b/app/javascript/commons/custom-axios.js
@@ -23,7 +23,7 @@ export default (Vue, { store }) => {
   });
 
   http.interceptors.response.use((response) => {
-    store.commit('SET_IS_LOADING', true);
+    store.commit('SET_IS_LOADING', false);
     return response;
   }, (error) => {
     const errorMsg = `${error.response.status} ${error.response.statusText}`
diff --git a/app/javascript/components/backlogs/StoryModal.vue b/app/javascript/components/backlogs/StoryModal.vue
index 735e844..e8d549e 100644
--- a/app/javascript/components/backlogs/StoryModal.vue
+++ b/app/javascript/components/backlogs/StoryModal.vue
@@ -4,13 +4,20 @@
     modal-class="rb-modal"
     size="lg"
     ref="modal"
-    :visible='visible'
     @shown="onShow"
     @hidden="onHide"
     hide-header
     hide-footer
     no-fade>
-    <div class="container-fluid" ref="container">
+    <div id="rb-story-modal" class="container-fluid" ref="container">
+      <loading
+        :active.sync="isLoading"
+        :can-cancel="false"
+        :is-full-page="false"
+        color="#4e73df"
+        background-color="#f8f9fc"
+        loader="dots"></loading>
+
       <div v-if="message.body" class="row">
         <div :class="`w-100 p-2 alert alert-${this.message.type}`">
           {{ this.message.body }}
@@ -175,6 +182,10 @@ import CustomMoment from '../../commons/custom-moment'
 import urlparse from 'url-parse'
 import VueClipboard2 from 'vue-clipboard2'
 import ColorUtils from '../../mixins/colorUtils'
+// Import component
+import Loading from 'vue-loading-overlay';
+// Import stylesheet
+import 'vue-loading-overlay/dist/vue-loading.css';
 
 Vue.use(VueClipboard2)
 
@@ -188,7 +199,8 @@ export default {
     InputPoint,
     CommentFormAndList,
     HistoryList,
-    VueClipboard2
+    VueClipboard2,
+    Loading
   },
   mixins: [
     ColorUtils
@@ -196,12 +208,11 @@ export default {
   name: 'StoryModal',
   props: {
     projectId: String,
-    visible: Boolean
+    isLoading: Boolean,
   },
   data() {
     return {
       isEdit: false,
-      isLoading: false,
       story: {
         id: null,
         title: '',
@@ -289,14 +300,10 @@ export default {
       }
 
       if (this.$route.params.storyId) {
-        this.isLoading = true
         this.getStory({
             projectId: this.projectId,
             storyId: this.$route.params.storyId
           })
-          .then(story => {
-            this.isLoading = false
-          })
       } else {
         this.isEdit = true
       }
@@ -391,11 +398,30 @@ export default {
 </script>
 
 <style lang="scss">
+#rb-story-modal {
+  /* for vue-loading-overlay */
+  position: relative;
+}
+
 .rb-modal {
   font-size: 0.8rem;
 
   .modal-dialog {
-    max-width: 75%
+    max-width: 75%k
   }
 }
+
+/**
+* Bootstrap Modal
+*/
+.modal {
+    z-index: 1101 !important;
+}
+
+/**
+* Vue Loading
+*/
+.vld-overlay.is-full-page {
+    z-index: 1103 !important;
+}
 </style>
\ No newline at end of file
diff --git a/app/javascript/components/kanban/TaskModal.vue b/app/javascript/components/kanban/TaskModal.vue
index 1a9f92a..6f079e8 100644
--- a/app/javascript/components/kanban/TaskModal.vue
+++ b/app/javascript/components/kanban/TaskModal.vue
@@ -10,7 +10,15 @@
     hide-header
     hide-footer
     no-fade>
-    <div class="container-fluid" ref="container">
+    <div id="rb-task-modal" class="container-fluid" ref="container">
+      <loading
+        :active.sync="isLoading"
+        :can-cancel="false"
+        :is-full-page="false"
+        color="#4e73df"
+        background-color="#f8f9fc"
+        loader="dots"></loading>
+
       <div class="row">
         <div class="col-9">
           <div class="d-flex mb-2">
@@ -166,6 +174,10 @@ import HistoryList from '../commons/HistoryList'
 import CustomMoment from '../../commons/custom-moment'
 import urlparse from 'url-parse'
 import VueClipboard2 from 'vue-clipboard2'
+// Import component
+import Loading from 'vue-loading-overlay';
+// Import stylesheet
+import 'vue-loading-overlay/dist/vue-loading.css';
 
 Vue.use(VueClipboard2)
 
@@ -177,7 +189,8 @@ export default {
     SelectAssignee,
     SelectStatus,
     CommentFormAndList,
-    HistoryList
+    HistoryList,
+    Loading
   },
   name: 'TaskModal',
   props: {
@@ -359,14 +372,33 @@ export default {
 </script>
 
 <style lang="scss">
+#rb-task-modal {
+  /* for vue-loading-overlay */
+  position: relative;
+}
+
 .rb-modal {
   font-size: 0.8rem;
 
   .modal-dialog {
-    max-width: 75%
+    max-width: 75%k
   }
 }
 
+/**
+* Bootstrap Modal
+*/
+.modal {
+    z-index: 1101 !important;
+}
+
+/**
+* Vue Loading
+*/
+.vld-overlay.is-full-page {
+    z-index: 1103 !important;
+}
+
 .rb-select {
   border-bottom: 1px solid #888
 }
diff --git a/app/javascript/pages/BacklogsPage.vue b/app/javascript/pages/BacklogsPage.vue
index f0eefcd..67605c6 100644
--- a/app/javascript/pages/BacklogsPage.vue
+++ b/app/javascript/pages/BacklogsPage.vue
@@ -1,5 +1,12 @@
 <template>
   <div id="rb-backlogs" class="container-fluid mt-3">
+    <loading
+      :active.sync="isLoading"
+      :can-cancel="false"
+      :is-full-page="false"
+      color="#4e73df"
+      background-color="#f8f9fc"
+      loader="dots"></loading>
     <div class="row px-2">
       <div class="d-flex w-100 align-items-center justify-content-between mb-2">
         <h1 class="h4 mb-0 text-gray-700">{{ $t('title.masterBacklogs')}}</h1>
@@ -47,7 +54,7 @@
       </div>
     </div>
 
-    <StoryModal id="storyModal" :projectId="projectId" />
+    <StoryModal id="storyModal" :projectId="projectId" :isLoading="isLoading" />
   </div>
 </template>
 
@@ -60,6 +67,10 @@ import BacklogsCard from '../components/backlogs/BacklogsCard'
 import SprintCard from '../components/backlogs/SprintCard'
 import StoryListItem from '../components/backlogs/StoryListItem'
 import '../commons/custom-bootstrap-vue'
+// Import component
+import Loading from 'vue-loading-overlay';
+// Import stylesheet
+import 'vue-loading-overlay/dist/vue-loading.css';
 
 export default {
   data () {
@@ -83,7 +94,8 @@ export default {
     StoryModal,
     BacklogsCard,
     SprintCard,
-    StoryListItem
+    StoryListItem,
+    Loading
   },
   mounted() {
     this.projectId = this.$route.meta.projectId
@@ -104,6 +116,7 @@ export default {
   },
   computed: {
     ...mapState({
+      isLoading: 'isLoading',
       sprints: 'sprints',
       storiesInBacklogs: 'storiesInBacklogs'
     }),
@@ -124,6 +137,9 @@ export default {
 
 #rb-backlogs {
   font-size: 0.8em;
+
+  /* for vue-loading-overlay */
+  position: relative;
 }
 
 .rb-alert-primary {
diff --git a/app/javascript/pages/ClosedSprintsPage.vue b/app/javascript/pages/ClosedSprintsPage.vue
index c9316e2..9c6cc3d 100644
--- a/app/javascript/pages/ClosedSprintsPage.vue
+++ b/app/javascript/pages/ClosedSprintsPage.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="container-fluid">
+    <loading
+      :active.sync="isLoading"
+      :can-cancel="false"
+      :is-full-page="false"
+      color="#4e73df"
+      background-color="#f8f9fc"
+      loader="dots"></loading>
+
     <div class="row">
       <div class="col-6" v-for="sprint in sprints" :key="sprint.id">
         <SprintCard class="mb-3" :sprint="sprint" :projectId="projectId" />
@@ -22,6 +30,10 @@ import BacklogsCard from '../components/backlogs/BacklogsCard'
 import SprintCard from '../components/backlogs/SprintCard'
 import StoryListItem from '../components/backlogs/StoryListItem'
 import '../commons/custom-bootstrap-vue'
+// Import component
+import Loading from 'vue-loading-overlay';
+// Import stylesheet
+import 'vue-loading-overlay/dist/vue-loading.css';
 
 export default {
   data () {
@@ -34,7 +46,8 @@ export default {
     StoryModal,
     BacklogsCard,
     SprintCard,
-    StoryListItem
+    StoryListItem,
+    Loading
   },
   mounted() {
     this.projectId = this.$route.meta.projectId
@@ -55,6 +68,7 @@ export default {
   },
   computed: {
     ...mapState({
+      isLoading: 'isLoading',
       sprints: 'sprints',
       storiesInBacklogs: 'storiesInBacklogs'
     }),
diff --git a/app/javascript/pages/KanbanPage.vue b/app/javascript/pages/KanbanPage.vue
index f23f384..8a9a9c4 100644
--- a/app/javascript/pages/KanbanPage.vue
+++ b/app/javascript/pages/KanbanPage.vue
@@ -1,5 +1,13 @@
 <template>
-  <div class="container-fluid mt-2">
+  <div id="kanban" class="container-fluid mt-2">
+    <loading
+      :active.sync="isLoading"
+      :can-cancel="false"
+      :is-full-page="false"
+      color="#4e73df"
+      background-color="#f8f9fc"
+      loader="dots"></loading>
+
     <div class="row mb-2 bg-light sticky-top">
       <nav class="navbar px-1 py-0 navbar-light">
         <a class="navbar-brand text-gray-700" href="#">{{ sprintTitle }}</a>
@@ -83,8 +91,8 @@
       </table>
     </div>
 
-    <TaskModal :projectId="projectId" />
-    <StoryModal :projectId="projectId" />
+    <TaskModal :projectId="projectId" :isLoading="isLoading" />
+    <StoryModal :projectId="projectId" :isLoading="isLoading" />
   </div>
 </template>
 
@@ -98,6 +106,10 @@ import MarkdownText from '../components/MarkdownText'
 import VueDraggable from 'vuedraggable'
 import '../commons/custom-bootstrap-vue'
 import ColorUtils from '../mixins/colorUtils'
+// Import component
+import Loading from 'vue-loading-overlay';
+// Import stylesheet
+// import 'vue-loading-overlay/dist/vue-loading.css';
 
 export default {
   components: {
@@ -105,7 +117,8 @@ export default {
     TaskModal,
     TaskCard,
     MarkdownText,
-    VueDraggable
+    VueDraggable,
+    Loading
   },
   mixins: [
     ColorUtils
@@ -163,6 +176,7 @@ export default {
       return this.projectTicketStatuses.length
     },
     ...mapState([
+      'isLoading',
       'stories',
       'projectTicketStatuses'
     ])
@@ -255,6 +269,11 @@ export default {
 </script>
 
 <style lang="scss">
+#kanban {
+  /* for vue-loading-overlay */
+  position: relative;
+}
+
 .no-move {
   transition: transform 0s;
 }
diff --git a/package.json b/package.json
index 0576f57..c4c79c0 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "vue-color": "^2.7.0",
     "vue-i18n": "^8.14.1",
     "vue-loader": "^15.7.1",
+    "vue-loading-overlay": "^3.2.0",
     "vue-numeral-filter": "^1.1.1",
     "vue-observe-visibility": "^0.4.4",
     "vue-router": "^3.1.3",
diff --git a/yarn.lock b/yarn.lock
index 43b40be..7d283a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7358,6 +7358,11 @@ vue-loader@^15.7.1:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-loading-overlay@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/vue-loading-overlay/-/vue-loading-overlay-3.2.0.tgz#7896f195e26a8d915219139a096367c9ad2c3c61"
+  integrity sha512-QBHa+vwcQ3k3oKp4pucP7RHWHSQvgVWFlDFqSaXLu+kCuEv1PZCoerAo1T04enF5y9yMFCqh7L9ChrWHy7HYvA==
+
 vue-numeral-filter@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/vue-numeral-filter/-/vue-numeral-filter-1.1.1.tgz#dc717c7d86cb10d2fc370ef992bcac80fb9fc666"