updated modal to include FormElement

HenriRabalais · Dec 16, 2024 · 1fa1b9f · 1fa1b9f
1 parent 897680a
commit 1fa1b9f
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 62 deletions.
diff --git a/jsx/Modal.tsx b/jsx/Modal.tsx
@@ -3,6 +3,7 @@ import Swal from 'sweetalert2';
 import Loader from './Loader';
 import {
   ButtonElement,
+  FormElement,
 } from 'jsx/Form';
 
 type ModalProps = PropsWithChildren<{
@@ -86,11 +87,7 @@ const Modal = ({
    */
   const submitButton = () => {
     if (onSubmit && !(loading || success)) { // Show button if conditions met
-      return (
-        <div style={submitStyle}>
-          <ButtonElement onUserInput={handleSubmit}/>
-        </div>
-      );
+      return <div style={submitStyle}><ButtonElement/></div>;
     }
   };
 
@@ -193,6 +190,17 @@ const Modal = ({
     </div>
   );
 
+  const content = (
+    <>
+      <div style={bodyStyle}>{show && children}</div>
+      <div style={footerStyle}>
+        {loader}
+        {successDisplay}
+        {submitButton()}
+      </div>
+    </>
+  );  
+
   return (
     <div style={modalContainer} onClick={handleClose}>
       <div style={modalContent} onClick={(e) => e.stopPropagation()}>
@@ -201,12 +209,11 @@ const Modal = ({
           <span style={glyphStyle} onClick={handleClose}>×</span>
         </div>
         <div>
-          <div style={bodyStyle}>{show && children}</div>
-          <div style={footerStyle}>
-            {loader}
-            {successDisplay}
-            {submitButton()}
-          </div>
+          {onSubmit ? (
+            <FormElement onSubmit={handleSubmit}>
+              {content}
+            </FormElement>
+          ) : content}
         </div>
       </div>
     </div>

diff --git a/modules/biobank/jsx/specimenForm.js b/modules/biobank/jsx/specimenForm.js
@@ -362,60 +362,58 @@ class SpecimenForm extends React.Component {
         onSubmit={this.handleSubmit}
         throwWarning={true}
       >
-        <FormElement>
-          <div className='row'>
-            <div className="col-xs-11">
-              {renderNote()}
-              {renderGlobalFields()}
-              <SelectElement
-                name='projectIds'
-                label='Project'
-                options={this.props.options.projects}
-                onUserInput={this.setProject}
-                required={true}
-                value={current.projectIds}
-                disabled={current.candidateId ? false : true}
-                errorMessage={errors.specimen.projectIds}
-              />
-              {renderRemainingQuantityFields()}
-            </div>
-          </div>
-          <ListForm
-            list={list}
-            errors={errors.list}
-            setList={this.setList}
-            listItem={{container: {}, collection: {}}}
-          >
-            <SpecimenBarcodeForm
-              typeId={current.typeId}
-              options={options}
+        <div className='row'>
+          <div className="col-xs-11">
+            {renderNote()}
+            {renderGlobalFields()}
+            <SelectElement
+              name='projectIds'
+              label='Project'
+              options={this.props.options.projects}
+              onUserInput={this.setProject}
+              required={true}
+              value={current.projectIds}
+              disabled={current.candidateId ? false : true}
+              errorMessage={errors.specimen.projectIds}
             />
-          </ListForm>
-          <br/>
-          <div className='form-top'/>
-          <ContainerParentForm
-            display={true}
-            data={data}
-            setContainer={this.setContainer}
-            setCurrent={this.setCurrent}
-            current={placeHolder}
+            {renderRemainingQuantityFields()}
+          </div>
+        </div>
+        <ListForm
+          list={list}
+          errors={errors.list}
+          setList={this.setList}
+          listItem={{container: {}, collection: {}}}
+        >
+          <SpecimenBarcodeForm
+            typeId={current.typeId}
             options={options}
           />
-          <div className='form-top'/>
-          <ButtonElement
-            name='generate'
-            label='Generate Barcodes'
-            type='button'
-            onUserInput={this.generateBarcodes}
-            disabled={current.candidateId ? false : true}
-          />
-          <CheckboxElement
-            name='printBarcodes'
-            label='Print Barcodes'
-            onUserInput={(name, value) => this.setState({[name]: value})}
-            value={this.state.printBarcodes}
-          />
-        </FormElement>
+        </ListForm>
+        <br/>
+        <div className='form-top'/>
+        <ContainerParentForm
+          display={true}
+          data={data}
+          setContainer={this.setContainer}
+          setCurrent={this.setCurrent}
+          current={placeHolder}
+          options={options}
+        />
+        <div className='form-top'/>
+        <ButtonElement
+          name='generate'
+          label='Generate Barcodes'
+          type='button'
+          onUserInput={this.generateBarcodes}
+          disabled={current.candidateId ? false : true}
+        />
+        <CheckboxElement
+          name='printBarcodes'
+          label='Print Barcodes'
+          onUserInput={(name, value) => this.setState({[name]: value})}
+          value={this.state.printBarcodes}
+        />
       </Modal>
     );
   }