PackageInfoStep.vue — Booking for Appointments and Events Calendar – Amelia 2.4.4

ameliabooking / v3 / src / views / admin / customize / steps / StepForm / PackageInfoStep.vue

ameliabooking / v3 / src / views / admin / customize / steps / StepForm Last commit date

PackageInfoStep.vue

334 lines

1	<template>
2	<div class="am-fs__pis" :class="props.globalClass" :style="cssVars">
3	<PackageInfo :pack="pack"></PackageInfo>
4
5	<div class="am-fs__pis-includes">
6	<p class="am-fs__pis-includes__heading">
7	{{ `${pack.name} ${labelsDisplay('package_info_includes')}:` }}
8	</p>
9	<AmCollapse>
10	<AmCollapseItem v-for="book in pack.bookable" :key="book.id" :side="true" :delay="500">
11	<template #heading>
12	<div class="am-fs__pis-service">
13	<img :src="usePictureLoad(baseUrls, book.service, false)" :alt="book.service.name" />
14	{{ `${book.service.name} x ${book.quantity}` }}
15	</div>
16	</template>
17	<template #default>
18	<div class="am-fs__pis-service-info">
19	<span>{{ `${labelsDisplay('package_info_employees')}:` }}</span>
20	<img
21	v-for="employee in book.employees"
22	:key="employee.id"
23	:src="usePictureLoad(baseUrls, employee, true)"
24	:alt="`${employee.firstName} ${employee.lastName}`"
25	/>
26	<p v-html="book.service.description"></p>
27	</div>
28	</template>
29	</AmCollapseItem>
30	</AmCollapse>
31	</div>
32	</div>
33	</template>
34
35	<script setup>
36	import { computed, onMounted, inject, ref } from 'vue'
37	import AmCollapseItem from '../../../../_components/collapse/AmCollapseItem'
38	import AmCollapse from '../../../../_components/collapse/AmCollapse'
39	import PackageInfo from '../parts/PackageInfo'
40	import { usePictureLoad } from '../../../../../assets/js/common/image'
41	import { useColorTransparency } from '../../../../../assets/js/common/colorManipulation.js'
42	import { useReactiveCustomize } from '../../../../../assets/js/admin/useReactiveCustomize.js'
43
44	let props = defineProps({
45	globalClass: {
46	type: String,
47	default: '',
48	},
49	})
50
51	const baseUrls = inject('baseUrls')
52
53	// * Labels
54	let langKey = inject('langKey')
55	let amLabels = inject('labels')
56
57	let pageRenderKey = inject('pageRenderKey')
58	const { amCustomize } = useReactiveCustomize()
59
60	// * Label computed function
61	function labelsDisplay(label) {
62	let computedLabel = computed(() => {
63	return amCustomize.value[pageRenderKey.value].packageInfoStep.translations &&
64	amCustomize.value[pageRenderKey.value].packageInfoStep.translations[label] &&
65	amCustomize.value[pageRenderKey.value].packageInfoStep.translations[label][langKey.value]
66	? amCustomize.value[pageRenderKey.value].packageInfoStep.translations[label][langKey.value]
67	: amLabels[label]
68	})
69
70	return computedLabel.value
71	}
72
73	let pack = ref({
74	name: 'Package 1',
75	description:
76	"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
77	bookable: [
78	{
79	id: 1,
80	service: {
81	name: 'Service 1',
82	description:
83	"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
84	},
85	quantity: 5,
86	employees: [
87	{
88	id: 1,
89	firstName: 'Jon',
90	lastName: 'Doe',
91	},
92	{
93	id: 2,
94	firstName: 'Jane',
95	lastName: 'Doe',
96	},
97	],
98	},
99	{
100	id: 2,
101	service: {
102	name: 'Service 2',
103	description:
104	"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
105	},
106	quantity: 3,
107	employees: [
108	{
109	id: 1,
110	firstName: 'Jon',
111	lastName: 'Doe',
112	},
113	{
114	id: 2,
115	firstName: 'Jane',
116	lastName: 'Doe',
117	},
118	],
119	},
120	{
121	id: 2,
122	service: {
123	name: 'Service 3',
124	description:
125	"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
126	},
127	quantity: 9,
128	employees: [
129	{
130	id: 1,
131	firstName: 'Jon',
132	lastName: 'Doe',
133	},
134	{
135	id: 2,
136	firstName: 'Jane',
137	lastName: 'Doe',
138	},
139	],
140	},
141	{
142	id: 3,
143	service: {
144	name: 'Service 4',
145	description:
146	"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
147	},
148	quantity: 9,
149	employees: [
150	{
151	id: 1,
152	firstName: 'Jon',
153	lastName: 'Doe',
154	},
155	{
156	id: 2,
157	firstName: 'Jane',
158	lastName: 'Doe',
159	},
160	],
161	},
162	{
163	id: 4,
164	service: {
165	name: 'Service 5',
166	description:
167	"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
168	},
169	quantity: 1,
170	employees: [
171	{
172	id: 1,
173	firstName: 'Jon',
174	lastName: 'Doe',
175	},
176	{
177	id: 2,
178	firstName: 'Jane',
179	lastName: 'Doe',
180	},
181	],
182	},
183	],
184	})
185
186	let { sidebarDataCollector } = inject('sidebarStepsFunctions', {
187	sidebarDataCollector: () => {},
188	})
189
190	onMounted(() => {
191	let packageData = {
192	reference: 'package',
193	// position will depend on fields order
194	position: 1,
195	value: '',
196	}
197	packageData.value = pack.value ? pack.value.name : ''
198
199	sidebarDataCollector(packageData)
200	})
201
202	// * Colors block
203	let amColors = inject('amColors')
204	let cssVars = computed(() => {
205	return {
206	'--am-c-pis-text-op80': useColorTransparency(amColors.value.colorMainText, 0.8),
207	}
208	})
209	</script>
210
211	<script>
212	export default {
213	name: 'PackageInfoStep',
214	key: 'packageInfoStep',
215	sidebarData: {
216	label: 'package_info_step',
217	icon: 'shipment',
218	stepSelectedData: [],
219	finished: false,
220	selected: false,
221	},
222	}
223	</script>
224
225	<style lang="scss">
226	#amelia-app-backend-new {
227	#amelia-container {
228	.am-fs__pis {
229	// am - amelia
230	// c - color
231	// pis - package info step
232	--am-c-pis-text: var(--am-c-main-text);
233	--am-c-pis-bgr: var(--am-c-main-bgr);
234
235	& > * {
236	$count: 2;
237	@for $i from 0 through $count {
238	&:nth-child(#{$i + 1}) {
239	animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
240	animation-fill-mode: both;
241	}
242	}
243	}
244
245	&-includes {
246	margin: 16px 0 0;
247
248	.am-collapse-item {
249	$count: 100;
250	@for $i from 0 through $count {
251	&:nth-child(#{$i + 1}) {
252	animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
253	animation-fill-mode: both;
254	}
255	}
256
257	&__heading {
258	padding: 8px;
259	transition-delay: 0.5s;
260
261	&-side {
262	transition-delay: 0s;
263	}
264	}
265	}
266
267	&__heading {
268	display: flex;
269	justify-content: space-between;
270	font-size: 14px;
271	font-weight: 500;
272	line-height: 1.42857;
273	/* $shade-900 */
274	color: var(--am-c-pis-text);
275	padding: 0;
276	margin: 0 0 8px;
277	}
278	}
279
280	&-service {
281	display: flex;
282	align-items: center;
283	font-size: 15px;
284	font-weight: 500;
285	line-height: 1.6;
286	/* $shade-900 */
287	color: var(--am-c-pis-text);
288
289	img {
290	width: 54px;
291	height: 54px;
292	border-radius: 4px;
293	margin: 0 12px 0 0;
294	}
295
296	&-info {
297	& > span:first-child {
298	font-size: 13px;
299	font-weight: 400;
300	line-height: 1.384615;
301	/* $shade-700 */
302	color: var(--am-c-pis-text-op80);
303	margin-right: 20px;
304	}
305
306	& > img {
307	width: 36px;
308	height: 36px;
309	display: inline-block;
310	vertical-align: middle;
311	margin-left: -12px;
312	border-radius: 50%;
313	border: 3px solid var(--am-c-pis-bgr);
314	}
315
316	& > p {
317	font-size: 15px;
318	font-weight: 400;
319	line-height: 1.6;
320	/* $shade-700 */
321	color: var(--am-c-pis-text-op80);
322	margin: 16px 0 0;
323
324	& * {
325	color: var(--am-c-pis-text-op80);
326	}
327	}
328	}
329	}
330	}
331	}
332	}
333	</style>
334