Merge pull request #120: Add finalize and review buttons

Finalize and review buttons

front/static/edit_report.html

@@ -86,7 +86,8 @@
                 <div class="modal-footer">
                     <button type="button" class="btn btn-danger delete-report">Delete Report</button>
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary submit-report-button">Submit Report</button>
+                    <button type="button" class="btn btn-primary finalize-report">Finalize Report</button>
+                    <button type="button" class="btn btn-primary review-report">Submit for Review</button>
                 </div>
             </div>
         </div>

front/static/js/viewHistory.js

@@ -50,6 +50,15 @@ function makeAjaxRequest(method, url, callback, optional, payload) {
     xhr.send(payload);
 }
 
+function animateButton(button, buttonText) {
+    button.disabled = true;
+    button.innerHTML = "";
+    let span = document.createElement("span");
+    span.classList.add("spinner-border", "spinner-border-sm");
+    button.appendChild(span);
+    button.appendChild(document.createTextNode(buttonText));
+}
+
 function updateSection(parsedData, saveButton) {
     const sectionIdStr = "#section-" + parsedData.id + "-";
     const sectionState = document.querySelector(sectionIdStr + "state");
@@ -58,7 +67,6 @@ function updateSection(parsedData, saveButton) {
     // A completed section gets a header icon
     if (parsedData.completed) {
         const sectionAlert = collapseDiv.querySelector(".section-alert");
-        console.log(sectionAlert);
         if (sectionAlert) {
             collapseDiv.firstChild.removeChild(sectionAlert);
         }
@@ -311,9 +319,13 @@ function createReportForm(parsedData, type) {
         return;
     }
 
-    const submitButton = document.querySelector(".submit-report-button");
+    const reviewButton = document.querySelector(".review-report");
-    if (submitButton) {
+    if (reviewButton) {
-        submitButton.setAttribute("data-rid", parsedData.report_pk);
+        reviewButton.setAttribute("data-rid", parsedData.report_pk);
+    }
+    const finalizeButton = document.querySelector(".finalize-report");
+    if (finalizeButton) {
+        finalizeButton.setAttribute("data-rid", parsedData.report_pk);
     }
 
     while (modalBody.firstChild) {
@@ -521,13 +533,29 @@ document.addEventListener("click", function(event) {
             console.log("View button clicked");
             const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
             makeAjaxRequest("GET", url, displayReport);
-        } else if (event.target.classList.contains("submit-report-button")) {
+        } else if (event.target.classList.contains("review-report")) {
             event.preventDefault();
-            //const title = document.querySelector("#editReportModalLabel").textContent;
+            const result = confirm("Are you sure you want to submit this report for review?");
-            const result = confirm("Are you sure you want to submit the report ?");
             if (result) {
+                animateButton(event.target, "  Submitting...");
                 const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
                 makeAjaxRequest("PUT", url, function(parsedData) {
+                    event.target.disabled = false;
+                    event.target.innerHTML = "Submit for Review";
+                    alert(parsedData.message);
+                    location.reload(true);
+                });
+            }
+        } else if (event.target.classList.contains("finalize-report")) {
+            event.preventDefault();
+            console.log("finalize-report");
+            const result = confirm("Are you sure you want to finalize this report? This means you will no longer be able to modify it.");
+            if (result) {
+                animateButton(event.target, "  Submitting...");
+                const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/final";
+                makeAjaxRequest("PUT", url, function(parsedData) {
+                    event.target.disabled = false;
+                    event.target.innerHTML = "Finalize Report";
                     alert(parsedData.message);
                     location.reload(true);
                 });
@@ -537,8 +565,11 @@ document.addEventListener("click", function(event) {
             const title = document.querySelector("#editReportModalLabel").textContent;
             const result = confirm("Are you sure you want to delete the report \"" + title + "\"?");
             if (result) {
+                animateButton(event.target, "  Deleting...");
                 const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
                 makeAjaxRequest("DELETE", url, function(parsedData) {
+                    event.target.disabled = false;
+                    event.target.innerHTML = "Delete Report";
                     alert(parsedData.message);
                     location.reload(true);
                 });
@@ -573,12 +604,7 @@ document.addEventListener("submit", function(event) {
     if (event.target.classList.contains("section-form")) {
         event.preventDefault();
         let saveButton = event.target.lastElementChild;
-        saveButton.disabled = true;
+        animateButton(saveButton, "  Saving...");
-        saveButton.innerHTML = "";
-        let span = document.createElement("span");
-        span.classList.add("spinner-border", "spinner-border-sm");
-        saveButton.appendChild(span);
-        saveButton.appendChild(document.createTextNode("  Saving..."));
         const formData = new FormData(event.target);
         const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/section/" + event.target.dataset.sid;
         makeAjaxRequest("PUT", url, updateSection, saveButton, formData);

front/static/new_report.html

@@ -43,16 +43,16 @@
             <div class="col-sm-6 mx-auto">
                 <div class="card bg-light text-dark">
                     <div class="card-header">
-                        <h3>Create a new report</h3>
+                        <h3>Create A New Report</h3>
                    </div>
                     <div class="card-body">
                         <form class="form new-report-form" autocomplete="off">
                             <div class="form-group">
-                                <label for="title">Report title:</label>
+                                <label for="title">Report Title:</label>
                                 <input type="text" class="form-control" name="title" id="title" autofocus>
                             </div>
                             <div class="form-group">
-                                <label for="reference">Ticket number (if available):</label>
+                                <label for="reference">Ticket Number (if available):</label>
                                 <input type="text" class="form-control" name="reference" id="reference">
                             </div>
                             <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#newReportModal">Create</button>
@@ -81,7 +81,8 @@
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary submit-report-button" >Submit Report</button>
+                    <button type="button" class="btn btn-primary finalize-report">Finalize Report</button>
+                    <button type="button" class="btn btn-primary review-report">Submit for Review</button>
                 </div>
             </div>
         </div>