feat(ui): integrate project and task pages with shell
This commit is contained in:
@@ -1,36 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title th:text="${details.task.title}">Task</title>
|
||||
</head>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org"
|
||||
th:replace="~{fragments/layout :: shell(
|
||||
pageTitle=${details.task.title},
|
||||
section='Projects',
|
||||
activeNav='projects',
|
||||
primaryAction=~{},
|
||||
content=~{::main})}">
|
||||
<body>
|
||||
<main>
|
||||
<h1 th:text="${details.task.title}">Task</h1>
|
||||
<p th:text="${details.task.description ?: 'No description'}">No description</p>
|
||||
<p>Assignee: <strong th:text="${details.task.assigneeName}">Assignee</strong></p>
|
||||
<p>Status: <strong th:text="${details.task.status}">TODO</strong></p>
|
||||
<p>Due date: <span th:text="${details.task.dueDate ?: '—'}">—</span></p>
|
||||
|
||||
<form th:if="${details.canChangeStatus}" method="post" th:action="@{/projects/{projectId}/tasks/{taskId}/status(projectId=${projectId},taskId=${details.task.id})}">
|
||||
<label for="status">New status</label>
|
||||
<select id="status" name="status" required>
|
||||
<option th:each="status : ${statuses}" th:value="${status}" th:text="${status}">TODO</option>
|
||||
</select>
|
||||
<button type="submit">Change status</button>
|
||||
<p class="page-description" th:text="${details.task.description == null || #strings.isEmpty(details.task.description) ? 'No Task description.' : details.task.description}">Task description.</p>
|
||||
<section class="panel metric-strip metric-strip-three" aria-label="Task details">
|
||||
<div class="metric"><div class="metric-label">Assignee</div><div class="metric-value" th:text="${details.task.assigneeName}">Assignee</div></div>
|
||||
<div class="metric"><div class="metric-label">Status</div><div class="metric-value"><span class="badge" th:classappend="${details.task.status.name() == 'BLOCKED' ? ' badge-warning' : details.task.status.name() == 'DONE' ? ' badge-success' : ''}" th:text="${details.task.status}">TODO</span></div></div>
|
||||
<div class="metric"><div class="metric-label">Due date</div><div class="metric-value" th:text="${details.task.dueDate == null ? 'No due date' : #temporals.format(details.task.dueDate, 'dd/MM/yyyy')}">No due date</div></div>
|
||||
</section>
|
||||
<form class="panel form-panel filter-form" th:if="${details.canChangeStatus}" method="post" th:action="@{/projects/{projectId}/tasks/{taskId}/status(projectId=${projectId},taskId=${details.task.id})}">
|
||||
<div class="field"><label class="field-label" for="status">New status</label><select class="control" id="status" name="status" required><option th:each="status : ${statuses}" th:value="${status}" th:text="${status}" th:selected="${status == details.task.status}">TODO</option></select></div>
|
||||
<span></span><button class="button button-primary" type="submit">Change status</button>
|
||||
</form>
|
||||
|
||||
<section aria-labelledby="comments-heading">
|
||||
<h2 id="comments-heading">Comments</h2>
|
||||
<ol>
|
||||
<li th:each="comment : ${details.comments}" th:text="${comment.body}">Comment</li>
|
||||
</ol>
|
||||
<form th:if="${details.canComment}" method="post" th:action="@{/projects/{projectId}/tasks/{taskId}/comments(projectId=${projectId},taskId=${details.task.id})}">
|
||||
<label for="body">Comment</label>
|
||||
<textarea id="body" name="body" required></textarea>
|
||||
<button type="submit">Add comment</button>
|
||||
</form>
|
||||
<section class="panel form-panel" aria-labelledby="comments-heading">
|
||||
<header class="panel-header"><h2 class="panel-title" id="comments-heading">Comments</h2></header>
|
||||
<div th:if="${#lists.isEmpty(details.comments)}"><th:block th:replace="~{fragments/components :: empty('No comments', 'Task discussion will appear here.')} "></th:block></div>
|
||||
<div class="table-scroll" th:unless="${#lists.isEmpty(details.comments)}"><table class="data-table"><caption class="sr-only">Task comments</caption><thead><tr><th scope="col">Comment</th><th scope="col">Created</th></tr></thead><tbody><tr th:each="comment : ${details.comments}"><td th:text="${comment.body}">Comment</td><td th:text="${#temporals.format(comment.createdAt, 'dd/MM/yyyy HH:mm')}">Created</td></tr></tbody></table></div>
|
||||
<form class="form-grid form-panel" th:if="${details.canComment}" method="post" th:action="@{/projects/{projectId}/tasks/{taskId}/comments(projectId=${projectId},taskId=${details.task.id})}"><div class="field"><label class="field-label" for="body">Comment</label><textarea class="control" id="body" name="body" rows="4" required></textarea></div><div class="form-actions"><button class="button button-primary" type="submit">Add comment</button></div></form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user