@@ -10,7 +10,6 @@ import ListInput from "@/Components/ListInput.vue";
1010import Button from " primevue/button" ;
1111import FormSaverChip from " @/Components/Form/FormSaverChip.vue" ;
1212
13- import { yupResolver } from " @primevue/forms/resolvers/yup" ;
1413import { resourceReviewFields } from " @/Helpers/validation" ;
1514import { router } from " @inertiajs/vue3" ;
1615import axios from " axios" ;
@@ -71,44 +70,47 @@ const {
7170 clearLocalStorage ,
7271} = useLocalStorageSaver (form, props .resourceId , formFields, " review-draft" );
7372
74- const resolver = ref (yupResolver (resourceReviewFields));
7573const isSubmitting = ref (false );
7674const error = ref (null );
7775
78- const submitReview = async (event ) => {
79- if (! event .valid ) {
80- console .error (" Validation errors" );
81- return ;
82- }
76+ const errors = ref ({});
8377
78+ const submitReview = async () => {
8479 isSubmitting .value = true ;
85-
86- const url = props .isEditingMode
87- ? route (" reviews.update" , { computerScienceResource: props .resourceId })
88- : route (" reviews.store" , { computerScienceResource: props .resourceId });
89-
90- const method = props .isEditingMode ? " put" : " post" ;
91-
92- axios[method](url, form)
93- .then (() => {
94- // Clear localStorage on successful submission
95- clearLocalStorage ();
96-
97- const routeParams = { slug: props .resourceSlug };
98- if (props .isEditingMode ) {
99- routeParams .tab = " reviews" ;
100- routeParams .sort_by = " recently_updated" ;
101- } else {
102- routeParams .sort_by = " latest" ;
103- }
104- router .visit (route (' resources.show' , routeParams));
105- })
106- .catch ((err ) => {
107- isSubmitting .value = false ;
108- error .value =
109- " Something went wrong with submitting your review, please refresh or try again." ;
110- console .error (err);
111- });
80+ try {
81+ await resourceReviewFields .validate (form, { abortEarly: false });
82+ errors .value = {};
83+
84+ const url = props .isEditingMode
85+ ? route (" reviews.update" , { computerScienceResource: props .resourceId })
86+ : route (" reviews.store" , { computerScienceResource: props .resourceId });
87+
88+ const method = props .isEditingMode ? " put" : " post" ;
89+
90+ await axios[method](url, form);
91+ clearLocalStorage ();
92+
93+ const routeParams = { slug: props .resourceSlug };
94+ if (props .isEditingMode ) {
95+ routeParams .tab = " reviews" ;
96+ routeParams .sort_by = " recently_updated" ;
97+ } else {
98+ routeParams .sort_by = " latest" ;
99+ }
100+ router .visit (route (' resources.show' , routeParams));
101+ } catch (e) {
102+ isSubmitting .value = false ;
103+ if (e .inner ) {
104+ const yupErrors = {};
105+ e .inner .forEach ((error ) => {
106+ yupErrors[error .path ] = error .errors ;
107+ });
108+ errors .value = yupErrors;
109+ } else {
110+ error .value = " Something went wrong with submitting your review, please refresh or try again." ;
111+ console .error (e);
112+ }
113+ }
112114};
113115 </script >
114116
@@ -126,7 +128,6 @@ const submitReview = async (event) => {
126128 </h2 >
127129
128130 <Form
129- :resolver =" resolver"
130131 :initialValues =" form"
131132 @submit =" submitReview"
132133 class =" flex flex-col gap-6"
0 commit comments