alireza_hassani
/
willaengine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: refactor modal structure

Browse Source
feature/BE.implement-bouncer-package
Saeid 4 years ago
parent 692d6f1c5f
commit cfb12f914a
7 changed files with 34 additions and 75 deletions
Show Stats Download Patch File Download Diff File

26
resources/js/Global/components/Modals/BasicModal.vue
Unescape View File

@ -1,30 +1,24 @@
<template> <template>
<v-dialog v-model="modal" :width="width" :transition="transition"> <v-dialog v-model="modal" :max-width="maxWidth" :width="width" :transition="transition">
<component v-if="modal" :is="name" /> <slot :modal="modal" :data="data" v-if="modal" ></slot>
</v-dialog> </v-dialog>
</template> </template>
<script> <script>
import {mapGetters} from "vuex"; import {mapGetters} from "vuex";
export default { export default {
props: { props: {
width:{default: '60%'}, width:{default: null},
name:{default: ''}, maxWidth:{default: null},
name:{default: null},
transition:{default: 'slide-x-transition'}, transition:{default: 'slide-x-transition'},
}, },
data:() => ({
}),
components:{
'modal_task_list': () => '@Common/components/Task/Timeline/Modal-Layout.vue',
'modal_task_add': () => '@Common/components/Task/AddEdit/Modal-Add.vue'
},
computed: { computed: {
...mapGetters("modal", ["isModal"]), ...mapGetters("modal", ["isModal", "getModal"]),
modal: { modal: {
get() { get() {
return this.isModal(this.name); return this.isModal(this.modalName);
}, },
set(value) { set(value) {
if (!value) { if (!value) {
@ -32,6 +26,12 @@
} }
} }
}, },
modalName() {
return this.name ? this.name : this.$parent.$options.name;
},
data() {
return this.getModal(this.modalName);
}
}, },
} }

18
resources/js/Global/components/Modals/Dialog.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="modal" width="40%" transition="slide-x-transition"> <basic-modal width="40%" transition="slide-x-transition">
<v-card class="RTL"> <v-card class="RTL">
<v-card-title class="red lighten-5" primary-title> <v-card-title class="red lighten-5" primary-title>
<WM-PartTitle <WM-PartTitle
@ -38,11 +38,11 @@
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </basic-modal>
</template> </template>
<script> <script>
import { mapActions, mapGetters } from "vuex"; import { mapGetters } from "vuex";
export default { export default {
name: "modal_modal_dialog", name: "modal_modal_dialog",
data: () => ({ data: () => ({
@ -77,17 +77,7 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters("modal", ["isModal", "getModal", "getDialogType", "getDialogProperties"]), ...mapGetters("modal", ["getDialogType", "getDialogProperties"]),
modal: {
get() {
return this.isModal(this.$options.name);
},
set(value) {
if (!value) {
this.$_closeModal();
}
}
},
}, },
methods: { methods: {
async confirm() { async confirm() {

25
resources/js/Global/components/Modals/Helper.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<v-dialog v-model="modal" :width="properties.properties && properties.properties.width ? properties.properties.width : '60%'" transition="slide-x-transition"> <basic-modal :width="properties.properties && properties.properties.width ? properties.properties.width : '60%'" transition="slide-x-transition">
<v-card class="RTL"> <v-card class="RTL">
<v-card-title :class="[properties.properties && properties.properties.color ? properties.properties.color : 'blue', 'lighten-5']" primary-title> <v-card-title :class="[properties.properties && properties.properties.color ? properties.properties.color : 'blue', 'lighten-5']" primary-title>
<WM-PartTitle <WM-PartTitle
@ -28,12 +28,11 @@
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </basic-modal>
</template> </template>
<script> <script>
import { mapActions, mapGetters } from "vuex"; import { mapGetters } from "vuex";
import axios from 'axios';
import { url } from '@Common/mixins/urls'; import { url } from '@Common/mixins/urls';
export default { export default {
name: "modal_modal_helper", name: "modal_modal_helper",
@ -41,28 +40,16 @@ export default {
properties: {} properties: {}
}), }),
computed: { computed: {
...mapGetters("modal", ["isModal", "getModal"]), ...mapGetters("modal", ["getModal"]),
modal: {
get() {
return this.isModal(this.$options.name);
},
set(value) {
if (!value) {
this.$_closeModal();
}
}
},
}, },
methods: { methods: {
async getDate() { async getDate() {
if (this.modal) { let response = await this.$axios.get(url('help', {help: this.getModal(this.$options.name).slug}));
let response = await axios.get(url('help', {help: this.getModal(this.$options.name).slug})); if (response && response.status === 200) {
if (response && response.status == 200) {
this.properties = response.data.data; this.properties = response.data.data;
this.properties.properties = (response.data.data.properties) ? JSON.parse(response.data.data.properties) : null; this.properties.properties = (response.data.data.properties) ? JSON.parse(response.data.data.properties) : null;
} }
} }
}
}, },
created() { created() {
this.getDate(); this.getDate();

3
resources/js/Global/plugins/globalComponent.js vendored
Unescape View File

@ -24,6 +24,9 @@ Vue.component("section-title", SectionTitle);
import SectionTitleVertical from "@Global/components/Dividers/SectionTitle-Vertical.vue"; import SectionTitleVertical from "@Global/components/Dividers/SectionTitle-Vertical.vue";
Vue.component("section-title-vertical", SectionTitleVertical); Vue.component("section-title-vertical", SectionTitleVertical);
import BasicModal from "@Global/components/Modals/BasicModal";
Vue.component("basic-modal", BasicModal);
import Breadcrumbs from "@Global/components/Misc/Breadcrumbs"; import Breadcrumbs from "@Global/components/Misc/Breadcrumbs";
import Dialog from "@Global/components/Modals/Dialog.vue"; import Dialog from "@Global/components/Modals/Dialog.vue";
import Helper from "@Global/components/Modals/Helper.vue"; import Helper from "@Global/components/Modals/Helper.vue";

4
resources/js/Home/App.vue
Unescape View File

@ -3,14 +3,14 @@
<div id="app" class="we-dark"> <div id="app" class="we-dark">
<wm-background C1="fff" C2="f1f1f1" C3="fff"/> <wm-background C1="fff" C2="f1f1f1" C3="fff"/>
<app-menu/> <app-menu/>
<v-content> <v-main>
<v-container fluid class="Login"> <v-container fluid class="Login">
<div class="Tile"> <div class="Tile">
<router-view/> <router-view/>
<!-- <wm-tiles-layout></wm-tiles-layout> --> <!-- <wm-tiles-layout></wm-tiles-layout> -->
</div> </div>
</v-container> </v-container>
</v-content> </v-main>
</div> </div>
</v-app> </v-app>
</template> </template>

13
resources/js/Home/components/Modules/PaymentConfirmation.vue
Unescape View File

@ -38,7 +38,7 @@
</v-dialog> </v-dialog>
</template> </template>
<script> <script>
import { mapGetters, mapActions, mapMutations } from "vuex"; import { mapGetters, mapMutations } from "vuex";
export default { export default {
name: "modal_rolePermission_paymentConfirm", name: "modal_rolePermission_paymentConfirm",
data() { data() {
@ -60,20 +60,9 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters("modal", ["isModal", "getModal"]),
...mapGetters([ ...mapGetters([
'getModuleState' 'getModuleState'
]), ]),
modal: {
get() {
return this.isModal(this.$options.name);
},
set(value) {
if (!value) {
this.$_closeModal();
}
}
},
}, },
methods: { methods: {
...mapMutations([ ...mapMutations([

16
resources/js/Home/components/Modules/TrialConfirmation.vue
Unescape View File

@ -57,9 +57,9 @@ export default {
}, },
methods: { methods: {
async register() { async register() {
if (this.modal && this.getModal(this.$options.name).model) { if (this.getModal(this.$options.name) && this.getModal(this.$options.name).model) {
let response = await this.actviveTrial(this.getModal(this.$options.name).model.id); let response = await this.actviveTrial(this.getModal(this.$options.name).model.id);
if (response.status == 200) { if (response.status === 200) {
this.$_closeModal(); this.$_closeModal();
} }
} }
@ -67,17 +67,7 @@ export default {
...mapActions("rolePermission", ["actviveTrial"]) ...mapActions("rolePermission", ["actviveTrial"])
}, },
computed: { computed: {
...mapGetters("modal", ["isModal", "getModal"]), ...mapGetters("modal", ["getModal"]),
modal: {
get() {
return this.isModal(this.$options.name);
},
set(value) {
if (!value) {
this.$_closeModal();
}
}
},
expiredDate() { expiredDate() {
var today = new Date(); var today = new Date();
return new Date(today.setDate(today.getDate() + 15)); return new Date(today.setDate(today.getDate() + 15));

Write Preview
Loading…
Cancel
Save