Changeset View
Changeset View
Standalone View
Standalone View
src/resources/js/app.js
| /** | /** | ||||
| * First we will load all of this project's JavaScript dependencies which | * First we will load all of this project's JavaScript dependencies which | ||||
| * includes Vue and other libraries. It is a great starting point when | * includes Vue and other libraries. It is a great starting point when | ||||
| * building robust, powerful web applications using Vue and Laravel. | * building robust, powerful web applications using Vue and Laravel. | ||||
| */ | */ | ||||
| require('./bootstrap') | require('./bootstrap') | ||||
| import AppComponent from '../vue/App' | import AppComponent from '../vue/App' | ||||
| import MenuComponent from '../vue/Widgets/Menu' | import MenuComponent from '../vue/Widgets/Menu' | ||||
| import store from './store' | import store from './store' | ||||
| const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="sr-only">Loading</span></div></div>' | |||||
| const app = new Vue({ | const app = new Vue({ | ||||
| el: '#app', | el: '#app', | ||||
| components: { | components: { | ||||
| AppComponent, | AppComponent, | ||||
| MenuComponent, | MenuComponent, | ||||
| }, | }, | ||||
| store, | store, | ||||
| router: window.router, | router: window.router, | ||||
| ▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines | methods: { | ||||
| }, | }, | ||||
| // Set user state to "not logged in" | // Set user state to "not logged in" | ||||
| logoutUser() { | logoutUser() { | ||||
| store.commit('logoutUser') | store.commit('logoutUser') | ||||
| localStorage.setItem('token', '') | localStorage.setItem('token', '') | ||||
| delete axios.defaults.headers.common.Authorization | delete axios.defaults.headers.common.Authorization | ||||
| this.$router.push({ name: 'login' }) | this.$router.push({ name: 'login' }) | ||||
| }, | }, | ||||
| // Display "loading" overlay (to be used by route components) | // Display "loading" overlay inside of the specified element | ||||
| addLoader(elem) { | |||||
| $(elem).css({position: 'relative'}).append($(loader).addClass('small')) | |||||
| }, | |||||
| // Remove loader element added in addLoader() | |||||
| removeLoader(elem) { | |||||
| $(elem).find('.app-loader').remove() | |||||
| }, | |||||
| startLoading() { | startLoading() { | ||||
| this.isLoading = true | this.isLoading = true | ||||
| // Lock the UI with the 'loading...' element | // Lock the UI with the 'loading...' element | ||||
| let loading = $('#app > .app-loader').show() | let loading = $('#app > .app-loader').show() | ||||
| if (!loading.length) { | if (!loading.length) { | ||||
| $('#app').append($('<div class="app-loader"><div class="spinner-border" role="status"><span class="sr-only">Loading</span></div></div>')) | $('#app').append($(loader)) | ||||
| } | } | ||||
| }, | }, | ||||
| // Hide "loading" overlay | // Hide "loading" overlay | ||||
| stopLoading() { | stopLoading() { | ||||
| $('#app > .app-loader').fadeOut() | $('#app > .app-loader').fadeOut() | ||||
| this.isLoading = false | this.isLoading = false | ||||
| }, | }, | ||||
| errorPage(code, msg) { | errorPage(code, msg) { | ||||
| ▲ Show 20 Lines • Show All 103 Lines • ▼ Show 20 Lines | methods: { | ||||
| return 'Not Ready' | return 'Not Ready' | ||||
| } | } | ||||
| return 'Active' | return 'Active' | ||||
| } | } | ||||
| } | } | ||||
| }) | }) | ||||
| // Add a axios request interceptor | |||||
| window.axios.interceptors.request.use( | |||||
| config => { | |||||
| // This is the only way I found to change configuration options | |||||
| // on a running application. We need this for browser testing. | |||||
| config.headers['X-Test-Payment-Provider'] = window.config.paymentProvider | |||||
| return config | |||||
| }, | |||||
| error => { | |||||
| // Do something with request error | |||||
| return Promise.reject(error) | |||||
| } | |||||
| ) | |||||
| // Add a axios response interceptor for general/validation error handler | // Add a axios response interceptor for general/validation error handler | ||||
| window.axios.interceptors.response.use( | window.axios.interceptors.response.use( | ||||
| response => { | response => { | ||||
| // Do nothing | // Do nothing | ||||
| return response | return response | ||||
| }, | }, | ||||
| error => { | error => { | ||||
| let error_msg | let error_msg | ||||
| let status = error.response ? error.response.status : 200 | let status = error.response ? error.response.status : 200 | ||||
| if (error.response && status == 422) { | if (error.response && status == 422) { | ||||
| error_msg = "Form validation error" | error_msg = "Form validation error" | ||||
| const modal = $('div.modal.show') | const modal = $('div.modal.show') | ||||
| $(modal.length ? modal : 'form').each((i, form) => { | $(modal.length ? modal : 'form').each((i, form) => { | ||||
| form = $(form) | form = $(form) | ||||
| $.each(error.response.data.errors || {}, (idx, msg) => { | $.each(error.response.data.errors || {}, (idx, msg) => { | ||||
| const input_name = (form.data('validation-prefix') || '') + idx | const input_name = (form.data('validation-prefix') || form.find('form').first().data('validation-prefix') || '') + idx | ||||
| let input = form.find('#' + input_name) | let input = form.find('#' + input_name) | ||||
| if (!input.length) { | if (!input.length) { | ||||
| input = form.find('[name="' + input_name + '"]'); | input = form.find('[name="' + input_name + '"]'); | ||||
| } | } | ||||
| if (input.length) { | if (input.length) { | ||||
| // Create an error message\ | // Create an error message\ | ||||
| ▲ Show 20 Lines • Show All 49 Lines • Show Last 20 Lines | |||||