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

CSR-1137 | Finished time slot selection for in shop

Browse source
This commit is contained in:
Scott Kiener 2023-05-08 15:47:37 -04:00
parent 074beab149
commit dd502e41ba
2 changed files with 63 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,11 +25,11 @@
<!-- todayOverrideDateString="2023-08-06T03:00:00" -->
<time-slot-selection-modal
ref="timeSlotModal"
v-model="selectedTimeSlot"
:dateForTimeSlotPicker="dateForTimeSlotPicker"
:availableTimeSlots="availableTimeSlots"
estimatedServiceMinutesMinimum="90"
estimatedServiceMinutesMaximum="180" />
v-model="selectedTimeSlotId"
:dateAndTimeSlotData="DateAndTimeSlotDataForTimeslotModal"
:estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
:estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
@timeSlotSaved="updateAppointmentDateAndTime" />
<button @click="openInshopTimeslotsModal">Click for timeslots</button>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
@ -65,7 +65,6 @@ import {
} from "@/helpers/cms-content-helper";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { daysOfWeek, monthsOfYear } from "@/constants/scheduling.js";
defineRule("date-required", required(errorMessages.DATE_REQUIRED));
@ -74,91 +73,13 @@ export default {
data() {
return {
selectedDate: null,
selectedTimeSlot: null,
dateForTimeSlotPicker: new Date("May 23 2023"),
availableTimeSlots: [
"8:00 AM",
"10:30 AM",
"11:00 AM",
"12:30 AM",
"1:00 PM",
"2:00 PM",
"4:30 PM",
"8:00 AM",
"10:30 AM",
"11:00 AM",
"12:30 AM",
"1:00 PM",
"2:00 PM",
"4:30 PM",
"8:00 AM",
"10:30 AM",
"11:00 AM",
"12:30 AM",
"1:00 PM",
"2:00 PM",
"4:30 PM",
],
mockSelectableDatesData: [
{ dateString: "2023-04-28" },
{ dateString: "2023-05-04" },
{ dateString: "2023-05-09" },
{ dateString: "2023-05-11" },
{ dateString: "2023-05-17" },
{ dateString: "2023-05-18" },
{ dateString: "2023-05-19" },
{ dateString: "2023-05-23" },
{ dateString: "2023-05-24" },
{ dateString: "2023-05-25" },
{ dateString: "2023-05-30" },
{ dateString: "2023-05-31" },
{ dateString: "2023-06-01" },
{ dateString: "2023-06-02" },
{ dateString: "2023-06-06" },
{ dateString: "2023-06-07" },
{ dateString: "2023-06-09" },
{ dateString: "2023-06-12" },
{ dateString: "2023-06-13" },
{ dateString: "2023-06-15" },
{ dateString: "2023-06-16" },
{ dateString: "2023-06-17" },
{ dateString: "2023-06-20" },
{ dateString: "2023-06-21" },
{ dateString: "2023-06-22" },
{ dateString: "2023-06-23" },
{ dateString: "2023-06-26" },
{ dateString: "2023-06-27" },
{ dateString: "2023-06-28" },
{ dateString: "2023-06-29" },
{ dateString: "2023-06-30" },
{ dateString: "2023-07-01" },
{ dateString: "2023-07-03" },
{ dateString: "2023-07-04" },
{ dateString: "2023-07-05" },
{ dateString: "2023-07-06" },
{ dateString: "2023-07-07" },
{ dateString: "2023-07-10" },
{ dateString: "2023-07-11" },
{ dateString: "2023-07-12" },
{ dateString: "2023-07-13" },
{ dateString: "2023-07-14" },
{ dateString: "2023-07-15" },
{ dateString: "2023-07-17" },
{ dateString: "2023-07-18" },
{ dateString: "2023-07-19" },
{ dateString: "2023-07-20" },
{ dateString: "2023-07-21" },
{ dateString: "2023-07-24" },
{ dateString: "2023-07-25" },
{ dateString: "2023-07-26" },
{ dateString: "2023-07-27" },
{ dateString: "2023-07-28" },
{ dateString: "2023-07-29" },
{ dateString: "2023-07-31" },
],
selectedTimeSlotId: null,
appointmentDateAndTime: {
date: null,
startTime: null,
endTime: null,
id: null,
},
selectableDatesData: [],
};
},
@ -189,12 +110,12 @@ export default {
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
},
DateSelectedReadableDate() {
const dayOfWeek = this.dateForTimeSlotPicker.getDay();
const month = this.dateForTimeSlotPicker.getMonth();
const dayOfMonth = this.dateForTimeSlotPicker.getDate();
return `${daysOfWeek[dayOfWeek]}, ${monthsOfYear[month]} ${dayOfMonth}`;
},
DateAndTimeSlotDataForTimeslotModal() {
if (this.selectedDate === null) {
return null;
}
return this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString);
}
},
methods: {
doesCopyContainRouterLink,
@ -219,10 +140,13 @@ export default {
const newShopTimeSlots = newShopTimeSlotsResponse.data;
// console.log("newShopTimeSlots ", newShopTimeSlots)
// ADD API CALL RESULTS TO EXISTING DATE DATA
this.selectableDatesData = this.selectableDatesData.concat(
this.convertApiResponse(newShopTimeSlots.days)
);
this.selectableDatesData.estimatedServiceMinutesMaximum = newShopTimeSlots.estimatedServiceMinutesMaximum;
this.selectableDatesData.estimatedServiceMinutesMinimum = newShopTimeSlots.estimatedServiceMinutesMinimum;
console.log("this.selectableDatesData is now: ", this.selectableDatesData);
// RETURN AGGREGATE DATE DATA
@ -241,9 +165,19 @@ export default {
return responseData;
},
openInshopTimeslotsModal() {
this.$refs["timeSlotModal"].openModal();
},
updateAppointmentDateAndTime() {
let timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(this.selectedTimeSlotId);
this.appointmentDateAndTime.date = this.selectedDate.dateString;
this.appointmentDateAndTime.startTime = timeSlotSelectedObject.startTime;
this.appointmentDateAndTime.endTime = timeSlotSelectedObject.endTime;
this.appointmentDateAndTime.id = this.selectedTimeSlotId;
},
getTimeSlotObjectFromTimeSlotId(timeSlotId) {
let timeSlots = this.selectableDatesData.find(selectableDate => selectableDate.dateString === this.selectedDate.dateString).timeSlots;
return timeSlots.find(timeSlot => timeSlot.id === timeSlotId);
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},

38
src/layouts/schedule/time-slot-selection-modal/time-slot-selection-modal.vue
View file

@ -17,7 +17,7 @@
class="mb-5" />
<buttonQuestion
class="radioQuestion"
:answers="availableTimeSlots"
:answers="availableTimeslots"
groupName="ChooseTimeSlot"
textPosition="text-center"
v-model="currentlySelectedTimeSlot"
@ -37,8 +37,7 @@ export default {
name: "timeSlotSelectionModal",
props: {
modelValue: Object,
dateForTimeSlotPicker: Date,
availableTimeSlots: Array,
dateAndTimeSlotData: Object,
estimatedServiceMinutesMinimum: Number,
estimatedServiceMinutesMaximum: Number,
},
@ -54,9 +53,14 @@ export default {
},
computed: {
dateSelectedReadableDate() {
const weekdayName = daysOfWeek[this.dateForTimeSlotPicker.getDay()];
const month = monthsOfYear[this.dateForTimeSlotPicker.getMonth()];
const numberDayOfMonth = this.dateForTimeSlotPicker.getDate();
if (this.dateAndTimeSlotData === null) {
return null;
}
// This conversion ensures we don't get get GMT induced date changes
let dateObject = new Date (`${this.dateAndTimeSlotData.dateString}T00:00:00`);
const weekdayName = daysOfWeek[dateObject.getDay()];
const month = monthsOfYear[dateObject.getMonth()];
const numberDayOfMonth = dateObject.getDate();
// Ex. Tuesday, April 23
return `${weekdayName}, ${month} ${numberDayOfMonth}`;
},
@ -70,6 +74,25 @@ export default {
}
return durationSubHeaderText;
},
availableTimeslots() {
if (this.dateAndTimeSlotData === null) {
return null;
}
return this.dateAndTimeSlotData.timeSlots.map(timeslot => {
let hours = timeslot.startTime.split(":")[0];
let minutes = timeslot.startTime.split(":")[1];
let meridianNotation = "AM";
if (timeslot.startTime.split(":")[0] > 12) {
hours -= 12;
meridianNotation = "PM";
}
let readableTime = `${hours}:${minutes} ${meridianNotation}`;
return {
value: timeslot.id,
buttonLabel: readableTime,
};
});
},
},
methods: {
openModal() {
@ -78,7 +101,8 @@ export default {
// fires any time the footer button is used, is fired before "onModalClosed"
closeModal() {
this.$emit("update:modelValue", this.currentlySelectedTimeSlot);
this.$refs["timeSlots"].closeModal("test");
this.$refs["timeSlots"].closeModal();
this.$emit("timeSlotSaved");
},
// fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
onModalClosed() {