replaced use of browser pop-ups with fhc alert

public/js/components/Cis/Coodle/Components/CoodleFreeBusy.js

@@ -29,9 +29,7 @@ export default {
 	},
 	methods: {
 		getScheduleTypeText(value) {
-			let type = this.scheduleTypes.find(
-				(type) => type.value === value,
-			);
+			let type = this.scheduleTypes.find((type) => type.value === value);
 			return type?.text ?? "Other";
 		},
 		openScheduleForm(index) {
@@ -58,7 +56,7 @@ export default {
 		},
 		async submitScheduleForm() {
 			if (!this.scheduleFormData?.url.length) {
-				window.alert("You must enter a URL!");
+				this.$fhcAlert.alertError("You must enter a URL!");
 				return;
 			}
 
@@ -76,13 +74,14 @@ export default {
 		async deleteSchedule(schedule) {
 			if (!schedule?.id) return;
 
-			if (
-				!window.confirm(
+			const scheduleRemovalConfirmation = await this.$fhcAlert.confirm({
+				header: "Removal confirmation",
+				message:
 					"Are you sure you want to remove this schedule from your FreeBusy?",
-				)
-			) {
-				return;
-			}
+				acceptLabel: "Yes",
+				rejectLabel: "Cancel",
+			});
+			if (!scheduleRemovalConfirmation) return;
 
 			const scheduleDeletionResponse = await this.$api.call(
 				FreeBusyApi.deleteFreeBusyEntry(schedule.id),
@@ -95,15 +94,13 @@ export default {
 			const freeBusyTypesResponse = await this.$api.call(
 				FreeBusyApi.getFreeBusyTypes(),
 			);
-			this.scheduleTypes = freeBusyTypesResponse.data.map(
-				(type) => {
-					return {
-						value: type.freebusytyp_kurzbz,
-						text: type.bezeichnung,
-						urlDefault: type.url_default,
-					};
-				},
-			);
+			this.scheduleTypes = freeBusyTypesResponse.data.map((type) => {
+				return {
+					value: type.freebusytyp_kurzbz,
+					text: type.bezeichnung,
+					urlDefault: type.url_default,
+				};
+			});
 		},
 		async getFreeBusySchedules() {
 			const freeBusyEntriesResponse = await this.$api.call(

public/js/components/Cis/Coodle/Components/CoodleSurvey.js

@@ -211,34 +211,38 @@ export default {
 				this.$emit("surveyCreationCanceled");
 			}
 		},
-		submitForm() {
+		async submitForm() {
 			if (
 				!this.surveyFormData.title?.length ||
 				!this.surveyFormData.endsAt?.length ||
 				!this.surveyFormData.timeslotDuration
 			) {
-				window.alert("Check your inputs!");
+				this.$fhcAlert.alertError("Check your inputs!");
 				return;
 			}
 
 			if (!this.surveyFormData.participants.length) {
-				if (
-					!window.confirm(
-						"You haven't added any participants. Are you sure you want to proceed?",
-					)
-				) {
-					return;
-				}
+				const shouldProceedWithoutParticipants =
+					await this.$fhcAlert.confirm({
+						header: "Warning!",
+						message:
+							"You haven't added any participants. Are you sure you want to proceed?",
+						acceptLabel: "Yes",
+						rejectLabel: "Cancel",
+					});
+				if (!shouldProceedWithoutParticipants) return;
 			}
 
 			if (!this.surveyFormData.timeslots.length) {
-				if (
-					!window.confirm(
-						"You haven't added any proposed appointments. Are you sure you want to proceed?",
-					)
-				) {
-					return;
-				}
+				const shouldProceedWithoutTimeslots =
+					await this.$fhcAlert.confirm({
+						header: "Warning!",
+						message:
+							"You haven't added any proposed appointments. Are you sure you want to proceed?",
+						acceptLabel: "Yes",
+						rejectLabel: "Cancel",
+					});
+				if (!shouldProceedWithoutTimeslots) return;
 			}
 
 			let surveyData = this.formatOutgoingSurveyData(this.surveyFormData);
@@ -268,9 +272,13 @@ export default {
 			};
 		},
 		async createSurvey(surveyData) {
-			const shouldInformParticipants = window.confirm(
-				"Would you like to email all participants to inform them of this survey?",
-			);
+			const shouldInformParticipants = await this.$fhcAlert.confirm({
+				header: "Inform participants",
+				message:
+					"Would you like to email all participants to inform them of this survey?",
+				acceptLabel: "Yes",
+				rejectLabel: "No",
+			});
 
 			const surveyCreationResponse = await this.$api.call(
 				CoodleApi.createSurvey(surveyData, shouldInformParticipants),
@@ -282,9 +290,13 @@ export default {
 			}
 		},
 		async updateSurvey(surveyData) {
-			const shouldInformParticipants = window.confirm(
-				"Would you like to email all participants to inform them of changes?",
-			);
+			const shouldInformParticipants = await this.$fhcAlert.confirm({
+				header: "Inform participants",
+				message:
+					"Would you like to email all participants to inform them of changes?",
+				acceptLabel: "Yes",
+				rejectLabel: "No",
+			});
 
 			const surveyUpdateResponse = await this.$api.call(
 				CoodleApi.updateSurvey(
@@ -352,9 +364,8 @@ export default {
 					:isEditInProgress="isEditInProgress"
 				/>
 				<hr>
-				<div v-if="!isEditInProgress" class="d-flex flex-column gap-2">
+				<div v-if="!isEditInProgress && $props.survey" class="d-flex flex-column gap-2">
 					<coodle-survey-voting-table
-						v-if="$props.survey"
 						@selectionSubmitted="$emit('surveyUpdated', {surveyId: $props.survey.id})"
 						:uid="$props.uid"
 						:timeslots="parsedTimeslotsForVotingTable"

public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyCalendar.js

@@ -252,7 +252,7 @@ export default {
 						startDate.toISOString(),
 				)
 			) {
-				window.alert("You cannot create duplicates!");
+				this.$fhcAlert.alertError("You cannot create duplicates!");
 				return;
 			}
 
@@ -269,7 +269,7 @@ export default {
 						newStartDate.toISOString(),
 				)
 			) {
-				window.alert("You cannot create duplicates!");
+				this.$fhcAlert.alertError("You cannot create duplicates!");
 				return;
 			}
 

public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyCalendar/CoodleSurveyCalendarTimeslotCard.js

@@ -68,7 +68,7 @@ export default {
 		},
 		submitForm() {
 			if (!this.dateInput || !this.startTimeInput) {
-				window.alert("Check your inputs!");
+				this.$fhcAlert.alertError("Check your inputs!");
 				return;
 			}
 
@@ -85,7 +85,7 @@ export default {
 				this.startTimeInput < this.minStartTimeInput ||
 				this.startTimeInput > this.maxStartTimeInput
 			) {
-				window.alert(
+				this.$fhcAlert.alertError(
 					"Appointment start time must be between 07:00 and 22:55!",
 				);
 				return;

public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyHeader.js

@@ -30,19 +30,22 @@ export default {
 		},
 	},
 	methods: {
-		cancelSurvey() {
+		async cancelSurvey() {
 			if (!this.$props.survey?.id) return;
 
-			if (
-				!window.confirm(
-					'Are you sure you want to cancel Coodle survey "(((surveyTitle)))"?'.replace(
-						"(((surveyTitle)))",
-						this.$props.survey?.title,
-					),
-				)
-			) {
-				return;
-			}
+			const cancellationConfirmationMessage =
+				'Are you sure you want to cancel Coodle survey "(((surveyTitle)))"?'.replace(
+					"(((surveyTitle)))",
+					this.$props.survey?.title,
+				);
+			const cancellationConfirmation = await this.$fhcAlert.confirm({
+				header: "Cancellation confirmation!",
+				message: cancellationConfirmationMessage,
+				acceptLabel: "Yes",
+				rejectLabel: "No",
+			});
+			if (!cancellationConfirmation) return;
+
 			console.log("canceling...");
 			// todo
 		},

public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyParticipants.js

@@ -90,24 +90,29 @@ export default {
 				this.areSearchResultsShown = false;
 			}, 100);
 		},
-		selectSearchResult(searchResult) {
+		async selectSearchResult(searchResult) {
 			if (
 				searchResult.type === "group" &&
 				searchResult.users.length >= this.warningGroupSize
 			) {
-				let warningMessage =
+				let groupSizeWarningMessage =
 					"Group (((groupName))) contains (((n))) users. Are you sure you want to add all (((n))) users to your survey?";
-				warningMessage = warningMessage.replace(
+				groupSizeWarningMessage = groupSizeWarningMessage.replace(
 					"(((groupName)))",
 					searchResult.name,
 				);
-				warningMessage = warningMessage.replaceAll(
+				groupSizeWarningMessage = groupSizeWarningMessage.replaceAll(
 					"(((n)))",
 					searchResult.users.length,
 				);
-				if (!window.confirm(warningMessage)) {
-					return;
-				}
+				const groupSizeConfirmation = await this.$fhcAlert.confirm({
+					header: "Warning!",
+					message: groupSizeWarningMessage,
+					acceptLabel: "Yes",
+					rejectLabel: "Cancel",
+				});
+
+				if (!groupSizeConfirmation) return;
 			}
 
 			const addedParticipants =

public/js/components/Cis/Coodle/Components/CoodleSurvey/CoodleSurveyVotingTable.js

@@ -156,7 +156,7 @@ export default {
 			} else if (selectedTimeslots.includes("none")) {
 				selection = [];
 			} else {
-				selection = selectedTimeslots.map((Number));
+				selection = selectedTimeslots.map(Number);
 			}
 
 			const selectionSubmissionResponse = await this.$api.call(
@@ -167,13 +167,13 @@ export default {
 				this.$emit("selectionSubmitted");
 			}
 		},
-		submitFinalSelection() {
+		async submitFinalSelection() {
 			if (!this.$props.survey.id) return;
 
 			let selectedTimeslot = "";
 
 			if (!this.selectedTimeslotId) {
-				window.alert("You haven't made a selection!");
+				this.$fhcAlert.alertError("You haven't made a selection!");
 				return;
 			} else if (this.selectedTimeslotId === "none") {
 				selectedTimeslot = '"No appointment is possible"';
@@ -192,18 +192,17 @@ export default {
 					selectedTimeslotInfo.endTime;
 			}
 
-			if (
-				!window.confirm(
-					'Are you sure you want to select option (((selectedTimeslot))) and finalize Coodle survey "(((surveyTitle)))"?'
-						.replace("(((selectedTimeslot)))", selectedTimeslot)
-						.replace(
-							"(((surveyTitle)))",
-							this.$props.survey?.title,
-						),
-				)
-			) {
-				return;
-			}
+			const finalSelectionConfirmationMessage =
+				'Are you sure you want to select option (((selectedTimeslot))) and finalize Coodle survey "(((surveyTitle)))"?'
+					.replace("(((selectedTimeslot)))", selectedTimeslot)
+					.replace("(((surveyTitle)))", this.$props.survey?.title);
+			const finalSelectionConfirmation = await this.$fhcAlert.confirm({
+				header: "Final confirmation",
+				message: finalSelectionConfirmationMessage,
+				acceptLabel: "Yes",
+				rejectLabel: "Cancel",
+			});
+			if (!finalSelectionConfirmation) return;
 
 			let participantsThatHaveNotVoted =
 				this.participantsWithoutAuthUser.reduce((sum, participant) => {
@@ -226,13 +225,15 @@ export default {
 			}
 
 			if (participantsThatHaveNotVoted) {
-				if (
-					!window.confirm(
-						"Not all participants have voted. Are you sure you want to proceed?",
-					)
-				) {
-					return;
-				}
+				const shouldProceedWithoutAllVotes =
+					await this.$fhcAlert.confirm({
+						header: "Warning!",
+						message:
+							"Not all participants have voted. Are you sure you want to proceed?",
+						acceptLabel: "Yes",
+						rejectLabel: "Cancel",
+					});
+				if (!shouldProceedWithoutAllVotes) return;
 			}
 
 			console.log("finalizing...");