feat: show ErrorNotification in ReportSubmitted on submission failure
Some checks failed
/ golint (push) Failing after 9s
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:
parent
614f4d274e
commit
b9f2107c79
1 changed files with 20 additions and 5 deletions
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue