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

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

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

PackageLocationFormField.vue

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