Added Admin Alert When Meter Is Set as Non-displayable (Resolved Issue#743)

src/client/app/components/meters/EditMeterModalComponent.tsx

@@ -180,6 +180,34 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 		setLocalMeterEdits({ ...localMeterEdits, [e.target.name]: JSON.parse(e.target.value) });
 	};
 
+	// Function handles the selection of a new displayable.
+	const handleDisplayableChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		// If there is a potential issue then the admin will decide if save happens. Otherwise, the value is put into state.
+		let save = true;
+		if (!JSON.parse(e.target.value)) {
+			// This will hold the overall message for the admin alert.
+			let msg = '';
+			// This will hold the names of groups that are affected.
+			let groups = '';
+			// Tells if the change should be cancelled.
+			// Checks for groups that include the meter being edited.
+			for (const groupId of Object.values(groupDataByID)) {
+				if (groupId.displayable && groupId.deepMeters.includes(meterState.id)) {
+					groups += `${groupId.name}\n`;
+				}
+			}
+			if (groups != '') {
+				// There is a message to display to the user.
+				msg += `${translate('meter')} "${meterState.name}" ${translate('meter.edit.displayable.warning')}\n`;
+				msg += `${groups + '\n' + translate('meter.edit.displayable.verify')}\n`;
+				save = window.confirm(msg);
+			}
+		}
+		if (save) {
+			handleBooleanChange(e);
+		}
+	};
+
 	const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setLocalMeterEdits({ ...localMeterEdits, [e.target.name]: Number(e.target.value) });
 	};
@@ -306,7 +334,7 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr
 								name='displayable'
 								type='select'
 								value={localMeterEdits.displayable?.toString()}
-								onChange={e => handleBooleanChange(e)}
+								onChange={e => handleDisplayableChange(e)}
 								invalid={localMeterEdits.displayable && localMeterEdits.unitId === -99}>
 								{Object.keys(TrueFalseType).map(key => {
 									return (<option value={key} key={key}>{translate(`TrueFalseType.${key}`)}</option>);

src/client/app/translations/data.ts

@@ -328,6 +328,8 @@ const LocaleTranslationData = {
 		"meter.cumulativeReset": "Cumulative Reset:",
 		"meter.cumulativeResetEnd": "Cumulative Reset End:",
 		"meter.cumulativeResetStart": "Cumulative Reset Start:",
+		"meter.edit.displayable.warning": "is not displayable but is used by the following displayable groups:",
+		"meter.edit.displayable.verify": "Given the group(s) listed above, do you want to cancel this change (click Cancel) or continue (click OK)?",
 		"meter.enabled": "Updates:",
 		"meter.endOnlyTime": "Only End Times:",
 		"meter.endTimeStamp": "End Time Stamp:",
@@ -698,7 +700,7 @@ const LocaleTranslationData = {
 		"group.edit.empty": "Removing this meter/group means there are no child meters or groups which is not allowed. Delete the group if you want to remove it.\u{26A1}",
 		"group.edit.nocompatible": "would have no compatible units by the edit to this group so the edit is cancelled\u{26A1}",
 		"group.edit.nounit": "will have its compatible units changed and its default graphic unit set to \"no unit\" by the edit to this group\u{26A1}",
-		"group.edit.verify": "or continue (click OK)?\u{26A1}",
+		"group.edit.verify": "Given the messages, do you want to cancel this change (click Cancel) or continue (click OK)?\u{26A1}",
 		"group.failed.to.create.group": "Failed to create a group with message: \u{26A1}",
 		"group.failed.to.edit.group": "Failed to edit group with message: \u{26A1}",
 		"group.gps.error": "Please input a valid GPS: (latitude, longitude)\u{26A1}",
@@ -829,6 +831,8 @@ const LocaleTranslationData = {
 		"meter.cumulativeReset": "Cumulative Reset:\u{26A1}",
 		"meter.cumulativeResetEnd": "Cumulative Reset End:\u{26A1}",
 		"meter.cumulativeResetStart": "Cumulative Reset Start:\u{26A1}",
+		"meter.edit.displayable.warning": "is not displayable but is used by the following displayable groups:\u{26A1}",
+		"meter.edit.displayable.verify": "Given the group(s) listed above, do you want to cancel this change (click Cancel) or continue (click OK)?\u{26A1}",
 		"meter.enabled": "Mises à Jour du Mèters",
 		"meter.endOnlyTime": "End Only Time:\u{26A1}",
 		"meter.endTimeStamp": "End Time Stamp:\u{26A1}",
@@ -1331,6 +1335,8 @@ const LocaleTranslationData = {
 		"meter.cumulativeReset": "Reinicio cumulativo:",
 		"meter.cumulativeResetEnd": "Final del reinicio cumulativo:",
 		"meter.cumulativeResetStart": "Comienzo del reinicio cumulativo:",
+		"meter.edit.displayable.warning": "is not displayable but is used by the following displayable groups:\u{26A1}",
+		"meter.edit.displayable.verify": "Given the group(s) listed above, do you want to cancel this change (click Cancel) or continue (click OK)?\u{26A1}",
 		"meter.enabled": "Medidor activado",
 		"meter.endOnlyTime": "Solo tiempos finales.",
 		"meter.endTimeStamp": "Marca de tiempo al final:",