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

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

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

FirstNameFormField.vue

129 lines

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