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

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

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

ServicePackageFormField.vue

158 lines

1	<template>
2	<!-- Service Package -->
3	<div
4	v-if="$root.licence.isPro \|\| $root.licence.isDeveloper"
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
11	class="am-package"
12	:style="{
13	backgroundColor: colorTransparency(customization.globalColors.primaryColor, 0.05),
14	borderColor: customization.globalColors.primaryColor
15	}"
16	>
17	<el-row>
18	<el-col :span="16" class="am-package-name">
19	<p class="am-gray-text" :style="{ 'color': customizationForm.formTextColor }">
20	<template v-if="!languageShortCode">
21	{{ labelAvailableInPackage.value \|\| $root.labels.package_available }}
22	</template>
23	<template v-else>
24	{{ labelAvailableInPackage.translations[languageShortCode] \|\| $root.labels.package_available }}
25	</template>
26	</p>
27	<p class="am-large-text" :style="{ 'color': customizationForm.formTextColor }">
28	{{ $root.labels.package_name }}
29	</p>
30	</el-col>
31
32	<el-col :span="8" class="am-package-price">
33	<p class="am-large-text" :style="{color: customization.globalColors.primaryColor}">
34	$125.00
35	</p>
36	<p class="am-discount-text" :style="{color: customization.globalColors.primaryColor}">
37	<template v-if="!languageShortCode">
38	{{ (labelDiscount.value \|\| $root.labels.package_discount_text) + ' 10%'}}
39	</template>
40	<template v-else>
41	{{ (labelDiscount.translations[languageShortCode] \|\| $root.labels.package_discount_text) + ' 10%'}}
42	</template>
43	</p>
44	</el-col>
45	</el-row>
46
47	<el-row class="am-package-services">
48	<el-col :span="19">
49	<p :style="{ 'color': customizationForm.formTextColor }">
50	{{ $root.labels.service_name }}
51	</p>
52	</el-col>
53
54	<el-col :span="3">
55	<p class="am-package-appointment-number" :style="{color: customization.globalColors.primaryColor}">
56	x9
57	</p>
58	</el-col>
59
60	<el-col :span="2" class="am-package-book">
61	<i class="el-icon-right" :style="{color: customization.globalColors.primaryColor}"></i>
62	</el-col>
63	</el-row>
64	</div>
65	<!-- Edit Dialog -->
66	<customize-edit-dialog
67	:form-field="formField"
68	:language-short-code="languageShortCode"
69	@saveEdit="saveFormFiledEdit"
70	>
71	<template v-slot:fieldEdit>
72	<span v-show="customizationEdit.editable" class="am-customize-field__edit">
73	<img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
74	</span>
75	</template>
76	</customize-edit-dialog>
77	<!-- /Edit Dialog -->
78	<span v-if="customizationEdit.editable" class="am-customize-drag-handle">
79	<img :src="$root.getUrl + 'public/img/am-customize-icon-drag-handle.svg'"/>
80	</span>
81	</div>
82	<!-- /Service Package -->
83	</template>
84
85	<script>
86	import customizeEditDialog from '../dialogs/CustomizeEditDialog'
87	import cssColorManipulationMixin from '../../../../js/common/mixins/cssColorManipulationMixin'
88
89	export default {
90	name: 'servicePackageFormField',
91
92	components: {
93	customizeEditDialog
94	},
95
96	mixins: [cssColorManipulationMixin],
97
98	props: {
99	languageShortCode: {
100	type: String,
101	default: ''
102	},
103	customization: {
104	type: Object
105	},
106	customizationForm: {
107	type: Object,
108	default: () => {
109	return {}
110	}
111	},
112	customizationEdit: {
113	type: Object,
114	default: () => {
115	return {}
116	}
117	},
118	formField: {
119	default: () => {
120	return {}
121	},
122	type: Object
123	}
124	},
125
126	data () {
127	return {
128	labelAvailableInPackage: this.formField.labels.package_available,
129	labelDiscount: this.formField.labels.package_discount_text
130	}
131	},
132
133	methods: {
134	componentDisplay () {
135	if (this.formField.hasOwnProperty('visibility')) {
136	return this.formField.visibility
137	}
138
139	return true
140	},
141
142	saveFormFiledEdit (objData) {
143	let fieldData = {}
144	fieldData['itemsDraggable'] = {}
145	fieldData['itemsDraggable'][this.$options.name] = JSON.parse(JSON.stringify(objData))
146	this.$emit('saveEdit', fieldData)
147	}
148	},
149
150	watch: {
151	'formField' () {
152	this.labelAvailableInPackage = this.formField.labels.package_available
153	this.labelDiscount = this.formField.labels.package_discount_text
154	}
155	}
156	}
157	</script>
158