diff --git a/.changeset/tasks-list-page.md b/.changeset/tasks-list-page.md new file mode 100644 index 000000000..80b4c6147 --- /dev/null +++ b/.changeset/tasks-list-page.md @@ -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. + diff --git a/preview/pages/modals.html b/preview/pages/modals.html index cc9cfa636..9f5693a1a 100644 --- a/preview/pages/modals.html +++ b/preview/pages/modals.html @@ -96,6 +96,10 @@ page-libs: [signature_pad, hugerte, litepicker]

Change password modal

{% 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 %} +
+

Add task modal

+ {% 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 %} +
diff --git a/preview/pages/tasks-list.html b/preview/pages/tasks-list.html new file mode 100644 index 000000000..13a80ed79 --- /dev/null +++ b/preview/pages/tasks-list.html @@ -0,0 +1,93 @@ +--- +title: Task List +page-header: Task List +page-menu: extra.tasks.list +layout: default +permalink: tasks-list.html +--- + +
+
+ {% for section in tasks.columns %} +
+
+

{{ section.name }}

+
+ {% include "ui/button.html" text="New Task" icon="plus" modal-id="add-task" size="sm" %} +
+
+
+ + + + + + + + + + + + + {% for task in section.tasks %} + {% if task.assigned_to %} + {% assign person-id = task.assigned_to | minus: 1 %} + {% assign person = people[person-id] %} + {% endif %} + + + + + + + + + {% endfor %} + +
+ + NameAssigned ToDue DatePriorityActions
+ + + {{ task.name }} + + {% if task.assigned_to and person %} +
+ {% include "ui/avatar.html" person-id=task.assigned_to size="xs" class="me-2" %} + {{ person.full_name }} +
+ {% else %} + Unassigned + {% endif %} +
+ {% 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 %} + + {% endif %} + + {% 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 %} + + {% include "ui/button.html" text="View" size="sm" %} +
+
+
+ {% endfor %} +
+
+ +{% include "ui/modal.html" modal-id="add-task" %} \ No newline at end of file diff --git a/preview/pages/tasks.html b/preview/pages/tasks.html index d2df4f8be..8b974c568 100644 --- a/preview/pages/tasks.html +++ b/preview/pages/tasks.html @@ -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 --- diff --git a/shared/data/menu.json b/shared/data/menu.json index 278422bb5..3a481c23b 100644 --- a/shared/data/menu.json +++ b/shared/data/menu.json @@ -329,7 +329,16 @@ }, "tasks": { "title": "Tasks", - "url": "tasks.html" + "children": { + "kanban": { + "title": "Kanban", + "url": "tasks.html" + }, + "list": { + "title": "Task List", + "url": "tasks-list.html" + } + } }, "text-features": { "title": "Text features", diff --git a/shared/data/tasks.json b/shared/data/tasks.json index 4df8579ba..f0999c9f5 100644 --- a/shared/data/tasks.json +++ b/shared/data/tasks.json @@ -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": "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": "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": "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 #family 🔥", "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 } ] } diff --git a/shared/includes/parts/modals/add-task.html b/shared/includes/parts/modals/add-task.html new file mode 100644 index 000000000..1525ed7db --- /dev/null +++ b/shared/includes/parts/modals/add-task.html @@ -0,0 +1,45 @@ + + + + + +