feat(ui): integrate project and task pages with shell

This commit is contained in:
sechmachine
2026-08-15 01:35:30 +07:00
parent b1c6b170d0
commit 401f67671a
12 changed files with 297 additions and 136 deletions
@@ -1,12 +1,27 @@
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="utf-8"><title th:text="${project.name}">Project</title></head>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
th:replace="~{fragments/layout :: shell(
pageTitle=${project.name},
section='Projects',
activeNav='projects',
primaryAction=~{::#primary-action},
content=~{::main})}">
<body>
<a id="primary-action" class="button button-primary" th:href="@{/projects/{id}/tasks(id=${project.id})}">View Tasks</a>
<main>
<h1 th:text="${project.name}">Project</h1>
<p th:text="${project.description}"></p>
<dl><dt>Status</dt><dd th:text="${project.status}"></dd><dt>Mentor</dt><dd th:text="${project.mentorName}"></dd><dt>Leader</dt><dd th:text="${project.leaderName}"></dd></dl>
<nav aria-label="Project sections"><a th:href="@{/projects/{id}/members(id=${project.id})}">Members</a> <a th:href="@{/projects/{id}/leadership(id=${project.id})}">Leadership</a></nav>
<p class="page-description" th:text="${project.description == null || #strings.isEmpty(project.description) ? 'No Project description.' : project.description}">Project description.</p>
<section class="panel metric-strip" aria-label="Project details">
<div class="metric"><div class="metric-label">Status</div><div class="metric-value"><span class="badge" th:classappend="${project.status == 'ACTIVE' ? ' badge-success' : ''}" th:text="${project.status}">PLANNED</span></div></div>
<div class="metric"><div class="metric-label">Mentor</div><div class="metric-value" th:text="${project.mentorName}">Mentor</div></div>
<div class="metric"><div class="metric-label">Leader</div><div class="metric-value" th:text="${project.leaderName}">Leader</div></div>
<div class="metric"><div class="metric-label">Project window</div><div class="metric-value" th:text="${#temporals.format(project.startDate, 'dd/MM/yyyy') + ' ' + #temporals.format(project.endDate, 'dd/MM/yyyy')}">15/08/2026 30/09/2026</div></div>
</section>
<nav class="tabs" aria-label="Project sections">
<a class="tab" th:href="@{/projects/{id}(id=${project.id})}" aria-current="page">Overview</a>
<a class="tab" th:href="@{/projects/{id}/members(id=${project.id})}">Members</a>
<a class="tab" th:href="@{/projects/{id}/leadership(id=${project.id})}">Leadership</a>
<a class="tab" th:href="@{/projects/{id}/tasks(id=${project.id})}">Tasks</a>
</nav>
</main>
</body>
</html>