refactor: refactor modal structure

resources/js/Global/components/Modals/BasicModal.vue

@@ -1,30 +1,24 @@
 <template>
-    <v-dialog v-model="modal" :width="width" :transition="transition">
-        <component v-if="modal" :is="name" />
+    <v-dialog v-model="modal" :max-width="maxWidth" :width="width" :transition="transition">
+        <slot :modal="modal" :data="data" v-if="modal" ></slot>
     </v-dialog>
 </template>
 
 
 <script>
     import {mapGetters} from "vuex";
-
     export default {
         props: {
-            width:{default: '60%'},
-            name:{default: ''},
+            width:{default: null},
+            maxWidth:{default: null},
+            name:{default: null},
             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: {
-            ...mapGetters("modal", ["isModal"]),
+            ...mapGetters("modal", ["isModal", "getModal"]),
             modal: {
                 get() {
-                    return this.isModal(this.name);
+                    return this.isModal(this.modalName);
                 },
                 set(value) {
                     if (!value) {
@@ -32,6 +26,12 @@
                     }
                 }
             },
+            modalName() {
+                return this.name ? this.name : this.$parent.$options.name;
+            },
+            data() {
+                return this.getModal(this.modalName);
+            }
         },
 
     }

resources/js/Global/components/Modals/Dialog.vue

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

resources/js/Global/components/Modals/Helper.vue

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

resources/js/Global/plugins/globalComponent.js

@@ -24,6 +24,9 @@ Vue.component("section-title", SectionTitle);
 import SectionTitleVertical from "@Global/components/Dividers/SectionTitle-Vertical.vue";
 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 Dialog from "@Global/components/Modals/Dialog.vue";
 import Helper from "@Global/components/Modals/Helper.vue";

resources/js/Home/App.vue

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

resources/js/Home/components/Modules/PaymentConfirmation.vue

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

resources/js/Home/components/Modules/TrialConfirmation.vue

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