You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
willaengine/resources/js/Common/components/Event/Add.vue

201 lines
12 KiB

<!-- --------------------------------------------------------------------
Add Event Modal
-------------------------------------------------------------------- -->
<template>
<v-dialog v-model="$store.state.EventAdd" width="60%" transition="slide-x-transition">
<v-card class="RTL">
<v-card-title class=" grey lighten-3" primary-title>
<WM-PartTitle class="WM-Margin-T-20" TitleFa=" افزودن رویداد " TitleEn=" Add an Event " Color="cyan"></WM-PartTitle>
</v-card-title>
<v-card-text>
5 years ago
<v-layout row wrap class="WM-Section" style="border-right-color: #32c5d2;">
<v-flex class="lg12 RTL text-lg-right">
<div class="Step En" style="color:#32c5d2;"> 01 </div>
<div class="Title">
<div class="FA"> اطلاعـــــات پـــایه </div>
<div class="EN"> bacis Info </div>
</div>
</v-flex>
<v-flex lg3>
5 years ago
<v-card-text class="hasConfig">
<v-autocomplete prepend-icon="fas fa-align-right" :items="eventTypes" color="cyan" item-text="name" label=" نوع رویداد "></v-autocomplete>
5 years ago
<v-tooltip bottom color="black">
<v-btn class="XS" @click.native="$store.state.ConfigEventTypeList = true" slot="activator" outline fab color="black" dark>
<v-icon dark>fas fa-pencil-alt</v-icon>
</v-btn>
<span> ویرایش دسته ها </span>
</v-tooltip>
</v-card-text>
</v-flex>
<v-flex xs12 sm4 md3>
<v-card-text>
<v-menu :close-on-content-click="false" v-model="eventDateBegin" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
<v-text-field slot="activator" v-model="date" label=" تاریخ شروع رویداد " prepend-icon="fas fa-calendar-alt" color="cyan" readonly></v-text-field>
<v-date-picker v-model="date" @input="eventDateBegin = false" color="cyan" locale="fa-ir"></v-date-picker>
</v-menu>
</v-card-text>
</v-flex>
<v-flex xs12 sm4 md3>
<v-card-text>
<v-menu :close-on-content-click="false" v-model="eventDateEnd" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
<v-text-field slot="activator" v-model="date" label=" تاریخ پایان رویداد " prepend-icon="fas fa-calendar-alt" color="cyan" readonly></v-text-field>
<v-date-picker v-model="date" @input="eventDateEnd = false" color="cyan" locale="fa-ir"></v-date-picker>
</v-menu>
</v-card-text>
</v-flex>
<v-flex md12>
<v-card-text class="WM-JustSide">
<v-textarea name="input-7-1" label=" جزئیات رویداد " value="" hint="حداکثر 2500 کاراکتر " color="cyan" prepend-icon="fas fa-quote-right"></v-textarea>
</v-card-text>
</v-flex>
</v-layout>
5 years ago
<!-- -------------------------------------------------------------
Remind Me
------------------------------------------------------------- -->
<v-layout row wrap class="WM-Section" style="border-right-color: #0097A7;">
<v-flex xs12 sm12 md4 class="RTL text-lg-right">
<div class="Step En" style="color:#0097A7;"> 02 </div>
<div class="Title">
<div class="FA"> یادآوری به مــــــــن </div>
<div class="EN"> Self Remind </div>
</div>
<v-switch style="float:left; margin-left:10px;" @change="remindMeState = !remindMeState" color="cyan darken-2" v-model="SelfRemind"></v-switch>
</v-flex>
5 years ago
<v-flex xs12 sm12 md8 :class="[ remindMeState ? 'has-blur' : '' ]">
<v-layout row wrap>
<v-flex xs12 sm4 md3>
<v-card-text>
<v-menu :close-on-content-click="false" v-model="eventRemindDate" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
<v-text-field slot="activator" v-model="date" label=" در تاریخ " prepend-icon="fas fa-calendar-alt" color="cyan" readonly></v-text-field>
<v-date-picker v-model="date" @input="eventRemindDate = false" color="cyan" locale="fa-ir"></v-date-picker>
</v-menu>
</v-card-text>
</v-flex>
<v-flex xs12 sm4 md3>
<v-card-text>
<v-menu ref="selfTimeMenu" v-model="selfTimeMenu" :close-on-content-click="false" :nudge-right="40" :return-value.sync="selfTime" lazy transition="slide-y-transition" offset-y full-width max-width="290px" min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field v-model="selfTime" label="در ساعت" prepend-icon="fas fa-clock" class="text-lg-center" readonly color="cyan" v-on="on"></v-text-field>
</template>
<v-time-picker class="LTR" v-if="selfTimeMenu" v-model="selfTime" color="cyan" full-width @click:minute="$refs.selfTimeMenu.save(selfTime)" locale="fa-ir"></v-time-picker>
</v-menu>
</v-card-text>
</v-flex>
<v-flex xs12 sm4 md6>
<v-card-text style="padding-top:0px;">
<v-select v-model="selfRemindValues" :items="selfRemindItems" color="cyan" attach chips label=" روش های اطلاع رسانی " multiple></v-select>
</v-card-text>
</v-flex>
</v-layout>
</v-flex>
5 years ago
</v-layout>
<!-- -------------------------------------------------------------
Remind Client
------------------------------------------------------------- -->
<v-layout row wrap class="WM-Section" style="border-right-color: #006064;">
<v-flex xs12 sm4 md4 class="RTL text-lg-right">
<div class="Step En" style="color:#006064;"> 03 </div>
<div class="Title">
<div class="FA"> یادآوری به مـــــــشتری </div>
<div class="EN"> Client Remind </div>
</div>
<v-switch style="float:left; margin-left:10px;" @change="clientMeState = !clientMeState" color="cyan darken-4" v-model="ClientRemind"></v-switch>
</v-flex>
5 years ago
<v-flex xs12 sm12 md8 :class="[ clientMeState ? 'has-blur' : '' ]">
<v-layout row wrap>
<v-flex xs12 sm4 md3>
<v-card-text>
<v-menu :close-on-content-click="false" v-model="eventRemindDate" :nudge-right="40" lazy transition="slide-y-transition" offset-y full-width min-width="290px">
<v-text-field slot="activator" v-model="date2" label=" در تاریخ " prepend-icon="fas fa-calendar-alt" color="cyan" readonly></v-text-field>
<v-date-picker v-model="date2" @input="eventRemindDate = false" color="cyan" locale="fa-ir"></v-date-picker>
</v-menu>
</v-card-text>
</v-flex>
<v-flex xs12 sm4 md3>
<v-card-text>
<v-menu ref="clientTimeMenu" v-model="clientTimeMenu" :close-on-content-click="false" :nudge-right="40" :return-value.sync="clientTime" lazy transition="slide-y-transition" offset-y full-width max-width="290px" min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field v-model="clientTime" label="در ساعت" prepend-icon="fas fa-clock" class="text-lg-center" readonly color="cyan" v-on="on"></v-text-field>
</template>
<v-time-picker class="LTR" v-if="clientTimeMenu" v-model="clientTime" color="cyan" full-width @click:minute="$refs.clientTimeMenu.save(clientTime)" locale="fa-ir"></v-time-picker>
</v-menu>
</v-card-text>
</v-flex>
<v-flex xs12 sm4 md6>
<v-card-text style="padding-top:0px;">
<v-select v-model="clientRemindValues" :items="clientRemindItems" color="cyan" attach chips label=" روش های اطلاع رسانی " multiple></v-select>
</v-card-text>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="cyan" depressed dark @click="$store.state.EventAdd = false">
<v-icon dark right>fas fa-plus</v-icon> ثبت رویداد
</v-btn>
</v-card-actions>
</v-card>
5 years ago
<!-- --------------------------------------------------------------------
Modals :: BEGIN
-------------------------------------------------------------------- -->
<template>
<div class="text-xs-center">
<wm-event-types-edit></wm-event-types-edit>
</div>
</template>
<!-- --------------------------------------------------------------------
Modals :: END
-------------------------------------------------------------------- --> </v-dialog>
</template>
<script>
5 years ago
import TypesEdit from "@Common/components/Event/Config/Type/Modal-Layout.vue";
export default {
5 years ago
components: {
'wm-event-types-edit' : TypesEdit,
},
props: {
Color: { default: 'grey darken-4' },
},
data () {
return {
date: new Date().toISOString().substr(0, 10),
date2: new Date().toISOString().substr(0, 10),
eventDateBegin: false,
eventDateEnd: false,
eventRemindDate: false,
eventTypes: [
{ name: ' ویزیت دکتر ', id: 1 },
{ name: ' عمل جراحی ', id: 2 },
{ name: ' خرید ', id: 2 },
],
selfTime: '12:00',
selfTimeMenu: false,
selfRemindItems: [' پیام کوتاه ', ' ایمیل ', ' اطلاع رسانی در مرورگر '],
selfRemindValues: [' پیام کوتاه ', ' ایمیل ', ' اطلاع رسانی در مرورگر '],
clientTime: '12:00',
clientTimeMenu: false,
clientRemindItems: [' پیام کوتاه ', ' ایمیل '],
clientRemindValues: [' پیام کوتاه ', ' ایمیل '],
5 years ago
SelfRemind: false,
ClientRemind: false,
remindMeState: true,
clientMeState: true,
}
}
};
</script>