added api error callback with toast display

This commit is contained in:
2023-06-12 13:13:38 +10:00
parent df398faddb
commit 6d2db21a62
11 changed files with 118 additions and 26 deletions

View File

@@ -77,7 +77,13 @@ const handleSubmit = async () => {
});
closeDialog(false);
} catch (error) {
form.apiErrors(error);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
dialogLoading.value = false;
}
@@ -85,7 +91,6 @@ const handleSubmit = async () => {
/**
* Handle a keyboard event in this component.
*
* @param {KeyboardEvent} event The keyboard event.
* @returns {boolean} If the event was handled.
*/

View File

@@ -14,7 +14,10 @@ type FormObjectMessageFunction = (
icon?: string
) => void;
type FormObjectErrorFunction = (message: string) => void;
type FormObjectApiErrorsFunction = (apiErrors: ApiResponse) => void;
type FormObjectApiErrorsFunction = (
apiErrors: ApiResponse,
callback?: (error: string, status: number) => void
) => void;
export interface FormObject {
validate: FormObjectValidateFunction;
@@ -78,7 +81,10 @@ const defaultFormObject: FormObject = {
this.message(message, "error", "alert-circle-outline");
}
},
apiErrors: function (apiResponse: ApiResponse) {
apiErrors: function (
apiResponse: ApiResponse,
callback?: (error: string, status: number) => void
) {
let foundKeys = false;
if (
@@ -100,10 +106,15 @@ const defaultFormObject: FormObject = {
}
if (foundKeys == false) {
this.error(
apiResponse?.json?.message ||
"An unknown server error occurred.\nPlease try again later."
);
const errorMessage =
(apiResponse?.json?.message as string) ||
"An unknown server error occurred.\nPlease try again later.";
if (callback) {
callback(errorMessage, apiResponse.status);
} else {
this.error(errorMessage);
}
}
},
controls: {},

View File

@@ -61,6 +61,7 @@ import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form";
import { And, Max, Min, Required } from "../helpers/validate";
import { useToastStore } from "../store/ToastStore";
// const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
const formDone = ref(false);
@@ -87,7 +88,13 @@ const handleSubmit = async () => {
formDone.value = true;
} catch (error) {
form.apiErrors(error);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
form.loading(false);
}

View File

@@ -56,6 +56,7 @@ import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form";
import { And, Email, Required } from "../helpers/validate";
import { useToastStore } from "../store/ToastStore";
// const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
const formDone = ref(false);
@@ -85,7 +86,13 @@ const handleSubmit = async () => {
if (error.status == 422) {
formDone.value = true;
} else {
form.apiErrors(error);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
}
} finally {
form.loading(false);

View File

@@ -95,9 +95,15 @@ const handleSubmit = async () => {
} else {
router.push({ name: "dashboard" });
}
} catch (err) {
} catch (error) {
form.controls.password.value = "";
form.apiErrors(err);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
form.loading(false);
}

View File

@@ -59,6 +59,7 @@ import {
Required,
} from "../helpers/validate";
import SMFormError from "../components/SMFormError.vue";
import { useToastStore } from "../store/ToastStore";
let abortController: AbortController | null = null;
@@ -116,8 +117,13 @@ const handleSubmit = async () => {
userRegistered.value = true;
} catch (error) {
console.log(error);
form.apiErrors(error);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
form.loading(false);
}

View File

@@ -66,6 +66,7 @@ import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form";
import { And, Email, Required } from "../helpers/validate";
import { useToastStore } from "../store/ToastStore";
// const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
const formDone = ref(false);
@@ -95,7 +96,13 @@ const handleSubmit = async () => {
if (error.status == 422) {
formDone.value = true;
} else {
form.apiErrors(error);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
}
} finally {
form.loading(false);

View File

@@ -53,6 +53,7 @@ import SMInput from "../components/SMInput.vue";
import { api } from "../helpers/api";
import { Form, FormControl } from "../helpers/form";
import { And, Max, Min, Password, Required } from "../helpers/validate";
import { useToastStore } from "../store/ToastStore";
// const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
const formDone = ref(false);
@@ -90,7 +91,13 @@ const handleSubmit = async () => {
formDone.value = true;
} catch (error) {
form.apiErrors(error);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
form.loading(false);
}

View File

@@ -249,7 +249,13 @@ const handleSubmit = async () => {
router.push({ name: "dashboard-article-list" });
}
} catch (error) {
form.apiErrors(error);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
}
};
@@ -325,7 +331,13 @@ const loadOptionsAuthors = async () => {
}
})
.catch((error) => {
form.apiErrors(error);
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
});
};

View File

@@ -84,8 +84,14 @@ const loadData = async () => {
form.controls.url.value = data.shortlink.url;
used.value = data.shortlink.used;
}
} catch (err) {
form.apiErrors(err);
} catch (error) {
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
form.loading(false);
}
@@ -161,8 +167,14 @@ const handleSubmit = async () => {
} else {
router.push({ name: "dashboard-shortlink-list" });
}
} catch (err) {
form.apiErrors(err);
} catch (error) {
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
form.loading(false);
}

View File

@@ -158,8 +158,14 @@ const loadData = async () => {
form.controls.phone.value = data.user.phone;
form.controls.email.value = data.user.email;
}
} catch (err) {
form.apiErrors(err);
} catch (error) {
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
form.loading(false);
}
@@ -235,8 +241,14 @@ const handleSubmit = async () => {
} else {
router.push({ name: "dashboard-user-list" });
}
} catch (err) {
form.apiErrors(err);
} catch (error) {
form.apiErrors(error, (message) => {
useToastStore().addToast({
title: "An error occurred",
content: message,
type: "danger",
});
});
} finally {
form.loading(false);
}