FIO-7395: Fixed the issue with loading nested form (#5520)

* FIO-7395: fixed the issue with loading nested form * FIO-7395: reimplement logic --------- Co-authored-by: lane-formio <[email protected]>
formio · Mar 25, 2024 · 8fbc0ef · 8fbc0ef
1 parent 34d3689
commit 8fbc0ef
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 3 deletions.
diff --git a/src/Form.js b/src/Form.js
@@ -161,6 +161,38 @@ export default class Form extends Element {
     };
   }
 
+  /**
+  * Check Subdirectories path and provide correct options
+  *
+  * @param {string} url - The the URL of the form json.
+  * @param {form} object - The form json.
+  * @return {object} The initial options with base and project.
+  */
+  getFormInitOptions(url, form) {
+    const options = {};
+    const index = url.indexOf(form?.path);
+    // form url doesn't include form path
+    if (index === -1) {
+      return options;
+    }
+    const projectUrl = url.substring(0, index - 1);
+    const urlParts = Formio.getUrlParts(projectUrl);
+    // project url doesn't include subdirectories path
+    if (!urlParts || urlParts.filter(part => !!part).length < 4) {
+      return options;
+    }
+    const baseUrl = `${urlParts[1]}${urlParts[2]}`;
+    // Skip if baseUrl has already been set
+    if (baseUrl !== Formio.baseUrl) {
+      return {
+        base: baseUrl,
+        project: projectUrl,
+      };
+    }
+
+    return {};
+  }
+
   setForm(formParam) {
     let result;
     formParam = formParam || this.form;
@@ -185,7 +217,8 @@ export default class Form extends Element {
               }
               this.loading = false;
               this.instance = this.instance || this.create(form.display);
-              this.instance.url = formParam;
+              const options = this.getFormInitOptions(formParam, form);
+              this.instance.setUrl(formParam, options);
               this.instance.nosubmit = false;
               this._form = this.instance.form = form;
               if (submission) {

diff --git a/src/Formio.unit.js b/src/Formio.unit.js
@@ -2224,6 +2224,48 @@ describe('Formio.js Tests', () => {
           ];
         }
       },
+      {
+        name: 'Should return correct options for form url with Subdirectories path',
+        test() {
+          let form = new Formio.Form();
+          let options = form.getFormInitOptions('http://localhost:3000/fakeproject/fakeform', { path: 'fakeform' });
+          assert.deepEqual(options, {
+            base: 'http://localhost:3000',
+            project: 'http://localhost:3000/fakeproject',
+          });
+
+          form = new Formio.Form();
+          options = form.getFormInitOptions(`${Formio.baseUrl}/fakeproject/fakeform`, { path: 'fakeform' });
+          assert.deepEqual(options, {});
+        }
+      },
+      {
+        name: 'Should set correct formio base and project url for form with Subdirectories path',
+        test() {
+          const formElement = document.createElement('div');
+          return Formio.createForm(formElement, 'http://localhost:3000/fakeproject/fakeform')
+            .then((form) => {
+              assert.equal(form.formio.base, 'http://localhost:3000');
+              assert.equal(form.formio.projectUrl, 'http://localhost:3000/fakeproject');
+            });
+        },
+        mock() {
+          return {
+            url: 'http://localhost:3000/fakeproject/fakeform',
+            method: 'GET',
+            response() {
+              return {
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: {
+                  path: 'fakeform',
+                }
+              };
+            }
+          };
+        },
+      },
     ];
 
     tests.forEach(testCapability);

diff --git a/src/components/form/Form.js b/src/components/form/Form.js
@@ -487,7 +487,13 @@ export default class FormComponent extends Component {
     }
     else if (this.formSrc) {
       this.subFormLoading = true;
-      return (new Formio(this.formSrc)).loadForm({ params: { live: 1 } })
+      const options = this.root.formio?.base && this.root.formio?.projectUrl
+        ? {
+            base: this.root.formio.base,
+            project: this.root.formio.projectUrl,
+          }
+        : {};
+      return (new Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })
         .then((formObj) => {
           this.formObj = formObj;
           if (this.options.pdf && this.component.useOriginalRevision) {
@@ -688,7 +694,13 @@ export default class FormComponent extends Component {
     if (shouldLoadSubmissionById) {
       const formId = submission.form || this.formObj.form || this.component.form;
       const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
-      this.subForm.setUrl(submissionUrl, this.options);
+      const options = this.root.formio?.base && this.root.formio?.projectUrl
+      ? {
+          base: this.root.formio.base,
+          project: this.root.formio.projectUrl,
+        }
+      : {};
+      this.subForm.setUrl(submissionUrl, { ...this.options, ...options });
       this.subForm.loadSubmission().catch((err) => {
         console.error(`Unable to load subform submission ${submission._id}:`, err);
       });