Add logic to swap the form with the task via htmx.

CHANGELOG.org

@@ -11,4 +11,8 @@
    Update the main container block.
 ** 0.2.4 <2023-07-14 Fri>
    Update the table to a list of items and the header.
+** 0.3.0 <2023-07-15 Sat>
+   Add the htmx (CDN version).
+   Add the task form.
+   Add logic to swap the form with the task via htmx.
 

tasks/urls.py

@@ -3,8 +3,11 @@ from django.urls import path
 
 from . import views
 
-app_name = 'polls'
+app_name = 'tasks'
+
 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'),
 ]
 

tasks/views.py

@@ -1,12 +1,44 @@
-from django.shortcuts import render
+from django.shortcuts import render, redirect, get_object_or_404
 from .models import Task
+from .forms import TaskForm
 
 def index(request):
     tasks = Task.objects.all()
+    task_form = TaskForm(request.POST or None)
+
+    if request.method == "POST":
+        if task_form.is_valid():
+            new_task = task_form.save(commit=False)
+            new_task.save()
+            print(f"{new_task.id=}")
+            return redirect("tasks:task-item", id=new_task.id)
+
+        return render(request, "partials/task_form.html", context={
+            "task_form": task_form
+        })
 
     context = {
         'tasks': tasks,
+        'task_form': task_form,
     }
 
     return render(request, 'tasks/index.html', context)
 
+def create_task_form(request):
+    task_form = TaskForm()
+
+    context = {
+        'task_form': task_form,
+    }
+
+    return render(request, "partials/task_form.html", context)
+
+def task_item(request, id):
+    task = get_object_or_404(Task, id=id)
+
+    context = {
+        "task": task
+    }
+
+    return render(request, "partials/task_item.html", context)
+

templates/tasks/index.html

@@ -4,7 +4,11 @@
 {% block content %}
   <h1 class="text-3xl font-bold text-center my-2">Tasks</h1>
 
-  <div class="flex flex-col">
+  <button type="button" hx-get="{% url 'tasks:create-task-form' %}" hx-target="#task-items" hx-swap="beforeend">
+    Add a new task
+  </button>
+
+  <div id="task-items" class="flex flex-col">
     {% for task in tasks %}
       {% include "partials/task_item.html" %}
     {% endfor %}