Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 99b9ea4

Browse filesBrowse files
codecalmcodecalm
authored
feat: Add Task List page (#2528)
1 parent 4ce08ca commit 99b9ea4
Copy full SHA for 99b9ea4

File tree

Expand file treeCollapse file tree

7 files changed

+373
-38
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

7 files changed

+373
-38
lines changed
Open diff view settings
Collapse file

‎.changeset/tasks-list-page.md‎

Copy file name to clipboard
+6Lines changed: 6 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@tabler/preview": minor
3+
---
4+
5+
Added new Task List page with tables showing tasks organized by status (Upcoming, In Progress, Completed) and modal dialog for adding new tasks.
6+
Collapse file

‎preview/pages/modals.html‎

Copy file name to clipboardExpand all lines: preview/pages/modals.html
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,10 @@ <h3>Confirm delete modal</h3>
9696
<h3>Change password modal</h3>
9797
{% 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 %}
9898
</div>
99+
<div>
100+
<h3>Add task modal</h3>
101+
{% 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 %}
102+
</div>
99103
</div>
100104
</div>
101105
</div>
Collapse file

‎preview/pages/tasks-list.html‎

Copy file name to clipboard
+93Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: Task List
3+
page-header: Task List
4+
page-menu: extra.tasks.list
5+
layout: default
6+
permalink: tasks-list.html
7+
---
8+
9+
<div class="row">
10+
<div class="col-12">
11+
{% for section in tasks.columns %}
12+
<div class="card mb-4">
13+
<div class="card-header">
14+
<h3 class="card-title mb-0">{{ section.name }}</h3>
15+
<div class="card-actions">
16+
{% include "ui/button.html" text="New Task" icon="plus" modal-id="add-task" size="sm" %}
17+
</div>
18+
</div>
19+
<div class="table-responsive">
20+
<table class="table table-vcenter card-table table-selectable">
21+
<thead>
22+
<tr>
23+
<th class="w-1">
24+
<input type="checkbox" class="form-check-input align-middle table-selectable-check"
25+
aria-label="Select all tasks">
26+
</th>
27+
<th class="w-50">Name</th>
28+
<th class="d-none d-xl-table-cell">Assigned To</th>
29+
<th class="d-none d-xxl-table-cell">Due Date</th>
30+
<th>Priority</th>
31+
<th class="text-end">Actions</th>
32+
</tr>
33+
</thead>
34+
<tbody>
35+
{% for task in section.tasks %}
36+
{% if task.assigned_to %}
37+
{% assign person-id = task.assigned_to | minus: 1 %}
38+
{% assign person = people[person-id] %}
39+
{% endif %}
40+
<tr>
41+
<td>
42+
<input type="checkbox" class="form-check-input align-middle table-selectable-check"
43+
aria-label="Select task">
44+
</td>
45+
<td>
46+
{{ task.name }}
47+
</td>
48+
<td>
49+
{% if task.assigned_to and person %}
50+
<div class="d-flex align-items-center">
51+
{% include "ui/avatar.html" person-id=task.assigned_to size="xs" class="me-2" %}
52+
<span>{{ person.full_name }}</span>
53+
</div>
54+
{% else %}
55+
<span class="text-secondary">Unassigned</span>
56+
{% endif %}
57+
</td>
58+
<td class="text-secondary">
59+
{% if task.due_date %}
60+
{% include "ui/icon.html" icon="calendar" class="me-1" %}
61+
{{ task.due_date }}
62+
{% elsif task.due-date %}
63+
{% include "ui/icon.html" icon="calendar" class="me-1" %}
64+
{{ task.due-date }}
65+
{% else %}
66+
<span class="text-muted">—</span>
67+
{% endif %}
68+
</td>
69+
<td>
70+
{% if task.priority == "High" %}
71+
{% include "ui/badge.html" text="High" color="red" light %}
72+
{% elsif task.priority == "Medium" %}
73+
{% include "ui/badge.html" text="Medium" color="yellow" light %}
74+
{% elsif task.priority == "Low" %}
75+
{% include "ui/badge.html" text="Low" color="blue" light %}
76+
{% else %}
77+
{% include "ui/badge.html" text="—" light %}
78+
{% endif %}
79+
</td>
80+
<td class="text-end">
81+
{% include "ui/button.html" text="View" size="sm" %}
82+
</td>
83+
</tr>
84+
{% endfor %}
85+
</tbody>
86+
</table>
87+
</div>
88+
</div>
89+
{% endfor %}
90+
</div>
91+
</div>
92+
93+
{% include "ui/modal.html" modal-id="add-task" %}
Collapse file

‎preview/pages/tasks.html‎

Copy file name to clipboardExpand all lines: preview/pages/tasks.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Tasks
33
page-header: Tabler Inc. Tasks
44
page-header-actions: add-board
5-
page-menu: extra.tasks
5+
page-menu: extra.tasks.kanban
66
layout: default
77
permalink: tasks.html
88
---
Collapse file

‎shared/data/menu.json‎

Copy file name to clipboardExpand all lines: shared/data/menu.json
+10-1Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,16 @@
329329
},
330330
"tasks": {
331331
"title": "Tasks",
332-
"url": "tasks.html"
332+
"children": {
333+
"kanban": {
334+
"title": "Kanban",
335+
"url": "tasks.html"
336+
},
337+
"list": {
338+
"title": "Task List",
339+
"url": "tasks-list.html"
340+
}
341+
}
333342
},
334343
"text-features": {
335344
"title": "Text features",

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.