Merge pull request #25 from DiSSCo/MakeTaxonomicServiceFormResponsive

Improve responsiveness for taxonomic service form
DiSSCo · Oct 28, 2024 · 803676a · 803676a
2 parents 0ec2e5b + f3ba2aa
commit 803676a
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 41 deletions.
diff --git a/src/components/taxonomicService/TaxonomicServiceForm.tsx b/src/components/taxonomicService/TaxonomicServiceForm.tsx
@@ -28,7 +28,7 @@ const TaxonomicServiceForm = () => {
             <Container fluid className="flex-grow-1 overflow-hidden">
                 <Row className="h-100">
                     <Col lg={{ span: 6, offset: 3 }}
-                        className="h-100 pt-5 pb-4 overflow-scroll"
+                        className="h-100 pt-4 pt-lg-5 pb-4 overflow-scroll"
                     >
                         <Card className="w-100 px-4 py-3">
                             {/* Form title and description */}

diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/BooleanField.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/BooleanField.tsx
@@ -29,11 +29,11 @@ const BooleanField = (props: Props) => {
     return (
         <div>
             <Row>
-                <Col lg="auto"
+                <Col xs="auto" lg="auto"
                     className="pe-0"
                 >
                     <p>
-                        {field.title}{field.required ? <span className="tc-grey"> *</span> : ''}
+                        {field.title}
                     </p>
                 </Col>
                 <Col>

diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/DateField.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/DateField.tsx
@@ -29,7 +29,7 @@ const DateField = (props: Props) => {
     return (
         <div>
             <p>
-                {field.title}{field.required ? <span className="tc-grey"> *</span> : ''}
+                {field.title}
             </p>
             <DatePicker selected={fieldValue}
                 onChange={(date) => SetFieldValue(jsonPath, date)}

diff --git 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 => (
                                                 <Row key={field.jsonPath}
-                                                    className="mt-2"
+                                                    className="mt-3 mt-lg-2"
                                                 >
                                                     <Col>
                                                         {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
@@ -103,13 +103,15 @@ const FormBuilderFieldArray = (props: Props) => {
                                 </Row>
                                 <Row className="my-2">
                                     <Col>
-                                        {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 (
-                                                <Row key={localField.jsonPath}>
+                                                <Row key={localField.jsonPath}
+                                                    className={localIndex > 1 ? 'mt-3' : ''}
+                                                >
                                                     <Col>
                                                         {ConstructFormField(localField, values, SetFieldValue, jp.value(values, localField.jsonPath))}
                                                     </Col>

diff --git 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 (
         <Row>
             <Col lg="auto"
                 className="pe-0"
             >
-                <p>
-                    {field.title}
-                </p>
-                <p className="fs-5 tc-grey">
+                <Row>
+                    <Col lg="auto"
+                        className="pe-0"
+                    >
+                        <p>
+                            {field.title}
+                        </p>
+                    </Col>
+                    {(field.required && !isEmpty(values) && isEmpty(jp.value(values, field.jsonPath))) &&
+                        <Col className="d-flex align-items-center">
+                            <p className="fs-5 fs-lg-4 tc-error">
+                                This field is required
+                            </p>
+                        </Col>
+                    }
+                </Row>
+                <p className="mt-1 mt-lg-0 fs-5 tc-grey">
                     {field.description}
                 </p>
             </Col>
-            {(field.required && !isEmpty(values) && !jp.value(values, field.jsonPath)) &&
-                <Col className="d-flex align-items-center">
-                    <p className="fs-4 tc-error">
-                        This field is required
-                    </p>
-                </Col>
-            }
         </Row>
     );
 };

diff --git 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
@@ -78,39 +78,44 @@ const RORField = (props: Props) => {
     return (
         <div>
             <Row>
-                <Col lg="auto"
+                <Col xs={{ span: 12 }} lg="auto"
                     className="pe-0"
                 >
                     <p>
                         {field.title}
                     </p>
-                    <p className="fs-5 tc-grey">
-                        {field.description}
-                    </p>
                 </Col>
                 {(field.required && !isEmpty(values) && isEmpty(jp.value(values, field.jsonPath)?.['schema:identifier'])) &&
                     <Col className="d-flex align-items-center">
-                        <p className="fs-4 tc-error">
+                        <p className="fs-5 fs-lg-4 tc-error">
                             This field is required
                         </p>
                     </Col>
                 }
+                <Row>
+                    <Col>
+                        <p className="fs-5 tc-grey">
+                            {field.description}
+                        </p>
+                    </Col>
+                </Row>
             </Row>
             <Row className="mt-1">
-                <Col>
+                <Col xs={{ span: 12 }} lg>
                     <Field name="rorSearch"
                         className={`${formFieldClass} w-100 br-corner px-2 py-1`}
                         onChange={(field: Dict) => setQuery(field.target.value as string)}
                     />
                 </Col>
                 {loading &&
-                    <Col lg="auto">
+                    <Col xs="auto" lg="auto">
                         <Spinner />
                     </Col>
                 }
-                <Col lg="auto">
+                <Col xs="auto" lg="auto">
                     <Button type="button"
                         variant="primary"
+                        className="fs-5 fs-lg-4 mt-2 mt-lg-0"
                         OnClick={() => SearchForROR()}
                     >
                         <p>

diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/StringArrayField.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/StringArrayField.tsx
@@ -56,9 +56,6 @@ const StringArrayField = (props: Props) => {
                                         <p>
                                             {field.title}
                                         </p>
-                                        <p className="fs-5 tc-grey">
-                                            {field.description}
-                                        </p>
                                     </Col>
                                     {(field.required && !isEmpty(values) && !jp.value(values, field.jsonPath)?.find((value: string) => !!value)) &&
                                         <Col className="d-flex align-items-center">
@@ -67,6 +64,11 @@ const StringArrayField = (props: Props) => {
                                             </p>
                                         </Col>
                                     }
+                                    <Col lg={{ span: 12 }}>
+                                        <p className="fs-5 tc-grey">
+                                            {field.description}
+                                        </p>
+                                    </Col>
                                 </Row>
                             </Col>
                             <Col lg="auto">
@@ -94,7 +96,7 @@ const StringArrayField = (props: Props) => {
                                         />
                                     </Col>
                                     {fieldValues.length > 1 &&
-                                        <Col lg="auto"
+                                        <Col xs="auto" lg="auto"
                                             className="d-flex align-items-center"
                                         >
                                             <Button type="button"

diff --git a/src/components/taxonomicService/taxonomicServiceFormComponents/TextField.tsx b/src/components/taxonomicService/taxonomicServiceFormComponents/TextField.tsx
@@ -1,7 +1,7 @@
 /* Import Dependencies */
 import { 
     MDXEditor, UndoRedo, BlockTypeSelect, BoldItalicUnderlineToggles, CreateLink, 
-    linkDialogPlugin, ListsToggle, listsPlugin, headingsPlugin, codeMirrorPlugin, toolbarPlugin 
+    linkDialogPlugin, ListsToggle, listsPlugin, headingsPlugin, toolbarPlugin 
 } from '@mdxeditor/editor';
 import classNames from 'classnames';
 import jp from 'jsonpath'
@@ -42,15 +42,9 @@ const TextField = (props: Props) => {
             <FormFieldTitle field={field}
                 values={values}
             />
-            {/* <Field name={field.jsonPath.replace('$', '')}
-                as="textarea"
-                rows="6"
-                className={`${formFieldClass} w-100 mt-1 py-1 px-2 br-corner`}
-            /> */}
             <MDXEditor markdown=""
                 className={`${formFieldClass} b-grey br-corner mt-1 z-0`}
                 plugins={[
-                    codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS' } }),
                     headingsPlugin(),
                     linkDialogPlugin(),
                     listsPlugin(),