Skip to content

Commit 1012416

Browse files
SebastianKrupinskiSebastianKrupinski
committed
booking page
Signed-off-by: SebastianKrupinski <krupinskis05@gmail.com>
1 parent 3ec29c8 commit 1012416

File tree

1 file changed

+88
-131
lines changed

1 file changed

+88
-131
lines changed

‎src/views/Appointments/Booking.vue‎

Lines changed: 88 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -4,81 +4,84 @@
44
-->
55

66
<template>
7-
<NcGuestContent class="booking-wrapper">
8-
<div v-if="!selectedSlot && !bookingConfirmed" class="booking">
9-
<div class="booking__config-user-info">
10-
<Avatar
11-
:user="userInfo.uid"
12-
:display-name="userInfo.displayName"
13-
:disable-tooltip="true"
14-
:disable-menu="true"
15-
:size="44" />
16-
<div class="booking__display-name">
17-
<strong>{{ userInfo.displayName }}</strong>
7+
<div class="booking__container">
8+
<NcGuestContent v-if="!selectedSlot && !bookingConfirmed">
9+
<div class="booking">
10+
<div class="booking__config-user-info">
11+
<Avatar
12+
:user="userInfo.uid"
13+
:display-name="userInfo.displayName"
14+
:disable-tooltip="true"
15+
:disable-menu="true"
16+
:size="44" />
17+
<div class="booking__display-name">
18+
<strong>{{ userInfo.displayName }}</strong>
19+
</div>
20+
<h5 class="booking__name">
21+
{{ config.name }}
22+
</h5>
23+
<!-- Description needs to stay inline due to its whitespace -->
24+
<span class="booking__description">{{ config.description }}</span>
1825
</div>
19-
<h5 class="booking__name">
20-
{{ config.name }}
21-
</h5>
22-
<!-- Description needs to stay inline due to its whitespace -->
23-
<span class="booking__description">{{ config.description }}</span>
24-
</div>
25-
<div class="booking__date-selection">
26-
<h5 class="booking__date-header">
27-
{{ $t('calendar', 'Select a date') }}
28-
</h5>
29-
<div class="booking__date">
30-
<DateTimePicker
31-
v-model="selectedDate"
32-
:disabled-date="disabledDate"
33-
type="date"
34-
:open="true" />
35-
</div>
36-
<div class="booking__time-zone">
37-
<TimezonePicker
38-
v-model="timeZone"
39-
:aria-label="$t('calendar', 'Select a date')"
40-
@change="fetchSlots" />
26+
<div class="booking__date-selection">
27+
<h5 class="booking__date-header">
28+
{{ $t('calendar', 'Select a date') }}
29+
</h5>
30+
<div class="booking__date">
31+
<DateTimePicker
32+
v-model="selectedDate"
33+
:disabled-date="disabledDate"
34+
type="date"
35+
:open="true" />
36+
</div>
37+
<div class="booking__time-zone">
38+
<TimezonePicker
39+
v-model="timeZone"
40+
:aria-label="$t('calendar', 'Select a date')"
41+
@change="fetchSlots" />
42+
</div>
4143
</div>
42-
</div>
43-
<div class="booking__slot-selection">
44-
<h5>{{ $t('calendar', 'Select slot') }}</h5>
45-
<div class="booking__slots">
46-
<Loading v-if="loadingSlots" class="loading" :size="24" />
47-
<NcEmptyContent
48-
v-else-if="slots.length === 0 && !loadingSlots"
49-
:title="$t('calendar', 'No slots available')"
50-
:description="$t('calendar', 'No slots available')" />
51-
<template v-else>
52-
<AppointmentSlot
53-
v-for="slot in slots"
54-
:key="slot.start"
55-
:start="slot.start"
56-
:end="slot.end"
57-
:time-zone-id="timeZone"
58-
@click="onSlotClicked(slot)" />
59-
</template>
44+
<div class="booking__slot-selection">
45+
<h5>{{ $t('calendar', 'Select slot') }}</h5>
46+
<div class="booking__slots">
47+
<Loading v-if="loadingSlots" class="loading" :size="24" />
48+
<NcEmptyContent
49+
v-else-if="slots.length === 0 && !loadingSlots"
50+
:title="$t('calendar', 'No slots available')"
51+
:description="$t('calendar', 'No slots available')" />
52+
<template v-else>
53+
<AppointmentSlot
54+
v-for="slot in slots"
55+
:key="slot.start"
56+
:start="slot.start"
57+
:end="slot.end"
58+
:time-zone-id="timeZone"
59+
@click="onSlotClicked(slot)" />
60+
</template>
61+
</div>
6062
</div>
6163
</div>
62-
</div>
63-
<AppointmentDetails
64-
v-else-if="selectedSlot && !bookingConfirmed"
65-
:key="selectedSlot.start"
66-
:user-info="userInfo"
67-
:config="config"
68-
:time-slot="selectedSlot"
69-
:visitor-info="visitorInfo"
70-
:time-zone-id="timeZone"
71-
:show-error="bookingError"
72-
:show-rate-limiting-warning="bookingRateLimit"
73-
:is-loading="bookingLoading"
74-
@save="onSave"
75-
@close="selectedSlot = undefined"
76-
@go-back="selectedSlot = undefined" />
77-
78-
<AppointmentBookingConfirmation
79-
v-else
80-
@close="bookingConfirmed = false" />
81-
</NcGuestContent>
64+
</NcGuestContent>
65+
<NcGuestContent v-else-if="selectedSlot && !bookingConfirmed">
66+
<AppointmentDetails
67+
:key="selectedSlot.start"
68+
:user-info="userInfo"
69+
:config="config"
70+
:time-slot="selectedSlot"
71+
:visitor-info="visitorInfo"
72+
:time-zone-id="timeZone"
73+
:show-error="bookingError"
74+
:show-rate-limiting-warning="bookingRateLimit"
75+
:is-loading="bookingLoading"
76+
@save="onSave"
77+
@close="selectedSlot = undefined"
78+
@go-back="selectedSlot = undefined" />
79+
</NcGuestContent>
80+
<NcGuestContent v-else-if="bookingConfirmed">
81+
<AppointmentBookingConfirmation
82+
@close="bookingConfirmed = false" />
83+
</NcGuestContent>
84+
</div>
8285
</template>
8386

8487
<script>
@@ -265,60 +268,32 @@ export default {
265268
</script>
266269
267270
<style lang="scss" scoped>
268-
.booking-wrapper {
271+
.booking__container {
269272
display: flex;
273+
width: 100%;
274+
height: 100vh;
275+
flex-direction: column;
276+
justify-content: center;
277+
align-items: center;
270278
}
271279
272280
.booking {
273-
display: flex;
274-
flex: 1 auto;
275-
flex-direction: row;
276-
flex-wrap: wrap;
277-
width: 900px;
278-
min-height: 500px;
279-
margin-bottom: 50px;
280-
justify-content: space-between;
281-
}
282-
283-
.booking > div {
284-
flex-basis: 33.33%;
285-
flex-grow: 1;
286-
}
287-
288-
.booking__config-user-info {
289-
flex-grow: 1;
290-
}
291-
292-
.booking__date-selection {
293281
display: flex;
294282
flex-direction: column;
283+
width: 100%;
284+
gap: calc(var(--default-grid-baseline) * 2);
285+
padding-top: calc(var(--default-grid-baseline) * 4);
286+
padding-bottom: calc(var(--default-grid-baseline) * 4);
287+
padding-inline: calc(var(--default-grid-baseline) * 4);
295288
}
296289
297290
.booking__description {
298291
white-space: break-spaces;
299292
}
300293
301-
.booking__date-selection,
302-
.booking__slot-selection {
303-
padding: 0 10px;
304-
}
305-
306-
.booking__time-zone {
307-
margin-top: 280px;
308-
position: relative;
309-
310-
:deep(.v-select.select) {
311-
max-width: 260px;
312-
}
313-
}
314-
315-
.booking__date-header {
316-
position: relative;
317-
margin-inline-start: 16px;
318-
}
319-
320-
.booking__slot-selection .material-design-icon.loading-icon.animation-rotate {
321-
animation: rotate var(--animation-duration, 0.8s) linear infinite;
294+
.booking__date-selection {
295+
display: flex;
296+
flex-direction: column;
322297
}
323298
324299
.booking__slots {
@@ -335,22 +310,4 @@ export default {
335310
:deep(.mx-datepicker-main) {
336311
border: 0;
337312
}
338-
339-
h2, h3, h4, h5 {
340-
margin-top: 0;
341-
}
342-
343-
.booking__date {
344-
margin-top: -25px;
345-
}
346-
347-
:deep(.cell.disabled) {
348-
background-color: var(--color-background-dark);
349-
color: var(--color-main-text);
350-
}
351-
352-
:deep(.cell.not-current-month) {
353-
background-color: unset;
354-
}
355-
356313
</style>

0 commit comments

Comments
 (0)