Merge pull request #12 from DSACMS/nat/objs

natalialuzuriaga · web-flow · commit df09c7dc4785 · 2025-01-08T13:51:58.000-05:00
Components: Added Data Grid component &amp; Updated CDNs
diff --git a/form.html b/form.html
@@ -14,21 +14,13 @@
 		<!-- <script src="https://cdn.form.io/js/formio.embed.js"></script> -->
 
 		<!-- Uses bootstrap for now -->
-		<link
-			rel="stylesheet"
-			href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css"
-		/>
+		<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
 
 		<!-- Working Form.io CDN -->
-		<script src="https://unpkg.com/formiojs@3.0.0-alpha.13/dist/formio.full.min.js"></script>
-	</head>
-	<body>
-		<div id="form-header"></div>
-		<div id="formio"></div>
+		<script src="https://unpkg.com/formiojs@4.21.6/dist/formio.full.min.js"></script>
+		<link href="https://cdn.jsdelivr.net/npm/formiojs@4.21.6/dist/formio.full.min.css" rel="stylesheet">
+
+		<!-- Render the form -->
 		<script src="js/generateFormComponents.js"></script>
 		<script src="js/formDataToJson.js"></script>
 		<script type="text/javascript">
@@ -55,5 +47,9 @@
 					console.error("Error creating components:", error);
 				});
 		</script>
+	</head>
+	<body>
+		<div id="form-header"></div>
+		<div id="formio"></div>
 	</body>
 </html>
diff --git a/js/generateFormComponents.js b/js/generateFormComponents.js
@@ -26,6 +26,10 @@ function determineType(field) {
 	if (field.type === "object") {
 		return "container";
 	} else if (field.type === "array") {
+		// Array of objects
+		if (field.items.type === "object") {
+			return "datagrid"
+		}
 		// Multi-select
 		if (field.items.hasOwnProperty("enum")) {
 			return "selectboxes";
@@ -37,9 +41,9 @@ function determineType(field) {
 		return "radio";
 	} else if (field.type === "number") {
 		return "number";
-	} else if (field.type === "boolean"){
+	} else if (field.type === "boolean") {
 		return "select-boolean";
-	} else if (field.type === "string") {
+	} else if (field.type === "string" || field.type.includes("string")) {
 		if (field.format == "date-time") {
 			return "datetime";
 		}
@@ -100,7 +104,8 @@ function createComponent(fieldName, fieldObject) {
 				key: fieldName,
 				type: "radio",
 				input: true,
-				description: fieldObject["description"]
+				description: fieldObject["description"],
+				tooltip: fieldObject["description"]
 			};
 		case "selectboxes":
 			var options = transformArrayToOptions(fieldObject.items.enum);
@@ -184,43 +189,69 @@ function createComponent(fieldName, fieldObject) {
 				input: true,
 				components: []
 			};
+		case "datagrid":
+			return {
+				label: fieldName,
+				reorder: false,
+				addAnotherPosition: "bottom",
+				layoutFixed: false,
+				enableRowGroups: false,
+				initEmpty: false,
+				tableView: false,
+				defaultValue: [
+					{}
+				],
+				validateWhenHidden: false,
+				key: fieldName,
+				type: "datagrid",
+				input: true,
+				components: []
+			}; 
 		default:
 			break;
 	}
 }
 
+// Adds heading containing schema information
 function createFormHeading(title, description) {
 	const container = document.getElementById('form-header');
 	container.innerHTML = `<h1>${title}</h1>\n<h2>${description}</h2>`;
 }
 
+// Iterates through each json field and creates component array for Form.io
 function createAllComponents(schema, prefix = ""){
 	let components = [];
 
-	console.log("checking schema", schema);
-
 	if (schema.type === "object" && schema.properties) {
-        for (const [key, value] of Object.entries(schema.properties)) {
+
+		let items = schema.properties.hasOwnProperty("items") ? schema.properties.items : schema.properties
+
+        for (const [key, value] of Object.entries(items)) {
             
+			console.log("key at play:", key);
 			const fullKey = prefix ? `${prefix}.${key}` : key;
 
 			var fieldComponent = createComponent(key, value);
 
 			if (fieldComponent.type === "container") {
 				fieldComponent.components = createAllComponents(value, fullKey);
+			} 
+			else if (fieldComponent.type === "datagrid") {
+				fieldComponent.components = createAllComponents(value.items, fullKey);
 			}
+
 			components.push(fieldComponent);
         }
     }
 
     return components;
 }
 
-// Iterates through each json field and creates component array for Form.io
+// Creates complete form based on input json schema
 async function createFormComponents() {
 	let components = [];
 
-	const filePath = "schemas/schema.json";
+	const filePath = "schemas/schema-0.0.0.json";
 	let jsonData = await retrieveFile(filePath);
 	console.log("JSON Data:", jsonData);
 
diff --git a/schemas/schema-0.0.0.json b/schemas/schema-0.0.0.json
@@ -42,11 +42,6 @@
                         "items": {
                             "type": "object",
                             "properties": {
-                                "URL": {
-                                    "type": "string",
-                                    "format": "uri",
-                                    "description": "The URL of the release license"
-                                },
                                 "name": {
                                     "type": "string",
                                     "enum": [
@@ -66,11 +61,16 @@
                                         "None"
                                     ],
                                     "description": "An abbreviation for the name of the license"
+                                },
+                                "URL": {
+                                    "type": "string",
+                                    "format": "uri",
+                                    "description": "The URL of the release license"
                                 }
                             },
                             "required": [
-                                "url",
-                                "name"
+                                "name",
+                                "URL"
                             ]
                         }
                     },
diff --git a/schemas/template-code.json b/schemas/template-code.json
@@ -3,6 +3,7 @@
 	"description": "",
 	"longDescription": "",
 	"status": "",
+	"permissions": "",
 	"organization": "",
 	"repositoryURL": "",
 	"vcs": "",
