formbuilder

pull/1/head
Saeid 5 years ago
parent db139f0d87
commit 144d640415

4100
package-lock.json generated

File diff suppressed because it is too large Load Diff

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

@ -1,7 +1,7 @@
{ {
"/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=174e67dd5b3265ec4f59", "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=bee21a10fd167b32eb7a",
"/js/vue/Home/app.js": "/js/vue/Home/app.js?id=958182d4186ccca0ef7a", "/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=84430d42277381f1d901", "/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=a362835fbf858c04432d", "/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=1cc164742fa011cb2c67" "/js/vue/User/app.js": "/js/vue/User/app.js?id=085c0489c36adc5af7bf"
} }

@ -1,142 +1,171 @@
<template> <template>
<v-layout wrap> <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> <v-icon class="Menu" @click.stop="drawer = !drawer" dark>fas fa-bars</v-icon>
<a href="/Main/Home"> <a href="/Main/Home">
<v-icon class="Home" dark>fas fa-home</v-icon> <v-icon class="Home" dark>fas fa-home</v-icon>
</a> </a>
<div class="Time"><div class="En WM-Font-22"> 11:22 </div><div class="WM-Font-14"> سه شنبه 22 مهر 1398 </div></div> <div class="Time">
<div class="Notification" dark> <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> <wm-notifications></wm-notifications>
</div> </div>-->
</v-container>
</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="$_getPath()+'images/Global/Tiles/UserLogo.png'" />
</v-list-tile-avatar>
<v-navigation-drawer v-model="drawer" app temporary right> <v-list-tile-content>
<v-list class="pa-1"> <v-list-tile-title class="Name">{{ getAuthUser.name }}</v-list-tile-title>
<v-list-tile avatar> <div class="Role">مدیریت</div>
<v-list-tile-avatar> <a class="LogOut">
<img src="https://randomuser.me/api/portraits/men/85.jpg"> <v-tooltip bottom color="black">
</v-list-tile-avatar> <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>
</v-list-tile>
</v-list>
<v-list-tile-content> <v-list class="pt-0" dense>
<v-list-tile-title class="Name"> {{ getAuthUser.name }} </v-list-tile-title> <v-divider class="Divider"></v-divider>
<div class="Role"> مدیریت </div> <a :href="item.href" v-for="(item, key) in Items" :key="key">
<a class="LogOut"> <template v-if="$_hasPermission(item.permission)">
<v-tooltip bottom color="black"> <wm-list-tile :TitleFa="item.titleFa" :TitleEn="item.titleEn"></wm-list-tile>
<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> </template>
<span> خروج از حساب کاربری </span> </a>
</v-tooltip> </v-list>
</a> </v-navigation-drawer>
</v-list-tile-content> </v-layout>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider class="Divider"></v-divider>
<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>
</a>
</v-list>
</v-navigation-drawer>
</v-layout>
</template> </template>
<script> <script>
import Tile from '@Global/components/Drawer/Tile'; import Tile from "@Global/components/Drawer/Tile";
import Notifications from '@Global/components/Drawer/Notifications'; import Notifications from "@Global/components/Drawer/Notifications";
import {mapActions, mapGetters} from 'vuex'; import { mapActions, mapGetters } from "vuex";
export default { export default {
data() { data() {
return { return {
fav: true, fav: true,
menu: true, menu: true,
message: false, message: false,
hints: true, hints: true,
drawer: false, drawer: false,
Items: [ 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 Messages ', titleFa: ' پیام های من ', icon: 'question_answer', permission: "", href: '/User/List' },
{ titleEn: ' My Users ', titleFa: ' کاربران مجموعه ی من ', icon: 'question_answer', permission: "", href: '/User/List' } {
], titleEn: " My Users ",
user: {name: ''} titleFa: " کاربران مجموعه ی من ",
} icon: "question_answer",
}, permission: "",
components: { href: "/User/List"
'wm-list-tile': Tile, }
'wm-notifications':Notifications, ],
}, user: { name: "" },
computed:{ timeNow: "",
...mapGetters('auth', ["getAuthUser"]) };
}, },
methods:{ mounted(){
...mapActions('auth', ['logout']) var self = this;
}, self.getTime(new Date())
} setInterval(function() {
self.getTime(new Date())
}, 2000);
},
components: {
"wm-list-tile": Tile,
"wm-notifications": Notifications
},
computed: {
...mapGetters("auth", ["getAuthUser"]),
},
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.Header .Menu { .Header .Menu {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 20px; top: 20px;
} }
.Header .Home { .Header .Home {
position: absolute; position: absolute;
right: 50px; right: 50px;
top: 20px; top: 20px;
} }
.Notification { .Notification {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 20px;
} }
.Divider { .Divider {
margin: 0px; margin: 0px;
} }
.Name { .Name {
font-size: 18px; font-size: 18px;
} }
.Role { .Role {
font-size: 14px; font-size: 14px;
color: #aaaaaa; color: #aaaaaa;
} }
.Time { .Time {
text-align: center; text-align: center;
color: #fff; color: #fff;
margin-top: -10px; margin-top: -10px;
} }
.Header { .Header {
padding-bottom: 0px; padding-bottom: 0px;
} }
.LogOut { .LogOut {
position:absolute; position: absolute;
left:10px; left: 10px;
} }
.drawer-trigger { .drawer-trigger {
position: fixed; position: fixed;
top: 0px; top: 0px;
padding: 40px; padding: 40px;
background-color: white; background-color: white;
left: 400px; left: 400px;
} }
.drawer-trigger.active { .drawer-trigger.active {
color: red; color: red;
} }
.drawer { .drawer {
position: fixed; position: fixed;
top: 0px; top: 0px;
left: -400px; left: -400px;
bottom: 0px; bottom: 0px;
background-color: white; background-color: white;
width: 400px; width: 400px;
} }
.drawer.open { .drawer.open {
left: 0px; left: 0px;
} }
</style> </style>

@ -1,11 +1,9 @@
<template> <template>
<div :class="element.width" style="position:relative"> <div class="FormBlock" :class="element.width" style="position:relative">
<div style="padding:150px;"> <h3 class="text-lg-right">{{element.label}}</h3>
<h3>{{element.label}}</h3>
<template v-if="element.children"> <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> </template>
</div>
</div> </div>
</template> </template>
<script> <script>
@ -26,4 +24,12 @@ export default {
} }
} }
}; };
</script> </script>
<style lang="scss" scoped>
.FormBlock {
padding: 10px 20px;
border: 1px solid #eeeeee;
border-right: 2px solid #000;
margin: 0px 15px;
}
</style>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

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

@ -1,12 +1,11 @@
<template> <template>
<div> <div class="row">
<element-factory <element-factory
v-for="(element, key) in elements" v-for="element in elements"
:element="element" :element="element"
:values="values" :values="formValues"
:key="element.id" :key="element.id"
></element-factory> ></element-factory>
<button @click="register">click me</button>
</div> </div>
</template> </template>
<script> <script>
@ -16,144 +15,43 @@ export default {
"element-factory": Factory "element-factory": Factory
}, },
data: () => ({ 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"
},
{
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',
}
}), }),
props: { props: {
// elements: { elements: {
// type: Array, required: true
// required: true },
// }, values:{
// values:{ required: false,
// required: false }
// }
}, },
methods: { methods: {
setDefaultValue(elements, values = {}) { setDefaultValue(elements, values = {}) {
for (const key in elements) { for (const key in elements) {
if (elements.hasOwnProperty(key)) { if (elements.hasOwnProperty(key)) {
if (elements[key].type == "wm-form") { if (elements[key].type == "we-form") {
values["input_" + elements[key].id] = this.setDefaultValue(elements[key].children); values[
elements[key].slug
] = this.setDefaultValue(elements[key].children);
} else { } else {
values["input_" + elements[key].id] = ""; values[elements[key].slug] = "";
} }
} }
} }
return values; return values;
},
register(){
console.log(this.values);
} }
}, },
created() { computed: {
// this.values = this.setDefaultValue(this.elements); formValues:{
}, get() {
// watch: { if (!this.values || Object.keys(this.values).length == 0) {
// values() { return this.setDefaultValue(this.elements);
// if (!this.values || this.values.length == 0) { }
// this.values = this.setDefaultValue(this.elements); return this.values;
// } },
// } set(values) {
// } this.$emit('values', values);
}
}
},
}; };
</script> </script>

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

@ -21,6 +21,12 @@ import Checkbox from "@Global/components/Inputs/Checkbox.vue";
import InfoBlock from "@Global/components/Misc/InfoBlock.vue"; import InfoBlock from "@Global/components/Misc/InfoBlock.vue";
import Breadcrumbs from "@Global/components/Misc/Breadcrumbs"; 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, { Vue.use(VueScrollReveal, {
class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides. class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides.

@ -4,6 +4,9 @@ import ApiService from "@Global/services/api.services";
import store from "@Core/store/index"; import store from "@Core/store/index";
import commonRoute from "@Global/utils/common/routes"; import commonRoute from "@Global/utils/common/routes";
import toast from "./toast.service";
function errorResponseHandler(error) { function errorResponseHandler(error) {
// check for errorHandle config // check for errorHandle config
@ -19,13 +22,26 @@ function errorResponseHandler(error) {
if(error.response.status == 401) { if(error.response.status == 401) {
TokenService.removeToken(); TokenService.removeToken();
ApiService.removeAuthHeader(); ApiService.removeAuthHeader();
store.commit('auth/logout', {}, {root: true}) store.commit('auth/logout', {}, {root: true});
window.location.href = commonRoute.login(); 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) { function successHandler(response) {
// if(response.status == 200) { // if(response.status == 200 || response.status == 201) {
// if(typeof response.data.message !== 'undefined') { // if(typeof response.data.message !== 'undefined') {
// toast.success(response.data.message, response.data.title); // toast.success(response.data.message, response.data.title);
// } // }

@ -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;

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

Loading…
Cancel
Save