Add edit section features (#672)

Author: justuswilhelm

backend/projectify/lib/htmx.py

@@ -16,7 +16,7 @@
 from urllib.parse import unquote, urlsplit, urlunsplit
 
 from django.http import HttpRequest, HttpResponse
-from django.http.response import HttpResponseBase
+from django.http.response import HttpResponseBase, HttpResponseRedirectBase
 from django.utils.functional import cached_property
 
 from asgiref.sync import iscoroutinefunction, markcoroutinefunction
@@ -121,6 +121,24 @@ def triggering_event(self) -> Any:
         return value
 
 
+class HttpResponseClientRedirect(HttpResponseRedirectBase):
+    status_code = 200
+
+    def __init__(self, redirect_to: str, *args: Any, **kwargs: Any) -> None:
+        if kwargs.get("preserve_request"):
+            raise ValueError(
+                "The 'preserve_request' argument is not supported for "
+                "HttpResponseClientRedirect.",
+            )
+        super().__init__(redirect_to, *args, **kwargs)
+        self["HX-Redirect"] = self["Location"]
+        del self["Location"]
+
+    @property
+    def url(self) -> str:
+        return self["HX-Redirect"]
+
+
 class HttpResponseClientRefresh(HttpResponse):
     def __init__(self) -> None:
         super().__init__()

backend/projectify/workspace/dashboard_urls.py

@@ -16,6 +16,7 @@
 )
 from projectify.workspace.views.section import (
     section_create_view,
+    section_delete_view,
     section_update_view,
 )
 from projectify.workspace.views.task import (
@@ -144,6 +145,8 @@
     path("<uuid:section_uuid>/create-task", task_create, name="create-task"),
     # Update section
     path("<uuid:section_uuid>/update", section_update_view, name="update"),
+    # Delete section
+    path("<uuid:section_uuid>/delete", section_delete_view, name="delete"),
 )
 task_patterns = (
     path("<uuid:task_uuid>", task_detail, name="detail"),

backend/projectify/workspace/templates/workspace/project_detail/section.html

@@ -5,22 +5,24 @@
 <section data-section class="flex flex-col" id={{ section.uuid }}>
     <header class="sticky top-0 flex w-full flex-row items-center justify-between bg-foreground px-4 py-2">
         <div data-figma-name="Section header"
-             class="flex min-w-0 shrink flex-row gap-4 text-base-content">
+             class="flex min-w-0 shrink flex-row gap-4 items-center text-base-content">
             <span class="h-5">{% include "heroicons/chevron-down.svg" %}</span>
-            <h1 class="line-clamp-1 min-w-0 shrink font-bold">{{ section.title }}</h1>
+            <div class="flex flex-row items-center">
+                <h1 class="line-clamp-1 min-w-0 shrink font-bold">{{ section.title }}</h1>
+                <a href="{% url 'dashboard:sections:update' section.uuid %}"
+                   aria-label="{% translate "Update section" %}"
+                   class="text-tertiary-content hover:text-tertiary-content-hover active:bg-tertiary-pressed active:text-tertiary-content-hover text-base flex min-w-max flex-row justify-center gap-2 rounded-lg px-4 py-2 font-bold disabled:bg-transparent disabled:text-disabled-content">
+                    <span class="h-4">{% include "heroicons/pencil.svg" %}</span>
+                </a>
+            </div>
         </div>
         <div class="flex shrink-0 flex-row items-center gap-1"
              data-figma-name="Right side">
             <a href="{% url "dashboard:sections:create-task" section.uuid %}"
                class="w-full text-tertiary-content hover:text-tertiary-content-hover active:bg-tertiary-pressed active:text-tertiary-content-hover text-base flex min-w-max flex-row justify-center gap-2 rounded-lg px-4 py-2 font-bold disabled:bg-transparent disabled:text-disabled-content">
                 <span class="h-6">{% include "heroicons/plus.svg" %}</span>
-                {% translate "Add task" %}
+                {% translate "Add Task" %}
             </a>
-            {# TODO make this a more button-y link, too #}
-            <div class="shrink-0">
-                {% url 'dashboard:sections:update' section.uuid as edit_section_url %}
-                {% anchor href=edit_section_url label=_("Edit section") %}
-            </div>
         </div>
     </header>
     <table class="flex flex-col gap-2 rounded-b-2xl bg-foreground p-4 lg:grid lg:grid-cols-[8fr_3fr_max-content] lg:gap-4">

backend/projectify/workspace/templates/workspace/section_update.html

@@ -12,7 +12,7 @@
           class="min-w-0 grow"
           role="presentation">
         {{ form.errors }}
-        <div class="flex h-full flex-col p-4 pt-0">
+        <div class="flex h-full flex-col gap-8 p-4 pt-0">
             <div class="flex flex-col gap-8">
                 <div class="flex flex-col gap-6">
                     {{ form.title.as_field_group }}
@@ -26,29 +26,38 @@
                     {% url 'dashboard:projects:detail' section.project.uuid as back_url %}
                     {% anchor href=back_url label=_("Go back") %}
                 </div>
-                {% csrf_token %}
+                <div class="flex flex-col gap-4">
+                    <h2 class="font-bold text-xl">{% translate "Section Actions" %}</h2>
+                    <div class="flex flex-col items-start gap-2">
+                        <h3 class="font-bold text-lg">{% translate "Move Section" %}</h3>
+                        <button class="flex flex-row gap-2 items-center"
+                                type="submit"
+                                name="action"
+                                value="move_up">
+                            <div class="h-4 w-4">{% include "heroicons/chevron-up.svg" %}</div>
+                            {% translate "Move up" %}
+                        </button>
+                        <button class="flex flex-row gap-2 items-center"
+                                type="submit"
+                                name="action"
+                                value="move_down">
+                            <div class="h-4 w-4">{% include "heroicons/chevron-down.svg" %}</div>
+                            {% translate "Move down" %}
+                        </button>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-lg">{% translate "Delete section" %}</h3>
+                        <button class="flex items-center gap-2 font-bold text-destructive"
+                                type="submit"
+                                hx-post="{% url 'dashboard:sections:delete' section_uuid=section.uuid %}"
+                                hx-confirm="{% translate "Are you sure you want to delete this section?" %}">
+                            <div class="h-4 w-4">{% include "heroicons/trash.svg" %}</div>
+                            {% translate "Delete this section" %}
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
+        {% csrf_token %}
     </form>
-    <h2>{% translate "Section Actions" %}</h2>
-    <div class="flex flex-col gap-4">
-        <div>
-            <h3>{% translate "Move Section" %}</h3>
-            <div class="flex gap-2">
-                <form method="post" class="inline">
-                    {% csrf_token %}
-                    <button type="submit" name="action" value="move_up">{% translate "Move Up" %}</button>
-                </form>
-                <form method="post" class="inline">
-                    {% csrf_token %}
-                    <button type="submit" name="action" value="move_down">{% translate "Move Down" %}</button>
-                </form>
-            </div>
-        </div>
-        <div>
-            <h3>{% translate "Delete Section" %}</h3>
-            {% url 'dashboard:sections:confirm-delete' section_uuid=section.uuid as delete_url %}
-            {# TODO: Add delete section link when confirm-delete view is implemented #}
-        </div>
-    </div>
 {% endblock form_content %}

backend/projectify/workspace/views/section.py

@@ -11,6 +11,7 @@
 from django.shortcuts import render
 from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
+from django.views.decorators.http import require_POST
 
 from rest_framework import serializers, status
 from rest_framework.exceptions import NotFound
@@ -19,6 +20,7 @@
 from rest_framework.views import APIView
 
 from projectify.lib.error_schema import DeriveSchema
+from projectify.lib.htmx import HttpResponseClientRedirect
 from projectify.lib.schema import extend_schema
 from projectify.lib.types import AuthenticatedHttpRequest
 from projectify.lib.views import platform_view
@@ -207,6 +209,25 @@ def section_update_view(
     return HttpResponseRedirect(project_url)
 
 
+@platform_view
+@require_POST
+def section_delete_view(
+    request: AuthenticatedHttpRequest, section_uuid: UUID
+) -> HttpResponse:
+    """Update section view."""
+    section = section_find_for_user_and_uuid(
+        user=request.user, section_uuid=section_uuid
+    )
+    if section is None:
+        raise Http404(_("Section not found for this UUID"))
+
+    project_url = reverse(
+        "dashboard:projects:detail", args=(section.project.uuid,)
+    )
+    section_delete(who=request.user, section=section)
+    return HttpResponseClientRedirect(project_url)
+
+
 class SectionCreate(APIView):
     """Create a section."""
 

docs/remove-fe-overlays.md

@@ -202,7 +202,8 @@ Missing: Delete button, style link; Justus 2025-12-05
 This replaces the **Edit section title** modal.
 
 - [x] **View**: Create an update section view with the address `/dashboard/section/<uuid:section_uuid>/update`
-- [ ] **Link**: Change the ellipsis `...` button to say `Update section` in the section header and style it. Link to this view
+- [x] **Link**: Change the ellipsis `...` button to a pencil button next to the
+  section title with `aria-label`.
 - [x] **Form contents**:
   - [x] Show section **title** and **description** fields
   - [x] **Update section**: Save the form contents to the section. Redirect back to
@@ -212,7 +213,7 @@ This replaces the **Edit section title** modal.
 - [x] **Section move** form:
   - [x] **Move up**: Move the section above the previous section
   - [x] **Move down**: Move the section below the next section
-- [ ] **Delete** button: Show a confirmation dialog. If the user presses **Ok**,
+- [x] **Delete** button: Show a confirmation dialog. If the user presses **Ok**,
   delete the section.
 
 ## Project archive