Kanban UI Component
Relevant source files
The following files were used as context for generating this wiki page:
The Kanban UI Component is the central interface for project management within the Dashboard Task Management (DTM) system. It provides a visual representation of tasks organized by their current lifecycle stage, allowing users to track progress, update statuses via drag-and-drop interactions, and manage task creation and filtering.
The component is implemented using a combination of server-side Thymeleaf templates for initial rendering and client-side JavaScript for dynamic updates and API interactions. It facilitates a streamlined workflow by categorizing tasks into four distinct states: NEW, IN_PROGRESS, REVIEW, and DONE.
Sources: README.md:82-89, src/main/resources/templates/kanban.html:73-228
Component Architecture
The Kanban UI consists of a toolbar for global actions and a board containing multiple columns. Each column represents a TaskStatus and acts as a container for task cards.
Layout and Structure
- Toolbar: Contains the project title, search input, priority filters, and the "New Task" trigger.
- Board Grid: A CSS Grid layout with four columns (
repeat(4, 1fr)). - Columns: Each column includes a header with a status-specific color dot (e.g., green for
DONE, yellow forREVIEW) and a counter showing the number of tasks in that state. - Task Cards: Draggable elements representing individual tasks, displaying titles, priority badges, tags, assignees, and due dates.
Sources: src/main/resources/static/css/kanban.css:47-53, src/main/resources/templates/kanban.html:47-71
The diagram shows the hierarchical structure of the Kanban UI, from the main board down to individual task cards and the associated toolbar utilities.
Task Lifecycle and Drag-and-Drop
The component implements native HTML5 Drag and Drop API to facilitate status transitions. Moving a card between columns triggers an asynchronous update to the backend while immediately updating the local Document Object Model (DOM) for a responsive user experience.
Drag and Drop Workflow
- dragStart: Initiated when a user grabs a card. The
taskIdis stored, and adraggingCSS class is applied for visual feedback. - onDrop: Triggered when a card is released over a column's
col-body. - API Update: The
API.updateStatusfunction sends aPATCHrequest to/api/tasks/{id}/status. - DOM Update: Upon a successful response, the card is appended to the new column's body, and column counters are recalculated.
Sources: src/main/resources/static/js/kanban.js:6-36, src/main/resources/static/js/api.js:46-47
Sequence of events during a task status transition via the drag-and-drop interface.
Functional Features
Filtering and Search
The Kanban UI provides real-time client-side filtering to help users locate specific tasks without page reloads.
| Feature | Implementation | Description |
|---|---|---|
| Text Search | searchTasks(keyword) | Filters cards by matching the task-title text against the input. Includes a 300ms debounce. |
| Priority Filter | filterByPriority(priority) | Filters cards based on the text content of the .priority badge (LOW, MEDIUM, HIGH). |
Sources: src/main/resources/static/js/kanban.js:71-96
Task Creation
Tasks can be created directly from the board via a modal dialog. The process requires a title and due date as mandatory fields.
- Endpoint:
POST /api/tasks - Data Structure: Includes
title,description,projectId,priority, anddueDate. - Logic: After creation via
API.createTask, the component performs awindow.location.reload()to refresh the board state.
Sources: src/main/resources/static/js/kanban.js:51-69, src/main/resources/static/js/api.js:44
Visual Indicators and Styling
The UI uses specific CSS variables and classes to communicate task urgency and status.
- Status Colors:
.status-NEW: Gray (#9ca3af).status-IN_PROGRESS: Blue (var(--accent)).status-REVIEW: Yellow (var(--yellow)).status-DONE: Green (var(--green))
- Overdue Indicator: An
.overdue-dotwith a blink animation is displayed if a task'sisOverdueproperty is true. - Priority Badges: Colored backgrounds with high-contrast text are applied using classes like
.priority-HIGH(Red) or.priority-LOW(Green).
Sources: src/main/resources/static/css/main.css:127-160, src/main/resources/static/css/kanban.css:76-81
/* src/main/resources/static/css/main.css:151-160 */
.overdue-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--red);
animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink {
0%,100% { opacity: 1; }
50% { opacity: .2; }
}
Data Integration
The component retrieves initial data through the ViewController, which populates the Thymeleaf model with lists of tasks filtered by status.
newTasks: List of tasks withTaskStatus.NEW.inProgress: List of tasks withTaskStatus.IN_PROGRESS.review: List of tasks withTaskStatus.REVIEW.done: List of tasks withTaskStatus.DONE.
Sources: src/main/java/com/example/demo/controllers/ViewController.java:71-74, src/main/resources/templates/kanban.html:73-228
The Kanban UI Component provides a robust and interactive environment for managing project lifecycles, combining static template rendering with dynamic JavaScript-driven updates to ensure data consistency across the team's dashboard.