feat: add scroll to invalid fields and error notification when user tries to save invalid record

Author: yaroslav8765

adminforth/spa/src/components/GroupsTable.vue

@@ -55,7 +55,7 @@
               @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
               :readonly="readonlyColumns?.includes(column.name)"
             />
-            <div v-if="columnError(column) && validating" class="mt-1 text-xs text-lightInputErrorColor dark:text-darkInputErrorColor">{{ columnError(column) }}</div>
+            <div v-if="columnError(column) && validating" class="af-invalid-field-message mt-1 text-xs text-lightInputErrorColor dark:text-darkInputErrorColor">{{ columnError(column) }}</div>
             <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-lightFormFieldTextColor dark:text-darkFormFieldTextColor">{{ column.editingNote[mode] }}</div>
           </td>
         </tr>

adminforth/spa/src/components/ResourceForm.vue

@@ -377,4 +377,9 @@ watch(() => isValid.value, (value) => {
   emit('update:isValid', value);
 });
 
+defineExpose({
+  columnError,
+  editableColumns,
+})
+
 </script>

adminforth/spa/src/views/CreateView.vue

@@ -67,6 +67,7 @@
 
     <ResourceForm 
       v-else
+      ref="resourceFormRef"
       :record="record"
       :resource="coreStore.resource!"
       @update:record="onUpdateRecord"
@@ -98,14 +99,15 @@ import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
 import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
 import { showErrorTost } from '@/composables/useFrontendApi';
 import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 import adminforth from '@/adminforth';
 import { useI18n } from 'vue-i18n';
 import { type AdminForthComponentDeclarationFull } from '@/types/Common.js';
+import type { AdminForthResourceColumn } from '@/types/Back';
 
 const isValid = ref(false);
 const validating = ref(false);
@@ -122,6 +124,8 @@ const coreStore = useCoreStore();
 
 const { t } = useI18n();
 
+const resourceFormRef = ref<InstanceType<typeof ResourceForm> | null>(null);
+
 const createSaveButtonInjection = computed<AdminForthComponentDeclarationFull | null>(() => {
   const raw: any = coreStore.resourceOptions?.pageInjections?.create?.saveButton as any;
   if (!raw) return null;
@@ -180,6 +184,8 @@ onMounted(async () => {
 async function saveRecord(opts?: { confirmationResult?: any }) {
   if (!isValid.value) {
     validating.value = true;
+    await nextTick();
+    scrollToInvalidField();
     return;
   } else {
     validating.value = false;
@@ -217,5 +223,23 @@ async function saveRecord(opts?: { confirmationResult?: any }) {
   }
 }
 
+function scrollToInvalidField() {
+  let columnsWithErrors: {column: AdminForthResourceColumn, error: string}[] = [];
+  for (const column of resourceFormRef.value?.editableColumns || []) {
+    const error = resourceFormRef.value?.columnError(column);
+    if (error) {
+      columnsWithErrors.push({column, error});
+    }
+  }
+  const errorMessage = t('Failed to save. Please fix errors for the following fields:') + '<ul class="mt-2 list-disc list-inside">' + columnsWithErrors.map(c => `<li><strong>${c.column.label || c.column.name}</strong>: ${c.error}</li>`).join('') + '</ul>';
+  adminforth.alert({
+    messageHtml: errorMessage,
+    variant: 'danger'
+  });
+  const firstInvalidElement = document.querySelector('.af-invalid-field-message');
+  if (firstInvalidElement) {
+    firstInvalidElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+}
 
 </script>