From 2ccd9edc03f0172391349408a23e27d2b0b44cd3 Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Tue, 25 Jul 2023 15:31:39 +0300
Subject: [PATCH] Add the detailed item for a Task model.

---
 CHANGELOG.org                         |  2 +
 tasks/urls.py                         |  1 +
 tasks/views.py                        |  9 +++++
 templates/partials/task_detailed.html | 57 +++++++++++++++++++++++++++
 templates/partials/task_item.html     | 10 ++++-
 5 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 templates/partials/task_detailed.html

diff --git a/CHANGELOG.org b/CHANGELOG.org
index a2f32d9..accc774 100644
--- a/CHANGELOG.org
+++ b/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.
 
diff --git a/tasks/urls.py b/tasks/urls.py
index 1ae9f88..0dc545d 100644
--- a/tasks/urls.py
+++ b/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,
diff --git a/tasks/views.py b/tasks/views.py
index 1381e4a..7e70a83 100644
--- a/tasks/views.py
+++ b/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)
diff --git a/templates/partials/task_detailed.html b/templates/partials/task_detailed.html
new file mode 100644
index 0000000..52b8106
--- /dev/null
+++ b/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>
diff --git a/templates/partials/task_item.html b/templates/partials/task_item.html
index a6e9d32..db8cf8e 100644
--- a/templates/partials/task_item.html
+++ b/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 %}"