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

Refactor table display

Browse source
This commit is contained in:
Preston Doman 2019-02-02 14:22:18 -08:00
parent 78c9ec522d
commit 2a2f8011b9
2 changed files with 51 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
front/static/edit_report.html
View file

@ -43,6 +43,17 @@
<h3>Your Report History</h3> <h3>Your Report History</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<table class="table table-striped table-responsive-sm" style="visibility:hidden">
<thead>
<th>Title</th>
<th>Date Created</th>
<th class="d-none d-lg-table-cell">State</th>
<th class="d-none d-md-table-cell">Date Submitted</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>

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

@ -223,93 +223,59 @@ function createEditReportForm(parsedData) {
} }
function displayListOfReports(parsedData) { function displayListOfReports(parsedData) {
const cardBody = document.querySelector(".card-body");
const table = document.createElement("table");
const reports = parsedData.reports; const reports = parsedData.reports;
let reportsAdded = 0;
// Create report table if (reports.length === 0) {
for (let i = 0; i < reports.length; i++) { const cardBody = document.querySelector(".card-body");
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
const p = document.createElement("p"); const p = document.createElement("p");
p.innerHTML = "No reports found."; p.innerHTML = "No reports found.";
cardBody.appendChild(p); cardBody.appendChild(p);
} else { } else {
// Report list exists and table rows have been created const table = document.querySelector("table");
// Create table header, add it to the table, and append the result to the card body 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"); let bodyRow = tbody.insertRow(i);
headTitle.innerHTML = "Title"; bodyRow.insertCell(0).innerHTML = title;
tr.appendChild(headTitle); bodyRow.insertCell(1).innerHTML = dateCreated;
const headDateCreated = document.createElement("th"); let stateCell = bodyRow.insertCell(2);
headDateCreated.innerHTML = "Date Created"; stateCell.innerHTML = state;
tr.appendChild(headDateCreated); stateCell.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays
const headState = document.createElement("th"); // Create edit/view button
headState.innerHTML = "State"; let actionButton = document.createElement("button");
headState.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays actionButton.type = "submit";
tr.appendChild(headState); actionButton.setAttribute("data-rid", rid);
actionButton.classList.add("btn");
const headDateSubmitted = document.createElement("th") if (state === "created") {
headDateSubmitted.innerHTML = "Date Submitted"; // Edit button
headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays dateSubmitted = "TBD";
tr.appendChild(headDateSubmitted); 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") let dateSubmittedCell = bodyRow.insertCell(3);
headAction.innerHTML = "Action"; dateSubmittedCell.innerHTML = dateSubmitted;
tr.appendChild(headAction); 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"); table.style.visibility = "visible";
thead.appendChild(tr);
table.prepend(thead);
table.classList.add("table", "table-striped", "table-responsive-sm");
cardBody.appendChild(table);
} }
} }