mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
feat: Add Task List page (#2528)
This commit is contained in:
Paweł Kuna
GitHub
6
.changeset/tasks-list-page.md
Normal file
6
.changeset/tasks-list-page.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Added new Task List page with tables showing tasks organized by status (Upcoming, In Progress, Completed) and modal dialog for adding new tasks.
|
||||
|
||||
@@ -96,6 +96,10 @@ page-libs: [signature_pad, hugerte, litepicker]
|
||||
<h3>Change password modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="change-password" inline show %}
|
||||
</div>
|
||||
<div>
|
||||
<h3>Add task modal</h3>
|
||||
{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="add-task" inline %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
93
preview/pages/tasks-list.html
Normal file
93
preview/pages/tasks-list.html
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
title: Task List
|
||||
page-header: Task List
|
||||
page-menu: extra.tasks.list
|
||||
layout: default
|
||||
permalink: tasks-list.html
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{% for section in tasks.columns %}
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title mb-0">{{ section.name }}</h3>
|
||||
<div class="card-actions">
|
||||
{% include "ui/button.html" text="New Task" icon="plus" modal-id="add-task" size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter card-table table-selectable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1">
|
||||
<input type="checkbox" class="form-check-input align-middle table-selectable-check"
|
||||
aria-label="Select all tasks">
|
||||
</th>
|
||||
<th class="w-50">Name</th>
|
||||
<th class="d-none d-xl-table-cell">Assigned To</th>
|
||||
<th class="d-none d-xxl-table-cell">Due Date</th>
|
||||
<th>Priority</th>
|
||||
<th class="text-end">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for task in section.tasks %}
|
||||
{% if task.assigned_to %}
|
||||
{% assign person-id = task.assigned_to | minus: 1 %}
|
||||
{% assign person = people[person-id] %}
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" class="form-check-input align-middle table-selectable-check"
|
||||
aria-label="Select task">
|
||||
</td>
|
||||
<td>
|
||||
{{ task.name }}
|
||||
</td>
|
||||
<td>
|
||||
{% if task.assigned_to and person %}
|
||||
<div class="d-flex align-items-center">
|
||||
{% include "ui/avatar.html" person-id=task.assigned_to size="xs" class="me-2" %}
|
||||
<span>{{ person.full_name }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<span class="text-secondary">Unassigned</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-secondary">
|
||||
{% if task.due_date %}
|
||||
{% include "ui/icon.html" icon="calendar" class="me-1" %}
|
||||
{{ task.due_date }}
|
||||
{% elsif task.due-date %}
|
||||
{% include "ui/icon.html" icon="calendar" class="me-1" %}
|
||||
{{ task.due-date }}
|
||||
{% else %}
|
||||
<span class="text-muted">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if task.priority == "High" %}
|
||||
{% include "ui/badge.html" text="High" color="red" light %}
|
||||
{% elsif task.priority == "Medium" %}
|
||||
{% include "ui/badge.html" text="Medium" color="yellow" light %}
|
||||
{% elsif task.priority == "Low" %}
|
||||
{% include "ui/badge.html" text="Low" color="blue" light %}
|
||||
{% else %}
|
||||
{% include "ui/badge.html" text="—" light %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end">
|
||||
{% include "ui/button.html" text="View" size="sm" %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "ui/modal.html" modal-id="add-task" %}
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Tasks
|
||||
page-header: Tabler Inc. Tasks
|
||||
page-header-actions: add-board
|
||||
page-menu: extra.tasks
|
||||
page-menu: extra.tasks.kanban
|
||||
layout: default
|
||||
permalink: tasks.html
|
||||
---
|
||||
|
||||
@@ -329,8 +329,17 @@
|
||||
},
|
||||
"tasks": {
|
||||
"title": "Tasks",
|
||||
"children": {
|
||||
"kanban": {
|
||||
"title": "Kanban",
|
||||
"url": "tasks.html"
|
||||
},
|
||||
"list": {
|
||||
"title": "Task List",
|
||||
"url": "tasks-list.html"
|
||||
}
|
||||
}
|
||||
},
|
||||
"text-features": {
|
||||
"title": "Text features",
|
||||
"url": "text-features.html",
|
||||
|
||||
@@ -1,30 +1,79 @@
|
||||
{
|
||||
"columns": [
|
||||
{
|
||||
"name": "To Do",
|
||||
"name": "Upcoming",
|
||||
"tasks": [
|
||||
{
|
||||
"name": "Enable analytics tracking",
|
||||
"users": 4,
|
||||
"users-offset": 6,
|
||||
"name": "Improve email marketing strategy",
|
||||
"assigned_to": 5,
|
||||
"due_date": "August 1, 2023",
|
||||
"priority": "Medium",
|
||||
"users": 1,
|
||||
"users-offset": 4,
|
||||
"comments": 2,
|
||||
"image": "static/projects/dashboard-1.png",
|
||||
"likes": 7
|
||||
},
|
||||
{
|
||||
"name": "User should receive a daily digest email",
|
||||
"name": "Develop new product video",
|
||||
"assigned_to": 2,
|
||||
"due_date": "July 15, 2023",
|
||||
"priority": "High",
|
||||
"description": "Dedicated form for a category of users that will perform actions.",
|
||||
"users": 1,
|
||||
"users-offset": 4,
|
||||
"due-date": "10 Sep",
|
||||
"users-offset": 1,
|
||||
"likes": 6
|
||||
},
|
||||
{
|
||||
"name": "Change license and remove references to products",
|
||||
"name": "Conduct user interviews for new feature",
|
||||
"assigned_to": 3,
|
||||
"due_date": "June 20, 2023",
|
||||
"priority": "Low",
|
||||
"color": "yellow",
|
||||
"favorite": true,
|
||||
"comments": 4,
|
||||
"likes": 34
|
||||
},
|
||||
{
|
||||
"name": "Create social media content calendar",
|
||||
"assigned_to": 6,
|
||||
"due_date": "September 5, 2023",
|
||||
"priority": "Medium",
|
||||
"description": "Plan and schedule social media posts for Q3",
|
||||
"users": 2,
|
||||
"users-offset": 5,
|
||||
"comments": 8,
|
||||
"likes": 12
|
||||
},
|
||||
{
|
||||
"name": "Review and update documentation",
|
||||
"assigned_to": 4,
|
||||
"due_date": "July 25, 2023",
|
||||
"priority": "Medium",
|
||||
"users": 1,
|
||||
"users-offset": 3,
|
||||
"comments": 5
|
||||
},
|
||||
{
|
||||
"name": "Plan quarterly team meeting",
|
||||
"assigned_to": 7,
|
||||
"due_date": "August 20, 2023",
|
||||
"priority": "Low",
|
||||
"favorite": true,
|
||||
"users": 3,
|
||||
"users-offset": 8,
|
||||
"likes": 9
|
||||
},
|
||||
{
|
||||
"name": "Redesign product landing page",
|
||||
"assigned_to": 8,
|
||||
"due_date": "September 1, 2023",
|
||||
"priority": "High",
|
||||
"description": "Complete redesign based on user feedback",
|
||||
"users": 2,
|
||||
"users-offset": 6,
|
||||
"comments": 15,
|
||||
"likes": 23
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -32,7 +81,10 @@
|
||||
"name": "In Progress",
|
||||
"tasks": [
|
||||
{
|
||||
"name": "Write a release note for Admin v1.0",
|
||||
"name": "Implement new analytics tracking",
|
||||
"assigned_to": 2,
|
||||
"due_date": "July 1, 2023",
|
||||
"priority": "Low",
|
||||
"color": "green",
|
||||
"comments": 11,
|
||||
"subtasks": [
|
||||
@@ -49,7 +101,10 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Product Update - Q4 2021",
|
||||
"name": "Design new marketing campaign",
|
||||
"assigned_to": 3,
|
||||
"due_date": "August 15, 2023",
|
||||
"priority": "High",
|
||||
"description": "Dedicated form for a category of users that will perform actions.",
|
||||
"starred": true,
|
||||
"users": 2,
|
||||
@@ -58,42 +113,77 @@
|
||||
"likes": 11
|
||||
},
|
||||
{
|
||||
"name": "Code HTML email template for welcome email",
|
||||
"name": "Conduct A/B testing on landing page",
|
||||
"assigned_to": 5,
|
||||
"due_date": "June 30, 2023",
|
||||
"priority": "Low",
|
||||
"image": "static/projects/dashboard-3.png",
|
||||
"comments": 11
|
||||
},
|
||||
{
|
||||
"name": "Implement user authentication system",
|
||||
"assigned_to": 9,
|
||||
"due_date": "July 20, 2023",
|
||||
"priority": "High",
|
||||
"color": "red",
|
||||
"description": "Add OAuth and JWT authentication",
|
||||
"users": 3,
|
||||
"users-offset": 4,
|
||||
"comments": 18,
|
||||
"likes": 14
|
||||
},
|
||||
{
|
||||
"name": "Write blog post about product launch",
|
||||
"assigned_to": 10,
|
||||
"due_date": "August 5, 2023",
|
||||
"priority": "Medium",
|
||||
"users": 1,
|
||||
"users-offset": 9,
|
||||
"comments": 7,
|
||||
"likes": 10
|
||||
},
|
||||
{
|
||||
"name": "Update customer onboarding flow",
|
||||
"assigned_to": 11,
|
||||
"due_date": "July 12, 2023",
|
||||
"priority": "Medium",
|
||||
"starred": true,
|
||||
"users": 2,
|
||||
"users-offset": 2,
|
||||
"comments": 12,
|
||||
"likes": 8
|
||||
},
|
||||
{
|
||||
"name": "Setup automated testing pipeline",
|
||||
"assigned_to": 12,
|
||||
"due_date": "August 25, 2023",
|
||||
"priority": "High",
|
||||
"color": "blue",
|
||||
"users": 4,
|
||||
"users-offset": 10,
|
||||
"comments": 20,
|
||||
"likes": 16,
|
||||
"subtasks": [
|
||||
{
|
||||
"name": "Configure CI/CD",
|
||||
"done": true
|
||||
},
|
||||
{
|
||||
"name": "Write unit tests"
|
||||
},
|
||||
{
|
||||
"name": "Setup code coverage"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Test",
|
||||
"tasks": [
|
||||
{
|
||||
"name": "Design new diagrams",
|
||||
"color": "red",
|
||||
"users": 2,
|
||||
"users-offset": 9,
|
||||
"comments": 9,
|
||||
"likes": 6
|
||||
},
|
||||
{
|
||||
"name": "Improve animation loader",
|
||||
"favorite": true,
|
||||
"likes": 5,
|
||||
"name": "Review customer support tickets",
|
||||
"assigned_to": 13,
|
||||
"due_date": "July 8, 2023",
|
||||
"priority": "Low",
|
||||
"users": 1,
|
||||
"users-offset": 11,
|
||||
"comments": 6,
|
||||
"image": "static/projects/dashboard-2.png"
|
||||
},
|
||||
{
|
||||
"name": "iOS App home page",
|
||||
"users": 2,
|
||||
"users-offset": 2
|
||||
},
|
||||
{
|
||||
"name": "Changelog 1.7",
|
||||
"color": "blue",
|
||||
"due-date": "10 Jan",
|
||||
"comments": 6
|
||||
"comments": 4
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -101,13 +191,19 @@
|
||||
"name": "Completed",
|
||||
"tasks": [
|
||||
{
|
||||
"name": "Enable analytics tracking",
|
||||
"name": "Optimize website performance",
|
||||
"assigned_to": 3,
|
||||
"due_date": "June 15, 2023",
|
||||
"priority": "Low",
|
||||
"users": 1,
|
||||
"users-offset": 7,
|
||||
"likes": 1
|
||||
},
|
||||
{
|
||||
"name": "Coordinate with business development",
|
||||
"name": "Develop mobile app prototype",
|
||||
"assigned_to": 5,
|
||||
"due_date": "August 10, 2023",
|
||||
"priority": "Medium",
|
||||
"description": "This content is a little bit longer.",
|
||||
"favorite": true,
|
||||
"likes": 7,
|
||||
@@ -126,11 +222,93 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Managing teams",
|
||||
"name": "Conduct user research interviews",
|
||||
"assigned_to": 5,
|
||||
"due_date": "July 20, 2023",
|
||||
"priority": "Low",
|
||||
"description": "Publishing industries for previewing layouts and visual <a href=\"#\">#family</a> 🔥",
|
||||
"users": 2,
|
||||
"likes": 4,
|
||||
"users-offset": 10
|
||||
},
|
||||
{
|
||||
"name": "Migrate database to new server",
|
||||
"assigned_to": 14,
|
||||
"due_date": "June 10, 2023",
|
||||
"priority": "Medium",
|
||||
"description": "Complete database migration with zero downtime",
|
||||
"users": 5,
|
||||
"users-offset": 12,
|
||||
"comments": 25,
|
||||
"likes": 18
|
||||
},
|
||||
{
|
||||
"name": "Launch new marketing website",
|
||||
"assigned_to": 15,
|
||||
"due_date": "May 30, 2023",
|
||||
"priority": "High",
|
||||
"favorite": true,
|
||||
"users": 3,
|
||||
"users-offset": 14,
|
||||
"comments": 30,
|
||||
"likes": 45,
|
||||
"image": "static/projects/dashboard-2.png"
|
||||
},
|
||||
{
|
||||
"name": "Complete annual security audit",
|
||||
"assigned_to": 16,
|
||||
"due_date": "May 25, 2023",
|
||||
"priority": "High",
|
||||
"color": "red",
|
||||
"users": 4,
|
||||
"users-offset": 15,
|
||||
"comments": 22,
|
||||
"likes": 12
|
||||
},
|
||||
{
|
||||
"name": "Design new company logo",
|
||||
"assigned_to": 17,
|
||||
"due_date": "April 15, 2023",
|
||||
"priority": "Low",
|
||||
"users": 2,
|
||||
"users-offset": 16,
|
||||
"comments": 9,
|
||||
"likes": 21
|
||||
},
|
||||
{
|
||||
"name": "Write technical documentation",
|
||||
"assigned_to": 18,
|
||||
"due_date": "June 5, 2023",
|
||||
"priority": "Medium",
|
||||
"description": "Document all API endpoints and integrations",
|
||||
"users": 1,
|
||||
"users-offset": 17,
|
||||
"comments": 14,
|
||||
"likes": 7,
|
||||
"subtasks": [
|
||||
{
|
||||
"name": "Document REST API",
|
||||
"done": true
|
||||
},
|
||||
{
|
||||
"name": "Document GraphQL API",
|
||||
"done": true
|
||||
},
|
||||
{
|
||||
"name": "Create code examples"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Organize team building event",
|
||||
"assigned_to": 19,
|
||||
"due_date": "April 20, 2023",
|
||||
"priority": "Low",
|
||||
"favorite": true,
|
||||
"users": 6,
|
||||
"users-offset": 18,
|
||||
"comments": 35,
|
||||
"likes": 52
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
45
shared/includes/parts/modals/add-task.html
Normal file
45
shared/includes/parts/modals/add-task.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Add task</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" placeholder="Task name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Assigned To</label>
|
||||
<select class="form-select">
|
||||
<option value="">Select person</option>
|
||||
{% assign selected_people = "5,6,2,3" | split: "," %}
|
||||
{% for person_id_str in selected_people %}
|
||||
{% assign person_id = person_id_str | plus: 0 | minus: 1 %}
|
||||
{% assign person = people[person_id] %}
|
||||
<option value="{{ person.id }}">{{ person.full_name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Priority</label>
|
||||
<select class="form-select">
|
||||
<option value="Low">Low</option>
|
||||
<option value="Medium">Medium</option>
|
||||
<option value="High">High</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Task description"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user