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 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) | ||||
} | } | ||||
) | ) | ||||
window.router.afterEach((to, from) => { | |||||
// When changing a page remove old: | |||||
// - error page | |||||
// - modal backdrop | |||||
$('#error-page,.modal-backdrop.show').remove() | |||||
app.updateBodyClass() | |||||
}) |