formbuilder

package.json

@@ -27,6 +27,7 @@
         "chart.js": "^2.7.3",
         "graphql": "^14.4.2",
         "graphql-tag": "^2.10.1",
+        "izitoast": "^1.4.0",
         "jalali-moment": "^3.3.3",
         "loadash": "^1.0.0",
         "vee-validate": "^2.2.15",

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=174e67dd5b3265ec4f59",
-    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=958182d4186ccca0ef7a",
-    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=84430d42277381f1d901",
-    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=a362835fbf858c04432d",
-    "/js/vue/User/app.js": "/js/vue/User/app.js?id=1cc164742fa011cb2c67"
+    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=bee21a10fd167b32eb7a",
+    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=80da521806225a08e287",
+    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=940910f07194a9ae3664",
+    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=c19f65073768c1fe35cf",
+    "/js/vue/User/app.js": "/js/vue/User/app.js?id=085c0489c36adc5af7bf"
 }

resources/js/Global/components/Drawer/SideBar.vue

@@ -1,31 +1,35 @@
 <template>
 	<v-layout wrap>
-        <v-container class="Header" >
+		<v-container class="Header">
 			<v-icon class="Menu" @click.stop="drawer = !drawer" dark>fas fa-bars</v-icon>
 			<a href="/Main/Home">
 				<v-icon class="Home" dark>fas fa-home</v-icon>
 			</a>
-            <div class="Time"><div class="En WM-Font-22"> 11:22 </div><div class="WM-Font-14">  سه شنبه 22 مهر 1398 </div></div>
-            <div class="Notification" dark>
-                <wm-notifications></wm-notifications>
+			<div class="Time">
+				<div class="En WM-Font-22">{{ timeNow }}</div>
+				<div class="WM-Font-14">{{  new Date() | moment("dddd  jDD  jMMMM jYYYY") }}</div>
 			</div>
-
+			<!-- <div class="Notification" dark>
+                <wm-notifications></wm-notifications>
+			</div>-->
 		</v-container>
 
 		<v-navigation-drawer v-model="drawer" app temporary right>
 			<v-list class="pa-1">
 				<v-list-tile avatar>
 					<v-list-tile-avatar>
-                        <img src="https://randomuser.me/api/portraits/men/85.jpg">
+						<img :src="$_getPath()+'images/Global/Tiles/UserLogo.png'" />
 					</v-list-tile-avatar>
 
 					<v-list-tile-content>
-                        <v-list-tile-title class="Name"> {{ getAuthUser.name }} </v-list-tile-title>
-                        <div class="Role"> مدیریت  </div>
+						<v-list-tile-title class="Name">{{ getAuthUser.name }}</v-list-tile-title>
+						<div class="Role">مدیریت</div>
 						<a class="LogOut">
 							<v-tooltip bottom color="black">
-                                <v-btn small @click.native.stop="logout" slot="activator" outline fab color="black" dark><v-icon dark>fas fa-power-off</v-icon></v-btn>
-                                <span> خروج از حساب کاربری </span>
+								<v-btn small @click.native.stop="logout" slot="activator" outline fab color="black" dark>
+									<v-icon dark>fas fa-power-off</v-icon>
+								</v-btn>
+								<span>خروج از حساب کاربری</span>
 							</v-tooltip>
 						</a>
 					</v-list-tile-content>
@@ -34,7 +38,7 @@
 
 			<v-list class="pt-0" dense>
 				<v-divider class="Divider"></v-divider>
-                <a :href="item.href" v-for="(item, key) in Items" :key="key" >
+				<a :href="item.href" v-for="(item, key) in Items" :key="key">
 					<template v-if="$_hasPermission(item.permission)">
 						<wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn"></wm-list-tile>
 					</template>
@@ -45,10 +49,10 @@
 </template>
 
 <script>
-    import Tile from '@Global/components/Drawer/Tile';
-    import Notifications from '@Global/components/Drawer/Notifications';
-    import {mapActions, mapGetters} from 'vuex';
-    export default {
+import Tile from "@Global/components/Drawer/Tile";
+import Notifications from "@Global/components/Drawer/Notifications";
+import { mapActions, mapGetters } from "vuex";
+export default {
 	data() {
 		return {
 			fav: true,
@@ -57,24 +61,49 @@
 			hints: true,
 			drawer: false,
 			Items: [
-                    { titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'dashboard', permission: "", href: '/User/List' },
+				// { titleEn: 'My Profile', titleFa: ' حساب کاربری من ', icon: 'dashboard', permission: "", href: '/User/List' },
 				// { titleEn: ' My Messages ', titleFa: ' پیام های من ', icon: 'question_answer', permission: "", href: '/User/List' },
-                    { titleEn: ' My Users ', titleFa: ' کاربران مجموعه ی من ', icon: 'question_answer', permission: "", href: '/User/List' }
-                ],
-                user: {name: ''}
+				{
+					titleEn: " My Users ",
+					titleFa: " کاربران مجموعه ی من ",
+					icon: "question_answer",
+					permission: "",
+					href: "/User/List"
 				}
+			],
+			user: { name: "" },
+            timeNow: "",
+		};
+	},
+	mounted(){
+        var self = this;
+        self.getTime(new Date())
+		setInterval(function() {
+            self.getTime(new Date())
+		}, 2000);
 	},
 	components: {
-            'wm-list-tile': Tile,
-            'wm-notifications':Notifications,
+		"wm-list-tile": Tile,
+		"wm-notifications": Notifications
 	},
-        computed:{
-            ...mapGetters('auth', ["getAuthUser"])
+	computed: {
+		...mapGetters("auth", ["getAuthUser"]),
 	},
-        methods:{
-            ...mapActions('auth', ['logout'])
+	methods: {
+		...mapActions("auth", ["logout"]),
+		getTime(date) {
+			let h = this.addZero(date.getHours());
+			let m = this.addZero(date.getMinutes());
+			this.timeNow = h + ":" + m;
 		},
+		addZero(i) {
+			if (i < 10) {
+				i = "0" + i;
+			}
+			return i;
 		}
+	}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -112,8 +141,8 @@
 	padding-bottom: 0px;
 }
 .LogOut {
-    position:absolute;
-    left:10px;
+	position: absolute;
+	left: 10px;
 }
 .drawer-trigger {
 	position: fixed;

resources/js/Global/components/FormLoader/Elements/we-form.vue

@@ -1,12 +1,10 @@
 <template>
-    <div :class="element.width" style="position:relative">
-        <div style="padding:150px;">
-        <h3>{{element.label}}</h3>
+    <div class="FormBlock" :class="element.width" style="position:relative">
+        <h3 class="text-lg-right">{{element.label}}</h3>
         <template v-if="element.children">
-            <element-factory v-for="(elm, key) in element.children" :values="values['input_'+element.id]" :element="elm" :key="key"></element-factory>
+            <element-factory v-for="(elm, key) in element.children" :values="values[element.slug]" :element="elm" :key="key"></element-factory>
         </template>
     </div>
-    </div>
 </template>
 <script>
 import Factory from '../FactoryPattern'
@@ -27,3 +25,11 @@ export default {
     }
 };
 </script>
+<style lang="scss" scoped>
+    .FormBlock {
+        padding: 10px 20px;
+        border: 1px solid #eeeeee;
+        border-right: 2px solid #000;
+        margin: 0px 15px;
+    }
+</style>

resources/js/Global/components/FormLoader/Elements/we-number_input.vue

@@ -0,0 +1,28 @@
+<template>
+	<v-card-text>
+		<v-text-field
+			type="number"
+			:label="element.label"
+			:placeholder="element.placeholder"
+			:hint="element.hint"
+			:color="element.color"
+			:append-icon="element.append_icon"
+			:prepend-icon="element.prepend_icon || 'fas fa-sort-numeric-up' "
+			:class="element.width"
+			v-model="values[element.slug]"
+		></v-text-field>
+	</v-card-text>
+</template>
+<script>
+export default {
+	props: {
+		element: {
+			type: Object
+		},
+		values: {
+			default: () => ({}),
+			type: Object
+		}
+	}
+};
+</script>

resources/js/Global/components/FormLoader/Elements/we-select.vue

@@ -0,0 +1,23 @@
+<template>
+	<v-card-text>
+		<v-autocomplete
+			:label="element.label"
+			:placeholder="element.placeholder"
+			:hint="element.hint"
+			:color="element.color"
+			:append-icon="element.append_icon"
+			:prepend-icon="element.prepend_icon"
+			:class="element.width"
+			:multiple="element.multiple"
+		></v-autocomplete>
+	</v-card-text>
+</template>
+<script>
+export default {
+	props: {
+		element: {
+			type: Object
+		}
+	}
+};
+</script>

resources/js/Global/components/FormLoader/Elements/we-switch.vue

@@ -0,0 +1,26 @@
+<template>
+	<v-card-text>
+		<v-switch
+			:class="element.width"
+			:label="element.label"
+			:hibt="element.hint"
+			:color="element.color"
+			:append-icon="element.append_icon"
+			:prepend-icon="element.prepend_icon"
+			v-model="values[element.slug]"
+		></v-switch>
+	</v-card-text>
+</template>
+<script>
+export default {
+	props: {
+		element: {
+			type: Object
+		},
+		values: {
+			type: Object,
+			default: () => ({})
+		}
+	}
+};
+</script>

resources/js/Global/components/FormLoader/Elements/we-text_input.vue

@@ -0,0 +1,27 @@
+<template>
+	<v-card-text>
+		<v-text-field
+			:label="element.label"
+			:placeholder="element.placeholder"
+			:hint="element.hint"
+			:color="element.color"
+			:append-icon="element.append_icon"
+			:prepend-icon="element.prepend_icon || 'fas fa-align-right' "
+			:class="element.width"
+			v-model="values[element.slug]"
+		></v-text-field>
+	</v-card-text>
+</template>
+<script>
+export default {
+	props: {
+		element: {
+			type: Object
+		},
+		values: {
+			default: () => ({}),
+			type: Object
+		}
+	}
+};
+</script>

resources/js/Global/components/FormLoader/Elements/we-textarea.vue

@@ -0,0 +1,26 @@
+<template>
+	<v-card-text>
+		<v-textarea
+			:label="element.label"
+			:placeholder="element.placeholder"
+			:hint="element.hint"
+			:color="element.color"
+			:append-icon="element.append_icon"
+			:prepend-icon="element.prepend_icon || 'fas fa-align-right' "
+			v-model="values[element.slug]"
+		></v-textarea>
+	</v-card-text>
+</template>
+<script>
+export default {
+	props: {
+		element: {
+			type: Object
+		},
+		values: {
+			type: Object,
+			default: () => ({})
+		}
+	}
+};
+</script>

resources/js/Global/components/FormLoader/Elements/wm-number_input.vue

@@ -1,36 +0,0 @@
-<template>
-    <div>
-        <v-text-field
-            type="number"  
-			:label="element.label" 
-			:placeholder="element.placeholder" 
-			:hint="element.hint" 
-			:color="element.color" 
-			:append-icon="element.append_icon" 
-			:prepend-icon="element.prepend_icon" 
-			:class="element.width"
-            v-model="values['input_'+element.id]"
-		></v-text-field>
-    </div>
-</template>
-<script>
-export default {
-    props:{
-        element:{
-            type: Object
-        },
-        values: {
-            required: false,
-            default: {},
-            type: Object,
-        }
-    },
-    watch:{
-        element(){
-            console.log(this.element);
-            
-        }
-    }
-
-}
-</script>

resources/js/Global/components/FormLoader/Elements/wm-select.vue

@@ -1,23 +0,0 @@
-<template>
-    <div>
-        <v-autocomplete
-			:label="element.label" 
-			:placeholder="element.placeholder" 
-			:hint="element.hint" 
-			:color="element.color" 
-			:append-icon="element.append_icon" 
-			:prepend-icon="element.prepend_icon" 
-			:class="element.width"
-			:multiple="element.multiple"
-		></v-autocomplete>
-    </div>
-</template>
-<script>
-export default {
-    props:{
-        element:{
-            type: Object
-        }
-    }
-}
-</script>

resources/js/Global/components/FormLoader/Elements/wm-switch.vue

@@ -1,27 +0,0 @@
-<template>
-    <div>
-        <v-switch
-            :class="element.width" 
-            :label="element.label" 
-            :hibt="element.hint" 
-            :color="element.color" 
-            :append-icon="element.append_icon" 
-            :prepend-icon="element.prepend_icon"
-            v-model="values['input_'+element.id]"
-        ></v-switch>
-    </div>
-</template>
-<script>
-export default {
-    props:{
-        element:{
-            type: Object
-        },
-        values: {
-            required: false,
-            type: Object,
-            default: {}
-        }
-    }
-}
-</script>

resources/js/Global/components/FormLoader/Elements/wm-text_input.vue

@@ -1,28 +0,0 @@
-<template>
-    <div>
-        <v-text-field  
-			:label="element.label" 
-			:placeholder="element.placeholder" 
-			:hint="element.hint" 
-			:color="element.color" 
-			:append-icon="element.append_icon" 
-			:prepend-icon="element.prepend_icon" 
-			:class="element.width"
-            v-model="values['input_' + element.id]"
-		></v-text-field>
-    </div>
-</template>
-<script>
-export default {
-    props:{
-        element:{
-            type: Object
-        },
-        values: {
-            required: false,
-            default: {}
-        }
-    },
-
-}
-</script>

resources/js/Global/components/FormLoader/Elements/wm-textarea.vue

@@ -1,28 +0,0 @@
-<template>
-    <div>
-        <v-textarea  
-			:label="element.label" 
-			:placeholder="element.placeholder" 
-			:hint="element.hint" 
-			:color="element.color" 
-			:append-icon="element.append_icon" 
-			:prepend-icon="element.prepend_icon" 
-			:class="element.width"
-            v-model="values['input_'+element.id]"
-		></v-textarea>
-    </div>
-</template>
-<script>
-export default {
-    props:{
-        element:{
-            type: Object,
-        },
-        values: {
-            type: Object,
-            required: false,
-            default: {}
-        }
-    }
-}
-</script>

resources/js/Global/components/FormLoader/FactoryPattern.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <v-flex :class="element.width">
         <component v-bind:is="element.type" :values="values" :element="element" ></component>
-    </div>
+    </v-flex>
 </template>
 <script>
 import Vue from 'vue'
@@ -24,7 +24,6 @@ export default {
         values: {
             required: false,
             type: Object,
-            default: {}
         }
     },
 }

resources/js/Global/components/FormLoader/Wrapper.vue

@@ -1,12 +1,11 @@
 <template>
-	<div>
+	<div class="row">
 		<element-factory
-			v-for="(element, key) in elements"
+			v-for="element in elements"
 			:element="element"
-			:values="values"
+			:values="formValues"
 			:key="element.id"
 		></element-factory>
-		<button @click="register">click me</button>
 	</div>
 </template>
 <script>
@@ -16,144 +15,43 @@ export default {
 		"element-factory": Factory
 	},
 	data: () => ({
-		elements: [
-			{
-				id: 1,
-				type: "wm-text_input",
-				width: "pa-2",
-				label: "Hi",
-				placeholder: "placeholder",
-				hint: "Hello",
-				color: "red"
-			},
-			{
-				id: 2,
-				type: "wm-form",
-				width: "pa-2",
-				label: "salam",
-				placeholder: "placeholder",
-				hint: "hint",
-				color: "red",
-				children: [
-					{
-						id: 3,
-						type: "wm-number_input",
-						width: "pa-2",
-						label: "salam",
-						placeholder: "placeholder",
-						hint: "hint",
-						color: "red"
-					},
-					{
-						id: 4,
-						type: "wm-form",
-						width: "pa-2",
-						label: "Form",
-						placeholder: "placeholder",
-						hint: "hint",
-						color: "red",
-						children: [
-							{
-								id: 5,
-								type: "wm-switch",
-								width: "pa-2",
-								label: "switch",
-								placeholder: "placeholder",
-								hint: "hint",
-								color: "red"
-							},
-							{
-								id: 6,
-								type: "wm-text_input",
-								width: "pa-2",
-								label: "salam",
-								placeholder: "placeholder",
-								hint: "hint",
-								color: "red"
-							}
-						]
-					},
-					{
-						id: 7,
-						type: "wm-text_input",
-						width: "pa-2",
-						label: "salam",
-						placeholder: "placeholder",
-						hint: "hint",
-						color: "red"
-					}
-				]
-			},
-			{
-				id: 8,
-				type: "wm-textarea",
-				width: "pa-2",
-				label: "salam",
-				placeholder: "placeholder",
-				hint: "hint",
-				color: "red"
+	}),
+	props: {
+		elements: {
+		    required: true
 		},
-			{
-				id: 9,
-				type: "wm-text_input",
-				width: "pa-2",
-				label: "salam",
-				placeholder: "placeholder",
-				hint: "hint",
-				color: "red"
-			}
-		],
-		// values: {},
 		values:{
-		    'input_1': 'saeid',
-		    'input_2': {
-		        'input_3' : 5,
-		        'input_4' : {
-		            'input_5': 'true',
-		            'input_6': 'khobi'
-		        },
-		        'input_7': 'na',
-		    },
-		    'input_8': 'shoma khobi \n man khobam',
-		    'input_9': 'hossein',
+		    required: false,
 		}
-	}),
-	props: {
-		// elements: {
-		//     type: Array,
-		//     required: true
-		// },
-		// values:{
-		//     required: false
-		// }
 	},
 	methods: {
 		setDefaultValue(elements, values = {}) {
 			for (const key in elements) {
 				if (elements.hasOwnProperty(key)) {
-					if (elements[key].type == "wm-form") {
-                        values["input_" + elements[key].id] = this.setDefaultValue(elements[key].children);
+					if (elements[key].type == "we-form") {
+						values[
+							elements[key].slug
+						] = this.setDefaultValue(elements[key].children);
 					} else {
-						values["input_" + elements[key].id] = "";
+						values[elements[key].slug] = "";
 					}
 				}
 			}
 			return values;
+		}
 	},
-		register(){
-			console.log(this.values);
-			
+	computed: {
+		formValues:{
+			get() {
+				if (!this.values || Object.keys(this.values).length == 0) {
+	            	return this.setDefaultValue(this.elements);
 				}
+				return this.values;
 			},
-    created() {
-        // this.values = this.setDefaultValue(this.elements);
+			set(values) {
+				this.$emit('values', values);
+			}
+		}
 	},
-	// watch: {
-	// 	values() {
-	// 		if (!this.values || this.values.length == 0) {
-    //             this.values = this.setDefaultValue(this.elements);
-	// 		}
-	// 	}
-	// }
 };
 </script>

resources/js/Global/mixins/global.js

@@ -5,7 +5,7 @@ import permissionList from "@Global/utils/Permissions/list";
 import { UserService } from "@Global/services/storage.services";
 const global = {
     methods: {
-        $_getPath(subPath) {
+        $_getPath(subPath = '') {
             const path =  process.env.MIX_PUSHER_APP_PUBLIC_PATH ? process.env.MIX_PUSHER_APP_PUBLIC_PATH : '/';
             return path + subPath;
         },

resources/js/Global/plugins/globalComponent.js

@@ -21,6 +21,12 @@ import Checkbox from "@Global/components/Inputs/Checkbox.vue";
 import InfoBlock from "@Global/components/Misc/InfoBlock.vue";
 import Breadcrumbs from "@Global/components/Misc/Breadcrumbs";
 
+//jalali
+import jalaliMoment from "vue-jalali-moment"
+import momment from "moment"
+momment.locale('fa');
+Vue.use(jalaliMoment);
+
 
 Vue.use(VueScrollReveal, {
     class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.

resources/js/Global/services/errorHandler.services.js

@@ -4,6 +4,9 @@ import ApiService from "@Global/services/api.services";
 import store from "@Core/store/index";
 import commonRoute from "@Global/utils/common/routes";
 
+
+import toast from "./toast.service";
+
 function errorResponseHandler(error) {
     
     // check for errorHandle config
@@ -19,13 +22,26 @@ function errorResponseHandler(error) {
         if(error.response.status == 401) {
             TokenService.removeToken();
             ApiService.removeAuthHeader();
-            store.commit('auth/logout', {}, {root: true})
+            store.commit('auth/logout', {}, {root: true});
+            if (commonRoute.login() != window.location.pathname) {
                 window.location.href = commonRoute.login();
             }
+            toast.error('نام کاربری یا رمز عبور اشتباه است', 'خطا');
+        } else if(error.response.status == 422) {
+            if(typeof error.response.data.errors !== 'undefined') {
+                for (const key in error.response.data.errors) {
+                    if (error.response.data.errors.hasOwnProperty(key)) {
+                        toast.error(error.response.data.errors[key], 'خطا');
+                    }
+                }
+            }
+        } else if(error.response.status == 500) {
+            toast.error('مشکل از سمت سرور', 'خطا');
+        }
     }
 }
 function successHandler(response) {
-    // if(response.status == 200) {
+    // if(response.status == 200 || response.status == 201) {
     //     if(typeof response.data.message !== 'undefined') {
     //         toast.success(response.data.message, response.data.title);
     //     }

resources/js/Global/services/toast.service.js

@@ -0,0 +1,23 @@
+import "izitoast/dist/css/iziToast.min.css";
+import iZtoast from "izitoast";
+
+const toast = {
+    error: (message, title = "Error") => {
+        return iZtoast.error({
+            title: title,
+            message: message,
+            rtl:true,
+            position: "bottomCenter"
+        });
+    },
+    success: (message, title = "Success") => {
+        return iZtoast.success({
+            title: title,
+            message: message,
+            rtl:true,
+            position: "bottomCenter"
+        });
+    }
+};
+
+export default toast;

resources/js/Home/views/Home.vue

@@ -18,12 +18,11 @@
                 ></wm-tile>
             </a>
         </v-layout>
-        <router-link :to="{name: 'AddModule'}">
+        <!-- <router-link :to="{name: 'AddModule'}">
             <v-btn large fab color="cyan" fixed bottom left dark style="left:5%">
                 <v-icon dark>fas fa-plus</v-icon>
             </v-btn>
-        </router-link>
-        <!-- <wm-wrapper></wm-wrapper> -->
+        </router-link> -->
     </v-container>
 </template>
 
@@ -31,13 +30,11 @@
 
 <script>
 import Tile from "@Global/components/Tiles/Tile";
-// import Wrapper from "@Global/components/FormLoader/Wrapper";
 import { mapGetters, mapActions } from "vuex";
 export default {
     data: () => ({}),
     components: {
         "wm-tile": Tile,
-        // "wm-wrapper": Wrapper,
     },
     computed: {
         ...mapGetters("role_permission", ["getModules"])