Differential D1423 Diff 4972 src/resources/js/app.js

Changeset 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 SupportForm from '../vue/Widgets/SupportForm'
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 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,
▲ Show 20 Lines • Show All 108 Lines • ▼ Show 20 Lines	methods: {
403: "Access denied",		403: "Access denied",
404: "Not found",		404: "Not found",
405: "Method not allowed",		405: "Method not allowed",
500: "Internal server error"		500: "Internal server error"
}		}

if (!msg) msg = map[code] \|\| "Unknown Error"		if (!msg) msg = map[code] \|\| "Unknown Error"

const error_page = `<div id="error-page"><div class="code">${code}</div><div class="message">${msg}</div></div>`		const error_page = `<div id="error-page" class="error-page"><div class="code">${code}</div><div class="message">${msg}</div></div>`

$('#error-page').remove()		$('#error-page').remove()
$('#app').append(error_page)		$('#app').append(error_page)

		app.updateBodyClass('error')
},		},
errorHandler(error) {		errorHandler(error) {
this.stopLoading()		this.stopLoading()

if (!error.response) {		if (!error.response) {
// TODO: probably network connection error		// TODO: probably network connection error
} else if (error.response.status === 401) {		} else if (error.response.status === 401) {
this.logoutUser()		this.logoutUser()
▲ Show 20 Lines • Show All 74 Lines • ▼ Show 20 Lines	methods: {
}		}

if (!domain.isVerified \|\| !domain.isLdapReady \|\| !domain.isConfirmed) {		if (!domain.isVerified \|\| !domain.isLdapReady \|\| !domain.isConfirmed) {
return 'Not Ready'		return 'Not Ready'
}		}

return 'Active'		return 'Active'
},		},
		pageName(path) {
		let page = this.$route.path

		// check if it is a "menu page", find the page name
		// otherwise we'll use the real path as page name
		window.config.menu.every(item => {
		if (item.location == page && item.page) {
		page = item.page
		return false
		}
		})

		page = page.replace(/^\//, '')

		return page ? page : '404'
		},
		supportDialog(container) {
		let dialog = $('#support-dialog')

		// FIXME: Find a nicer way of doing this
		if (!dialog.length) {
		let form = new Vue(SupportForm)
		form.$mount($('<div>').appendTo(container)[0])
		form.$root = this
		form.$toast = this.$toast
		dialog = $(form.$el)
		}

		dialog.on('shown.bs.modal', () => {
		dialog.find('input').first().focus()
		}).modal()
		},
userStatusClass(user) {		userStatusClass(user) {
if (user.isDeleted) {		if (user.isDeleted) {
return 'text-muted'		return 'text-muted'
}		}

if (user.isSuspended) {		if (user.isSuspended) {
return 'text-warning'		return 'text-warning'
}		}
Show All 13 Lines	methods: {
return 'Suspended'		return 'Suspended'
}		}

if (!user.isImapReady \|\| !user.isLdapReady) {		if (!user.isImapReady \|\| !user.isLdapReady) {
return 'Not Ready'		return 'Not Ready'
}		}

return 'Active'		return 'Active'
		},
		updateBodyClass(name) {
		// Add 'class' attribute to the body, different for each page
		// so, we can apply page-specific styles
		let className = 'page-' + (name \|\| this.pageName()).replace(/\/.*$/, '')
		$(document.body).removeClass().addClass(className)
}		}
}		}
})		})

// Add a axios request interceptor		// Add a axios request interceptor
window.axios.interceptors.request.use(		window.axios.interceptors.request.use(
config => {		config => {
// This is the only way I found to change configuration options		// This is the only way I found to change configuration options
Show All 13 Lines	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

		// Do not display the error in a toast message, pass the error as-is
		if (error.config.ignoreErrors) {
		return Promise.reject(error)
		}

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)

▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines	error => {
}		}

app.$toast.error(error_msg \|\| "Server Error")		app.$toast.error(error_msg \|\| "Server Error")

// Pass the error as-is		// Pass the error as-is
return Promise.reject(error)		return Promise.reject(error)
}		}
)		)

		// TODO: Investigate if we can use App component's childMounted() method instead
		window.router.afterEach((to, from) => {
		// When changing a page remove old:
		// - error page
		// - modal backdrop
		$('#error-page,.modal-backdrop.show').remove()

		app.updateBodyClass()
		})