feat: Add Task List page (#2528)

.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.
+

preview/pages/modals.html

@@ -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>

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

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
 ---

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",

shared/data/tasks.json

@@ -1,30 +1,79 @@
 {
   "columns": [
     {
-      "name": "To Do",
+      "name": "Upcoming",
       "tasks": [
         {
-          "name": "Enable analytics tracking",
+          "name": "Improve email marketing strategy",
-          "users": 4,
+          "assigned_to": 5,
-          "users-offset": 6,
+          "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,
+          "users-offset": 1,
-          "due-date": "10 Sep",
           "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",
+          "name": "Implement user authentication system",
-          "favorite": true,
+          "assigned_to": 9,
-          "likes": 5,
+          "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,
+          "comments": 4
-          "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
         }
       ]
     },
@@ -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
         }
       ]
     }

shared/includes/parts/modals/add-task.html

@@ -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>
+