add validation rules

apps/yadoms-cs/src/main.tsx

@@ -1,5 +1,6 @@
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
+import '@mantine/notifications/styles.css';
 import 'mantine-react-table/styles.css';
 import * as ReactDOM from 'react-dom/client';
 import App from './app/app';

libs/domain/plugins/src/lib/service/plugin-form.service.ts

@@ -159,10 +159,6 @@ export const getNestedSectionFields = (
     field: PluginConfigurationSchemaField;
   }> = [];
   for (const [key, field] of Object.entries(configurationSchema)) {
-    console.log('field?.typ', field?.type);
-    console.log('parentKey', parentKey);
-    console.log('selectedKey', selectedKey);
-    console.log('key', key);
     switch (field?.type) {
       case PluginConfigurationSchemaType.CheckboxSection:
         newInitialValues.push({
@@ -251,6 +247,5 @@ export const getNestedSectionFields = (
         });
     }
   }
-  console.log('newInitialValue sections', newInitialValues);
   return newInitialValues;
 };

libs/pages/plugins/src/lib/ui/choose-plugin-modal/choose-plugin-modal.tsx

@@ -78,7 +78,7 @@ export function ChoosePluginModal(props: ChoosePluginModalProps) {
             </Badge>
           </Group>
 
-          <Text mt="xs" color="dimmed" size="sm" style={{ flex: '1 0 auto' }}>
+          <Text mt="xs" c="dimmed" size="sm" style={{ flex: '1 0 auto' }}>
             <LinkifyText
               text={availablePluginsEntity.description}
             ></LinkifyText>

libs/pages/plugins/src/lib/ui/create-new-plugin/create-new-plugin.tsx

@@ -41,6 +41,12 @@ export function CreateNewPlugin(props: CreateNewPluginProps) {
     props.onClose();
   }
 
+  function closeAllModals() {
+    pluginConfigurationModalHandlers.close();
+    choosePluginModalHandlers.close();
+    props.onClose();
+  }
+
   return (
     <>
       <ChoosePluginModal
@@ -53,6 +59,7 @@ export function CreateNewPlugin(props: CreateNewPluginProps) {
         <PluginConfigurationModal
           opened={openedPluginConfigurationModal}
           onClose={() => closePluginConfigurationModal()}
+          onCloseAllModals={closeAllModals}
           selectedPluginType={selectedPluginType}
           selectedPluginConfigurationSchema={selectedPluginConfigurationSchema}
         />

libs/pages/plugins/src/lib/ui/plugin-configuration-modal/plugin-configuration-modal.tsx

@@ -25,6 +25,7 @@ export interface PluginConfigurationModalProps {
   onClose: () => void;
   selectedPluginConfigurationSchema: PluginConfigurationSchema;
   selectedPluginType: string;
+  onCloseAllModals: () => void;
 }
 
 export interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -54,33 +55,11 @@ export function PluginConfigurationModal(props: PluginConfigurationModalProps) {
       })
     );
   }, [props.selectedPluginType, props.selectedPluginConfigurationSchema]);
-
   const form = useForm({
     initialValues,
-    //validate: (values) =>
-    //  validateForm(values, props.selectedPluginConfigurationSchema),
+    validate: (values) => validateForm(values),
   });
 
-  const onSubmit = () => {
-    console.log('values on submit', form.values);
-    const errorValues = Object.values(form.errors);
-    if (errorValues.length === 0) {
-      // handle successful form submission
-      notifications.show({
-        title: 'Form submitted',
-        message: 'Your form has been submitted successfully.',
-        color: theme.colors.green[6],
-      });
-    } else {
-      // handle validation errors
-      notifications.show({
-        title: 'Validation error',
-        message: 'Please fix the errors in the form and try again.',
-        color: 'red',
-      });
-    }
-  };
-
   const handleClose = () => {
     form.reset();
     props.onClose();
@@ -104,10 +83,34 @@ export function PluginConfigurationModal(props: PluginConfigurationModalProps) {
         </Modal.Header>
         <Modal.Body>
           <form
-            onSubmit={form.onSubmit((values) => {
-              console.log('form', form);
-              console.log(values);
-            })}
+            onSubmit={form.onSubmit(
+              (values, event) => {
+                console.log(
+                  values, // <- form.getValues() at the moment of submit
+                  event // <- form element submit event
+                );
+                notifications.show({
+                  title: 'Form submitted',
+                  message: 'Your form has been submitted successfully.',
+                  color: theme.colors.green[6],
+                  position: 'bottom-right',
+                });
+              },
+              (validationErrors, values, event) => {
+                form.validate();
+                console.log(
+                  'failed',
+                  validationErrors, // <- form.errors at the moment of submit
+                  values, // <- form.getValues() at the moment of submit
+                  event // <- form element submit event
+                );
+                notifications.show({
+                  title: 'Validation error',
+                  message: 'Please fix the errors in the form and try again.',
+                  color: 'red',
+                });
+              }
+            )}
           >
             <Flex direction={'column'} gap={10}>
               <TextInput
@@ -143,7 +146,7 @@ export function PluginConfigurationModal(props: PluginConfigurationModalProps) {
               <Button onClick={handleClose} variant={'outline'}>
                 {t('plugins.modal.plugin-configuration.back')}
               </Button>
-              <Button onClick={onSubmit} type="submit">
+              <Button type="submit" disabled={false}>
                 {t('plugins.modal.plugin-configuration.create')}
               </Button>
             </Flex>

libs/pages/plugins/src/lib/ui/plugin-configuration-modal/plugins-configuration-forms.ts

@@ -1,32 +1,68 @@
-import { PluginConfigurationSchema } from '@yadoms/domain/plugins';
+import { PluginConfigurationSchemaType } from '@yadoms/domain/plugins';
 
-export const validateForm = (
-  values: Record<string, any>,
-  schema: PluginConfigurationSchema
-) => {
+export const validateForm: (
+  values: Record<string, any>
+) => Record<string, string> = (values: Record<string, any>) => {
   const errors: Record<string, string> = {};
-  const validateField = (key: string, value: any, field: any) => {
-    if (field.required && (!value || value.trim() === '')) {
-      errors[key] = `${field.name} is required`;
-    }
-    if (field.regex && !new RegExp(field.regex).test(value)) {
-      errors[key] = field.regexErrorMessage || `${field.name} is invalid`;
-    }
-  };
 
   const validateObject = (
-    obj: Record<string, any>,
-    schema: PluginConfigurationSchema
+    values: Record<string, any>,
+    path = 'configuration'
   ) => {
-    Object.entries(schema).forEach(([key, field]) => {
-      if (field.type === 'section') {
-        validateObject(obj[key] || {}, field.content || {});
-      } else {
-        validateField(key, obj[key], field);
+    Object.entries(values).forEach(([key, field]) => {
+      const currentPath = `${path}.${key}`;
+      console.log('key', key);
+      console.log('field', field);
+      console.log('field.type', field.type);
+
+      switch (field.type) {
+        case PluginConfigurationSchemaType.String:
+          if (field.required && field.value?.trim() === '') {
+            errors[`${currentPath}.value`] = `${field.name} is required`;
+          }
+          if (field.regex && !new RegExp(field.regex).test(field.value)) {
+            errors[`${currentPath}.value`] =
+              field.regexErrorMessage || `${field.name} is invalid`;
+          }
+          break;
+
+        case PluginConfigurationSchemaType.Integer:
+          if (
+            field.required &&
+            (field.value === null ||
+              field.value === undefined ||
+              field.value === '')
+          ) {
+            errors[`${currentPath}.value`] = `${field.name} is required`;
+          }
+          if (field.regex && !new RegExp(field.regex).test(field.value)) {
+            errors[`${currentPath}.value`] =
+              field.regexErrorMessage || `${field.name} is invalid`;
+          }
+          break;
+
+        case PluginConfigurationSchemaType.Decimal:
+          if (
+            field.value === null ||
+            field.value === undefined ||
+            field.value === ''
+          ) {
+            errors[`${currentPath}.value`] = `${field.name} is required`;
+          }
+          break;
+
+        case PluginConfigurationSchemaType.Section:
+          console.log('section currentPath', currentPath);
+          validateObject(field.content, `${currentPath}.content`);
+          break;
+        default:
+          break;
       }
     });
   };
 
-  validateObject(values, schema);
+  validateObject(values['configuration']);
+
+  console.log('errors', errors);
   return errors;
 };