Refactor(views): Improve workout and route segment name display

The name display of workouts and route segments has been improved to handle long names and empty names more gracefully. A new helper function `Name` was added to handle this consistently across the application. Fixes #388 Signed-off-by: Jo Vandeginste <[email protected]>
jovandeginste · Jan 8, 2025 · 577ef91 · 577ef91
1 parent 04ff381
commit 577ef91
Show file tree

Hide file tree

Showing 24 changed files with 1,046 additions and 998 deletions.
diff --git a/views/equipment/show.templ b/views/equipment/show.templ
@@ -5,6 +5,7 @@ import (
 	"github.com/jovandeginste/workout-tracker/pkg/database"
 	"github.com/jovandeginste/workout-tracker/views/helpers"
 	"github.com/jovandeginste/workout-tracker/views/partials"
+	"github.com/jovandeginste/workout-tracker/views/workouts"
 )
 
 templ Show(e *database.Equipment) {
@@ -123,7 +124,9 @@ templ Show(e *database.Equipment) {
 										</div>
 									</td>
 									<td>
-										<a href={ templ.SafeURL(helpers.RouteFor(ctx, "workout-show", w.ID)) }>{ w.Name }</a>
+										<a href={ templ.SafeURL(helpers.RouteFor(ctx, "workout-show", w.ID)) }>
+											@workouts.Name(&w, 20)
+										</a>
 									</td>
 									<td class="hidden sm:table-cell">
 										@partials.SnippetDate(w.Date)

diff --git a/views/equipment/show_templ.go b/views/equipment/show_templ.go
diff --git a/views/route_segments/details.templ b/views/route_segments/details.templ
@@ -1,12 +1,23 @@
 package route_segments
 
 import (
+	"fmt"
 	"github.com/invopop/ctxi18n/i18n"
 	"github.com/jovandeginste/workout-tracker/pkg/database"
 	"github.com/jovandeginste/workout-tracker/views/helpers"
 	"github.com/jovandeginste/workout-tracker/views/partials"
 )
 
+templ Name(s *database.RouteSegment, maxLength int) {
+	if s.Name == "" {
+		<i>(no name)</i>
+	} else if maxLength > 0 && len(s.Name) > maxLength {
+		<abbr title={ s.Name }>{ fmt.Sprintf("%.*s", maxLength, s.Name) }...</abbr>
+	} else {
+		{ s.Name }
+	}
+}
+
 templ details(s *database.RouteSegment) {
 	{{ preferredUnits := helpers.CurrentUser(ctx).PreferredUnits() }}
 	<table>