CartStep.vue — Booking for Appointments and Events Calendar – Amelia trunk

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

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

CartStep.vue

378 lines

1	<template>
2	<div ref="cartRef" class="am-fs__main-content am-fs__cart">
3	<div class="am-fs__cart-title" v-html="labelsDisplay('cart_title', 'cartStep')"></div>
4
5	<div class="am-fs__cart-includes">
6	<AmCollapse>
7	<AmCollapseItem
8	v-for="(item, index) in cart"
9	:ref="(el) => setCollapseItem(el, index)"
10	:key="index"
11	:side="true"
12	>
13	<template #heading>
14	<CartItemHead :data="item"></CartItemHead>
15	</template>
16	<template #default>
17	<CartItemBody :data="item" :index="index" :size="cart.length"> </CartItemBody>
18	</template>
19	</AmCollapseItem>
20	</AmCollapse>
21	</div>
22	</div>
23	</template>
24
25	<script setup>
26	// * Import libraries
27	import moment from 'moment'
28
29	// * _components
30	import AmCollapseItem from '../../../../_components/collapse/AmCollapseItem'
31	import AmCollapse from '../../../../_components/collapse/AmCollapse'
32
33	// * Dedicated components
34	import CartItemHead from '../parts/CartItemHead.vue'
35	import CartItemBody from '../parts/CartItemBody.vue'
36
37	// * Import from Vue
38	import { computed, inject, ref, provide, onMounted, nextTick, watch } from 'vue'
39
40	// * Import composables
41	import { useReactiveCustomize } from '../../../../../assets/js/admin/useReactiveCustomize.js'
42
43	// * Features
44	let features = inject('features')
45
46	// * Multi lingual
47	let langKey = inject('langKey')
48
49	// * Component labels
50	let amLabels = inject('labels')
51
52	let pageRenderKey = inject('pageRenderKey')
53	const { amCustomize } = useReactiveCustomize()
54
55	// * Label computed function
56	function labelsDisplay(label, stepKey) {
57	let computedLabel = computed(() => {
58	return amCustomize.value[pageRenderKey.value][stepKey].translations &&
59	amCustomize.value[pageRenderKey.value][stepKey].translations[label] &&
60	amCustomize.value[pageRenderKey.value][stepKey].translations[label][langKey.value]
61	? amCustomize.value[pageRenderKey.value][stepKey].translations[label][langKey.value]
62	: amLabels[label]
63	})
64
65	return computedLabel.value
66	}
67
68	// * Component reference
69	let cartRef = ref(null)
70
71	// * Plugin wrapper width
72	let wrapperWidth = ref()
73	provide('wrapperWidth', wrapperWidth)
74
75	// * window resize listener
76	window.addEventListener('resize', resize)
77	// * resize function
78	function resize() {
79	if (cartRef.value) {
80	wrapperWidth.value = cartRef.value.offsetWidth
81	}
82	}
83
84	onMounted(() => {
85	nextTick(() => {
86	wrapperWidth.value = cartRef.value.offsetWidth
87	})
88	})
89
90	let sidebarCollapsed = inject('sidebarCollapsed', ref(false))
91
92	watch(sidebarCollapsed, (current) => {
93	if (current) {
94	setTimeout(() => {
95	wrapperWidth.value = cartRef.value.offsetWidth
96	}, 1200)
97	} else {
98	setTimeout(() => {
99	wrapperWidth.value = cartRef.value.offsetWidth
100	}, 400)
101	}
102	})
103
104	/**************
105	* Navigation *
106	*************/
107
108	let arr1 = [
109	{
110	service: {
111	name: 'Service 1',
112	persons: 3,
113	price: 100,
114	duration: 5400,
115	date: moment().format('YYYY-MM-DD'),
116	time: moment('09:00', 'hh:mm').format('hh:mm'),
117	maxCapacity: 10,
118	employee: {
119	firstName: 'John',
120	lastName: 'Doe',
121	},
122	location: {
123	name: 'Location 1',
124	},
125	color: '#1788FB',
126	},
127	extras: [
128	{
129	name: 'Extra 1',
130	duration: 1800,
131	quantity: 2,
132	price: 10,
133	},
134	{
135	name: 'Extra 2',
136	duration: null,
137	quantity: 1,
138	price: 15,
139	},
140	{
141	name: 'Extra 3',
142	duration: 2400,
143	quantity: 3,
144	price: 20,
145	},
146	],
147	},
148	{
149	service: {
150	name: 'Service 2',
151	persons: 1,
152	price: 100,
153	duration: 5400,
154	date: moment().format('YYYY-MM-DD'),
155	time: moment('09:00', 'hh:mm').format('hh:mm'),
156	maxCapacity: 10,
157	employee: {
158	firstName: 'Jane',
159	lastName: 'Doe',
160	},
161	location: {
162	name: 'Location 2',
163	},
164	color: '#FD7E35',
165	},
166	extras: [
167	{
168	name: 'Extra 1',
169	duration: 1800,
170	quantity: 2,
171	price: 10,
172	},
173	{
174	name: 'Extra 2',
175	duration: null,
176	quantity: 1,
177	price: 15,
178	},
179	{
180	name: 'Extra 3',
181	duration: 2400,
182	quantity: 3,
183	price: 20,
184	},
185	],
186	},
187	{
188	service: {
189	name: 'Service 3',
190	persons: 2,
191	price: 100,
192	duration: 5400,
193	date: moment().format('YYYY-MM-DD'),
194	time: moment('09:00', 'hh:mm').format('hh:mm'),
195	maxCapacity: 10,
196	employee: {
197	firstName: 'John',
198	lastName: 'Doe',
199	},
200	location: {
201	name: 'Location 3',
202	},
203	color: '#774DFB',
204	},
205	extras: [
206	{
207	name: 'Extra 1',
208	duration: 1800,
209	quantity: 2,
210	price: 10,
211	},
212	{
213	name: 'Extra 2',
214	duration: null,
215	quantity: 1,
216	price: 15,
217	},
218	{
219	name: 'Extra 3',
220	duration: 2400,
221	quantity: 3,
222	price: 20,
223	},
224	],
225	},
226	]
227
228	let arr2 = [
229	{
230	service: {
231	name: 'Service 1',
232	persons: 3,
233	price: 100,
234	duration: 5400,
235	date: moment().format('YYYY-MM-DD'),
236	time: moment('09:00', 'hh:mm').format('hh:mm'),
237	maxCapacity: 10,
238	employee: {
239	firstName: 'John',
240	lastName: 'Doe',
241	},
242	location: {
243	name: 'Location 1',
244	},
245	color: '#1788FB',
246	},
247	},
248	{
249	service: {
250	name: 'Service 2',
251	persons: 1,
252	price: 100,
253	duration: 5400,
254	date: moment().format('YYYY-MM-DD'),
255	time: moment('09:00', 'hh:mm').format('hh:mm'),
256	maxCapacity: 10,
257	employee: {
258	firstName: 'Jane',
259	lastName: 'Doe',
260	},
261	location: {
262	name: 'Location 2',
263	},
264	color: '#FD7E35',
265	},
266	},
267	{
268	service: {
269	name: 'Service 3',
270	persons: 2,
271	price: 100,
272	duration: 5400,
273	date: moment().format('YYYY-MM-DD'),
274	time: moment('09:00', 'hh:mm').format('hh:mm'),
275	maxCapacity: 10,
276	employee: {
277	firstName: 'John',
278	lastName: 'Doe',
279	},
280	location: {
281	name: 'Location 3',
282	},
283	color: '#774DFB',
284	},
285	},
286	]
287
288	let cart = ref(!features.value.extras ? arr2 : arr1)
289
290	let appointmentsList = ref([])
291
292	let initCollapseLoadCompleted = ref(false)
293
294	function setCollapseItem(el, index) {
295	appointmentsList.value[index] = el
296
297	if (index === 0 && !initCollapseLoadCompleted.value) {
298	initCollapseLoadCompleted.value = true
299	}
300	}
301	</script>
302
303	<script>
304	export default {
305	name: 'CartStep',
306	key: 'cartStep',
307	inheritAttrs: false,
308	sidebarData: {
309	label: 'cart_step',
310	icon: 'cart',
311	stepSelectedData: [],
312	finished: false,
313	selected: false,
314	},
315	}
316	</script>
317
318	<style lang="scss">
319	#amelia-app-backend-new {
320	#amelia-container {
321	.am-fs__cart {
322	// am - amelia
323	// c - color
324	// cart - cart
325	--am-c-cart-text: var(--am-c-main-text);
326	--am-c-cart-bgr: var(--am-c-main-bgr);
327
328	& > * {
329	$count: 2;
330	@for $i from 0 through $count {
331	&:nth-child(#{$i + 1}) {
332	animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
333	animation-fill-mode: both;
334	}
335	}
336	}
337
338	&-title {
339	font-size: 14px;
340	font-weight: 400;
341	line-height: 1.42857;
342	color: var(--am-c-cart-text);
343	margin: 0;
344	}
345
346	&-includes {
347	margin: 16px 0 0;
348
349	.am-collapse-item {
350	$count: 100;
351	@for $i from 0 through $count {
352	&:nth-child(#{$i + 1}) {
353	animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
354	animation-fill-mode: both;
355	}
356	}
357
358	&__heading {
359	padding: 12px;
360	transition-delay: 0.5s;
361
362	&-side {
363	transition-delay: 0s;
364	}
365	}
366
367	&__trigger {
368	&-side {
369	padding: 0 4px 0 10px;
370	}
371	}
372	}
373	}
374	}
375	}
376	}
377	</style>
378