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

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

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

RecurringStringFormField.vue

123 lines

1	<template>
2	<!-- Booking Data -->
3	<el-col :sm="24">
4	<div
5	v-show="customizationEdit.editable ? customizationEdit.editable : componentDisplay()"
6	class="am-customize-field"
7	:class="{'editable': customizationEdit.editable}"
8	:style="{borderColor: customizationEdit.reverseBackgroundColorForm}"
9	>
10	<div class="am-confirmation-booking-details recurring-string">
11	<div>
12	<p :style="{ 'color': 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	</p>
20	<p
21	class="am-semi-strong"
22	:style="{ 'color': customizationForm.formTextColor }"
23	>
24	{{ `${$root.labels.recurring_string} ${getFrontedFormattedDate($moment().add(5, 'days').format('YYYY-MM-DD'))}` }}
25	</p>
26	</div>
27	</div>
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	</el-col>
44	<!-- /Booking Data -->
45	</template>
46
47	<script>
48	import customizeEditDialog from '../dialogs/CustomizeEditDialog'
49	import dateMixin from '../../../../js/common/mixins/dateMixin'
50
51	export default {
52	name: 'recurringStringFormField',
53
54	components: {
55	customizeEditDialog
56	},
57
58	props: {
59	languageShortCode: {
60	type: String,
61	default: ''
62	},
63	customization: {
64	type: Object,
65	default: () => {
66	return {}
67	}
68	},
69	customizationEdit: {
70	type: Object,
71	default: () => {
72	return {}
73	}
74	},
75	customizationForm: {
76	type: Object,
77	default: () => {
78	return {}
79	}
80	},
81	formField: {
82	type: Object,
83	default: () => {
84	return {}
85	}
86	}
87	},
88
89	mixins: [dateMixin],
90
91	data () {
92	return {
93	labelRecurring: this.formField.labels.recurring_active
94	}
95	},
96
97	mounted () {},
98
99	methods: {
100	componentDisplay () {
101	if (this.formField.hasOwnProperty('visibility')) {
102	return this.formField.visibility
103	}
104
105	return true
106	},
107
108	saveFormFiledEdit (objData) {
109	let fieldData = {}
110	fieldData['itemsStatic'] = {}
111	fieldData['itemsStatic'][this.$options.name] = JSON.parse(JSON.stringify(objData))
112	this.$emit('saveEdit', fieldData)
113	}
114	},
115
116	watch: {
117	'formField' () {
118	this.labelRecurring = this.formField.labels.recurring_active
119	}
120	}
121	}
122	</script>
123