diff --git a/package-lock.json b/package-lock.json index 2221b26..7d64235 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12622,6 +12622,11 @@ "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz", "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==" }, + "vue-progressbar": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/vue-progressbar/-/vue-progressbar-0.7.5.tgz", + "integrity": "sha512-VeNG/inMsFbvdCTS7lJ1gjDAKSUZdqkhW9gS1tb0we1rqFKxR+BCEiVUgw5C84vODKb14M2GWHTw0WVdpoVg6g==" + }, "vue-router": { "version": "3.4.5", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz", diff --git a/package.json b/package.json index 3ea0ad2..24e0be3 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "vue-autosuggest": "^2.2.0", "vue-multiselect": "^2.1.6", "vue-notification": "^1.3.16", + "vue-progressbar": "^0.7.5", "vue-router": "^3.0.3", "vue2-datepicker": "^3.7.0", "vuex": "^3.0.1" diff --git a/src/App.vue b/src/App.vue index f2cdc9c..894c17a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,6 +2,7 @@
+ diff --git a/src/config/progressbar.config.js b/src/config/progressbar.config.js new file mode 100644 index 0000000..6f57053 --- /dev/null +++ b/src/config/progressbar.config.js @@ -0,0 +1,5 @@ +export default { + color: 'var(--primary)', + failedColor: 'var(--error)', + thickness: '2px', +}; diff --git a/src/main.js b/src/main.js index 57b3de6..fa0c68b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,8 @@ import 'es6-promise'; +import VueProgressBar from 'vue-progressbar'; +import progressbarConfig from '@/config/progressbar.config'; import '@/config/local-storage.config'; -import { BVModalPlugin } from 'bootstrap-vue'; +import { VBModalPlugin } from 'bootstrap-vue'; import Vue from 'vue'; import App from '@/App.vue'; import router from '@/router'; @@ -9,8 +11,9 @@ import VueNotifications from 'vue-notification'; import './registerServiceWorker'; import i18n from './config/i18n.config'; -Vue.use(BVModalPlugin); +Vue.use(VBModalPlugin); Vue.use(VueNotifications); +Vue.use(VueProgressBar, progressbarConfig); Vue.config.productionTip = false; diff --git a/src/services/adapters/wordpress.adapter.js b/src/services/adapters/wordpress.adapter.js index 26e66a7..35aaa21 100644 --- a/src/services/adapters/wordpress.adapter.js +++ b/src/services/adapters/wordpress.adapter.js @@ -1,4 +1,6 @@ import axios from 'axios'; +import app from '@/main'; +import NotificationService from '@/services/notification.service'; import { removeVuexORMFlags } from '@/utils/helpers'; const config = window.name ? JSON.parse(window.name) : { api_url: '', nonce: '' }; @@ -10,6 +12,34 @@ const http = axios.create({ }, }); +http.interceptors.request.use((request) => { + if (typeof request.hideLoading === 'undefined' || !request.hideLoading) { + app.$Progress.start(); + } + return request; +}, (error) => { + app.$Progress.finish(); + + NotificationService.error('Network error. Check your connection'); + return Promise.reject(error); +}); + +http.interceptors.response.use((response) => { + app.$Progress.finish(); + + return response; +}, (error) => { + app.$Progress.finish(); + + // Server down + if (error.response.status >= 500) { + NotificationService.error('Server Unavailable.'); + return Promise.reject(error); + } + + return Promise.reject(error); +}); + class WordpressAdapter { async get(uri) { const parts = uri.split('/');