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 |