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

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

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

ServiceFormField.vue

144 lines

1	<template>
2	<!-- Service -->
3	<el-form-item
4	v-show="customizationEdit.editable ? customizationEdit.editable : componentDisplay()"
5	class="am-customize-field"
6	:class="{'editable': customizationEdit.editable}"
7	:style="{borderColor: customizationEdit.reverseBackgroundColorForm}"
8	>
9	<template slot="label">
10	<span :style="{ 'color': customizationForm.formTextColor }">
11	<template v-if="!languageShortCode">
12	{{ labelService.value \|\| `${$root.labels.service}:` }}
13	</template>
14	<template v-else>
15	{{ labelService.translations[languageShortCode] \|\| `${$root.labels.service}:` }}
16	</template>
17	</span>
18	</template>
19	<el-select
20	v-model="service"
21	:popper-class="'am-dropdown'"
22	:style="{ backgroundColor: customizationForm.formInputColor, color: customizationForm.formInputTextColor, borderColor: selectInputFocus ? customizationForm.primaryColor : '#C0C4CC' }"
23	@focus="inputFocus"
24	placeholder=""
25	>
26	<el-option
27	v-for="item in serviceOptions"
28	:key="item.name"
29	:label="item.name"
30	:value="item.name"
31	:style="{
32	backgroundColor: customizationForm.formDropdownColor,
33	color: item.name === service ? customizationForm.primaryColor : customizationForm.formDropdownTextColor,
34	fontFamily: customization.font
35	}"
36	>
37	</el-option>
38	</el-select>
39	<!-- Edit Dialog -->
40	<customize-edit-dialog
41	:form-field="formField"
42	:language-short-code="languageShortCode"
43	@saveEdit="saveFormFiledEdit"
44	>
45	<template v-slot:fieldEdit>
46	<span v-show="customizationEdit.editable" class="am-customize-field__edit">
47	<img :src="$root.getUrl + 'public/img/am-customize-icon-edit.svg'" />
48	</span>
49	</template>
50	</customize-edit-dialog>
51	<!-- /Edit Dialog -->
52	<span v-if="customizationEdit.editable" class="am-customize-drag-handle">
53	<img :src="$root.getUrl + 'public/img/am-customize-icon-drag-handle.svg'"/>
54	</span>
55	</el-form-item>
56	<!-- /Service -->
57	</template>
58
59	<script>
60	import customizeEditDialog from '../dialogs/CustomizeEditDialog'
61
62	export default {
63	name: 'serviceFormField',
64
65	components: {
66	customizeEditDialog
67	},
68
69	props: {
70	languageShortCode: {
71	type: String,
72	default: ''
73	},
74	customization: {
75	type: Object
76	},
77	customizationForm: {
78	type: Object,
79	default: () => {
80	return {}
81	}
82	},
83	customizationEdit: {
84	type: Object,
85	default: () => {
86	return {}
87	}
88	},
89	formField: {
90	type: Object,
91	default: () => {
92	return {}
93	}
94	}
95	},
96
97	data () {
98	return {
99	service: '',
100	serviceOptions: [
101	{name: `${this.$root.labels.service_option} 1`},
102	{name: `${this.$root.labels.service_option} 2`},
103	{name: `${this.$root.labels.service_option} 3`}
104	],
105	selectInputFocus: false,
106	labelService: this.formField.labels.service
107	}
108	},
109
110	mounted () {},
111
112	methods: {
113	inputFocus () {
114	this.selectInputFocus = true
115	},
116
117	componentDisplay () {
118	if (this.formField.hasOwnProperty('visibility')) {
119	return this.formField.visibility
120	}
121
122	return true
123	},
124
125	capitalizeFirstLetter (string) {
126	return string.charAt(0).toUpperCase() + string.slice(1)
127	},
128
129	saveFormFiledEdit (objData) {
130	let fieldData = {}
131	fieldData['itemsDraggable'] = {}
132	fieldData['itemsDraggable'][this.$options.name] = JSON.parse(JSON.stringify(objData))
133	this.$emit('saveEdit', fieldData)
134	}
135	},
136
137	watch: {
138	'formField' () {
139	this.labelService = this.formField.labels.service
140	}
141	}
142	}
143	</script>
144