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

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

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

RecurringSwitchFormField.vue

113 lines

1	<template>
2	<div
3	v-show="customizationEdit.editable ? customizationEdit.editable : componentDisplay()"
4	class="am-customize-field"
5	:class="{'editable': customizationEdit.editable}"
6	:style="{borderColor: customizationEdit.reverseBackgroundColorForm}"
7	>
8	<el-form>
9	<!-- Repeat this appointment -->
10	<el-form-item class="am-customize-field-recurring">
11	<template slot="label">
12	<span :style="{ 'color': customizationEdit.useGlobalColors ? customizationForm.textColorOnBackground : customizationForm.formTextColor }">
13	<template v-if="!languageShortCode">
14	{{ labelRecurring.value \|\| `${$root.labels.recurring_active}:` }}
15	</template>
16	<template v-else>
17	{{ labelRecurring.translations[languageShortCode] \|\| `${$root.labels.recurring_active}:` }}
18	</template>
19	</span>
20	</template>
21	<el-switch
22	v-model="enabled"
23	:active-color="customization.primaryColor"
24	></el-switch>
25	</el-form-item>
26	<!-- /Repeat this appointment -->
27	</el-form>
28
29	<!-- Edit Dialog -->
30	<customize-edit-dialog
31	:form-field="formField"
32	:language-short-code="languageShortCode"
33	@saveEdit="saveFormFiledEdit"
34	>
35	<template v-slot:fieldEdit>
36	<span v-show="customizationEdit.editable" class="am-customize-field__edit">
37	<img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
38	</span>
39	</template>
40	</customize-edit-dialog>
41	<!-- /Edit Dialog -->
42	</div>
43	</template>
44
45	<script>
46	import customizeEditDialog from '../dialogs/CustomizeEditDialog'
47
48	export default {
49	name: 'recurringSwitchFormField',
50
51	components: {
52	customizeEditDialog
53	},
54
55	props: {
56	languageShortCode: {
57	type: String,
58	default: ''
59	},
60	customization: {
61	type: Object
62	},
63	customizationForm: {
64	type: Object,
65	default: () => {
66	return {}
67	}
68	},
69	customizationEdit: {
70	type: Object,
71	default: () => {
72	return {}
73	}
74	},
75	formField: {
76	default: () => {
77	return {}
78	},
79	type: Object
80	}
81	},
82
83	data () {
84	return {
85	enabled: false,
86	labelRecurring: this.formField.labels.recurring_active
87	}
88	},
89
90	methods: {
91	componentDisplay () {
92	if (this.formField.hasOwnProperty('visibility')) {
93	return this.formField.visibility
94	}
95
96	return true
97	},
98
99	saveFormFiledEdit (objData) {
100	let fieldData = {}
101	fieldData['itemsStatic'] = {}
102	fieldData['itemsStatic'][this.$options.name] = JSON.parse(JSON.stringify(objData))
103	this.$emit('saveEdit', fieldData)
104	}
105	},
106
107	watch: {
108	'formField' () {
109	this.labelRecurring = this.formField.labels.recurring_active
110	}
111	}
112	}
113	</script>