Add Loading Animation

kaishuu0123 · Dec 5, 2019 · b1faf21 · b1faf21
1 parent 23e250e
commit b1faf21
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 21 deletions.
diff --git 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
@@ -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,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: '',
@@ -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>
diff --git 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
@@ -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
@@ -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
@@ -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,14 +106,19 @@ 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: {
     StoryModal,
     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
@@ -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
@@ -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"