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

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

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

AddExtraFormField.vue

271 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	<!-- Extra Block -->
9	<transition name="fade">
10	<div v-if="extrasBlockVisible">
11	<el-row :gutter="16" type="flex" class="am-extras__flex-row">
12	<!-- Extra Type -->
13	<el-col :span="14">
14	<el-form-item>
15	<template slot="label">
16	<span :style="{ 'color': customizationForm.formTextColor }">
17	<template v-if="!languageShortCode">
18	{{ labelExtraColon.value \|\| `${$root.labels.extra_colon}:` }}
19	</template>
20	<template v-else>
21	{{ labelExtraColon.translations[languageShortCode] \|\| `${$root.labels.extra_colon}:` }}
22	</template>
23	</span>
24	</template>
25	<el-select
26	v-model="extra"
27	:popper-class="'am-dropdown'"
28	:style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.globalColors.primaryColor : '#C0C4CC' }"
29	@focus="inputFocus"
30	placeholder=""
31	>
32	<el-option
33	v-for="item in extraOptions"
34	:key="item.name"
35	:label="item.name"
36	:value="item.name"
37	:style="{
38	backgroundColor: customizationForm.formDropdownColor,
39	color: item.name === extra ? customization.globalColors.primaryColor : customizationForm.formDropdownTextColor,
40	fontFamily: customization.font
41	}"
42	>
43	</el-option>
44	</el-select>
45	</el-form-item>
46	</el-col>
47
48	<!-- Extra Quantity -->
49	<el-col :span="7">
50	<el-form-item>
51	<template slot="label">
52	<span :style="{ 'color': customizationForm.formTextColor }">
53	<template v-if="!languageShortCode">
54	{{ labelQtyColon.value \|\| `${$root.labels.qty_colon}:` }}
55	</template>
56	<template v-else>
57	{{ labelQtyColon.translations[languageShortCode] \|\| `${$root.labels.qty_colon}:` }}
58	</template>
59	</span>
60	</template>
61	<el-select
62	v-model="quantity"
63	:popper-class="'am-dropdown'"
64	:style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customization.globalColors.primaryColor : '#C0C4CC' }"
65	@focus="inputFocus"
66	placeholder=""
67	>
68	<el-option
69	v-for="item in quantityOptions"
70	:key="item.name"
71	:label="item.name"
72	:value="item.name"
73	:style="{
74	backgroundColor: customizationForm.formDropdownColor,
75	color: item.name === quantity ? customization.globalColors.primaryColor : customizationForm.formDropdownTextColor,
76	fontFamily: customization.font
77	}"
78	>
79	</el-option>
80	</el-select>
81	</el-form-item>
82	</el-col>
83
84	<!-- Remove Extra -->
85	<el-col :span="3">
86	<i class="el-icon-minus am-delete-element" @click="deleteExtra"></i>
87	</el-col>
88
89	</el-row>
90
91	<!-- Extra Duration & Price-->
92	<el-row :gutter="16">
93
94	<!-- Extra Duration -->
95	<el-col :span="14">
96	<el-form-item>
97	<template slot="label">
98	<span :style="{ 'color': customizationForm.formTextColor }">
99	<template v-if="!languageShortCode">
100	{{ labelDurationColon.value \|\| `${$root.labels.duration_colon}:` }}
101	</template>
102	<template v-else>
103	{{ labelDurationColon.translations[languageShortCode] \|\| `${$root.labels.duration_colon}:` }}
104	</template>
105	</span>
106	</template>
107	<span :style="{ 'color': customizationForm.formTextColor }">1h 30min</span>
108	</el-form-item>
109	</el-col>
110
111	<!-- Extra Price -->
112	<el-col :span="10">
113	<el-form-item>
114	<template slot="label">
115	<span :style="{ 'color': customizationForm.formTextColor }">
116	<template v-if="!languageShortCode">
117	{{ labelPriceColon.value \|\| `${$root.labels.price_colon}:` }}
118	</template>
119	<template v-else>
120	{{ labelPriceColon.translations[languageShortCode] \|\| `${$root.labels.price_colon}:` }}
121	</template>
122	</span>
123	</template>
124	<span :style="{ 'color': customizationForm.formTextColor }">$3.00</span>
125	</el-form-item>
126	</el-col>
127	</el-row>
128	</div>
129	</transition>
130
131	<!-- Add extra -->
132	<div
133	class="am-add-element"
134	:style="{color: customization.globalColors.primaryColor, backgroundColor: colorTransparency(customization.globalColors.primaryColor, 0.07)}"
135	@click="enableExtrasBlock"
136	>
137	<i class="el-icon-plus"></i>
138	<span>
139	<template v-if="!languageShortCode">
140	{{ labelAddExtra.value \|\| $root.labels.add_extra }}
141	</template>
142	<template v-else>
143	{{ labelAddExtra.translations[languageShortCode] \|\| $root.labels.add_extra }}
144	</template>
145	</span>
146	</div>
147
148	<!-- Edit Dialog -->
149	<customize-edit-dialog
150	:form-field="formField"
151	:language-short-code="languageShortCode"
152	@saveEdit="saveFormFiledEdit"
153	>
154	<template v-slot:fieldEdit>
155	<span v-show="customizationEdit.editable" class="am-customize-field__edit">
156	<img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
157	</span>
158	</template>
159	</customize-edit-dialog>
160	<!-- /Edit Dialog -->
161	<span v-if="customizationEdit.editable" class="am-customize-drag-handle">
162	<img :src="$root.getUrl + 'public/img/am-customize-icon-drag-handle.svg'"/>
163	</span>
164	</div>
165	</template>
166
167	<script>
168	import customizeEditDialog from '../dialogs/CustomizeEditDialog'
169	import cssColorManipulationMixin from '../../../../js/common/mixins/cssColorManipulationMixin'
170
171	export default {
172	name: 'addExtraFormField',
173
174	components: {
175	customizeEditDialog
176	},
177
178	mixins: [cssColorManipulationMixin],
179
180	props: {
181	languageShortCode: {
182	type: String,
183	default: ''
184	},
185	customization: {
186	type: Object
187	},
188	customizationForm: {
189	type: Object,
190	default: () => {
191	return {}
192	}
193	},
194	customizationEdit: {
195	type: Object,
196	default: () => {
197	return {}
198	}
199	},
200	formField: {
201	default: () => {
202	return {}
203	},
204	type: Object
205	}
206	},
207
208	data () {
209	return {
210	extrasBlockVisible: false,
211	extra: this.$root.labels.select_extra,
212	extraOptions: [
213	{name: this.$root.labels.select_extra},
214	{name: this.$root.labels.select_extra2}
215	],
216	bringing: this.$root.labels.one_person,
217	quantity: 1,
218	quantityOptions: [
219	{name: 1},
220	{name: 2},
221	{name: 3}
222	],
223	selectInputFocus: false,
224	labelAddExtra: this.formField.labels.add_extra,
225	labelExtraColon: this.formField.labels.extra_colon,
226	labelQtyColon: this.formField.labels.qty_colon,
227	labelDurationColon: this.formField.labels.duration_colon,
228	labelPriceColon: this.formField.labels.price_colon
229	}
230	},
231
232	methods: {
233	inputFocus () {
234	this.selectInputFocus = true
235	},
236
237	componentDisplay () {
238	if (this.formField.hasOwnProperty('visibility')) {
239	return this.formField.visibility
240	}
241
242	return true
243	},
244
245	enableExtrasBlock () {
246	this.extrasBlockVisible = true
247	},
248
249	deleteExtra () {
250	this.extrasBlockVisible = false
251	},
252
253	saveFormFiledEdit (objData) {
254	let fieldData = {}
255	fieldData['itemsDraggable'] = {}
256	fieldData['itemsDraggable'][this.$options.name] = JSON.parse(JSON.stringify(objData))
257	this.$emit('saveEdit', fieldData)
258	}
259	},
260
261	watch: {
262	'formField' () {
263	this.labelAddExtra = this.formField.labels.add_extra
264	this.labelExtraColon = this.formField.labels.extra_colon
265	this.labelQtyColon = this.formField.labels.qty_colon
266	this.labelDurationColon = this.formField.labels.duration_colon
267	this.labelPriceColon = this.formField.labels.price_colon
268	}
269	}
270	}
271	</script>