164 lines
4.4 KiB
JavaScript
Vendored
164 lines
4.4 KiB
JavaScript
Vendored
/**
|
|
* First we will load all of this project's JavaScript dependencies which
|
|
* includes Vue and other libraries. It is a great starting point when
|
|
* building robust, powerful web applications using Vue and Laravel.
|
|
*/
|
|
|
|
require('./../../bootstrap');
|
|
|
|
import Vue from 'vue';
|
|
|
|
import Global from './../../mixins/global';
|
|
import {getQueryVariable} from './../../plugins/functions';
|
|
|
|
import AkauntingDashboard from './../../components/AkauntingDashboard';
|
|
import AkauntingWidget from './../../components/AkauntingWidget';
|
|
|
|
import {DatePicker, Tooltip} from 'element-ui';
|
|
|
|
Vue.use(DatePicker, Tooltip);
|
|
|
|
const dashboard = new Vue({
|
|
el: '#main-body',
|
|
|
|
components: {
|
|
[DatePicker.name]: DatePicker,
|
|
[Tooltip.name]: Tooltip,
|
|
AkauntingDashboard,
|
|
AkauntingWidget
|
|
},
|
|
|
|
mixins: [
|
|
Global
|
|
],
|
|
|
|
data: function () {
|
|
return {
|
|
dashboard_modal: false,
|
|
dashboard: {
|
|
name: '',
|
|
enabled: 1,
|
|
type: 'create',
|
|
dashboard_id: 0
|
|
},
|
|
widget_modal: false,
|
|
widgets: {},
|
|
widget: {
|
|
id: 0,
|
|
name: '',
|
|
class: '',
|
|
width: '',
|
|
action: 'create',
|
|
sort: 0,
|
|
},
|
|
filter_date: [],
|
|
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
let start_date = getQueryVariable('start_date');
|
|
|
|
if (start_date) {
|
|
let end_date = getQueryVariable('end_date');
|
|
|
|
this.filter_date.push(start_date);
|
|
this.filter_date.push(end_date);
|
|
}
|
|
|
|
this.getWidgets();
|
|
},
|
|
|
|
methods:{
|
|
// Create Dashboard form open
|
|
onCreateDashboard() {
|
|
this.dashboard_modal = true;
|
|
this.dashboard.name = '';
|
|
this.dashboard.enabled = 1;
|
|
this.dashboard.type = 'create';
|
|
this.dashboard.dashboard_id = 0;
|
|
},
|
|
|
|
// Edit Dashboard information
|
|
onEditDashboard(dashboard_id) {
|
|
var self = this;
|
|
|
|
axios.get(url + '/common/dashboards/' + dashboard_id + '/edit')
|
|
.then(function (response) {
|
|
self.dashboard.name = response.data.name;
|
|
self.dashboard.enabled = response.data.enabled;
|
|
self.dashboard.type = 'edit';
|
|
self.dashboard.dashboard_id = dashboard_id;
|
|
|
|
self.dashboard_modal = true;
|
|
})
|
|
.catch(function (error) {
|
|
self.dashboard_modal = false;
|
|
});
|
|
},
|
|
|
|
// Get All Widgets
|
|
getWidgets() {
|
|
var self = this;
|
|
|
|
axios.get(url + '/common/widgets')
|
|
.then(function (response) {
|
|
self.widgets = response.data;
|
|
})
|
|
.catch(function (error) {
|
|
});
|
|
},
|
|
|
|
// Add new widget on dashboard
|
|
onCreateWidget() {
|
|
this.widget_modal = true;
|
|
},
|
|
|
|
// Edit Dashboard selected widget setting.
|
|
onEditWidget(widget_id) {
|
|
var self = this;
|
|
|
|
axios.get(url + '/common/widgets/' + widget_id + '/edit')
|
|
.then(function (response) {
|
|
self.widget.id = widget_id;
|
|
self.widget.name = response.data.name;
|
|
self.widget.class = response.data.class;
|
|
self.widget.width = response.data.settings.width;
|
|
self.widget.action = 'edit';
|
|
self.widget.sort = response.data.sort;
|
|
|
|
self.widget_modal = true;
|
|
})
|
|
.catch(function (error) {
|
|
self.widget_modal = false;
|
|
});
|
|
},
|
|
|
|
onCancel() {
|
|
this.dashboard_modal = false;
|
|
|
|
this.dashboard.name = '';
|
|
this.dashboard.enabled = 1;
|
|
this.dashboard.type = 'create';
|
|
this.dashboard.dashboard_id = 0;
|
|
|
|
this.widget_modal = false;
|
|
|
|
this.widget.id = 0;
|
|
this.widget.name = '';
|
|
this.widget.class = '';
|
|
this.widget.width = '';
|
|
this.widget.action = 'create';
|
|
this.widget.sort = 0;
|
|
},
|
|
|
|
onChangeFilterDate() {
|
|
if (this.filter_date) {
|
|
window.location.href = url + '?start_date=' + this.filter_date[0] + '&end_date=' + this.filter_date[1];
|
|
} else {
|
|
window.location.href = url;
|
|
}
|
|
},
|
|
}
|
|
});
|