feat: add custom validation functionality for resource columns[3]

Author: yaroslav8765

adminforth/spa/src/components/ColumnValueInputWrapper.vue

@@ -53,12 +53,14 @@
     @update:inValidity="$emit('update:inValidity', { name: column.name, value: $event })"
     @update:emptiness="$emit('update:emptiness', { name: column.name, value: $event })"
   />
+  <Spinner v-if="shouldWeShowSpinner" class="w-4 absolute top-1 left-2"/>
 </template>
 
 <script setup lang="ts">
   import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
   import ColumnValueInput from "./ColumnValueInput.vue";
-  import { ref, nextTick } from 'vue';
+  import { ref, watch, nextTick } from 'vue';
+  import { Spinner } from '@/afcl';
   
   const props = defineProps<{
     source: 'create' | 'edit',
@@ -69,7 +71,28 @@
     unmasked: any,
     setCurrentValue: Function,
     readonly?: boolean,
+    columnsWithErrors: Record<string, string>,
+    isValidating: boolean
   }>();
+
+  const shouldWeShowSpinner = ref(false);
+
+
+  watch(() => props.currentValues[props.column.name], async (newVal) => {
+    console.log('Current value for column', props.column.name, 'changed to', newVal);
+    await nextTick();
+    if (props.isValidating) {
+      shouldWeShowSpinner.value = true;
+    }
+  });
+
+  watch(() => [props.columnsWithErrors[props.column.name], props.isValidating], () => {
+    if (props.isValidating) {
+      shouldWeShowSpinner.value = false;
+    } else {
+      shouldWeShowSpinner.value = false;
+    }
+  });
   
   const emit = defineEmits(['update:unmasked', 'update:inValidity', 'update:emptiness', 'focus-last-input']);
   

adminforth/spa/src/components/GroupsTable.vue

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

adminforth/spa/src/components/ResourceForm.vue

@@ -112,6 +112,7 @@ const columnOffsets = reactive<Record<string, number>>({});
 const columnEmptyResultsCount = reactive<Record<string, number>>({});
 const columnsWithErrors = ref<Record<string, string>>({});
 const isValidating = ref(false);
+const isValid = ref(true);
 
 const columnError = (column: AdminForthResourceColumnCommon) => {
   const val = computed(() => {
@@ -351,21 +352,31 @@ function checkIfColumnHasError(column: AdminForthResourceColumnCommon) {
   }
 }
 
-const isValid = computed(async () => {
+const checkIfAnyColumnHasErrors = () => {
+  return Object.keys(columnsWithErrors.value).length > 0 ? false : true;
+}
+
+const debouncedValidation = debounce(async (columns: AdminForthResourceColumnCommon[]) => {
+  await mutex.runExclusive(async () => {
+    await validateUsingUserValidationFunction(columns);
+  });
+  isValidating.value = false;
+  isValid.value = checkIfAnyColumnHasErrors();
+}, 500);
+
+watch(() => [editableColumns.value, props.validating], async () => {
   editableColumns.value?.forEach(column => {
     checkIfColumnHasError(column);
   });
 
   isValidating.value = true;
-  let isValid = true;
   if (props.validating) {
     //Here I need to add debounce 
-    await mutex.runExclusive(async () => {
-      isValid = await validateUsingUserValidationFunction(editableColumns.value);
-    });
+    debouncedValidation(editableColumns.value);
+  } else {
+    isValidating.value = false;
+    isValid.value = checkIfAnyColumnHasErrors();
   }
-  isValidating.value = false;
-  return Object.keys(columnsWithErrors.value).length > 0 ? false : true;
 });
 
 
@@ -417,7 +428,7 @@ watch(() => isValid.value, async (value) => {
   emit('update:isValid', resolvedValue);
 });
 
-async function validateUsingUserValidationFunction(editableColumnsInner: AdminForthResourceColumnCommon[]): Promise<boolean> {
+async function validateUsingUserValidationFunction(editableColumnsInner: AdminForthResourceColumnCommon[]): Promise<void> {
   const doesUserHaveCustomValidation = props.resource.columns.some(column => column.validation && column.validation.some((val: any) => val.customValidator));
   if (doesUserHaveCustomValidation) {
     try {
@@ -450,10 +461,8 @@ async function validateUsingUserValidationFunction(editableColumnsInner: AdminFo
 
     } catch (e) {
       console.error('Error during custom validation', e);
-      return false;
     }
   }
-  return true;
 }
 
 defineExpose({