feat: add ErrorNotification component and API error handling in Nuisance form
Some checks failed
/ golint (push) Failing after 10s
Some checks failed
/ golint (push) Failing after 10s
- Add ts/rmo/components/ErrorNotification.vue — reusable error alert with dismiss support, accessible markup, and configurable message - Replace inline error div in Nuisance.vue with ErrorNotification - Add resp.ok check in doSubmit() so HTTP error responses are caught and the workflow stops instead of proceeding to /submitted - Fix typo: borwser → browser Issue: #8
This commit is contained in:
parent
9d2895bd94
commit
06e8de800a
2 changed files with 92 additions and 4 deletions
|
|
@ -444,9 +444,11 @@ select.tall {
|
|||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end mt-3 mt-md-0">
|
||||
<div v-if="errorMessage" class="error-message">
|
||||
✗ {{ errorMessage }}
|
||||
</div>
|
||||
<ErrorNotification
|
||||
v-if="errorMessage"
|
||||
:message="errorMessage"
|
||||
@dismissed="errorMessage = ''"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-lg"
|
||||
|
|
@ -469,6 +471,7 @@ import AddressSuggestion from "@/components/AddressSuggestion.vue";
|
|||
import ImageUpload, { Image } from "@/components/ImageUpload.vue";
|
||||
import MapLocator from "@/components/MapLocator.vue";
|
||||
import AddressAndMapLocator from "@/rmo/components/AddressAndMapLocator.vue";
|
||||
import ErrorNotification from "@/rmo/components/ErrorNotification.vue";
|
||||
import { useStoreGeocode } from "@/store/geocode";
|
||||
import { useStoreLocal } from "@/store/local";
|
||||
import { useStorePublicReport } from "@/store/publicreport";
|
||||
|
|
@ -529,8 +532,12 @@ async function doSubmit() {
|
|||
const resp = await fetch("/api/rmo/nuisance", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
// Don't set Content-Type, the borwser should do it
|
||||
// Don't set Content-Type, the browser should do it
|
||||
});
|
||||
if (!resp.ok) {
|
||||
errorMessage.value = "Something went wrong. Your request could not be completed. Please try again.";
|
||||
return;
|
||||
}
|
||||
const data: PublicReport = (await resp.json()) as PublicReport;
|
||||
storePublicReport.add(data);
|
||||
router.push("/submitted/" + data.public_id);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue