added parent delete popup + endpoint

dispatcher/static/base.css

@@ -108,4 +108,8 @@ button, select {
 
 a {
     color: var(--accent);
+}
+
+ul {
+    padding-left: 2em;
 }

dispatcher/static/base.js

@@ -72,7 +72,7 @@ function formatPercentage(ratio) {
     return percentage + "%"
 }
 
-function req(url, options) {
+function req(url, options = {}) {
     let headers = options.headers || {}
     let csrftoken = document.querySelector("input[name='csrfmiddlewaretoken']").value
     headers["X-CSRFToken"] = csrftoken

dispatcher/static/list.css

@@ -21,6 +21,7 @@
     display: flex;
     gap: 0.8em;
     flex-direction: column;
+    padding: 0;
 }
 
 .list li {
@@ -34,4 +35,61 @@
 
 .list li .actions {
     margin-left: auto;
+}
+
+.popup {
+    background-color: #00000040;
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+}
+
+.popup:not(.show) {
+    display: none;
+}
+
+.popup .popup-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    padding: 2em;
+    background-color: var(--dark1);
+    border-radius: 1em;
+    width: 100%;
+    max-width: 40em;
+    box-shadow: 0 0.2em 0.8em var(--dark3);
+}
+
+.popup .popup-container .elmt-name {
+    text-decoration: underline;
+}
+
+.popup .popup-container .actions {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 1em;
+}
+
+.popup .popup-container .actions button {
+    padding: 0.4em 1.2em;
+}
+
+.popup .popup-container .actions .cancel {
+    background-color: var(--light2);
+}
+
+.popup .popup-container .actions .cancel:hover {
+    background-color: var(--light3);
+}
+
+.popup .popup-container .actions .delete {
+    --col: #f95f4b;
+    color: var(--col);
+    border-color: var(--col);
+    background-color: var(--dark1);
+}
+
+.popup .popup-container .actions .delete:hover {
+    background-color: var(--dark2);
 }

dispatcher/static/list.js

@@ -1,3 +1,31 @@
+function showDeletePopup(id, name) {
+    let popup = document.getElementById("delete-popup")
+    popup.dataset.id = id
+    popup.querySelectorAll(".elmt-name").forEach(elmt => {
+        elmt.innerText = name
+    })
+    popup.classList.add("show")
+}
+
+function deleteElement(id) {
+    let url = window.location.href
+    if (!url.endsWith("/")) {
+        url += "/"
+    }
+    url += `${id}/`
+    req(url, {
+        method: "DELETE"
+    }).then(res => {
+        return res.json()
+    }).then(res => {
+        if (res.status === "success") {
+            window.location.reload()
+        }
+    })
+}
+
+let onBeforeDelete = null
+
 window.addEventListener("load", () => {
     document.querySelector("button.new").addEventListener("click", () => {
         window.location.href = "new/"
@@ -8,5 +36,20 @@ window.addEventListener("load", () => {
         row.querySelector("button.edit").addEventListener("click", () => {
             window.location.href = `${id}/`
         })
+
+        row.querySelector("button.delete")?.addEventListener("click", async () => {
+            if (onBeforeDelete) {
+                await onBeforeDelete(row)
+            }
+            showDeletePopup(id, row.dataset.name)
+        })
+    })
+
+    let deletePopup = document.getElementById("delete-popup")
+    deletePopup.querySelector(".actions .cancel").addEventListener("click", () => {
+        deletePopup.classList.remove("show")
+    })
+    deletePopup.querySelector(".actions .delete").addEventListener("click", () => {
+        deleteElement(deletePopup.dataset.id)
     })
 })

dispatcher/static/parents.js

@@ -0,0 +1,11 @@
+onBeforeDelete = async row => {
+    await req(`${row.dataset.id}/on_delete/`).then(res => {
+        return res.json()
+    }).then(res => {
+        if (res.status === "success") {
+            let popup = document.getElementById("delete-popup")
+            popup.querySelector(".project-count").innerText = res.projects
+            popup.querySelector(".task-count").innerText = res.tasks
+        }
+    })
+}

dispatcher/static/projects.js

@@ -5,7 +5,7 @@ window.addEventListener("load", () => {
         selector.addEventListener("change", () => {
             let fd = new FormData()
             fd.set("parent_id", selector.value)
-            req(`${id}/set_parent`, {
+            req(`${id}/set_parent/`, {
                 method: "POST",
                 body: fd
             })