feat: show ErrorNotification in ReportSubmitted on submission failure
Some checks failed
/ golint (push) Failing after 9s

- Add ErrorNotification component above the contact form
- Replace console.error with user-visible error messages in
  handleSubmit for both HTTP error responses and exceptions
- Add isSubmitting ref with :disabled binding to prevent
  double-submission (consistent with Nuisance/Water forms)
- Clear errorMessage on each submission attempt

Issue: #8
This commit is contained in:
Eli Ribble 2026-05-21 15:12:40 +00:00
parent 614f4d274e
commit b9f2107c79
No known key found for this signature in database

View file

@ -46,6 +46,11 @@
Please provide your contact information in case the district has
any follow-up questions.
</p>
<ErrorNotification
v-if="errorMessage"
:message="errorMessage"
@dismissed="errorMessage = ''"
/>
<form
id="notificationForm"
@submit.prevent="handleSubmit"
@ -193,7 +198,11 @@
</label>
</div>
<button type="submit" class="btn btn-primary">
<button
type="submit"
class="btn btn-primary"
:disabled="isSubmitting"
>
Update report
</button>
</form>
@ -279,6 +288,7 @@ import { ref, onMounted } from "vue";
import { computedAsync } from "@vueuse/core";
import { useRouter } from "vue-router";
import ErrorNotification from "@/rmo/components/ErrorNotification.vue";
import Tooltip from "@/components/Tooltip.vue";
import { formatReportID } from "@/format";
import { useRoutes } from "@/rmo/route/use";
@ -302,6 +312,8 @@ interface Props {
const props = defineProps<Props>();
const errorMessage = ref("");
const isSubmitting = ref(false);
const formData = ref<FormData>({
can_sms: true,
consent: true,
@ -326,6 +338,8 @@ const district = computedAsync(async (): Promise<District | undefined> => {
return await storeDistrict.byURI(report.value.district);
});
const handleSubmit = async () => {
isSubmitting.value = true;
errorMessage.value = "";
try {
const response = await fetch("/api/publicreport-notification", {
method: "POST",
@ -339,14 +353,15 @@ const handleSubmit = async () => {
});
if (response.ok) {
// Handle success (e.g., show a success message)
router.push(routes.RegisterNotificationsComplete(props.id));
} else {
// Handle error
console.error("Form submission failed");
errorMessage.value = "Something went wrong. Your request could not be completed. Please try again.";
}
} catch (error) {
console.error("Error submitting form:", error);
errorMessage.value =
error instanceof Error ? error.message : "Upload failed";
} finally {
isSubmitting.value = false;
}
};