Skip to content

Commit

Permalink
Render the form with unique ID for each field #12
Browse files Browse the repository at this point in the history
  • Loading branch information
@JetamZ
JetamZ committed Dec 6, 2024
1 parent 4f66d2b commit d3ed092
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 51 deletions.
2 changes: 2 additions & 0 deletions WebApp/form_structure.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"title": "Steps",
"label": "step",
"type": "REPEATABLE",
"min_occur":1,
"fields": [
{
"id": "goal",
Expand Down Expand Up @@ -89,6 +90,7 @@
{
"label": "Operator",
"inputType": "select",
"prefix":"condOperator",
"choices": ["=", "!=", ">", "<", ">=", "<=", "LIKE", "IN"]
},
{
Expand Down
127 changes: 76 additions & 51 deletions WebApp/scripts/dynamic_form_render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,16 @@ function renderForm(schema) {

form.appendChild(sectionDiv);
});

const generateQueryButton = document.createElement("button");
generateQueryButton.textContent = "Generate JSON";
generateQueryButton.type="button";
generateQueryButton.onclick = () => {
const query = generateQueryFromForm(schema);
console.log("Generated Query:", JSON.stringify(query, null, 2));
};

form.appendChild(generateQueryButton)
}

function renderSimpleField(container, field) {
Expand Down Expand Up @@ -78,6 +88,7 @@ function renderSimpleField(container, field) {

function renderRepeatableField(container, field) {
// Function for rendering REPEATABLE field / section.
let subfieldsCount = 0;
const fieldDiv = document.createElement("div");
fieldDiv.classList.add(field.id);
const label = document.createElement("h3");
Expand All @@ -92,57 +103,55 @@ function renderRepeatableField(container, field) {
repeatableContainer.classList.add("repeatable-container");

addButton.onclick = () => {
const rowDiv = document.createElement("div");
rowDiv.classList.add("repeatable-row");

if (field.fields) {
// If it's a REPEATABLE section with nested fields
field.fields.forEach((nestedField) => {
switch (nestedField.type) {
case "SIMPLE":
renderSimpleField(rowDiv, nestedField);
break;
case "REPEATABLE":
renderRepeatableField(rowDiv, nestedField);
break;
case "COMPLEX":
renderComplexField(rowDiv, nestedField);
break;
}
});
} else if (field.columns) {
// Render REPEATABLE rows with multiple columns
field.columns.forEach((column) => {
const input = document.createElement(column.inputType === "select" ? "select" : "input");
if (column.inputType === "select") {
column.choices.forEach((choice) => {
const option = document.createElement("option");
option.value = choice;
option.textContent = choice;
input.appendChild(option);
});
} else {
input.type = column.inputType;
input.placeholder = column.label;
}
rowDiv.appendChild(input);
});
} else {
// Render a simple REPEATABLE field
const input = document.createElement("input");
input.type = field.inputType;
input.placeholder = field.placeholder || "";
rowDiv.appendChild(input);
}

const removeButton = document.createElement("button");
removeButton.textContent = "-";
removeButton.type = "button";
removeButton.onclick = () => rowDiv.remove();

rowDiv.appendChild(removeButton);
repeatableContainer.appendChild(rowDiv);
};
const rowDiv = document.createElement("div");
rowDiv.classList.add("repeatable-row");

if (field.fields) {
// If it's a REPEATABLE section with nested fields
field.fields.forEach((nestedField) => {
const uniqueId = `${nestedField.id}_${field.id}_${subfieldsCount}`;
nestedField.id = uniqueId; // Ensure unique ID
renderField(rowDiv, nestedField); // Use a common function for rendering
});
} else if (field.columns) {
// Render REPEATABLE rows with multiple columns
field.columns.forEach((column, index) => {
const input = document.createElement(column.inputType === "select" ? "select" : "input");
if (column.inputType === "select") {
column.choices.forEach((choice) => {
const option = document.createElement("option");
option.value = choice;
option.textContent = choice;
input.appendChild(option);
});
} else {
input.type = column.inputType;
input.placeholder = column.label;
}
const uniqueId = `${field.id}_col_${index}_${subfieldsCount}`;
input.id = uniqueId; // Ensure unique ID
input.dataset.fieldId = field.id; // Use data attribute to group related inputs
rowDiv.appendChild(input);
});
} else {
// Render a simple REPEATABLE field
const input = document.createElement("input");
input.type = field.inputType;
input.placeholder = field.placeholder || "";
const uniqueId = `${field.id}_${subfieldsCount}`;
input.id = uniqueId; // Ensure unique ID
rowDiv.appendChild(input);
}

const removeButton = document.createElement("button");
removeButton.textContent = "-";
removeButton.type = "button";
removeButton.onclick = () => rowDiv.remove();

rowDiv.appendChild(removeButton);
repeatableContainer.appendChild(rowDiv);
subfieldsCount++;
};

// fieldDiv.appendChild(label);
fieldDiv.appendChild(repeatableContainer);
Expand Down Expand Up @@ -173,6 +182,22 @@ function renderComplexField(container, field) {
container.appendChild(complexDiv);
}

function renderField(container, field) {
switch (field.type) {
case "SIMPLE":
renderSimpleField(container, field);
break;
case "REPEATABLE":
renderRepeatableField(container, field);
break;
case "COMPLEX":
renderComplexField(container, field);
break;
default:
console.warn(`Unknown field type: ${field.type}`);
}
}

document.addEventListener("DOMContentLoaded", () => {
fetch("form_structure.json")
.then((response) => {
Expand Down

0 comments on commit d3ed092

Please sign in to comment.