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

Fix Bootstrap styling for form groups

Browse source
This commit is contained in:
Preston Doman 2019-01-31 16:27:29 -08:00
parent 41f0b78aa5
commit 74ce7f5c73
1 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -55,13 +55,13 @@ function getDataFromEndpoint(url, callback) {
} }
function createFormGroup(key, field) { function createFormGroup(key, field) {
let formGroup = document.createElement("div") const formGroup = document.createElement("div")
formGroup.classList.add("form-group"); formGroup.classList.add("form-group");
let label = document.createElement("label"); const label = document.createElement("label");
label.innerHTML = field.label; label.innerHTML = field.label;
label.setAttribute("for", key); label.setAttribute("for", key);
let input = document.createElement("input"); const input = document.createElement("input");
input.name = key; input.name = key;
input.id = key; input.id = key;
@ -70,20 +70,25 @@ function createFormGroup(key, field) {
input.type = "checkbox"; input.type = "checkbox";
if (field.value === true) if (field.value === true)
input.setAttribute("checked", "checked"); input.setAttribute("checked", "checked");
formGroup.appendChild(input); formGroup.appendChild(input); // Reversed order compared to others
formGroup.appendChild(label); formGroup.appendChild(label);
formGroup.classList.add("form-check");
label.classList.add("form-check-label");
input.classList.add("form-check-input");
break; break;
case "date": case "date":
input.type = "datetime"; input.type = "datetime";
input.value = field.value; input.value = field.value;
formGroup.appendChild(label); formGroup.appendChild(label);
formGroup.appendChild(input); formGroup.appendChild(input);
input.classList.add("form-control");
break; break;
case "decimal": case "decimal":
input.type = "text"; input.type = "text";
input.value = field.value; input.value = field.value;
formGroup.appendChild(label); formGroup.appendChild(label);
formGroup.appendChild(input); formGroup.appendChild(input);
input.classList.add("form-control");
break; break;
case "file": case "file":
input.type = "file"; input.type = "file";
@ -93,6 +98,7 @@ function createFormGroup(key, field) {
formGroup.appendChild(label); formGroup.appendChild(label);
formGroup.appendChild(input); formGroup.appendChild(input);
formGroup.appendChild(link); formGroup.appendChild(link);
input.classList.add("form-control-file");
break; break;
default: default:
break; break;
@ -110,7 +116,7 @@ function createCollapsibleCard(key, sectionTitle) {
// Create h2, button. Append button to h2, h2 to header, and header to card // Create h2, button. Append button to h2, h2 to header, and header to card
const h2 = document.createElement("h2"); const h2 = document.createElement("h2");
h2.classList.add("mb-0"); //h2.classList.add("mb-0");
const button = document.createElement("button"); const button = document.createElement("button");
button.classList.add("btn", "btn-link"); button.classList.add("btn", "btn-link");
button.type = "button"; button.type = "button";
@ -124,13 +130,17 @@ function createCollapsibleCard(key, sectionTitle) {
return card; return card;
} }
function createCollapsibleCardBody(key, form) { function createCollapsibleCardBody(key, form, sectionDescription) {
// Create wrapper div
const div = document.createElement("div"); const div = document.createElement("div");
div.classList.add("collapse", "show"); div.classList.add("collapse", "show");
div.setAttribute("data-parent", "#editReportAccordion"); div.setAttribute("data-parent", "#editReportAccordion");
div.id = "collapse" + key; div.id = "collapse" + key;
// Create card body. Append form to body, body to wrapper div
const cardBody = document.createElement("div"); const cardBody = document.createElement("div");
cardBody.classList.add("card-body"); cardBody.classList.add("card-body");
cardBody.insertAdjacentHTML("beforeend", sectionDescription);
cardBody.appendChild(form); cardBody.appendChild(form);
div.appendChild(cardBody); div.appendChild(cardBody);
@ -170,10 +180,6 @@ function createEditReportForm(parsedData) {
// Create a new collapsible card // Create a new collapsible card
let card = createCollapsibleCard(key, section.title) let card = createCollapsibleCard(key, section.title)
// Add the section title and description to the card
let sectionDescription = section.html_description; // html_description should be updated to a standard string
card.insertAdjacentHTML("beforeend", sectionDescription);
// 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"); form.classList.add("form");
@ -194,10 +200,9 @@ function createEditReportForm(parsedData) {
form.appendChild(formGroup); form.appendChild(formGroup);
} }
// Create collapsible card body and append the form to it // Create collapsible card body, append form to it, append card to accordion
let cardBody = createCollapsibleCardBody(key, form); let cardBody = createCollapsibleCardBody(key, form, section.html_description);
card.appendChild(cardBody); card.appendChild(cardBody);
accordion.appendChild(card); accordion.appendChild(card);
} }