add error form in vue

Author: giladfuchs

react/package.json

@@ -17,13 +17,12 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "@vercel/analytics": "^1.5.0",
         "@emotion/cache": "^11.14.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^7.3.1",
         "@mui/material": "^7.3.1",
-        "@reduxjs/toolkit": "^2.8.2",
-        "@vercel/analytics": "^1.5.0",
         "ag-grid-community": "^34.1.1",
         "ag-grid-react": "^34.1.1",
         "axios": "^1.11.0",
@@ -32,8 +31,9 @@
         "react-dom": "^19.1.1",
         "react-intl": "^7.1.11",
         "react-perfect-scrollbar": "^1.5.8",
-        "react-redux": "^9.2.0",
         "react-router-dom": "^7.8.0",
+        "@reduxjs/toolkit": "^2.8.2",
+        "react-redux": "^9.2.0",
         "redux": "^5.0.1",
         "redux-persist": "^6.0.0",
         "sonner": "^2.0.7",

vue3/src/assets/locales/en.json

@@ -39,5 +39,8 @@
   "renamed, or might never exist!": "renamed, or might never exist!",
 
   "success.delete.student": "Student deleted successfully\nAlso all of their assignments were deleted.",
-  "success.delete.assignment": "Assignment deleted successfully"
+  "success.delete.assignment": "Assignment deleted successfully",
+  "form.error": "Save failed",
+  "form.error.unique": "The field {field} must be unique",
+  "form.error.required.dynamic": "The field {field} is required"
 }

vue3/src/common/stores/general.ts

@@ -63,19 +63,14 @@ export const useGeneralStore = defineStore('general', {
         data.student_id = auth_store.student_id;
       }
 
-      try {
-        await axios.post(`${model}/${id}`, data);
-        toast.success(message);
-        if (model === ModelType.teacher) {
-          await router.push('/login');
-        } else if (model === ModelType.student && is_add) {
-          await router.push(`/${ModelType.student}`);
-        } else {
-          await router.push(`/${ModelType.student}/view/${auth_store.student_id}`);
-        }
-      } catch (error) {
-        console.error(error);
-        throw error;
+      await axios.post(`${model}/${id}`, data);
+      toast.success(message);
+      if (model === ModelType.teacher) {
+        await router.push('/login');
+      } else if (model === ModelType.student && is_add) {
+        await router.push(`/${ModelType.student}`);
+      } else {
+        await router.push(`/${ModelType.student}/view/${auth_store.student_id}`);
       }
     }
   }

vue3/src/views/components/form/Form.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { isAxiosError } from 'axios';
 import { useRoute } from 'vue-router';
+
 import { ModelType, create_form_fields, get_form_by_model, type inputFilters, RowWithId } from '@/common/types';
 import DynamicForm from '@/views/components/form/DynamicForm.vue';
 
 import { useGeneralStore } from '@/common/stores/general';
 
 import { array_obj_to_obj_with_key } from '@/common/helper';
-import { useI18n } from 'vue-i18n';
+import FormError from '@/views/components/form/FormError.vue';
 
 const { t } = useI18n();
 
@@ -25,11 +27,31 @@ const obj = isAdd
   : (array_obj_to_obj_with_key<RowWithId, 'id'>(general_store.list[model.value] as RowWithId[], Number(url.value), 'id') ?? {});
 
 const controls = computed<inputFilters>(() => create_form_fields(get_form_by_model(model.value), obj));
+const fieldError = ref<string>('');
+
 const create_update = async (data: inputFilters) => {
+  fieldError.value = '';
+
   const message = t(isAdd ? 'toast.create_success' : 'toast.edit_success', {
     model: t(`models.${model.value}`)
   });
-  await general_store.create_update_row_input_form(data, model.value, url.value, isAdd, message);
+
+  try {
+    await general_store.create_update_row_input_form(data, model.value, url.value, isAdd, message);
+  } catch (err: any) {
+    if (typeof err === 'string') {
+      fieldError.value = 'form.error';
+      return;
+    }
+
+    let intlId = err?.message ?? 'form.error';
+    const errors = err?.errors;
+    if (Array.isArray(errors) && errors.length > 0 && errors[0]?.field) {
+      intlId = `form.label.${errors[0].field}`;
+    }
+
+    fieldError.value = intlId;
+  }
 };
 </script>
 <template>
@@ -38,4 +60,5 @@ const create_update = async (data: inputFilters) => {
       <DynamicForm :is-add="isAdd" :model="model" :controls="controls" @send-form="create_update" />
     </v-col>
   </v-row>
+  <FormError :fieldError="fieldError" />
 </template>

vue3/src/views/components/form/FormError.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToast } from 'vue-toastification';
+
+const props = defineProps<{
+  fieldError: string;
+}>();
+
+const { t } = useI18n();
+const toast = useToast();
+
+const isFieldSpecific = computed(() => props.fieldError?.startsWith('form.label.'));
+const isUnique = computed(() => props.fieldError?.includes('unique:'));
+const baseFieldId = computed(() => {
+  const fe = props.fieldError || '';
+  if (isUnique.value) return fe.slice(fe.indexOf('unique:') + 'unique:'.length);
+  if (isFieldSpecific.value) return fe.slice('form.label.'.length);
+  return '';
+});
+
+watch(
+  () => props.fieldError,
+  (val) => {
+    if (!val) return;
+
+    const error_msg = isUnique.value
+      ? t('form.error.unique', { field: t(baseFieldId.value) })
+      : isFieldSpecific.value
+        ? t('form.error.required.dynamic', { field: t(baseFieldId.value) })
+        : t('form.error');
+
+    toast.error(error_msg);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <h4 v-if="fieldError" class="text-error text-h4 mt-3 text-center">
+    <template v-if="isUnique">
+      {{ t('form.error.unique', { field: t(baseFieldId) }) }}
+    </template>
+
+    <template v-else-if="isFieldSpecific">
+      {{ t('form.error.required.dynamic', { field: t(baseFieldId) }) }}
+    </template>
+
+    <template v-else-if="fieldError === 'form.error'">
+      {{ t(fieldError) }}
+    </template>
+
+    <template v-else>
+      {{ fieldError }}
+    </template>
+  </h4>
+</template>