Refactor event handlers and include classList polyfill
This commit is contained in:
parent
2a2f8011b9
commit
1066e50cc7
2 changed files with 20 additions and 22 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue