fixed fixture page to use htmx tab pattern

2026-03-07 12:34:49 +11:00
parent 8b414ff7f0
commit 9f6a2303a0
3 changed files with 382 additions and 88 deletions
--- a/internal/view/seasonsview/fixture_detail.templ
+++ b/internal/view/seasonsview/fixture_detail.templ
@@ -9,39 +9,12 @@ import "fmt"
 import "sort"
 import "strings"

-templ FixtureDetailPage(
-	fixture *db.Fixture,
-	currentSchedule *db.FixtureSchedule,
-	history []*db.FixtureSchedule,
-	canSchedule bool,
-	userTeamID int,
-	result *db.FixtureResult,
-	rosters map[string][]*db.PlayerWithPlayStatus,
-	activeTab string,
-	nominatedFreeAgents []*db.FixtureFreeAgent,
-	availableFreeAgents []*db.SeasonLeagueFreeAgent,
-	previewData *db.MatchPreviewData,
-) {
+// FixtureDetailLayout renders the fixture detail page layout with header and
+// tab navigation. Tab content is rendered as children.
+templ FixtureDetailLayout(activeTab string, fixture *db.Fixture, result *db.FixtureResult) {
 	{{
-		permCache := contexts.Permissions(ctx)
-		canManage := permCache.HasPermission(permissions.FixturesManage)
 		backURL := fmt.Sprintf("/seasons/%s/leagues/%s/fixtures", fixture.Season.ShortName, fixture.League.ShortName)
 		isFinalized := result != nil && result.Finalized
-		if activeTab == "" {
-			activeTab = "overview"
-		}
-		// Force overview if schedule tab is hidden (result finalized)
-		if isFinalized && activeTab == "schedule" {
-			activeTab = "overview"
-		}
-		// Redirect preview → analysis once finalized
-		if isFinalized && activeTab == "preview" {
-			activeTab = "analysis"
-		}
-		// Redirect analysis → preview if not finalized
-		if !isFinalized && activeTab == "analysis" {
-			activeTab = "preview"
-		}
 	}}
 	@baseview.Layout(fmt.Sprintf("%s vs %s", fixture.HomeTeam.Name, fixture.AwayTeam.Name)) {
 		<div class="max-w-screen-lg mx-auto px-4 py-8">
@@ -81,29 +54,24 @@ templ FixtureDetailPage(
 					</div>
 				</div>
 				<!-- Tab Navigation -->
-				<nav class="bg-surface0 border-b border-surface1">
+				<nav class="bg-surface0 border-b border-surface1" data-tab-nav="fixture-detail-content">
 					<ul class="flex flex-wrap">
 						@fixtureTabItem("overview", "Overview", activeTab, fixture)
 						if isFinalized {
 							@fixtureTabItem("analysis", "Match Analysis", activeTab, fixture)
 						} else {
 							@fixtureTabItem("preview", "Match Preview", activeTab, fixture)
-							@fixtureTabItem("schedule", "Schedule", activeTab, fixture)
+							@fixtureTabItem("scheduling", "Schedule", activeTab, fixture)
 						}
 					</ul>
 				</nav>
 			</div>
-		<!-- Tab Content -->
-		if activeTab == "overview" {
-			@fixtureOverviewTab(fixture, currentSchedule, result, rosters, canManage, canSchedule, userTeamID, nominatedFreeAgents, availableFreeAgents)
-		} else if activeTab == "preview" && previewData != nil {
-			@fixtureMatchPreviewTab(fixture, rosters, previewData)
-		} else if activeTab == "analysis" && result != nil && result.Finalized {
-			@fixtureMatchAnalysisTab(fixture, result, rosters, previewData)
-		} else if activeTab == "schedule" {
-				@fixtureScheduleTab(fixture, currentSchedule, history, canSchedule, canManage, userTeamID)
-			}
+			<!-- Content Area -->
+			<main id="fixture-detail-content">
+				{ children... }
+			</main>
 		</div>
+		<script src="/static/js/tabs.js" defer></script>
 	}
 }

@@ -113,14 +81,15 @@ templ fixtureTabItem(section string, label string, activeTab string, fixture *db
 		baseClasses := "inline-block px-6 py-3 transition-colors cursor-pointer border-b-2"
 		activeClasses := "border-blue text-blue font-semibold"
 		inactiveClasses := "border-transparent text-subtext0 hover:text-text hover:border-surface2"
-		url := fmt.Sprintf("/fixtures/%d", fixture.ID)
-		if section != "overview" {
-			url = fmt.Sprintf("/fixtures/%d?tab=%s", fixture.ID, section)
-		}
+		url := fmt.Sprintf("/fixtures/%d/%s", fixture.ID, section)
 	}}
 	<li class="inline-block">
 		<a
 			href={ templ.SafeURL(url) }
+			hx-post={ url }
+			hx-target="#fixture-detail-content"
+			hx-swap="innerHTML"
+			hx-push-url={ url }
 			class={ baseClasses, templ.KV(activeClasses, isActive), templ.KV(inactiveClasses, !isActive) }
 		>
 			{ label }
@@ -128,6 +97,107 @@ templ fixtureTabItem(section string, label string, activeTab string, fixture *db
 	</li>
 }

+// ==================== Full page wrappers (for GET requests / direct navigation) ====================
+
+templ FixtureDetailOverviewPage(
+	fixture *db.Fixture,
+	currentSchedule *db.FixtureSchedule,
+	canSchedule bool,
+	userTeamID int,
+	result *db.FixtureResult,
+	rosters map[string][]*db.PlayerWithPlayStatus,
+	nominatedFreeAgents []*db.FixtureFreeAgent,
+	availableFreeAgents []*db.SeasonLeagueFreeAgent,
+) {
+	@FixtureDetailLayout("overview", fixture, result) {
+		@FixtureDetailOverviewContent(fixture, currentSchedule, canSchedule, userTeamID, result, rosters, nominatedFreeAgents, availableFreeAgents)
+	}
+}
+
+templ FixtureDetailPreviewPage(
+	fixture *db.Fixture,
+	result *db.FixtureResult,
+	rosters map[string][]*db.PlayerWithPlayStatus,
+	previewData *db.MatchPreviewData,
+) {
+	@FixtureDetailLayout("preview", fixture, result) {
+		@FixtureDetailPreviewContent(fixture, rosters, previewData)
+	}
+}
+
+templ FixtureDetailAnalysisPage(
+	fixture *db.Fixture,
+	result *db.FixtureResult,
+	rosters map[string][]*db.PlayerWithPlayStatus,
+	previewData *db.MatchPreviewData,
+) {
+	@FixtureDetailLayout("analysis", fixture, result) {
+		@FixtureDetailAnalysisContent(fixture, result, rosters, previewData)
+	}
+}
+
+templ FixtureDetailSchedulePage(
+	fixture *db.Fixture,
+	currentSchedule *db.FixtureSchedule,
+	history []*db.FixtureSchedule,
+	canSchedule bool,
+	userTeamID int,
+) {
+	@FixtureDetailLayout("scheduling", fixture, nil) {
+		@FixtureDetailScheduleContent(fixture, currentSchedule, history, canSchedule, userTeamID)
+	}
+}
+
+// ==================== Tab content components (for POST requests / HTMX swaps) ====================
+
+templ FixtureDetailOverviewContent(
+	fixture *db.Fixture,
+	currentSchedule *db.FixtureSchedule,
+	canSchedule bool,
+	userTeamID int,
+	result *db.FixtureResult,
+	rosters map[string][]*db.PlayerWithPlayStatus,
+	nominatedFreeAgents []*db.FixtureFreeAgent,
+	availableFreeAgents []*db.SeasonLeagueFreeAgent,
+) {
+	{{
+		permCache := contexts.Permissions(ctx)
+		canManage := permCache.HasPermission(permissions.FixturesManage)
+	}}
+	@fixtureOverviewTab(fixture, currentSchedule, result, rosters, canManage, canSchedule, userTeamID, nominatedFreeAgents, availableFreeAgents)
+}
+
+templ FixtureDetailPreviewContent(
+	fixture *db.Fixture,
+	rosters map[string][]*db.PlayerWithPlayStatus,
+	previewData *db.MatchPreviewData,
+) {
+	@fixtureMatchPreviewTab(fixture, rosters, previewData)
+}
+
+templ FixtureDetailAnalysisContent(
+	fixture *db.Fixture,
+	result *db.FixtureResult,
+	rosters map[string][]*db.PlayerWithPlayStatus,
+	previewData *db.MatchPreviewData,
+) {
+	@fixtureMatchAnalysisTab(fixture, result, rosters, previewData)
+}
+
+templ FixtureDetailScheduleContent(
+	fixture *db.Fixture,
+	currentSchedule *db.FixtureSchedule,
+	history []*db.FixtureSchedule,
+	canSchedule bool,
+	userTeamID int,
+) {
+	{{
+		permCache := contexts.Permissions(ctx)
+		canManage := permCache.HasPermission(permissions.FixturesManage)
+	}}
+	@fixtureScheduleTab(fixture, currentSchedule, history, canSchedule, canManage, userTeamID)
+}
+
 // ==================== Overview Tab ====================
 templ fixtureOverviewTab(
 	fixture *db.Fixture,