jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-1137 | Handle auto-loading of existing store data

Browse source 
Date and time-slot are auto selected
Date-picker still needs work to handle dates that are beyond initial load set.
This commit is contained in:
Scott Kiener 2023-06-05 15:37:09 -04:00
parent b3877a888f
commit db7ac46935
2 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/layouts/schedule/schedule.vue
View file

@ -185,6 +185,7 @@ export default {
vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
? resultMap.premiumFeeWithPrice[0] ? resultMap.premiumFeeWithPrice[0]
: null; : null;
vm.updateFooterButtonText(vm.selectedTimeSlotData);
}); });
}, },
computed: { computed: {
@ -199,11 +200,11 @@ export default {
return this.$store.getters.order.serviceLocation.appointmentType; return this.$store.getters.order.serviceLocation.appointmentType;
}, },
timeSlotsForSelectedDate() { timeSlotsForSelectedDate() {
if (this.selectedDate === null) { if (!this.selectedDate) {
return null; return null;
} }
return this.selectableDatesData.days?.find( return this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.dateString === this.selectedDate.dateString (selectableDate) => selectableDate.date === this.selectedDate
); );
}, },
appointmentDateAndTime() { appointmentDateAndTime() {
@ -213,10 +214,9 @@ export default {
const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId( const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(
this.selectedTimeSlotData.id this.selectedTimeSlotData.id
); );
if (timeSlotSelectedObject) { if (timeSlotSelectedObject) {
return { return {
date: this.selectedDate.dateString, date: this.selectedDate,
startTime: timeSlotSelectedObject.startTime, startTime: timeSlotSelectedObject.startTime,
endTime: timeSlotSelectedObject.endTime, endTime: timeSlotSelectedObject.endTime,
routeCode: this.selectedTimeSlotData.id, routeCode: this.selectedTimeSlotData.id,
@ -258,7 +258,7 @@ export default {
}, },
getTimeSlotObjectFromTimeSlotId(timeSlotId) { getTimeSlotObjectFromTimeSlotId(timeSlotId) {
const timeSlots = this.selectableDatesData.days.find( const timeSlots = this.selectableDatesData.days.find(
(selectableDate) => selectableDate.dateString === this.selectedDate.dateString (selectableDate) => selectableDate.date === this.selectedDate
).timeSlots; ).timeSlots;
return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId); return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId);
}, },
@ -308,7 +308,7 @@ export default {
}, },
convertSelectedDateToShortMonthAndDay(selectedDate) { convertSelectedDateToShortMonthAndDay(selectedDate) {
// This conversion ensures we don't get get GMT induced date changes // This conversion ensures we don't get get GMT induced date changes
const dateObject = new Date(`${selectedDate.dateString}T00:00:00`); const dateObject = new Date(`${selectedDate}T00:00:00`);
// Ex: April 25 // Ex: April 25
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" }); return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
}, },
@ -348,7 +348,7 @@ export default {
}; };
} }
}, },
selectedTimeSlotData() { selectedTimeSlotData(newValue) {
this.updateFooterButtonText(this.selectedTimeSlotData); this.updateFooterButtonText(this.selectedTimeSlotData);
}, },
}, },

18
src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
View file

@ -78,13 +78,14 @@ export default {
}, },
data() { data() {
return { return {
selectedTimeSlotId: null, selectedTimeSlotId: this.modelValue.id,
timeSlotModalListButton: timeSlotModalListButton, timeSlotModalListButton: timeSlotModalListButton,
}; };
}, },
setup(props) { setup(props) {
const { handleChange } = useField("time-slot-modal-question", props.validationRules); const { handleChange } = useField("time-slot-modal-question", props.validationRules);
// Run validation on component load
handleChange(props.modelValue.id);
return { return {
handleChange, handleChange,
}; };
@ -92,6 +93,11 @@ export default {
watch: { watch: {
modelValue() { modelValue() {
// Run component validation that is used at parent level // Run component validation that is used at parent level
if (this.modelValue.isPremiumAppointment) {
this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id);
} else {
this.selectedTimeSlotId = this.modelValue.id;
}
this.handleChange(this.modelValue.id); this.handleChange(this.modelValue.id);
}, },
availableTimeSlots(newValue) { availableTimeSlots(newValue) {
@ -162,7 +168,7 @@ export default {
} }
// This conversion ensures we don't get get GMT induced date changes // This conversion ensures we don't get get GMT induced date changes
const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`); const dateObject = new Date(`${this.dateAndTimeSlotData.date}T00:00:00`);
// Ex: Tuesday, April 22 // Ex: Tuesday, April 22
return dateObject.toLocaleDateString("en-us", { return dateObject.toLocaleDateString("en-us", {
weekday: "long", weekday: "long",
@ -203,12 +209,6 @@ export default {
}, },
// fires any time the modal is closed, AFTER "closeModal" fires if footer button is used // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
onModalClosed() { onModalClosed() {
// Reset component state to parent's state
if (this.modelValue.isPremiumAppointment) {
this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id);
} else {
this.selectedTimeSlotId = this.modelValue.id;
}
this.$emit("time-slot-modal-closed"); this.$emit("time-slot-modal-closed");
}, },
// Expected input: "HH:MM" // Expected input: "HH:MM"