Added functionality to create and download code.json using form data

natalialuzuriaga · natalialuzuriaga · commit bbf9e68e5bf4 · 2024-12-03T08:48:58.000-08:00
Signed-off-by: Natalia Luzuriaga &lt;natalia.luzuriaga@cms.hhs.gov&gt;
diff --git a/form.html b/form.html
@@ -23,6 +23,7 @@
     <body>
         <div id="formio"></div>
         <script src="js/generateFormComponents.js"></script>
+        <script src="js/formDataToJson.js"></script>
         <script type="text/javascript">
             createFormComponents().then(components => {
                 Formio.createForm(document.getElementById('formio'), {
@@ -36,6 +37,12 @@
                     },
                     "components": components
                 })
+                .then(function(form) {
+                    form.on('submit', function(submission) {
+                        console.log("form submission here:", submission);
+                        downloadFile(submission.data);
+                    });
+                })
             })
             .catch(error => {
                 console.error("Error creating components:", error);
diff --git a/js/formDataToJson.js b/js/formDataToJson.js
@@ -0,0 +1,68 @@
+// Retrieves file and returns as json object
+async function retrieveFile(filePath) {
+    try {
+        const response = await fetch(filePath);
+
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        // Returns file contents in a json format
+        return await response.json();
+    } catch (error) {
+        console.error('There was a problem with the fetch operation:', error);
+        return null;
+    }
+}
+
+// Populates blank code.json object with values from form
+function populateObject(data, blankObject) {
+    for (let key in data) {
+        console.log("current key", key)
+        console.log("check if value exists", data.hasOwnProperty(key))
+        if (blankObject.hasOwnProperty(key)) {
+            if (typeof data[key] === 'object' && data[key] !== null) {
+                // If object, recursively populate
+                // TODO: test out for permissions and description objects
+                populateObject(data[key], blankObject[key]);
+            } else {
+                // Add value
+                blankObject[key] = data[key];
+            }
+        }
+    }
+}
+
+async function populateCodeJson(data) {
+    // Path to the blank json file
+    const filePath = 'schemas/template-code.json';
+
+    var codeJson = await retrieveFile(filePath);
+
+    if (codeJson) {
+        populateObject(data, codeJson);
+    } else {
+        console.error("Failed to retrieve JSON data.");
+    }
+
+    console.log("FINAL CODE JSON HERE", codeJson);
+    return codeJson;   
+}
+
+// Creates code.json and triggers file download
+async function downloadFile(data){
+    delete data.submit;
+    const codeJson = await populateCodeJson(data);
+
+    const jsonString = JSON.stringify(codeJson, null, 2);
+    const blob = new Blob([jsonString], { type: 'application/json' });
+
+    // Create anchor element and create download link
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = "code.json";
+
+    // Trigger the download
+    link.click();
+}
+
+window.downloadFile = downloadFile;
