added project delete + changed to list template

TimeDispatcher/urls.py

@@ -25,15 +25,16 @@ register_converter(DateConverter, "date")
 urlpatterns = [
     path("", views.dashboard_view, name="dashboard"),
     path("import/", views.import_view, name="import"),
-    path("projects/", views.projects_view, name="projects"),
+    path("projects/", views.ProjectsView.as_view(), name="projects"),
     path("parents/", views.ParentsView.as_view(), name="parents"),
     path("table/<date:start_date>/<date:end_date>/", views.get_table_data, name="table_data"),
     path("table/", views.table_view, name="table"),
     path("parents/new/", views.new_parent_view, name="new_parent"),
     path("parents/<int:id>/on_delete/", views.parent_on_delete_view, name="parent_on_delete"),
     path("parents/<int:id>/", views.parent_view, name="parent"),
+    path("projects/<int:id>/on_delete/", views.project_on_delete_view, name="project_on_delete"),
+    path("projects/<int:id>/set_parent/", views.set_parent, name="set_parent"),
     path("projects/<int:id>/", views.project_view, name="project"),
-    path("projects/<int:id>/set_parent", views.set_parent, name="set_parent"),
     path("stats/by-month/<int:year>/<int:month>/", views.get_stats_by_month, name="stats_by_month"),
     path("stats/between/<date:start_date>/<date:end_date>/", views.get_stats_between, name="stats_between"),
     path("clockings/<date:date>/", views.set_clocking, name="set_clocking")

dispatcher/static/base.css

@@ -82,6 +82,7 @@ main {
     display: flex;
     flex-direction: column;
     padding: 2em;
+    overflow-y: auto;
 }
 
 button, input, select {

dispatcher/static/list.css

@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: column;
     gap: 1em;
+    overflow-y: auto;
 }
 
 .list-header {
@@ -22,6 +23,7 @@
     gap: 0.8em;
     flex-direction: column;
     padding: 0;
+    overflow-y: auto;
 }
 
 .list li {

dispatcher/static/list.js

@@ -33,7 +33,7 @@ window.addEventListener("load", () => {
 
     document.querySelectorAll(".list li").forEach(row => {
         let id = row.dataset.id
-        row.querySelector("button.edit").addEventListener("click", () => {
+        row.querySelector("button.edit")?.addEventListener("click", () => {
             window.location.href = `${id}/`
         })
 

dispatcher/static/projects.css

@@ -1,4 +1,8 @@
+.productive {
+    box-shadow: 0.2em 0 0 var(--accent) inset;
+}
 
+/*
 .projects {
     width: 100%;
     max-width: 40em;
@@ -22,3 +26,4 @@
 .projects tbody tr:nth-child(even) {
     background-color: var(--dark2);
 }
+*/

dispatcher/static/projects.js

@@ -1,5 +1,16 @@
+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(".task-count").innerText = res.tasks
+        }
+    })
+}
+
 window.addEventListener("load", () => {
-    document.querySelectorAll(".projects tbody tr").forEach(row => {
+    document.querySelectorAll(".list li").forEach(row => {
         let id = row.dataset.id
         let selector = row.querySelector(".parent-sel")
         selector.addEventListener("change", () => {
@@ -10,9 +21,5 @@ window.addEventListener("load", () => {
                 body: fd
             })
         })
-
-        row.querySelector("button.edit").addEventListener("click", () => {
-            window.location.href = `${id}/`
-        })
     })
 })

dispatcher/views.py

@@ -59,6 +59,15 @@ def parent_on_delete_view(request, id):
         "tasks": tasks
     })
 
+def project_on_delete_view(request, id):
+    project = get_object_or_404(Project, id=id)
+    tasks = project.task_set.count()
+
+    return JsonResponse({
+        "status": "success",
+        "tasks": tasks
+    })
+
 def new_parent_view(request):
     context = {
         "class": "parent"
@@ -72,6 +81,11 @@ def new_parent_view(request):
 
 def project_view(request, id):
     project = get_object_or_404(Project, id=id)
+
+    if request.method == "DELETE":
+        project.delete()
+        return JsonResponse({"status": "success"})
+
     context = {
         "class": "project",
         "id": id
@@ -88,7 +102,7 @@ def table_view(request):
 @require_POST
 def set_parent(request, id):
     project = get_object_or_404(Project, id=id)
-    parent_id = request.POST.get("parent_id")
+    parent_id = request.POST.get("parent_id") or None
     try:
         parent = Parent.objects.get(id=parent_id)
     except Parent.DoesNotExist:
@@ -181,6 +195,16 @@ class ParentsView(generic.ListView):
     template_name = "parents.html"
     context_object_name = "elements"
 
+class ProjectsView(generic.ListView):
+    model = Project
+    template_name = "projects.html"
+    context_object_name = "elements"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["parents"] = Parent.objects.all()
+        return context
+
 
 def get_table_data(request, start_date: datetime.date, end_date: datetime.date):
     end_date = end_date + timedelta(days=1)

templates/projects.html

@@ -1,39 +1,29 @@
-{% extends "base.html" %}
+{% extends "list.html" %}
 {% load static %}
 {% block title %}Projects{% endblock %}
-{% block head %}
+{% block extra-head %}
     <link rel="stylesheet" href="{% static "projects.css" %}">
     <script src="{% static "projects.js" %}"></script>
 {% endblock %}
-{% block footer %}{% endblock %}
-{% block main %}
-    {% csrf_token %}
-    <table class="projects">
-        <thead>
-            <tr>
-                <th>Project</th>
-                <th>Parent</th>
-                <th>Actions</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for project in projects %}
-                <tr data-id="{{ project.id }}">
-                    <td>{{ project.name }}</td>
-                    <td>
+{% block extra-class %}{% if element.parent.is_productive %}productive{% endif %}{% endblock %}
+{% block element-name %}{{ element.name }}{% endblock %}
+{% block element %}
+    <div class="name">{{ element.name }}</div>
+{% endblock %}
+{% block actions %}
     <select class="parent-sel">
         <option value=""></option>
         {% for parent in parents %}
-                                <option value="{{ parent.id }}" {% if project.parent.id == parent.id %}selected{% endif %}>{{ parent.name }}</option>
+            <option value="{{ parent.id }}" {% if element.parent.id == parent.id %}selected{% endif %}>{{ parent.name }}</option>
         {% endfor %}
     </select>
-                    </td>
-                    <td>
     <button class="edit">Edit</button>
     <button class="delete">Delete</button>
-                    </td>
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+{% endblock %}
+{% block delete-desc %}
+    Are sure you want to delete <span class="elmt-name"></span> ?
+    This action is <u>IRREVERSIBLE</u> ! By deleting this element, you will also delete:
+    <ul>
+        <li><span class="task-count"></span> task imputation(s)</li>
+    </ul>
 {% endblock %}