From 2a2f8011b90552d43d9454d2cf89cd7a8299fae4 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sat, 2 Feb 2019 14:22:18 -0800 Subject: [PATCH] Refactor table display --- front/static/edit_report.html | 11 ++++ front/static/js/viewHistory.js | 114 ++++++++++++--------------------- 2 files changed, 51 insertions(+), 74 deletions(-) diff --git a/front/static/edit_report.html b/front/static/edit_report.html index 57c0041..07c4ded 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -43,6 +43,17 @@

Your Report History

+ + + + + + + + + + +
diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index e4e78d2..371d9b1 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -223,93 +223,59 @@ function createEditReportForm(parsedData) { } function displayListOfReports(parsedData) { - const cardBody = document.querySelector(".card-body"); - const table = document.createElement("table"); const reports = parsedData.reports; - let reportsAdded = 0; - // Create report table - for (let i = 0; i < reports.length; i++) { - let title = reports[i].title; - let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US"); - let state = reports[i].state; - let dateSubmitted; - let rid = reports[i].report_pk; - - // Create edit/view button - let actionButton = document.createElement("button"); - actionButton.type = "submit"; - actionButton.setAttribute("data-rid", rid); - actionButton.classList.add("btn"); - - if (state === "created") { - // Edit button - dateSubmitted = "TBD"; - actionButton.classList.add("btn-primary"); - actionButton.innerHTML = "Edit"; - actionButton.addEventListener("click", openEditReportForm); - } else { - // View button - dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); - actionButton.classList.add("btn-success"); - actionButton.innerHTML = "View"; - } - - // Insert data into the table object - let bodyRow = table.insertRow(i); - bodyRow.insertCell(0).innerHTML = title; - bodyRow.insertCell(1).innerHTML = dateCreated; - - let stateCell = bodyRow.insertCell(2); - stateCell.innerHTML = state; - stateCell.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays - - let dateSubmittedCell = bodyRow.insertCell(3); - dateSubmittedCell.innerHTML = dateSubmitted; - dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays - - bodyRow.insertCell(4).appendChild(actionButton); - reportsAdded++; - } - - if (reportsAdded === 0) { - // Report list is empty + if (reports.length === 0) { + const cardBody = document.querySelector(".card-body"); const p = document.createElement("p"); p.innerHTML = "No reports found."; cardBody.appendChild(p); } else { - // Report list exists and table rows have been created - // Create table header, add it to the table, and append the result to the card body + const table = document.querySelector("table"); + const tbody = document.querySelector("tbody"); - const tr = document.createElement("tr"); + // Insert data into the table row + for (let i = 0; i < reports.length; i++) { + let title = reports[i].title; + let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US"); + let state = reports[i].state; + let dateSubmitted; + let rid = reports[i].report_pk; - const headTitle = document.createElement("th"); - headTitle.innerHTML = "Title"; - tr.appendChild(headTitle); + let bodyRow = tbody.insertRow(i); + bodyRow.insertCell(0).innerHTML = title; + bodyRow.insertCell(1).innerHTML = dateCreated; - const headDateCreated = document.createElement("th"); - headDateCreated.innerHTML = "Date Created"; - tr.appendChild(headDateCreated); + let stateCell = bodyRow.insertCell(2); + stateCell.innerHTML = state; + stateCell.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays - const headState = document.createElement("th"); - headState.innerHTML = "State"; - headState.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays - tr.appendChild(headState); + // Create edit/view button + let actionButton = document.createElement("button"); + actionButton.type = "submit"; + actionButton.setAttribute("data-rid", rid); + actionButton.classList.add("btn"); - const headDateSubmitted = document.createElement("th") - headDateSubmitted.innerHTML = "Date Submitted"; - headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays - tr.appendChild(headDateSubmitted); + if (state === "created") { + // Edit button + dateSubmitted = "TBD"; + actionButton.classList.add("btn-primary"); + actionButton.innerHTML = "Edit"; + actionButton.addEventListener("click", openEditReportForm); + } else { + // View button + dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); + actionButton.classList.add("btn-success"); + actionButton.innerHTML = "View"; + } - const headAction = document.createElement("th") - headAction.innerHTML = "Action"; - tr.appendChild(headAction); + let dateSubmittedCell = bodyRow.insertCell(3); + dateSubmittedCell.innerHTML = dateSubmitted; + dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays + bodyRow.insertCell(4).appendChild(actionButton); + } - const thead = document.createElement("thead"); - thead.appendChild(tr); - table.prepend(thead); - table.classList.add("table", "table-striped", "table-responsive-sm"); - cardBody.appendChild(table); + table.style.visibility = "visible"; } }