diff --git a/src/components/taxonomicService/TaxonomicServiceForm.tsx b/src/components/taxonomicService/TaxonomicServiceForm.tsx index b8641a0..e3fcdf7 100644 --- a/src/components/taxonomicService/TaxonomicServiceForm.tsx +++ b/src/components/taxonomicService/TaxonomicServiceForm.tsx @@ -28,7 +28,7 @@ const TaxonomicServiceForm = () => { {/* Form title and description */} diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/BooleanField.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/BooleanField.tsx index 24b3655..82d8ce9 100644 --- a/src/components/taxonomicService/taxonomicServiceFormComponents/BooleanField.tsx +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/BooleanField.tsx @@ -29,11 +29,11 @@ const BooleanField = (props: Props) => { return (
-

- {field.title}{field.required ? * : ''} + {field.title}

diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/DateField.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/DateField.tsx index 222ec26..424debe 100644 --- a/src/components/taxonomicService/taxonomicServiceFormComponents/DateField.tsx +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/DateField.tsx @@ -29,7 +29,7 @@ const DateField = (props: Props) => { return (

- {field.title}{field.required ? * : ''} + {field.title}

SetFieldValue(jsonPath, date)} diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx index 5573160..c21de8c 100644 --- a/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx @@ -207,9 +207,6 @@ const FormBuilder = (props: Props) => { onSubmit={async (values) => { await new Promise((resolve) => setTimeout(resolve, 100)); - /* Start loading indication */ - setLoading(true); - /* Check if all required fields are present */ let validationFlag: boolean = true; @@ -254,6 +251,9 @@ const FormBuilder = (props: Props) => { }); if (validationFlag && captchaHook.captchaStatus.solution !== null) { + /* Start loading indication */ + setLoading(true); + const RemoveEmptyProperties = (obj: Dict) => { for (const key in obj) { if (isEmpty(obj[key]) || (Array.isArray(obj[key]) && !obj[key].find((value: string) => !!value))) { @@ -279,6 +279,8 @@ const FormBuilder = (props: Props) => { } finally { setLoading(false); } + } else { + setErrorMessage('Please provide values for all required fields') } }} > @@ -293,7 +295,7 @@ const FormBuilder = (props: Props) => { {section.fields.map(field => ( {ConstructFormField(field, values, setFieldValue, jp.value(values, field.jsonPath))} diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilderFieldArray.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilderFieldArray.tsx index 36f26ee..971b399 100644 --- a/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilderFieldArray.tsx +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilderFieldArray.tsx @@ -103,13 +103,15 @@ const FormBuilderFieldArray = (props: Props) => { - {formSections[MakeReadableString(FlattenJSONPath(section.jsonPath)).split(' ').slice(1).join(' ')].fields.map(field => { + {formSections[MakeReadableString(FlattenJSONPath(section.jsonPath)).split(' ').slice(1).join(' ')].fields.map((field, localIndex) => { let localField = cloneDeep(field); localField.jsonPath = field.jsonPath.replace('index', String(index)); return ( - + 1 ? 'mt-3' : ''} + > {ConstructFormField(localField, values, SetFieldValue, jp.value(values, localField.jsonPath))} diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/FormFieldTitle.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/FormFieldTitle.tsx index 1aaab1e..dbae85e 100644 --- a/src/components/taxonomicService/taxonomicServiceFormComponents/FormFieldTitle.tsx +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/FormFieldTitle.tsx @@ -23,25 +23,33 @@ type Props = { const FormFieldTitle = (props: Props) => { const { field, values } = props; + console.log(field.title, values); + return ( -

- {field.title} -

-

+ + +

+ {field.title} +

+ + {(field.required && !isEmpty(values) && isEmpty(jp.value(values, field.jsonPath))) && + +

+ This field is required +

+ + } +
+

{field.description}

- {(field.required && !isEmpty(values) && !jp.value(values, field.jsonPath)) && - -

- This field is required -

- - }
); }; diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/MultiSelectField.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/MultiSelectField.tsx index 73f6be4..6691af3 100644 --- a/src/components/taxonomicService/taxonomicServiceFormComponents/MultiSelectField.tsx +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/MultiSelectField.tsx @@ -69,7 +69,7 @@ const MultiSelectField = (props: Props) => { placeholder="Select an option" options={selectItems} isMulti={true} - className={formFieldClass} + className={`${formFieldClass} mt-2`} onChange={(dropdownOptions) => { /* Create array of all dropdown options values */ const valuesArray: string[] = []; diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/RORField.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/RORField.tsx index 689fcf8..9006d23 100644 --- a/src/components/taxonomicService/taxonomicServiceFormComponents/RORField.tsx +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/RORField.tsx @@ -78,39 +78,44 @@ const RORField = (props: Props) => { return (
-

{field.title}

-

- {field.description} -

{(field.required && !isEmpty(values) && isEmpty(jp.value(values, field.jsonPath)?.['schema:identifier'])) && -

+

This field is required

} + + +

+ {field.description} +

+ +
- + setQuery(field.target.value as string)} /> {loading && - + } - +