sankalp
31688a6b04
Added new templates for project management functionality including listing, creation, and detailed views. These templates integrate with HTMX for dynamic interactions and provide a responsive layout. **New Features** - **project_list.html**: Displays a table of projects with status badges, client associations, and deadline tracking. Includes actions for creating, editing, and deleting projects. - **project_detail.html**: Shows detailed project information including status, description, client, and deadline. Features an embedded kanban board for task management and a modal for task creation. - **project_form.html**: Provides a multi-step form wizard for creating/editing projects with validation and navigation controls. **Enhancements & Refinements** - Responsive design across all templates for consistent UX on different devices. - Dynamic status badges color-coded based on project state. - Integrated HTMX for seamless form submissions and DOM updates in project list and task management.
69 lines
2.8 KiB
HTML
69 lines
2.8 KiB
HTML
{% extends "shared/base.html" %}
|
|
{% load static %}
|
|
{% block content %}
|
|
{% include "shared/navbar.html" %}
|
|
|
|
<div class="pt-24 px-4 max-w-7xl mx-auto min-h-screen flex flex-col pb-10">
|
|
<!-- Header -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-bold flex items-center gap-3">
|
|
{{ project.name }}
|
|
<span
|
|
class="badge badge-lg {% if project.status == 'COMPLETED' %}badge-success{% elif project.status == 'IN_PROGRESS' %}badge-info{% elif project.status == 'ON_HOLD' %}badge-warning{% elif project.status == 'CANCELLED' %}badge-error{% else %}badge-ghost{% endif %}">
|
|
{{ project.get_status_display }}
|
|
</span>
|
|
</h1>
|
|
<p class="text-base-content/70 mt-1">
|
|
{{ project.client.name }} • Due: {{ project.deadline|default:"No deadline" }}
|
|
</p>
|
|
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="{% url 'project_edit' pk=project.pk %}" class="btn btn-outline">Edit Project</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="bg-base-100 p-6 rounded-box shadow-sm mb-8">
|
|
<h3 class="font-bold text-lg mb-2">Description</h3>
|
|
<p class="whitespace-pre-wrap">{{ project.description }}</p>
|
|
</div>
|
|
|
|
<!-- Kanban Board -->
|
|
<div class="bg-base-100 p-6 rounded-box shadow-sm">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="font-bold text-lg">Tasks</h3>
|
|
</div>
|
|
<div id="kanban-board">
|
|
{% include "projects/partials/kanban_board.html" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task Modal -->
|
|
<dialog id="task_modal" class="modal">
|
|
<div class="modal-box">
|
|
<h3 class="font-bold text-lg mb-4">Add New Task</h3>
|
|
<form hx-post="{% url 'task_create' project_id=project.pk %}" hx-target="#kanban-todo-list" hx-swap="beforeend"
|
|
hx-on::after-request="if(event.detail.successful) { this.reset(); task_modal.close(); }" class="space-y-4">
|
|
{% csrf_token %}
|
|
{% for field in task_form %}
|
|
<div class="form-control">
|
|
<label class="label" for="{{ field.id_for_label }}">
|
|
<span class="label-text">{{ field.label }}</span>
|
|
</label>
|
|
{{ field }}
|
|
</div>
|
|
{% endfor %}
|
|
<div class="modal-action">
|
|
<button type="button" class="btn" onclick="task_modal.close()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Create Task</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
{% endblock %} |