Conservancy/reimbursinator
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix non-unique id bug on forms, inputs, etc

Browse source
This commit is contained in:
Preston Doman 2019-02-14 15:36:31 -08:00
parent 5a4312305c
commit 8706f998f5
1 changed files with 21 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
front/static/js/viewHistory.js
View file

@ -56,26 +56,28 @@ function makeAjaxRequest(method, url, callback, type, payload) {
} }
// Wraps a Bootstrap form group around a field // Wraps a Bootstrap form group around a field
function createFormGroup(field) { function createFormGroup(sectionId, field) {
const inputId = "section-" + sectionId + "-" + field.field_name;
const formGroup = document.createElement("div") const formGroup = document.createElement("div")
formGroup.classList.add("form-group", "row"); formGroup.classList.add("form-group", "row");
const label = document.createElement("label"); const label = document.createElement("label");
label.classList.add("col-sm-4", "col-form"); label.classList.add("col-sm-4", "col-form");
label.innerHTML = field.label + ": "; label.innerHTML = field.label + ": ";
label.setAttribute("for", field.field_name); label.setAttribute("for", inputId);
const div = document.createElement("div"); const div = document.createElement("div");
div.classList.add("col-sm-6"); div.classList.add("col-sm-6");
const input = document.createElement("input"); const input = document.createElement("input");
input.name = field.field_name; input.name = field.field_name;
input.id = field.field_name; input.id = inputId;
switch(field.field_type) { switch(field.field_type) {
case "boolean": case "boolean":
const select = document.createElement("select"); const select = document.createElement("select");
select.name = field.field_name; select.name = field.field_name;
select.id = inputId;
select.classList.add("form-control"); select.classList.add("form-control");
const yesOption = document.createElement("option"); const yesOption = document.createElement("option");
yesOption.innerHTML = "Yes"; yesOption.innerHTML = "Yes";
@ -140,7 +142,7 @@ function createFormGroup(field) {
return formGroup; return formGroup;
} }
function createCollapsibleCard(key, sectionTitle) { function createCollapsibleCard(sectionId, sectionTitle) {
// Create card and header // Create card and header
const card = document.createElement("div"); const card = document.createElement("div");
card.classList.add("card"); card.classList.add("card");
@ -153,7 +155,7 @@ function createCollapsibleCard(key, sectionTitle) {
button.classList.add("btn", "btn-link"); button.classList.add("btn", "btn-link");
button.type = "button"; button.type = "button";
button.setAttribute("data-toggle", "collapse"); button.setAttribute("data-toggle", "collapse");
button.setAttribute("data-target", "#collapse" + key); button.setAttribute("data-target", "#section-" + sectionId + "-collapse");
button.innerHTML = sectionTitle; button.innerHTML = sectionTitle;
h2.appendChild(button); h2.appendChild(button);
cardHeader.appendChild(h2); cardHeader.appendChild(h2);
@ -162,10 +164,10 @@ function createCollapsibleCard(key, sectionTitle) {
return card; return card;
} }
function createCollapsibleCardBody(key, form, type, sectionDescription, sectionCompleted) { function createCollapsibleCardBody(form, type, sectionId, sectionDescription, sectionCompleted) {
// Create wrapper div // Create wrapper div
const div = document.createElement("div"); const div = document.createElement("div");
div.id = "collapse" + key; div.id = "section-" + sectionId +"-collapse";
const sectionAlert = document.createElement("div"); const sectionAlert = document.createElement("div");
const cardBody = document.createElement("div"); const cardBody = document.createElement("div");
cardBody.classList.add("card-body"); cardBody.classList.add("card-body");
@ -227,40 +229,37 @@ function createReportForm(parsedData, type) {
// Traverse the report's sections array // Traverse the report's sections array
const sections = parsedData.sections; const sections = parsedData.sections;
for (let key in sections) { for (let i = 0; i < sections.length; i++) {
let section = sections[key]; let collapsibleCard = createCollapsibleCard(sections[i].id, sections[i].title)
let collapsibleCard = createCollapsibleCard(key, section.title)
// Create a new form with the section key index as id // Create a new form with the section key index as id
let form = document.createElement("form"); let form = document.createElement("form");
form.classList.add("form", "section-form"); form.classList.add("form", "section-form");
form.id = "form" + key; form.id = "section-" + sections[i].id +"-form";
form.setAttribute("data-rid", parsedData.report_pk); form.setAttribute("data-rid", parsedData.report_pk);
form.setAttribute("data-sid", section.id); form.setAttribute("data-sid", sections[i].id);
// Traverse the fields of this section // Traverse the fields of this section
let fields = section.fields; let fields = sections[i].fields;
for (let key in fields) { for (let j = 0; j < fields.length; j++) {
let field = fields[key];
console.log("Field label: " + field.label); console.log("Field label: " + fields[j].label);
console.log("Field type: " + field.field_type); console.log("Field type: " + fields[j].field_type);
console.log("Field value: " + field.value); console.log("Field value: " + fields[j].value);
// Create a form group for each field and add it to the form // Create a form group for each field and add it to the form
let formGroup = createFormGroup(field); form.appendChild(createFormGroup(sections[i].id, fields[j]));
form.appendChild(formGroup);
} }
// Add save button to the current form // Add save button to the current form
let saveButton = document.createElement("button"); let saveButton = document.createElement("button");
saveButton.innerHTML = "Save"; saveButton.innerHTML = "Save";
saveButton.type = "submit"; saveButton.type = "submit";
saveButton.classList.add("btn", "btn-primary", "save-section"); // TODO: add eventListener saveButton.classList.add("btn", "btn-primary", "save-section");
form.appendChild(saveButton); form.appendChild(saveButton);
// Create collapsible card body, append form to it, append card to accordion // Create collapsible card body, append form to it, append card to accordion
let cardBody = createCollapsibleCardBody(key, form, type, section.html_description, section.completed); let cardBody = createCollapsibleCardBody(form, type, sections[i].id, sections[i].html_description, sections[i].completed);
collapsibleCard.appendChild(cardBody); collapsibleCard.appendChild(cardBody);
accordion.appendChild(collapsibleCard); accordion.appendChild(collapsibleCard);
} }