Refactor event handlers and include classList polyfill

This commit is contained in:
Preston Doman 2019-02-02 15:02:09 -08:00
parent 2a2f8011b9
commit 1066e50cc7
2 changed files with 20 additions and 22 deletions

View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
<link rel="shortcut icon" href="img/favicon.ico">
<title>Reimbursinator</title>
</head>
@ -45,11 +46,13 @@
<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>
<tr>
<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>
</tr>
</thead>
<tbody>
</tbody>

View file

@ -80,12 +80,6 @@ function createFormGroup(key, field) {
formGroup.appendChild(label);
break;
case "date":
input.type = "datetime";
input.value = field.value;
input.classList.add("form-control");
formGroup.appendChild(label);
formGroup.appendChild(input);
break;
case "decimal":
input.type = "text";
input.value = field.value;
@ -172,7 +166,6 @@ function createEditReportForm(parsedData) {
accordion.classList.add("accordion");
accordion.id = "editReportAccordion";
// Traverse the report's sections array
const sections = parsedData.sections;
for (let key in sections) {
@ -259,9 +252,9 @@ function displayListOfReports(parsedData) {
if (state === "created") {
// Edit button
dateSubmitted = "TBD";
actionButton.classList.add("btn-primary");
actionButton.classList.add("btn-primary", "edit-report-button"); // Add event listener class
actionButton.innerHTML = "Edit";
actionButton.addEventListener("click", openEditReportForm);
//actionButton.addEventListener("click", openEditReportForm);
} else {
// View button
dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
@ -279,15 +272,17 @@ function displayListOfReports(parsedData) {
}
}
function getReportHistory(event) {
document.addEventListener("DOMContentLoaded", function(event) {
const url = getEndpointDomain() + "api/v1/reports";
getDataFromEndpoint(url, displayListOfReports);
}
});
function openEditReportForm(event) {
const url = getEndpointDomain() + "api/v1/report/" + this.dataset.rid;
getDataFromEndpoint(url, createEditReportForm);
}
document.addEventListener("click", function(event) {
if (event.target && event.target.classList.contains("edit-report-button")) {
console.log("Edit button clicked");
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
getDataFromEndpoint(url, createEditReportForm);
}
document.addEventListener("DOMContentLoaded", getReportHistory);
// TODO: Add view report
});