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

Add modal popup for the edit button

Browse source
This commit is contained in:
Preston Doman 2019-01-29 14:59:28 -08:00
parent d8aee961ca
commit 9c633d6ac5
2 changed files with 45 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,22 +29,29 @@ function displayListOfReports(listOfReports) {
const cardBody = document.querySelector(".card-body");
const table = document.createElement("table");
const reports = listOfReports.reports;
let rowsInserted = 0;
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;
// Create edit/view button
let actionButton = document.createElement("button");
actionButton.type = "submit";
actionButton.setAttribute("data-toggle", "modal");
actionButton.classList.add("btn");
if (state === "created") {
// Edit button
dateSubmitted = "TBD";
actionButton.classList.add("btn-primary");
actionButton.innerHTML = "Edit";
actionButton.setAttribute("data-target", "#editReportModal");
} else {
// View button
dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
actionButton.classList.add("btn-success");
actionButton.innerHTML = "View";
@ -64,16 +71,17 @@ function displayListOfReports(listOfReports) {
dateSubmittedCell.classList.add("d-none", "d-md-table-cell");
bodyRow.insertCell(4).appendChild(actionButton);
rowsInserted++;
reportsAdded++;
}
if (rowsInserted === 0) {
// Empty report list
if (reportsAdded === 0) {
// Report list is empty
const p = document.createElement("p");
p.innerHTML = "No reports found.";
cardBody.appendChild(p);
} else {
// Create table header, add to table, and append result to the card body
// 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 thead = document.createElement("thead");
const tr = document.createElement("tr");
@ -87,12 +95,12 @@ function displayListOfReports(listOfReports) {
const headState = document.createElement("th");
headState.innerHTML = "State";
headState.classList.add("d-none", "d-lg-table-cell");
headState.classList.add("d-none", "d-lg-table-cell"); // Column shown only on large displays
tr.appendChild(headState);
const headDateSubmitted = document.createElement("th")
headDateSubmitted.innerHTML = "Date Submitted";
headDateSubmitted.classList.add("d-none", "d-md-table-cell");
headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column only shown on medium and larger displays
tr.appendChild(headDateSubmitted);
const headAction = document.createElement("th")

30
front/static/view_history.html
View file

@ -52,6 +52,36 @@
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open modal for @mdo</button>
<div class="modal" id="editReportModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script src="js/logout.js"></script>
<script src="js/viewHistory.js"></script>
</body>