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

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

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

RecurringSetupHeadingFormField.vue

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