Skip to content

Commit

Permalink
Merge pull request #28 from DiSSCo/AdaptFormBasedOnServiceType
Browse files Browse the repository at this point in the history 
Make form adaptable for different taxonomic service types
  • Loading branch information
@TomDijkema
TomDijkema authored Nov 20, 2024
2 parents 285d49a + fb0e489 commit 033b43a
Show file tree
Hide file tree
Showing 10 changed files with 146 additions and 53 deletions.
35 changes: 24 additions & 11 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,13 @@
"axios": "^1.6.7",
"bootstrap": "^5.3.2",
"bootstrap-css": "^4.0.0-alpha.5",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"formik": "^2.4.5",
"json-schema-to-typescript": "^13.1.2",
"jsonpath": "^1.1.1",
"lodash": "^4.17.21",
"markdown-it": "^14.1.0",
"moment": "^2.30.1",
"react": "^18.3.1",
"react-bootstrap": "^2.10.1",
"react-countup": "^6.5.3",
Expand Down
6 changes: 3 additions & 3 deletions src/api/taxonomicService/GetTaxonomicService.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* Import Dependencies */
import axios from 'axios';
import moment from 'moment';
import { format } from 'date-fns';

/* Import Types */
import { TaxonomicService, CordraResult } from 'app/Types';
Expand Down Expand Up @@ -39,8 +39,8 @@ const GetTaxonomicService = async ({ handle }: { handle?: string }) => {
};

/* Set created and modified */
taxonomicService.taxonomicService['schema:dateCreated'] = moment(new Date(data.attributes.metadata.createdOn)).format('YYYY-MM-DDTHH:mm:ss.sssZ');
taxonomicService.taxonomicService['schema:dateModified'] = moment(new Date(data.attributes.metadata.modifiedOn)).format('YYYY-MM-DDTHH:mm:ss.sssZ');
taxonomicService.taxonomicService['schema:dateCreated'] = format(new Date(data.attributes.metadata.createdOn), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx");
taxonomicService.taxonomicService['schema:dateModified'] = format(new Date(data.attributes.metadata.modifiedOn), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx");
} catch (error) {
console.error(error);

Expand Down
6 changes: 3 additions & 3 deletions src/api/taxonomicService/GetTaxonomicServices.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* Import Dependencies */
import axios from 'axios';
import moment from 'moment';
import { format } from 'date-fns';
import { isEmpty } from 'lodash';

/* Import Types */
Expand Down Expand Up @@ -86,8 +86,8 @@ const GetTaxonomicServices = async ({ pageNumber, pageSize, searchFilters }: { p
const taxonomicService = dataFragment.attributes.content as TaxonomicService;

/* Set created and modified */
taxonomicService.taxonomicService['schema:dateCreated'] = moment(new Date(dataFragment.attributes.metadata.createdOn)).format('YYYY-MM-DDTHH:mm:ss.sssZ');
taxonomicService.taxonomicService['schema:dateModified'] = moment(new Date(dataFragment.attributes.metadata.modifiedOn)).format('YYYY-MM-DDTHH:mm:ss.sssZ');
taxonomicService.taxonomicService['schema:dateCreated'] = format(new Date(dataFragment.attributes.metadata.createdOn), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx");
taxonomicService.taxonomicService['schema:dateModified'] = format(new Date(dataFragment.attributes.metadata.modifiedOn), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx");

/* Push to taxonomic services array */
taxonomicServices.push(taxonomicService);
Expand Down
6 changes: 3 additions & 3 deletions src/api/taxonomicService/InsertTaxonomicService.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* Import Dependencies */
import axios from 'axios';
import moment from 'moment';
import { format } from 'date-fns';

/* Import Types */
import { TaxonomicService, CordraResult, Dict } from 'app/Types';
Expand Down Expand Up @@ -55,8 +55,8 @@ const InsertTaxonomicService = async ({ taxonomicServiceRecord }: { taxonomicSer
taxonomicService = data.attributes.content as TaxonomicService;

/* Set created and modified */
taxonomicService.taxonomicService['schema:dateCreated'] = moment(new Date(data.attributes.metadata.createdOn)).format('YYYY-MM-DDTHH:mm:ss.sssZ');
taxonomicService.taxonomicService['schema:dateModified'] = moment(new Date(data.attributes.metadata.modifiedOn)).format('YYYY-MM-DDTHH:mm:ss.sssZ');
taxonomicService.taxonomicService['schema:dateCreated'] = format(new Date(data.attributes.metadata.createdOn), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx");
taxonomicService.taxonomicService['schema:dateModified'] = format(new Date(data.attributes.metadata.modifiedOn), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx");
} catch (error) {
console.error(error);

Expand Down
12 changes: 8 additions & 4 deletions src/components/search/components/SearchResult.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* Import Dependencies */
import { useNavigate } from 'react-router-dom';
import classNames from 'classnames';
import moment from 'moment';
import { format } from 'date-fns';
import { Row, Col } from 'react-bootstrap';

/* Import Hooks */
Expand Down Expand Up @@ -72,7 +72,7 @@ const SearchResult = (props: Props) => {
</Col>
{(!previewImage || window.innerWidth < 768) &&
<Col xs="auto" lg={{ span: 3 }}

>
<p className="fw-bold fs-5 fs-lg-4 text-end textOverflow">{taxonomicService.taxonomicService['schema:availableLanguage']?.join(' / ').toUpperCase()}</p>
</Col>
Expand All @@ -97,7 +97,9 @@ const SearchResult = (props: Props) => {
</Col>
{(!previewImage || window.innerWidth < 768) &&
<Col xs="auto" lg="auto">
<p className="fs-5 fs-lg-4 fw-bold">{moment(taxonomicService.taxonomicService['schema:dateCreated']).format('MMM DD - YYYY')}</p>
<p className="fs-5 fs-lg-4 fw-bold">{taxonomicService.taxonomicService['schema:dateCreated'] &&
format(taxonomicService.taxonomicService['schema:dateCreated'], 'MMMM dd - yyyy')}
</p>
</Col>
}
</Row>
Expand All @@ -123,7 +125,9 @@ const SearchResult = (props: Props) => {
{/* Publishing Date */}
<Row>
<Col className="d-flex justify-content-end">
<p className="tc-white fw-bold fs-4">{moment(taxonomicService.taxonomicService['schema:dateCreated']).format('MMM DD - YYYY')}</p>
<p className="tc-white fw-bold fs-4">{taxonomicService.taxonomicService['schema:dateCreated'] &&
format(taxonomicService.taxonomicService['schema:dateCreated'], 'MMMM dd - yyyy')
}</p>
</Col>
</Row>
</Col>
Expand Down
4 changes: 2 additions & 2 deletions src/components/taxonomicService/TaxonomicService.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* Import Dependencies */
import classNames from 'classnames';
import moment from 'moment';
import { format } from 'date-fns';
import { useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import { Container, Row, Col } from 'react-bootstrap';
Expand Down Expand Up @@ -129,7 +129,7 @@ const TaxonomicService = () => {
licence: taxonomicService.taxonomicService['schema:license'],
sourceURL: taxonomicService.taxonomicService['schema:url'],
changeLog: taxonomicService.taxonomicService['schema:about'],
datePublished: moment(taxonomicService.taxonomicService['schema:datePublished']).format('MMM DD - YYYY'),
datePublished: taxonomicService.taxonomicService['schema:datePublished'] && format(taxonomicService.taxonomicService['schema:datePublished'], 'MMMM dd - yyyy'),
availableOnAppStore: taxonomicService.taxonomicService['schema:additionalProperty']?.[1] as string[] | undefined,
documentationURL: taxonomicService.taxonomicService['schema:documentation'],
paymentModel: taxonomicService.taxonomicService['schema:additionalProperty']?.[2] as string | undefined,
Expand Down
6 changes: 4 additions & 2 deletions src/components/taxonomicService/components/DescriptionBlock.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* Import Dependencies */
import classNames from 'classnames';
import { format } from 'date-fns';
import MarkdownIt from 'markdown-it';
import moment from 'moment';
import { Row, Col } from 'react-bootstrap';

/* Import Types */
Expand Down Expand Up @@ -82,7 +82,9 @@ const DescriptionBlock = (props: Props) => {
className="mt-2 mt-lg-0"
>
<p className="fs-5 fw-bold">Publishing date</p>
<p>{moment(taxonomicService.taxonomicService['schema:dateCreated']).format('MMM DD - YYYY')}</p>
<p>{taxonomicService.taxonomicService['schema:dateCreated'] &&
format(taxonomicService.taxonomicService['schema:dateCreated'], 'MMMM dd - yyyy')}
</p>
</Col>
{/* Quality score */}
<Col xs={{ span: 12 }} lg={{ span: 3 }}
Expand Down
82 changes: 64 additions & 18 deletions src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,14 @@ const FormBuilder = (props: Props) => {
applicableToServiceTypes?: string[]
}
} = {};
const inactiveFormSections: {
[section: string]: {
type: string,
jsonPath: string,
fields: FormField[],
applicableToServiceTypes?: string[]
}
} = {};
const initialFormValues: Dict = {};

/**
Expand Down Expand Up @@ -105,14 +113,8 @@ const FormBuilder = (props: Props) => {
};

/* Construct initial form values */
Object.entries(formTemplate).forEach(([_key, formSection]) => {
if ((serviceType && formSection.applicableToServiceTypes?.includes(serviceType)) || !formSection.applicableToServiceTypes) {
formSections[formSection.title] = {
type: formSection.type,
jsonPath: formSection.jsonPath ?? '',
fields: []
};

if (isEmpty(initialFormValues)) {
Object.entries(formTemplate).forEach(([_key, formSection]) => {
/* If is array, push to initial form values */
if (formSection.type === 'array') {
jp.value(initialFormValues, formSection.jsonPath ?? '', []);
Expand All @@ -132,10 +134,36 @@ const FormBuilder = (props: Props) => {
/* Add to initial form values */
jp.value(initialFormValues, field.jsonPath, DetermineInitialFormValue(field.type, field.const));
}
});
});
}

/* Construct form sections */
Object.entries(formTemplate).forEach(([_key, formSection]) => {
if ((serviceType && formSection.applicableToServiceTypes?.includes(serviceType)) || !formSection.applicableToServiceTypes || !serviceType) {
formSections[formSection.title] = {
type: formSection.type,
jsonPath: formSection.jsonPath ?? '',
fields: [],
applicableToServiceTypes: formSection.applicableToServiceTypes
};

formSection.fields.forEach(field => {
/* Push to form fields */
formSections[formSection.title].fields.push(field);
});
} else {
inactiveFormSections[formSection.title] = {
type: formSection.type,
jsonPath: formSection.jsonPath ?? '',
fields: [],
applicableToServiceTypes: formSection.applicableToServiceTypes
};

formSection.fields.forEach(field => {
/* Push to form fields */
inactiveFormSections[formSection.title].fields.push(field);
});
}
});

Expand Down Expand Up @@ -207,10 +235,21 @@ const FormBuilder = (props: Props) => {
};
};

/**
* Function to remove irrelevant classes from the form values object
* @param obj The form values object
*/
const CheckForIrrelevantClasses = (obj: Dict) => {
Object.keys(obj).forEach(key => {
if (Object.values(inactiveFormSections).find(values => values.jsonPath === `$['${key}']`)) {
delete obj[key];
}
});
};

return (
<div>
<Formik initialValues={initialFormValues}
// enableReinitialize
onSubmit={async (values) => {
await new Promise((resolve) => setTimeout(resolve, 100));

Expand Down Expand Up @@ -246,21 +285,27 @@ const FormBuilder = (props: Props) => {
};

Object.values(formSections).forEach(formSection => {
formSection.fields.filter(field => field.required).forEach(field => {
if (field.jsonPath.includes('index')) {
const array = jp.value(values, field.jsonPath.split("['index']").at(0) as string);

ValidateArray(array);
} else if (isEmpty(jp.value(values, field.jsonPath))) {
validationFlag = false;
}
});
if ((formSection?.applicableToServiceTypes?.includes(values['schema:service']['schema:serviceType'])) || !formSection.applicableToServiceTypes) {
formSection.fields.filter(field => field.required).forEach(field => {
if (field.jsonPath.includes('index')) {
const array = jp.value(values, field.jsonPath.split("['index']").at(0) as string);

ValidateArray(array);
} else if (isEmpty(jp.value(values, field.jsonPath))) {
validationFlag = false;
}
});
}
});

if (validationFlag && captchaHook.captchaStatus.solution !== null) {
/* Start loading indication */
setLoading(true);

/**
* Function to search for and remove empty properties in the given form values object
* @param obj The form values object
*/
const RemoveEmptyProperties = (obj: Dict) => {
for (const key in obj) {
if (isEmpty(obj[key]) || (Array.isArray(obj[key]) && !obj[key].find((value: string) => !!value))) {
Expand All @@ -274,6 +319,7 @@ const FormBuilder = (props: Props) => {
let taxonomicServiceRecord = cloneDeep(values);

RemoveEmptyProperties(taxonomicServiceRecord);
CheckForIrrelevantClasses(taxonomicServiceRecord);

try {
await InsertTaxonomicService({
Expand Down
Loading

0 comments on commit 033b43a

Please sign in to comment.