Merge pull request #69 from danieldupriest/delete-report-action

Delete report action

front/static/edit_report.html

@@ -80,7 +80,7 @@
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-danger">Delete Report</button>
+                    <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>
                 </div>

front/static/js/viewHistory.js

@@ -9,57 +9,25 @@ function getEndpointDomain() {
     return "https://" + window.location.hostname + ":8444/";
 }
 
-// Make a GET request to url and pass response to callback function
+function makeAjaxRequest(method, url, callback, type, payload) {
-function getDataFromEndpoint(url, callback, optional) {
     const token = localStorage.getItem("token");
     const xhr = new XMLHttpRequest();
 
     console.log("Attempting a connection to the following endpoint: " + url);
 
-    xhr.open("GET", url, true);
+    xhr.open(method, url, true);
     xhr.setRequestHeader("Authorization", "Bearer " + token);
+    method === "POST" ? xhr.setRequestHeader("Content-Type", "application/json") : payload = null;
+
     xhr.onreadystatechange = function() {
         if (this.readyState === 4) {
             if (this.status === 200) {
-                console.log("GET SUCCESS!");
+                console.log(method + " SUCCESS!");
                 console.log("Server response:\n" + this.response);
                 let parsedData = JSON.parse(this.response);
-                optional ? callback(parsedData, optional) : callback(parsedData);
+                type ? callback(parsedData, type) : callback(parsedData);
             } else {
-                console.error("GET FAILURE!");
+                console.error(method + " FAILURE!");
-                console.error("Server status: " + this.status);
-                console.error("Server response:\n" + this.response);
-            }
-        }
-    };
-
-    xhr.onerror = function() {
-        alert("Connection error!");
-    };
-
-    xhr.send();
-}
-
-
-// Make a POST request to url and pass response to callback function
-function postDataToEndpoint(url, payload, callback, optional) {
-    const token = localStorage.getItem("token");
-    const xhr = new XMLHttpRequest();
-
-    console.log("Attempting a connection to the following endpoint: " + url);
-
-    xhr.open("POST", url, true);
-    xhr.setRequestHeader("Authorization", "Bearer " + token);
-    xhr.setRequestHeader("Content-Type", "application/json");
-    xhr.onreadystatechange = function() {
-        if (this.readyState === 4) {
-            if (this.status === 200) {
-                console.log("POST SUCCESS!");
-                console.log("Server response:\n" + this.response);
-                let parsedData = JSON.parse(this.response);
-                optional ? callback(parsedData, optional) : callback(parsedData);
-            } else {
-                console.error("POST FAILURE!");
                 console.error("Server status: " + this.status);
                 console.error("Server response:\n" + this.response);
             }
@@ -218,12 +186,14 @@ function createReportForm(parsedData, type) {
     accordion.classList.add("accordion");
 
     if (type === reportType.EDIT) {
-        console.log("reportType.EDIT");
         modalBody = document.querySelector("#editReportModalBody");
         modalLabel = document.querySelector("#editReportModalLabel");
         accordion.id = "editReportAccordion";
+        const deleteButton = document.querySelector(".delete-report");
+        if (deleteButton) {
+            deleteButton.setAttribute("data-rid", parsedData.report_pk);
+        }
     } else if (type === reportType.NEW) {
-        console.log("reportType.NEW");
         modalBody = document.querySelector("#newReportModalBody");
         modalLabel = document.querySelector("#newReportModalLabel");
         accordion.id = "newReportAccordion";
@@ -237,8 +207,7 @@ function createReportForm(parsedData, type) {
 
     // Add report title and date
     const reportTitle = parsedData.title;
-    const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US");
+    modalLabel.innerHTML = reportTitle;
-    modalLabel.innerHTML = reportTitle + " " + dateCreated;
 
     // Traverse the report's sections array
     const sections = parsedData.sections;
@@ -401,7 +370,7 @@ function displayReport(parsedData){
 document.addEventListener("DOMContentLoaded", function(event) {
     if (window.location.pathname === "/edit_report.html") {
         const url = getEndpointDomain() + "api/v1/reports";
-        getDataFromEndpoint(url, displayListOfReports);
+        makeAjaxRequest("GET", url, displayListOfReports);
     }
 });
 
@@ -410,11 +379,22 @@ document.addEventListener("click", function(event) {
         if (event.target.classList.contains("edit-report-button")) {
             const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
             const type = reportType.EDIT;
-            getDataFromEndpoint(url, createReportForm, type);
+            makeAjaxRequest("GET", url, createReportForm, type);
         } else if (event.target.classList.contains("view-report-button")) {
             console.log("View button clicked");
             const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
-            getDataFromEndpoint(url, displayReport);
+            makeAjaxRequest("GET", url, displayReport);
+        } else if (event.target.classList.contains("delete-report")) {
+            event.preventDefault();
+            const title = document.querySelector("#editReportModalLabel").textContent;
+            const result = confirm("Are you sure you want to delete the report \"" + title + "\"?");
+            if (result) {
+                const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
+                makeAjaxRequest("DELETE", url, function(parsedData) {
+                    alert(parsedData.message);
+                    location.reload(true);
+                });
+            }
         }
     }
 });
@@ -427,7 +407,7 @@ if (newReportForm) {
         const payload = JSON.stringify({ "title": event.target.elements.title.value });
         console.log("Payload:\n" + payload);
         const type = reportType.NEW;
-        postDataToEndpoint(url, payload, createReportForm, type);
+        makeAjaxRequest("POST", url, createReportForm, type, payload);
         this.reset();
     });
 }