ConfirmServiceHeadingFormField.vue — Booking for Appointments and Events Calendar – Amelia 1.2.31

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

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

ConfirmServiceHeadingFormField.vue

100 lines

1	<template>
2	<el-row :gutter="customizationEdit.editable ? 48 : 24">
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-header">
11	<img :src="pictureLoad(service, false)" @error="imageLoadError(service, false)" :alt="service.name"/>
12	<h2 :style="{ 'color': customizationForm.formTextColor }">
13	{{ service.name }}
14	</h2>
15	</div>
16	<!-- Edit Dialog -->
17	<customize-edit-dialog
18	:form-field="formField"
19	@saveEdit="saveFormFiledEdit"
20	>
21	<template v-slot:fieldEdit>
22	<span v-show="customizationEdit.editable" class="am-customize-field__edit">
23	<img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
24	</span>
25	</template>
26	</customize-edit-dialog>
27	<!-- /Edit Dialog -->
28	</div>
29	</el-col>
30	</el-row>
31	</template>
32
33	<script>
34	import imageMixin from '../../../../js/common/mixins/imageMixin'
35	import dateMixin from '../../../../js/common/mixins/dateMixin'
36	import customizeEditDialog from '../dialogs/CustomizeEditDialog'
37
38	export default {
39	name: 'confirmServiceHeadingFormField',
40
41	components: {
42	customizeEditDialog
43	},
44
45	props: {
46	customizationEdit: {
47	type: Object,
48	default: () => {
49	return {}
50	}
51	},
52	customizationForm: {
53	type: Object,
54	default: () => {
55	return {}
56	}
57	},
58	formField: {
59	type: Object,
60	default: () => {
61	return {}
62	}
63	},
64	service: {
65	type: Object,
66	default: () => {
67	return {}
68	}
69	}
70	},
71
72	mixins: [imageMixin, dateMixin],
73
74	mounted () {},
75
76	methods: {
77	componentDisplay () {
78	if (this.formField.hasOwnProperty('visibility')) {
79	return this.formField.visibility
80	}
81
82	return true
83	},
84
85	saveFormFiledEdit (objData) {
86	let fieldData = {}
87	fieldData['itemsStatic'] = {}
88	fieldData['itemsStatic'][this.$options.name] = JSON.parse(JSON.stringify(objData))
89	this.$emit('saveEdit', fieldData)
90	}
91	},
92
93	watch: {
94	'formField' () {
95
96	}
97	}
98	}
99	</script>
100