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

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

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

RecurringDatesHeadingFormField.vue

116 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	<p class="am-recurring-form-heading" :style="{ 'color': customizationForm.formTextColor }">
9	<template v-if="!languageShortCode">
10	{{ recurringHeadingLabel.value \|\| `${$root.labels.recurring_appointments}:` }}
11	</template>
12	<template v-else>
13	{{ recurringHeadingLabel.translations[languageShortCode] \|\| `${$root.labels.recurring_appointments}:` }}
14	</template>
15	</p>
16
17	<p class="am-recurring-form-subheading" :style="{ 'color': customizationForm.formTextColor }">
18	<template v-if="!languageShortCode">
19	{{ recurringSubheadingLabel.value \|\| `${$root.labels.recurring_edit}:` }}
20	</template>
21	<template v-else>
22	{{ recurringSubheadingLabel.translations[languageShortCode] \|\| `${$root.labels.recurring_edit}:` }}
23	</template>
24	</p>
25
26	<!-- Edit Dialog -->
27	<customize-edit-dialog
28	:form-field="formField"
29	:language-short-code="languageShortCode"
30	@saveEdit="saveFormFiledEdit"
31	>
32	<template v-slot:fieldEdit>
33	<span v-show="customizationEdit.editable" class="am-customize-field__edit">
34	<img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
35	</span>
36	</template>
37	</customize-edit-dialog>
38	<!-- /Edit Dialog -->
39	</div>
40	</template>
41
42	<script>
43	import customizeEditDialog from '../dialogs/CustomizeEditDialog'
44
45	export default {
46	name: 'recurringDatesHeadingFormField',
47
48	components: {
49	customizeEditDialog
50	},
51
52	props: {
53	languageShortCode: {
54	type: String,
55	default: ''
56	},
57	customization: {
58	type: Object,
59	default: () => {
60	return {}
61	}
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	type: Object,
77	default: () => {
78	return {}
79	}
80	}
81	},
82
83	data () {
84	return {
85	recurringHeadingLabel: this.formField.labels.recurring_appointments,
86	recurringSubheadingLabel: this.formField.labels.recurring_edit
87	}
88	},
89
90	mounted () {},
91
92	methods: {
93	componentDisplay () {
94	if (this.formField.hasOwnProperty('visibility')) {
95	return this.formField.visibility
96	}
97
98	return true
99	},
100
101	saveFormFiledEdit (objData) {
102	let fieldData = {}
103	fieldData['itemsStatic'] = {}
104	fieldData['itemsStatic'][this.$options.name] = JSON.parse(JSON.stringify(objData))
105	this.$emit('saveEdit', fieldData)
106	}
107	},
108
109	watch: {
110	'formField' () {
111	this.recurringHeadingLabel = this.formField.labels.recurring_appointments
112	this.recurringSubheadingLabel = this.formField.labels.recurring_edit
113	}
114	}
115	}
116	</script>