couple updates
This commit is contained in:
parent
cb0ef2b627
commit
88bd6b239d
1 changed files with 25 additions and 12 deletions
|
|
@ -62,7 +62,8 @@
|
||||||
class="morning-row-cell"
|
class="morning-row-cell"
|
||||||
:class="[showMorningAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
|
:class="[showMorningAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
|
||||||
, checkIsSelectedDay(n - 1, 'morning') ? 'selected-date' : '']"
|
, checkIsSelectedDay(n - 1, 'morning') ? 'selected-date' : '']"
|
||||||
@click="showMorningTimes(n - 1)">
|
@click="showMorningTimes(n - 1)"
|
||||||
|
@keydown.enter="showMorningTimes(n - 1)">
|
||||||
<span class="span-block top-caption">Morning</span>
|
<span class="span-block top-caption">Morning</span>
|
||||||
<span class="span-block bottom-caption">
|
<span class="span-block bottom-caption">
|
||||||
{{ showMorningAvailabilityForIndex(n - 1) }} available
|
{{ showMorningAvailabilityForIndex(n - 1) }} available
|
||||||
|
|
@ -79,7 +80,8 @@
|
||||||
class="afternoon-row-cell"
|
class="afternoon-row-cell"
|
||||||
:class="[showAfternoonAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
|
:class="[showAfternoonAvailabilityForIndex(n - 1) > 0 ? 'has-appointments' : 'no-appointments'
|
||||||
, checkIsSelectedDay(n - 1, 'afternoon') ? 'selected-date' : '']"
|
, checkIsSelectedDay(n - 1, 'afternoon') ? 'selected-date' : '']"
|
||||||
@click="showAfternoonTimes(n - 1)">
|
@click="showAfternoonTimes(n - 1)"
|
||||||
|
@keydown.enter="showAfternoonTimes(n - 1)">
|
||||||
<span class="span-block top-caption">Afternoon</span>
|
<span class="span-block top-caption">Afternoon</span>
|
||||||
<span class="span-block bottom-caption">
|
<span class="span-block bottom-caption">
|
||||||
{{ showAfternoonAvailabilityForIndex(n - 1) }} available
|
{{ showAfternoonAvailabilityForIndex(n - 1) }} available
|
||||||
|
|
@ -98,6 +100,15 @@
|
||||||
<template
|
<template
|
||||||
v-for="timeSlot in selectableTimeSlotsData"
|
v-for="timeSlot in selectableTimeSlotsData"
|
||||||
:key="timeSlot.startTime">
|
:key="timeSlot.startTime">
|
||||||
|
<input
|
||||||
|
:id="`timeslot${timeSlot.startTime}`"
|
||||||
|
v-model="selectedTime"
|
||||||
|
type="radio"
|
||||||
|
name="time-slot"
|
||||||
|
class="sr-only"
|
||||||
|
:value="timeSlot.startTime"
|
||||||
|
@focus="timeSlotFocused(timeSlot)"
|
||||||
|
@change="timeSlotInputChanged(timeSlot)" />
|
||||||
<label
|
<label
|
||||||
:for="`timeslot${timeSlot.startTime}`"
|
:for="`timeslot${timeSlot.startTime}`"
|
||||||
class="time-slot-button"
|
class="time-slot-button"
|
||||||
|
|
@ -106,14 +117,6 @@
|
||||||
@click="selectTimeSlotForDay(timeSlot)">
|
@click="selectTimeSlotForDay(timeSlot)">
|
||||||
{{ displayTimeSlotTime(timeSlot.startTime) }}
|
{{ displayTimeSlotTime(timeSlot.startTime) }}
|
||||||
</label>
|
</label>
|
||||||
<input
|
|
||||||
:id="`timeslot${timeSlot.startTime}`"
|
|
||||||
v-model="selectedTime"
|
|
||||||
type="radio"
|
|
||||||
name="time-slot"
|
|
||||||
class="sr-only"
|
|
||||||
:value="timeSlot.startTime"
|
|
||||||
@change="timeSlotInputChanged(timeSlot)" />
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="row form-test-error">
|
<div class="row form-test-error">
|
||||||
|
|
@ -180,7 +183,7 @@ export default {
|
||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
emits: ['update:modelValue', 'dateSelected', 'timeSlotSelected'],
|
emits: ['dateSelected', 'timeSlotSelected'],
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const uuid = crypto.randomUUID();
|
const uuid = crypto.randomUUID();
|
||||||
const componentId = !props.customComponentId
|
const componentId = !props.customComponentId
|
||||||
|
|
@ -556,6 +559,11 @@ export default {
|
||||||
this.selectedTime = null;
|
this.selectedTime = null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
timeSlotFocused(timeSlot) {
|
||||||
|
if (timeSlot && this.selectedTime === null) {
|
||||||
|
this.selectTimeSlotForDay(timeSlot);
|
||||||
|
}
|
||||||
|
},
|
||||||
timeSlotInputChanged(timeSlot) {
|
timeSlotInputChanged(timeSlot) {
|
||||||
this.selectTimeSlotForDay(timeSlot);
|
this.selectTimeSlotForDay(timeSlot);
|
||||||
},
|
},
|
||||||
|
|
@ -648,6 +656,9 @@ export default {
|
||||||
this.findInitialDate(config.preSelectedDate, pageIndexObj.initialDayIndex);
|
this.findInitialDate(config.preSelectedDate, pageIndexObj.initialDayIndex);
|
||||||
} else {
|
} else {
|
||||||
this.findFirstAvailableDateInView();
|
this.findFirstAvailableDateInView();
|
||||||
|
while (!this.selectedDate) {
|
||||||
|
this.gotoNextPage();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
|
|
@ -665,7 +676,9 @@ export default {
|
||||||
await this.updateSelectableDates(
|
await this.updateSelectableDates(
|
||||||
startDateToFetchString,
|
startDateToFetchString,
|
||||||
endDateToFetchString
|
endDateToFetchString
|
||||||
);
|
).catch(() => {
|
||||||
|
showIssLoadingModal(false);
|
||||||
|
});
|
||||||
|
|
||||||
showIssLoadingModal(false);
|
showIssLoadingModal(false);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue