feat: add NPM and Authentik sections to Control Room navigation
- Add ControlRoomNav enum with section grouping (Portainer, NPM, Authentik) - Update NavPanel to support conditional section headers - Rename NavSection to NavItem with optional section field - Add routes for NPM: Proxy Hosts, Redirections, Streams, SSL Certificates - Add routes for Authentik: Users, Groups, Applications - Section headers auto-show when multiple sections exist 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeroen Schweitzer
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
cbf6ca5338
commit
ae2bbcd58d
@@ -11,35 +11,15 @@ import 'package:tatlock_ui/features/control_room/stacks/presentation/widgets/sta
|
||||
import 'package:tatlock_ui/shared/layouts/widgets/filter_panel.dart';
|
||||
import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
|
||||
|
||||
/// Control Room navigation sections.
|
||||
enum ControlRoomSection {
|
||||
containers('containers', 'Containers', Icons.dns),
|
||||
networks('networks', 'Networks', Icons.hub),
|
||||
volumes('volumes', 'Volumes', Icons.storage),
|
||||
images('images', 'Images', Icons.photo_library);
|
||||
|
||||
const ControlRoomSection(this.id, this.label, this.icon);
|
||||
|
||||
final String id;
|
||||
final String label;
|
||||
final IconData icon;
|
||||
|
||||
NavSection toNavSection() => NavSection(
|
||||
id: id,
|
||||
label: label,
|
||||
icon: icon,
|
||||
);
|
||||
}
|
||||
|
||||
/// Main Control Room page with nav panel and section content.
|
||||
class ControlRoomPage extends ConsumerWidget {
|
||||
const ControlRoomPage({
|
||||
super.key,
|
||||
this.section = ControlRoomSection.containers,
|
||||
this.nav = ControlRoomNav.containers,
|
||||
});
|
||||
|
||||
/// The current section to display.
|
||||
final ControlRoomSection section;
|
||||
/// The current nav item to display.
|
||||
final ControlRoomNav nav;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
@@ -48,20 +28,18 @@ class ControlRoomPage extends ConsumerWidget {
|
||||
return Scaffold(
|
||||
body: Row(
|
||||
children: [
|
||||
// Nav Panel - section navigation
|
||||
// Nav Panel - section navigation with grouping
|
||||
NavPanel(
|
||||
title: 'Sections',
|
||||
icon: Icons.dns_outlined,
|
||||
sections: ControlRoomSection.values
|
||||
.map((s) => s.toNavSection())
|
||||
.toList(),
|
||||
selectedId: section.id,
|
||||
onSectionSelected: (id) {
|
||||
final newSection = ControlRoomSection.values.firstWhere(
|
||||
(s) => s.id == id,
|
||||
items: ControlRoomNav.values.map((n) => n.toNavItem()).toList(),
|
||||
selectedId: nav.id,
|
||||
onItemSelected: (id) {
|
||||
final newNav = ControlRoomNav.values.firstWhere(
|
||||
(n) => n.id == id,
|
||||
);
|
||||
// Navigate to section URL
|
||||
context.go(pathForSection(newSection));
|
||||
context.go(pathForNav(newNav));
|
||||
// Clear stack selection when changing sections
|
||||
ref.read(selectedStackProvider.notifier).clear();
|
||||
},
|
||||
@@ -74,7 +52,7 @@ class ControlRoomPage extends ConsumerWidget {
|
||||
),
|
||||
// Section content
|
||||
Expanded(
|
||||
child: _SectionContent(section: section),
|
||||
child: _SectionContent(nav: nav),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -82,21 +60,19 @@ class ControlRoomPage extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// Renders content for the selected section.
|
||||
/// Renders content for the selected nav item.
|
||||
class _SectionContent extends ConsumerWidget {
|
||||
const _SectionContent({required this.section});
|
||||
const _SectionContent({required this.nav});
|
||||
|
||||
final ControlRoomSection section;
|
||||
final ControlRoomNav nav;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
switch (section) {
|
||||
case ControlRoomSection.containers:
|
||||
switch (nav) {
|
||||
case ControlRoomNav.containers:
|
||||
return const _ContainersSection();
|
||||
case ControlRoomSection.networks:
|
||||
case ControlRoomSection.volumes:
|
||||
case ControlRoomSection.images:
|
||||
return _PlaceholderSection(section: section);
|
||||
default:
|
||||
return _PlaceholderSection(nav: nav);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -131,11 +107,11 @@ class _ContainersSection extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// Placeholder for sections not yet implemented.
|
||||
/// Placeholder for nav items not yet implemented.
|
||||
class _PlaceholderSection extends StatelessWidget {
|
||||
const _PlaceholderSection({required this.section});
|
||||
const _PlaceholderSection({required this.nav});
|
||||
|
||||
final ControlRoomSection section;
|
||||
final ControlRoomNav nav;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -147,20 +123,20 @@ class _PlaceholderSection extends StatelessWidget {
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
section.icon,
|
||||
nav.icon,
|
||||
size: 64,
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
section.label,
|
||||
nav.label,
|
||||
style: textTheme.headlineSmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Coming soon',
|
||||
'${nav.section} • Coming soon',
|
||||
style: textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.outline,
|
||||
),
|
||||
|
||||
@@ -1,43 +1,64 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:tatlock_ui/features/control_room/presentation/pages/control_room_page.dart';
|
||||
import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
|
||||
|
||||
/// Route paths for Control Room.
|
||||
abstract class ControlRoomRoutes {
|
||||
static const base = '/control-room';
|
||||
// Portainer
|
||||
static const containers = '/control-room/containers';
|
||||
static const networks = '/control-room/networks';
|
||||
static const volumes = '/control-room/volumes';
|
||||
static const images = '/control-room/images';
|
||||
// NPM
|
||||
static const proxyHosts = '/control-room/proxy-hosts';
|
||||
static const redirections = '/control-room/redirections';
|
||||
static const streams = '/control-room/streams';
|
||||
static const certificates = '/control-room/certificates';
|
||||
// Authentik
|
||||
static const users = '/control-room/users';
|
||||
static const groups = '/control-room/groups';
|
||||
static const applications = '/control-room/applications';
|
||||
}
|
||||
|
||||
/// Control Room section from route.
|
||||
ControlRoomSection? sectionFromPath(String path) {
|
||||
if (path.startsWith(ControlRoomRoutes.networks)) {
|
||||
return ControlRoomSection.networks;
|
||||
} else if (path.startsWith(ControlRoomRoutes.volumes)) {
|
||||
return ControlRoomSection.volumes;
|
||||
} else if (path.startsWith(ControlRoomRoutes.images)) {
|
||||
return ControlRoomSection.images;
|
||||
} else if (path.startsWith(ControlRoomRoutes.containers) ||
|
||||
path == ControlRoomRoutes.base) {
|
||||
return ControlRoomSection.containers;
|
||||
}
|
||||
return null;
|
||||
/// Control Room navigation items with section grouping.
|
||||
enum ControlRoomNav {
|
||||
// Portainer section
|
||||
containers('containers', 'Containers', Icons.dns, 'Portainer'),
|
||||
networks('networks', 'Networks', Icons.hub, 'Portainer'),
|
||||
volumes('volumes', 'Volumes', Icons.storage, 'Portainer'),
|
||||
images('images', 'Images', Icons.photo_library, 'Portainer'),
|
||||
// NPM section
|
||||
proxyHosts('proxy-hosts', 'Proxy Hosts', Icons.public, 'NPM'),
|
||||
redirections('redirections', 'Redirections', Icons.alt_route, 'NPM'),
|
||||
streams('streams', 'Streams', Icons.stream, 'NPM'),
|
||||
certificates('certificates', 'SSL Certificates', Icons.verified_user, 'NPM'),
|
||||
// Authentik section
|
||||
users('users', 'Users', Icons.people, 'Authentik'),
|
||||
groups('groups', 'Groups', Icons.group_work, 'Authentik'),
|
||||
applications('applications', 'Applications', Icons.apps, 'Authentik');
|
||||
|
||||
const ControlRoomNav(this.id, this.label, this.icon, this.section);
|
||||
|
||||
final String id;
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final String section;
|
||||
|
||||
NavItem toNavItem() => NavItem(
|
||||
id: id,
|
||||
label: label,
|
||||
icon: icon,
|
||||
section: section,
|
||||
);
|
||||
|
||||
/// Get route path for this nav item.
|
||||
String get path => '/control-room/$id';
|
||||
}
|
||||
|
||||
/// Get route path for a section.
|
||||
String pathForSection(ControlRoomSection section) {
|
||||
switch (section) {
|
||||
case ControlRoomSection.containers:
|
||||
return ControlRoomRoutes.containers;
|
||||
case ControlRoomSection.networks:
|
||||
return ControlRoomRoutes.networks;
|
||||
case ControlRoomSection.volumes:
|
||||
return ControlRoomRoutes.volumes;
|
||||
case ControlRoomSection.images:
|
||||
return ControlRoomRoutes.images;
|
||||
}
|
||||
}
|
||||
/// Get route path for a nav item.
|
||||
String pathForNav(ControlRoomNav nav) => nav.path;
|
||||
|
||||
/// Control Room routes for go_router.
|
||||
List<RouteBase> controlRoomRoutes() {
|
||||
@@ -48,30 +69,20 @@ List<RouteBase> controlRoomRoutes() {
|
||||
name: 'controlRoom',
|
||||
redirect: (context, state) => ControlRoomRoutes.containers,
|
||||
),
|
||||
// Section routes
|
||||
GoRoute(
|
||||
path: ControlRoomRoutes.containers,
|
||||
name: 'controlRoomContainers',
|
||||
builder: (context, state) =>
|
||||
const ControlRoomPage(section: ControlRoomSection.containers),
|
||||
),
|
||||
GoRoute(
|
||||
path: ControlRoomRoutes.networks,
|
||||
name: 'controlRoomNetworks',
|
||||
builder: (context, state) =>
|
||||
const ControlRoomPage(section: ControlRoomSection.networks),
|
||||
),
|
||||
GoRoute(
|
||||
path: ControlRoomRoutes.volumes,
|
||||
name: 'controlRoomVolumes',
|
||||
builder: (context, state) =>
|
||||
const ControlRoomPage(section: ControlRoomSection.volumes),
|
||||
),
|
||||
GoRoute(
|
||||
path: ControlRoomRoutes.images,
|
||||
name: 'controlRoomImages',
|
||||
builder: (context, state) =>
|
||||
const ControlRoomPage(section: ControlRoomSection.images),
|
||||
),
|
||||
// Generate routes for all nav items
|
||||
for (final nav in ControlRoomNav.values)
|
||||
GoRoute(
|
||||
path: nav.path,
|
||||
name: 'controlRoom${_capitalize(nav.id.replaceAll('-', '_'))}',
|
||||
builder: (context, state) => ControlRoomPage(nav: nav),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
String _capitalize(String s) {
|
||||
if (s.isEmpty) return s;
|
||||
return s
|
||||
.split('_')
|
||||
.map((part) => part[0].toUpperCase() + part.substring(1))
|
||||
.join('');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user