Add the detailed item for a Task model.

CHANGELOG.org

@@ -36,4 +36,6 @@
    Add the CI/CD configuration.
 ** 0.3.10 <2023-07-24 Mon>
    Add the Tasks model to manage tasks.
+** 0.4.0 <2023-07-24 Mon>
+   Add the detailed item for a Task model.
 

tasks/urls.py

@@ -9,6 +9,7 @@ urlpatterns = [
     path('', views.index, name='index'),
     path('htmx/create-task-form/', views.create_task_form, name='create-task-form'),
     path('htmx/task-item/<id>/', views.task_item, name='task-item'),
+    path('htmx/task-item/<id>/detailed/', views.task_detailed, name='task-detailed'),
     path('htmx/task-item/<id>/update/', views.task_update, name='task-update'),
     path('htmx/task-item/<id>/set-circular-next-status/',
          views.task_set_circular_next_status,

tasks/views.py

@@ -43,6 +43,15 @@ def task_item(request, id):
 
     return render(request, "partials/task_item.html", context)
 
+def task_detailed(request, id):
+    task = get_object_or_404(Task, id=id)
+
+    context = {
+        "task": task
+    }
+
+    return render(request, "partials/task_detailed.html", context)
+
 def task_update(request, id):
     task = get_object_or_404(Task, id=id)
     task_form = TaskForm(request.POST or None, instance=task)

templates/partials/task_detailed.html

@@ -0,0 +1,57 @@
+<div hx-target="this" class="p-2 border rounded-lg inline-flex gap-2 my-2 bg-gray-200">
+  <div class="grid grid-cols-3 gap-2 justify-center w-full max-w-2xl mx-auto">
+    <div class="col-span-3">
+      <dl class="row flex flex-inline">
+        <dt class="col-sm-3 font-bold mr-2">Status:</dt>
+        {% if task.status == "TODO" %}
+        <dd class="font-semibold text-green-500"
+        {% elif task.status == "DOING" %}
+        <dd class="font-semibold text-yellow-500"
+        {% elif task.status == "DONE" or task.status == "CANCELED" %}
+        <dd class="font-semibold text-gray-500"
+        {% endif %}
+        >
+          {{ task.status }}
+        </dd>
+      </dl>
+      <dl class="row flex flex-inline flex-wrap">
+        <dt class="col-sm-3 font-bold mr-2">Name:</dt>
+        <dd class="col-sm-9 whitespace-pre-line">{{ task.name }}</dd>
+      </dl>
+      <dl class="flex flex-col flex-inline">
+        <dt class="col-sm-3 font-bold mr-2">Description:</dt>
+        <dd class="col-sm-9 whitespace-pre-line">{{ task.description }}</dd>
+      </dl>
+    </div>
+
+    <button type="button"
+     hx-post="{% url 'tasks:task-item' task.id %}"
+     hx-swap="outerHTML"
+     class="inline-block px-5 py-1.5 bg-green-600 text-white font-medium text-xs leading-tight
+            uppercase rounded shadow-md hover:bg-green-700 hover:shadow-lg focus:bg-green-700
+            focus:shadow-lg focus:outline-none focus:ring-0 active:bg-green-800 active:shadow-lg
+            transition duration-150 ease-in-out">
+      Back
+    </button>
+
+    <button type="button"
+     hx-post="{% url 'tasks:task-update' task.id %}"
+     hx-swap="outerHTML"
+     class="inline-block px-5 py-1.5 bg-blue-600 text-white font-medium text-xs leading-tight
+            uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700
+            focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg
+            transition duration-150 ease-in-out">
+      Update
+    </button>
+
+    <button type="button"
+     hx-post="{% url 'tasks:task-delete' task.id %}"
+     hx-swap="outerHTML"
+     class="inline-block px-5 py-1.5 bg-red-600 text-white font-medium text-xs leading-tight
+            uppercase rounded shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700
+            focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg
+            transition duration-150 ease-in-out">
+      Delete
+    </button>
+  </div>
+</div>

templates/partials/task_item.html

@@ -10,8 +10,14 @@
      hx-swap="outerHTML">
     {{ task.status }}
   </p>
-  <p class="font-semibold">{{ task.name }}</p>
-  <p>{{ task.description | truncatewords:10 }}</p>
+
+  <p class="font-semibold"
+     hx-post="{% url 'tasks:task-detailed' task.id %}"
+     hx-swap="outerHTML">
+     {{ task.name }}
+  </p>
+
+  <p>{{ task.description | truncatechars:40 }}</p>
 
   <button type="button"
 	  hx-post="{% url 'tasks:task-update' task.id %}"