Skip to content

Commit 3ef95dc

Browse files
natalialuzuriaganatalialuzuriaga
authoredDec 11, 2024··
Merge pull request #2 from DSACMS/nat/mvp
Created MVP
2 parents 5daeef4 + db918f0 commit 3ef95dc

File tree

5 files changed

+216
-0
lines changed

5 files changed

+216
-0
lines changed
 

‎form.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html>
2+
<head>
3+
<!-- USWDS not working -->
4+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
5+
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
6+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css"> -->
7+
<!-- <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css"> -->
8+
<!-- <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css"> -->
9+
<!-- <link rel="stylesheet" href="https://unpkg.com/formiojs@3.0.0-alpha.13/dist/formio.full.min.css"> -->
10+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script> -->
11+
<!-- <script src="https://cdn.form.io/formiojs/formio.form.min.js"></script> -->
12+
<!-- <script src="https://cdn.form.io/uswds/uswds.min.js"></script> -->
13+
<!-- <script src="https://cdn.form.io/formiojs/formio.full.js"></script> -->
14+
<!-- <script src="https://cdn.form.io/js/formio.embed.js"></script> -->
15+
16+
<!-- Uses bootstrap for now -->
17+
<link
18+
rel="stylesheet"
19+
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
20+
/>
21+
<link
22+
rel="stylesheet"
23+
href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
24+
/>
25+
26+
<!-- Working Form.io CDN -->
27+
<script src="https://unpkg.com/formiojs@3.0.0-alpha.13/dist/formio.full.min.js"></script>
28+
</head>
29+
<body>
30+
<div id="formio"></div>
31+
<script src="js/generateFormComponents.js"></script>
32+
<script src="js/formDataToJson.js"></script>
33+
<script type="text/javascript">
34+
createFormComponents()
35+
.then((components) => {
36+
Formio.createForm(document.getElementById("formio"), {
37+
display: "form",
38+
theme: "primary",
39+
settings: {
40+
pdf: {
41+
id: "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
42+
src: "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
43+
},
44+
},
45+
components: components,
46+
}).then(function (form) {
47+
form.on("submit", function (submission) {
48+
console.log("form submission here:", submission);
49+
downloadFile(submission.data);
50+
});
51+
});
52+
})
53+
.catch((error) => {
54+
console.error("Error creating components:", error);
55+
});
56+
</script>
57+
</body>
58+
</html>

‎js/formDataToJson.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// Retrieves file and returns as json object
2+
async function retrieveFile(filePath) {
3+
try {
4+
const response = await fetch(filePath);
5+
6+
if (!response.ok) {
7+
throw new Error("Network response was not ok");
8+
}
9+
// Returns file contents in a json format
10+
return await response.json();
11+
} catch (error) {
12+
console.error("There was a problem with the fetch operation:", error);
13+
return null;
14+
}
15+
}
16+
17+
// Populates blank code.json object with values from form
18+
function populateObject(data, blankObject) {
19+
for (let key in data) {
20+
console.log("current key", key);
21+
console.log("check if value exists", data.hasOwnProperty(key));
22+
if (blankObject.hasOwnProperty(key)) {
23+
if (typeof data[key] === "object" && data[key] !== null) {
24+
// If object, recursively populate
25+
// TODO: test out for permissions and description objects
26+
populateObject(data[key], blankObject[key]);
27+
} else {
28+
// Add value
29+
blankObject[key] = data[key];
30+
}
31+
}
32+
}
33+
}
34+
35+
async function populateCodeJson(data) {
36+
// Path to the blank json file
37+
const filePath = "schemas/template-code.json";
38+
39+
let codeJson = await retrieveFile(filePath);
40+
41+
if (codeJson) {
42+
populateObject(data, codeJson);
43+
} else {
44+
console.error("Failed to retrieve JSON data.");
45+
}
46+
47+
console.log("FINAL CODE JSON HERE", codeJson);
48+
return codeJson;
49+
}
50+
51+
// Creates code.json and triggers file download
52+
async function downloadFile(data) {
53+
delete data.submit;
54+
const codeJson = await populateCodeJson(data);
55+
56+
const jsonString = JSON.stringify(codeJson, null, 2);
57+
const blob = new Blob([jsonString], { type: "application/json" });
58+
59+
// Create anchor element and create download link
60+
const link = document.createElement("a");
61+
link.href = URL.createObjectURL(blob);
62+
link.download = "code.json";
63+
64+
// Trigger the download
65+
link.click();
66+
}
67+
68+
window.downloadFile = downloadFile;

‎js/generateFormComponents.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Retrieves file and returns as json object
2+
async function retrieveFile(filePath) {
3+
try {
4+
const response = await fetch(filePath);
5+
6+
// Check if the response is OK (status code 200)
7+
if (!response.ok) {
8+
throw new Error("Network response was not ok");
9+
}
10+
// Return the parsed JSON content
11+
return await response.json();
12+
} catch (error) {
13+
console.error("There was a problem with the fetch operation:", error);
14+
return null;
15+
}
16+
}
17+
18+
// Creates Form.io component based on json fields
19+
// Supports text field for now
20+
// TODO: Create components for number, select, and multi-select
21+
function createComponent(fieldName, fieldObject) {
22+
switch (fieldObject["type"]) {
23+
case "string":
24+
return {
25+
type: "textfield",
26+
key: fieldName,
27+
label: fieldName,
28+
input: true,
29+
tooltip: fieldObject["description"],
30+
description: fieldObject["description"],
31+
};
32+
default:
33+
break;
34+
}
35+
}
36+
37+
// Iterates through each json field and creates component array for Form.io
38+
async function createFormComponents() {
39+
let components = [];
40+
let formFields = {};
41+
42+
const filePath = "schemas/schema.json";
43+
let jsonData = await retrieveFile(filePath);
44+
console.log("JSON Data:", jsonData);
45+
46+
formFields = jsonData["properties"];
47+
console.log("form Fields:", formFields);
48+
49+
for (const key in formFields) {
50+
console.log(`${key}:`, formFields[key]);
51+
var fieldComponent = createComponent(key, formFields[key]);
52+
components.push(fieldComponent);
53+
}
54+
55+
// Add submit button to form
56+
components.push({
57+
type: "button",
58+
label: "Submit",
59+
key: "submit",
60+
disableOnInvalid: true,
61+
input: true,
62+
tableView: false,
63+
});
64+
65+
console.log(components);
66+
67+
return components;
68+
}
69+
70+
window.createFormComponents = createFormComponents;

‎schemas/schema.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"$schema": "http://json-schema.org/draft-04/schema#",
3+
"title": "CMS Code.json Metadata",
4+
"description": "A metadata standard for software repositories of CMS",
5+
"type": "object",
6+
"properties": {
7+
"name": {
8+
"type": "string",
9+
"description": "Name of the project or software"
10+
},
11+
"softwareDescription": {
12+
"type": "string",
13+
"description": "project description here"
14+
}
15+
}
16+
}

‎schemas/template-code.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "",
3+
"softwareDescription": ""
4+
}

0 commit comments

Comments
 (0)
Please sign in to comment.