Implement error handling for frontend.

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', false);
+    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;
+      }
+    }
+  });
+};

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 }}
@@ -162,7 +169,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'
@@ -176,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)
 
@@ -189,20 +199,20 @@ export default {
     InputPoint,
     CommentFormAndList,
     HistoryList,
-    VueClipboard2
+    VueClipboard2,
+    Loading
   },
   mixins: [
     ColorUtils
   ],
   name: 'StoryModal',
   props: {
     projectId: String,
-    visible: Boolean
+    isLoading: Boolean,
   },
   data() {
     return {
       isEdit: false,
-      isLoading: false,
       story: {
         id: null,
         title: '',
@@ -290,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
       }
@@ -392,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>

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">
@@ -155,7 +163,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'
@@ -167,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)
 
@@ -178,7 +189,8 @@ export default {
     SelectAssignee,
     SelectStatus,
     CommentFormAndList,
-    HistoryList
+    HistoryList,
+    Loading
   },
   name: 'TaskModal',
   props: {
@@ -360,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
 }

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: [

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: [

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: [

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: [

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 {