started to develop Delete Task frontend and backend

src/forms/task_form.py

@@ -27,3 +27,10 @@ class EditTaskForm(FlaskForm):
         choices=[(status, status) for status in EDIT_TASK_STATUS_LIST],
     )
     submit = SubmitField("Edit Task")
+
+
+class DeleteTaskForm(FlaskForm):
+
+    id = IntegerField("Task ID: ", validators=[DataRequired()])
+    display = SubmitField("Display Task Details")
+    submit = SubmitField("Delete Task")

src/main.py

@@ -1,7 +1,7 @@
-from flask import Flask, flash, redirect, render_template, request, url_for
+from flask import Flask, flash, redirect, render_template, request, url_for, jsonify
 from flask_login import LoginManager, login_required, login_user
 
-from src.forms.task_form import AddTaskForm, EditTaskForm
+from src.forms.task_form import AddTaskForm, DeleteTaskForm, EditTaskForm
 from src.forms.user_forms import LogInForm, RegisterForm
 from src.models import Base, SessionLocal, Tasks, Users, engine
 from src.repository.tasks_repository import TasksRespository
@@ -163,5 +163,46 @@ def edit_task(user_id):
     return render_template("edit_task.html", form=form, user_id=user_id)
 
 
+@app.route("/delete_task/<int:user_id>", methods=["GET", "POST"])
+@login_required
+def delete_task(user_id):
+    form = DeleteTaskForm()
+
+    if form.validate_on_submit():
+        task_id = form.id.data
+
+        # initiate DB and collect relevant data
+        session = SessionLocal()
+        task_repo = TasksRespository(session)
+        tasks = task_repo.find_tasks_by_user(user_id)
+        all_ids = [task.id for task in tasks]
+
+        # Check if task belongs to the user
+        if task_id not in all_ids:
+            flash(f"Task # {task_id} is not associated with this user. Enter another task ID.", "danger")
+            session.close()
+            return redirect(url_for("delete_task", user_id=user_id))       
+
+
+    return render_template("delete_task.html", form=form, user_id=user_id)
+
+
+@app.route("/api/task/<int:task_id>")
+@login_required
+def get_task_details(task_id):
+    session = SessionLocal()
+    task_repo = TasksRespository(session)
+    task = task_repo.find_task_by_id(task_id)
+    session.close()
+
+    if task is not None:
+        return jsonify({
+            "title": task.title,
+            "description": task.description,
+            "status": task.status
+        })
+    else:
+        return jsonify
+
 if __name__ == "__main__":
     app.run(debug=True, port=5001)

templates/delete_task.html

@@ -0,0 +1,65 @@
+{% extends "base.html" %}
+
+{% block content %}
+<style>
+    /* Full-page background image */
+    body {
+        background-image: url("{{ url_for('static', filename='img/background.png') }}");
+        background-size: cover;
+        background-position: center;
+        background-attachment: fixed;
+    }
+</style>
+
+<div class="d-flex justify-content-center align-items-center" style="min-height: 90vh;">
+    <div class="card p-4" style="width: 700px; border-radius: 15px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);">
+        <div class="text-center mb-4">
+            <h2 class="mt-2" style="font-family: 'Lobster', cursive; font-size: 2rem; color: #333;">Delete Task</h2>         
+        </div>
+        <form method="POST" action="{{ url_for('delete_task', user_id=user_id) }}">
+            {{ form.hidden_tag() }}
+            <div class="form-group">
+                {{ form.id.label }}
+                {{ form.id(class="form-control", placeholder="Enter Task ID", id="task-id-input") }}
+            </div>
+            <div class="form-group">
+                <label for="task-title">Title:</label>
+                <p id="task-title" class="form-control" readonly></p>
+            </div>
+            <div class="form-group">
+                <label for="task-description">Description:</label>
+                <p id="task-description" class="form-control" readonly></p>
+            </div>
+            <div class="form-group">
+                <label for="task-status">Status:</label>
+                <p id="task-status" class="form-control" readonly></p>
+            </div>
+            <div class="text-center">
+                <button type="submit" class="btn btn-danger btn-thin mt-4">Delete Task</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+    document.getElementById("task-id-input").addEventListener("input", function () {
+        const taskId = this.value;
+
+        // Fetch task details via an API (adjust URL as needed)
+        fetch(`/api/task/${taskId}`)
+            .then(response => response.json())
+            .then(data => {
+                // Populate the fields with task details
+                document.getElementById("task-title").textContent = data.title || "N/A";
+                document.getElementById("task-description").textContent = data.description || "N/A";
+                document.getElementById("task-status").textContent = data.status || "N/A";
+            })
+            .catch(() => {
+                // Clear fields if task is not found
+                document.getElementById("task-title").textContent = "";
+                document.getElementById("task-description").textContent = "";
+                document.getElementById("task-status").textContent = "";
+            });
+    });
+</script>
+{% endblock %}