Paging in activity details view ("Back to Activities" link should work now)

This commit is contained in:
Niklas Deutschmann 2026-05-01 16:25:32 +02:00
parent 6674bed25f
commit 0a42ebc0e4
3 changed files with 12 additions and 7 deletions

View file

@ -1,9 +1,11 @@
package net.javahippie.fitpub.controller; package net.javahippie.fitpub.controller;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
/** /**
* Controller for serving activity-related HTML pages * Controller for serving activity-related HTML pages
@ -32,8 +34,11 @@ public class ActivitiesViewController {
* Show activity detail page * Show activity detail page
*/ */
@GetMapping("/{id}") @GetMapping("/{id}")
public String viewActivity(@PathVariable String id) { public String viewActivity(@PathVariable String id, @RequestParam String page, Model model) {
// The activity data will be loaded via JavaScript API calls // The activity data will be loaded via JavaScript API calls
if (page != null) {
model.addAttribute("page", page);
}
return "activities/detail"; return "activities/detail";
} }

View file

@ -394,7 +394,7 @@
<!-- Back Button --> <!-- Back Button -->
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<a th:href="@{/activities}" class="btn btn-outline-secondary"> <a th:href="@{/activities(page=${page})}" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i> Back to Activities <i class="bi bi-arrow-left"></i> Back to Activities
</a> </a>
</div> </div>

View file

@ -126,7 +126,7 @@
loadingIndicator.classList.add('d-none'); loadingIndicator.classList.add('d-none');
if (data.content && data.content.length > 0) { if (data.content && data.content.length > 0) {
renderActivities(data.content); renderActivities(data.content, data.number + 1);
renderPagination(data); renderPagination(data);
activitiesList.classList.remove('d-none'); activitiesList.classList.remove('d-none');
pagination.classList.remove('d-none'); pagination.classList.remove('d-none');
@ -147,14 +147,14 @@
} }
} }
function renderActivities(activities) { function renderActivities(activities, currentPage) {
activitiesList.innerHTML = activities.map(activity => ` activitiesList.innerHTML = activities.map(activity => `
<div class="card activity-card mb-3${activity.race ? ' race-list-card' : ''}"> <div class="card activity-card mb-3${activity.race ? ' race-list-card' : ''}">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<h5 class="card-title"> <h5 class="card-title">
${renderTitleLinkWithHashtags(activity.title, `/activities/${activity.id}`)} ${renderTitleLinkWithHashtags(activity.title, `/activities/${activity.id}?page=${currentPage}`)}
</h5> </h5>
<p class="text-muted mb-2"> <p class="text-muted mb-2">
<span class="activity-type-badge activity-type-${(activity.activityType || '').toLowerCase().replace(/\s+/g, '-')}${activity.race ? ' race-activity' : ''}"> <span class="activity-type-badge activity-type-${(activity.activityType || '').toLowerCase().replace(/\s+/g, '-')}${activity.race ? ' race-activity' : ''}">
@ -195,10 +195,10 @@
</div> </div>
</div> </div>
<div class="mt-3 d-flex gap-2"> <div class="mt-3 d-flex gap-2">
<a href="/activities/${activity.id}" class="btn btn-sm btn-outline-primary"> <a href="/activities/${activity.id}?page=${currentPage}" class="btn btn-sm btn-outline-primary">
<i class="bi bi-eye"></i> View <i class="bi bi-eye"></i> View
</a> </a>
<a href="/activities/${activity.id}/edit" class="btn btn-sm btn-outline-secondary"> <a href="/activities/${activity.id}/edit?page=${currentPage}" class="btn btn-sm btn-outline-secondary">
<i class="bi bi-pencil"></i> Edit <i class="bi bi-pencil"></i> Edit
</a> </a>
<button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('${activity.id}')"> <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('${activity.id}')">