diff --git a/src/components/taxonomicService/TaxonomicService.tsx b/src/components/taxonomicService/TaxonomicService.tsx index dd47e82..49bd99a 100644 --- a/src/components/taxonomicService/TaxonomicService.tsx +++ b/src/components/taxonomicService/TaxonomicService.tsx @@ -132,9 +132,7 @@ const TaxonomicService = () => { topicDiscipline: taxonomicService.taxonomicService['ods:topicDiscipline'], geographicArea: taxonomicService.taxonomicService['schema:geographicArea'], licence: taxonomicService.taxonomicService['schema:license'], - lastUpdated: moment(taxonomicService.taxonomicService['schema:Service']['schema:dateModified']).format('MMM DD - YYYY'), - paymentModel: taxonomicService.taxonomicService['schema:FundingScheme']?.['schema:url'], - fundingProgram: taxonomicService.taxonomicService['schema:FundingScheme']?.['schema:Funder']?.['schema:name'] + fundingProgram: taxonomicService.taxonomicService['schema:FundingScheme']?.['schema:Funding']?.['schema:identifier'] }} /> diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx index 5dbb1cb..9eae5bf 100644 --- a/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx @@ -1,22 +1,15 @@ /* Import Dependencies */ -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Formik, Form, FieldArray } from "formik"; +import { Formik, Form } from "formik"; import jp from 'jsonpath'; -import { cloneDeep } from "lodash"; import { Row, Col } from 'react-bootstrap'; -/* Import Utilities */ -import { MakeReadableString } from "app/Utilities"; - /* Import Types */ import { FormField, Dict } from "app/Types"; -/* Import Icons */ -import { faX } from "@fortawesome/free-solid-svg-icons"; - /* Import Components */ import BooleanField from "./BooleanField"; import DateField from "./DateField"; +import FormBuilderFieldArray from "./FormBuilderFieldArray"; import MultiSelectField from "./MultiSelectField"; import SelectField from "./SelectField"; import StringField from "./StringField"; @@ -100,17 +93,17 @@ const FormBuilder = (props: Props) => { } formSection.fields.forEach(field => { - let jsonPath: string = ''; + let jsonPath: string; if (formSection.type === 'array') { let pathSuffix: string = FlattenJSONPath(field.jsonPath).split('_').at(-1) as string; - jsonPath = jsonPath.concat(`${formSection.jsonPath ?? ''}[0]['${pathSuffix}']`); + jsonPath = `${formSection.jsonPath ?? ''}[0]['${pathSuffix}']`; /* Add to initial form values array zero index */ jp.value(initialFormValues, jsonPath, DetermineInitialFormValue(field.type)); } else { - jsonPath = jsonPath.concat(FlattenJSONPath(field.jsonPath)); + jsonPath = FlattenJSONPath(field.jsonPath); /* Add to initial form values */ jp.value(initialFormValues, field.jsonPath, DetermineInitialFormValue(field.type)); @@ -124,9 +117,9 @@ const FormBuilder = (props: Props) => { /* Function to construct form field based upon given field */ const ConstructFormField = (field: FormField, fieldValues?: any, SetFieldValue?: Function) => { switch (field.type) { - case 'boolean': - return - case 'date': + case 'boolean': { + return ; + } case 'date': { let dateValue: Date; if (fieldValues) { @@ -138,23 +131,24 @@ const FormBuilder = (props: Props) => { return SetFieldValue?.(fieldName, value)} - /> - case 'multi-string': + />; + } case 'multi-string': { return - case 'select': + />; + } case 'select': { return SetFieldValue?.(fieldName, value)} - /> - case 'multi-select': + />; + } case 'multi-select': { return SetFieldValue?.(fieldName, value)} - /> - case 'text': - return - default: - return + />; + } case 'text': { + return ; + } default: { + return ; + } }; }; @@ -184,78 +178,14 @@ const FormBuilder = (props: Props) => { ))} - : - {({ push, remove }) => ( -
- - -

{`${title}${title.at(-1) !== 'a' ? 's' : ''}`}

- - - - - - - {jp.value(values, section.jsonPath).map((_fields: Dict, index: number) => { - const key = `${section.jsonPath}-${index}`; - - return ( -
- - -

- {`${title} #${index + 1}`} -

- - {jp.value(values, section.jsonPath).length > 1 && - - - - } - - - - {formSections[MakeReadableString(FlattenJSONPath(section.jsonPath)).split(' ').slice(1).join(' ')].fields.map(field => { - let localField = cloneDeep(field); - - localField.jsonPath = field.jsonPath.replace('index', String(index)); - - return ( - - - {ConstructFormField(localField, jp.value(values, localField.jsonPath))} - - - ); - })} - - - -
- ); - })} -
- )} - + : } diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilderFieldArray.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilderFieldArray.tsx new file mode 100644 index 0000000..2870d74 --- /dev/null +++ b/src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilderFieldArray.tsx @@ -0,0 +1,118 @@ +/* Import Dependencies */ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { FieldArray } from "formik"; +import jp from 'jsonpath'; +import { cloneDeep } from "lodash"; +import { Row, Col } from "react-bootstrap"; + +/* Import Utilities */ +import { MakeReadableString } from "app/Utilities"; + +/* Import Types */ +import { FormField, Dict } from "app/Types"; + +/* Import Icons */ +import { faX } from "@fortawesome/free-solid-svg-icons"; + +/* Import Components */ +import { Button } from "components/general/CustomComponents"; + + +/* Props Type */ +type Props = { + section: Dict, + title: string, + initialFormValues: Dict + values: Dict, + formSections: { + [section: string]: { + type: string; + jsonPath: string; + fields: FormField[]; + } + }, + FlattenJSONPath: Function, + ConstructFormField: Function +}; + + +const FormBuilderFieldArray = (props: Props) => { + const { section, title, initialFormValues, values, formSections, FlattenJSONPath, ConstructFormField } = props; + + return ( + + {({ push, remove }) => ( +
+ + +

{`${title}${title.at(-1) !== 'a' ? 's' : ''}`}

+ + + + + + + {jp.value(values, section.jsonPath).map((_fields: Dict, index: number) => { + const key = `${section.jsonPath}-${index}`; + + return ( +
+ + +

+ {`${title} #${index + 1}`} +

+ + {jp.value(values, section.jsonPath).length > 1 && + + + + } + + + + {formSections[MakeReadableString(FlattenJSONPath(section.jsonPath)).split(' ').slice(1).join(' ')].fields.map(field => { + let localField = cloneDeep(field); + + localField.jsonPath = field.jsonPath.replace('index', String(index)); + + return ( + + + {ConstructFormField(localField, jp.value(values, localField.jsonPath))} + + + ); + })} + + + +
+ ); + })} +
+ )} + + ); +}; + +export default FormBuilderFieldArray; \ No newline at end of file