2
0
mirror of https://github.com/frappe/books.git synced 2024-12-23 03:19:01 +00:00

Merge branch 'move-to-vue' of https://github.com/frappe/accounting into move-to-vue

This commit is contained in:
Suraj Shetty 2018-06-14 13:09:31 +05:30
commit 7577a2d0e5
2 changed files with 97 additions and 2 deletions

View File

@ -4,21 +4,47 @@
<router-view />
</frappe-desk>
<router-view v-else name="setup" />
<frappe-modal ref="modal" :show="showModal" v-bind="modalOptions" />
</div>
</template>
<script>
import Vue from 'vue';
import Observable from 'frappejs/utils/observable';
import Desk from '@/components/Desk';
import Modal from '@/components/Modal';
const Bus = new Observable();
Vue.use({
// enable use of this.$modal in every component
// this also keeps only one modal in the DOM at any time
// which is the recommended way by bootstrap
install (Vue) {
Vue.prototype.$modal = {
show(options) {
Bus.trigger('showModal', options);
},
hide() {
Bus.trigger('hideModal');
}
}
}
});
export default {
name: 'App',
data() {
return {
showDesk: true
showDesk: true,
showModal: false,
modalOptions: {}
}
},
components: {
FrappeDesk: Desk
FrappeDesk: Desk,
FrappeModal: Modal
},
async beforeRouteUpdate(to, from, next) {
const accountingSettings = await frappe.getSingle('AccountingSettings');
@ -27,6 +53,18 @@ export default {
} else {
this.showDesk = true;
}
},
mounted() {
Bus.on('showModal', (options = {}) => {
this.showModal = true;
this.modalOptions = options;
});
Bus.on('hideModal', () => {
this.showModal = false;
});
window.frappeModal = this.$modal;
}
}
</script>

57
src/components/Modal.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div>
<div :class="['modal fade', modalClasses]" :style="{display: show ? 'block' : ''}" id="frappe-modal"
tabindex="-1" role="dialog" aria-labelledby="frappe-modal-label" aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="frappe-modal-label">{{ title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="closeModal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<component :is="body" />
</div>
<div class="modal-footer">
<component :is="footer" />
<button type="button" class="btn btn-secondary" @click="closeModal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop show" v-show="show"></div>
</div>
</template>
<script>
export default {
props: {
show: Boolean,
title: {
type: String,
default: 'Modal Title'
},
body: {
type: Object,
default: null
},
footer: {
type: Object,
default: null
}
},
computed: {
modalClasses() {
return {
show: this.show
}
}
},
methods: {
closeModal() {
this.$emit('closeModal');
}
}
}
</script>