RecurringSettingsFormField.vue — Booking for Appointments and Events Calendar – Amelia 1.2.20

ameliabooking / assets / views / backend / customize / formFields / RecurringSettingsFormField.vue

ameliabooking / assets / views / backend / customize / formFields Last commit date

RecurringSettingsFormField.vue

371 lines

1	<template>
2	<el-form label-position="top">
3	<div
4	v-show="customizationEdit.editable ? customizationEdit.editable : componentDisplay()"
5	class="am-customize-field"
6	:class="{'editable': customizationEdit.editable}"
7	:style="{borderColor: customizationEdit.reverseBackgroundColorForm}"
8	>
9	<el-row :gutter="24">
10	<el-col :sm="12">
11	<el-form-item>
12	<template slot="label">
13	<span :style="{ 'color': customizationEdit.useGlobalColors ? customizationForm.textColorOnBackground : customizationForm.formTextColor }">
14	<template v-if="!languageShortCode">
15	{{ labelRecurringRepeat.value \|\| $root.labels.recurring_repeat }}
16	</template>
17	<template v-else>
18	{{ labelRecurringRepeat.translations[languageShortCode] \|\| $root.labels.recurring_repeat }}
19	</template>
20	</span>
21	</template>
22	<el-select
23	v-model="recurringRepeat"
24	:popper-class="'am-dropdown'"
25	:style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.globalColors.primaryColor : '#C0C4CC' }"
26	@focus="inputFocus"
27	@change="changeRepetitionType"
28	placeholder=""
29	>
30	<el-option
31	v-for="item in recurringRepeatOptions"
32	:key="item.name"
33	:label="item.name"
34	:value="item.name"
35	:style="{
36	backgroundColor: customizationForm.formDropdownColor,
37	color: item.name === recurringRepeat ? customization.globalColors.primaryColor : customizationForm.formDropdownTextColor,
38	fontFamily: customization.font
39	}"
40	>
41	</el-option>
42	</el-select>
43	</el-form-item>
44	</el-col>
45
46	<el-col :sm="12">
47	<el-form-item>
48	<template slot="label">
49	<span :style="{ 'color': customizationEdit.useGlobalColors ? customizationForm.textColorOnBackground : customizationForm.formTextColor }">
50	<template v-if="!languageShortCode">
51	{{ labelRecurringInterval.value \|\| $root.labels.recurring_every }}
52	</template>
53	<template v-else>
54	{{ labelRecurringInterval.translations[languageShortCode] \|\| $root.labels.recurring_every }}
55	</template>
56	</span>
57	</template>
58	<el-select
59	v-model="recurringInterval"
60	:popper-class="'am-dropdown'"
61	:style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.globalColors.primaryColor : '#C0C4CC' }"
62	@focus="inputFocus"
63	placeholder=""
64	>
65	<el-option
66	v-for="item in recurringIntervalOptions[recurringRepeat]"
67	:key="item.name"
68	:label="item.name"
69	:value="item.name"
70	:style="{
71	backgroundColor: customizationForm.formDropdownColor,
72	color: item.name === recurringInterval ? customization.globalColors.primaryColor : customizationForm.formDropdownTextColor,
73	fontFamily: customization.font
74	}"
75	>
76	</el-option>
77	</el-select>
78	</el-form-item>
79	</el-col>
80	</el-row>
81
82	<el-row :gutter="24" v-if="recurringRepeat === $root.labels.repeat_weekly">
83	<el-col :sm="24">
84	<el-form-item>
85	<template slot="label">
86	<span :style="{ 'color': customizationEdit.useGlobalColors ? customizationForm.textColorOnBackground : customizationForm.formTextColor }">
87	<template v-if="!languageShortCode">
88	{{ labelRecurringOn.value \|\| $root.labels.recurring_on }}
89	</template>
90	<template v-else>
91	{{ labelRecurringOn.translations[languageShortCode] \|\| $root.labels.recurring_on }}
92	</template>
93	</span>
94	</template>
95	<el-checkbox-group
96	v-model="weekDaysSelected"
97	:border="true"
98	size="small"
99	>
100	<el-checkbox-button
101	v-for="(weekDay, index) in weekDays"
102	:label="index"
103	:key="index"
104	:disabled="!weekDay.enabled"
105	:style="{backgroundColor: weekDaysSelected.indexOf(index) > -1 ? customization.globalColors.primaryColor : customizationForm.formInputColor, color: customizationForm.formInputTextColor}"
106	>
107	{{weekDay.label}}
108	</el-checkbox-button>
109	</el-checkbox-group>
110	</el-form-item>
111	</el-col>
112	</el-row>
113
114	<el-row :gutter="24" v-if="recurringRepeat === $root.labels.repeat_monthly">
115	<el-col :sm="24">
116	<el-form-item>
117	<template slot="label">
118	<span :style="{ 'color': customizationEdit.useGlobalColors ? customizationForm.textColorOnBackground : customizationForm.formTextColor }">
119	<template v-if="!languageShortCode">
120	{{ labelRecurringInterval.value \|\| $root.labels.recurring_every }}
121	</template>
122	<template v-else>
123	{{ labelRecurringInterval.translations[languageShortCode] \|\| $root.labels.recurring_every }}
124	</template>
125	</span>
126	</template>
127	<el-select
128	v-model="monthSelected"
129	:popper-class="'am-dropdown'"
130	:style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.globalColors.primaryColor : '#C0C4CC' }"
131	@focus="inputFocus"
132	placeholder=""
133	>
134	<el-option
135	v-for="item in monthSelectedOptions"
136	:key="item.name"
137	:label="item.name"
138	:value="item.name"
139	:style="{
140	backgroundColor: customizationForm.formDropdownColor,
141	color: item.name === monthSelected ? customization.globalColors.primaryColor : customizationForm.formDropdownTextColor,
142	fontFamily: customization.font
143	}"
144	>
145	</el-option>
146	</el-select>
147	</el-form-item>
148	</el-col>
149	</el-row>
150
151	<el-row :gutter="24">
152	<el-col :sm="12" class="v-calendar-column">
153	<el-form-item>
154	<template slot="label">
155	<span :style="{ 'color': customizationEdit.useGlobalColors ? customizationForm.textColorOnBackground : customizationForm.formTextColor }">
156	<template v-if="!languageShortCode">
157	{{ labelRecurringUntil.value \|\| $root.labels.recurring_until }}
158	</template>
159	<template v-else>
160	{{ labelRecurringUntil.translations[languageShortCode] \|\| $root.labels.recurring_until }}
161	</template>
162	</span>
163	</template>
164	<v-date-picker
165	v-model="selectedDate"
166	mode='single'
167	popover-align="center"
168	popover-direction="bottom"
169	popover-visibility="focus"
170	input-class='el-input__inner'
171	:is-required=true
172	:is-expanded=false
173	:is-double-paned=false
174	:show-day-popover=false
175	:input-props='{class: "el-input__inner"}'
176	:tint-color='customization.globalColors.primaryColor'
177	:formats="vCalendarFormats"
178	:style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.globalColors.primaryColor : '#C0C4CC' }"
179	>
180	</v-date-picker>
181	</el-form-item>
182	</el-col>
183
184	<el-col :sm="12">
185	<el-form-item>
186	<template slot="label">
187	<span :style="{ 'color': customizationEdit.useGlobalColors ? customizationForm.textColorOnBackground : customizationForm.formTextColor }">
188	<template v-if="!languageShortCode">
189	{{ labelRecurringTimes.value \|\| $root.labels.recurring_times }}
190	</template>
191	<template v-else>
192	{{ labelRecurringTimes.translations[languageShortCode] \|\| $root.labels.recurring_times }}
193	</template>
194	</span>
195	</template>
196	<el-input-number
197	v-model="recurringTimes"
198	:min="1"
199	:style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.globalColors.primaryColor : '#C0C4CC' }"
200	@focus="inputFocus"
201	>
202	</el-input-number>
203	</el-form-item>
204	</el-col>
205	</el-row>
206	<!-- Edit Dialog -->
207	<customize-edit-dialog
208	:form-field="formField"
209	:language-short-code="languageShortCode"
210	@saveEdit="saveFormFiledEdit"
211	>
212	<template v-slot:fieldEdit>
213	<span v-show="customizationEdit.editable" class="am-customize-field__edit">
214	<img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
215	</span>
216	</template>
217	</customize-edit-dialog>
218	<!-- /Edit Dialog -->
219	</div>
220	</el-form>
221	</template>
222
223	<script>
224	import moment from 'moment'
225	import dateMixin from '../../../../js/common/mixins/dateMixin'
226	import customizeEditDialog from '../dialogs/CustomizeEditDialog'
227
228	export default {
229	name: 'recurringSettingsFormField',
230
231	components: {
232	customizeEditDialog
233	},
234
235	props: {
236	languageShortCode: {
237	type: String,
238	default: ''
239	},
240	customization: {
241	type: Object
242	},
243	customizationForm: {
244	type: Object,
245	default: () => {
246	return {}
247	}
248	},
249	customizationEdit: {
250	type: Object,
251	default: () => {
252	return {}
253	}
254	},
255	formField: {
256	type: Object,
257	default: () => {
258	return {}
259	}
260	}
261	},
262
263	mixins: [dateMixin],
264
265	data () {
266	return {
267	recurringRepeat: this.$root.labels.repeat_daily,
268	recurringRepeatOptions: [
269	{name: this.$root.labels.repeat_daily},
270	{name: this.$root.labels.repeat_weekly},
271	{name: this.$root.labels.repeat_monthly}
272	],
273	recurringInterval: this.$root.labels.recurring_day,
274	recurringIntervalOptions: {
275	Daily: [
276	{name: this.$root.labels.recurring_day},
277	{name: `2 ${this.$root.labels.recurring_days}`},
278	{name: `3 ${this.$root.labels.recurring_days}`},
279	{name: `4 ${this.$root.labels.recurring_days}`},
280	{name: `5 ${this.$root.labels.recurring_days}`},
281	{name: `6 ${this.$root.labels.recurring_days}`}
282	],
283	Weekly: [
284	{name: this.$root.labels.recurring_week},
285	{name: `2 ${this.$root.labels.recurring_weeks}`},
286	{name: `3 ${this.$root.labels.recurring_weeks}`},
287	{name: `4 ${this.$root.labels.recurring_weeks}`},
288	{name: `5 ${this.$root.labels.recurring_weeks}`},
289	{name: `6 ${this.$root.labels.recurring_weeks}`}
290	],
291	Monthly: [
292	{name: this.$root.labels.recurring_month},
293	{name: `2 ${this.$root.labels.recurring_months}`},
294	{name: `3 ${this.$root.labels.recurring_months}`},
295	{name: `4 ${this.$root.labels.recurring_months}`},
296	{name: `5 ${this.$root.labels.recurring_months}`},
297	{name: `6 ${this.$root.labels.recurring_months}`}
298	]
299	},
300	weekDays: [],
301	weekDaysSelected: [],
302	monthSelected: '',
303	monthSelectedOptions: [
304	{name: 'undefined'},
305	{name: 'First Wednesday'},
306	{name: 'Second Wednesday'},
307	{name: 'Third Wednesday'},
308	{name: 'Fourth Wednesday'},
309	{name: 'Last Wednesday'}
310	],
311	selectedDate: this.$moment().toDate(),
312	recurringTimes: 1,
313	selectInputFocus: false,
314	labelRecurringRepeat: this.formField.labels.recurring_repeat,
315	labelRecurringInterval: this.formField.labels.recurring_every,
316	labelRecurringOn: this.formField.labels.recurring_on,
317	labelRecurringUntil: this.formField.labels.recurring_until,
318	labelRecurringTimes: this.formField.labels.recurring_times
319	}
320	},
321
322	created () {
323	this.weekDays = []
324
325	for (let i = 0; i < 7; i++) {
326	this.weekDays.push({
327	label: moment().isoWeekday(i + 1).format('dd'),
328	enabled: !(i > 4)
329	})
330	}
331	},
332
333	mounted () {},
334
335	methods: {
336	inputFocus () {
337	this.selectInputFocus = true
338	},
339
340	componentDisplay () {
341	if (this.formField.hasOwnProperty('visibility')) {
342	return this.formField.visibility
343	}
344
345	return true
346	},
347
348	saveFormFiledEdit (objData) {
349	let fieldData = {}
350	fieldData['itemsStatic'] = {}
351	fieldData['itemsStatic'][this.$options.name] = JSON.parse(JSON.stringify(objData))
352	this.$emit('saveEdit', fieldData)
353	},
354
355	changeRepetitionType (type) {
356	this.recurringInterval = this.recurringIntervalOptions[type][0].name
357	}
358	},
359
360	watch: {
361	'formField' () {
362	this.labelRecurringRepeat = this.formField.labels.recurring_repeat
363	this.labelRecurringInterval = this.formField.labels.recurring_every
364	this.labelRecurringOn = this.formField.labels.recurring_on
365	this.labelRecurringUntil = this.formField.labels.recurring_until
366	this.labelRecurringTimes = this.formField.labels.recurring_times
367	}
368	}
369	}
370	</script>
371