feat(client): Tab groups (closes ##65)

Oberhauser-Dev · Aug 20, 2024 · 869d2f6 · 869d2f6
1 parent 2d7f491
commit 869d2f6
Show file tree

Hide file tree

Showing 17 changed files with 159 additions and 119 deletions.
diff --git a/wrestling_scoreboard_client/lib/view/screens/home/organizations_view.dart b/wrestling_scoreboard_client/lib/view/screens/home/organizations_view.dart
@@ -14,10 +14,10 @@ class OrganizationsView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final localizations = AppLocalizations.of(context)!;
-    return ResponsiveScrollView(
+    return ResponsiveContainer(
       child: ManyConsumer<Organization, Null>(
         builder: (BuildContext context, List<Organization> organizations) {
-          return ListGroup(
+          return GroupedList(
             header: HeadingItem(
               title: localizations.organizations,
               trailing: IconButton(

diff --git a/wrestling_scoreboard_client/lib/view/screens/overview/bout_overview.dart b/wrestling_scoreboard_client/lib/view/screens/overview/bout_overview.dart
@@ -7,8 +7,10 @@ import 'package:wrestling_scoreboard_client/localization/duration.dart';
 import 'package:wrestling_scoreboard_client/provider/network_provider.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/common.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/consumer.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/font.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/grouped_list.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/info.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/tab_group.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 abstract class BoutOverview extends ConsumerWidget implements AbstractOverview<Bout> {
@@ -84,7 +86,10 @@ abstract class BoutOverview extends ConsumerWidget implements AbstractOverview<B
           dataObject: data,
           label: classLocale,
           details: data.title(context),
-          body: GroupedList(items: [
+          tabs: [
+            Tab(child: HeadingText(localizations.info)),
+          ],
+          body: TabGroup(items: [
             description,
           ]),
         );

diff --git a/wrestling_scoreboard_client/lib/view/screens/overview/club_overview.dart b/wrestling_scoreboard_client/lib/view/screens/overview/club_overview.dart
@@ -11,8 +11,10 @@ import 'package:wrestling_scoreboard_client/view/screens/overview/common.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/membership_overview.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/team_overview.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/consumer.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/font.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/grouped_list.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/info.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/tab_group.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 class ClubOverview extends ConsumerWidget {
@@ -49,14 +51,19 @@ class ClubOverview extends ConsumerWidget {
           dataObject: data,
           label: localizations.club,
           details: data.name,
-          body: GroupedList(items: [
+          tabs: [
+            Tab(child: HeadingText(localizations.info)),
+            Tab(child: HeadingText(localizations.teams)),
+            Tab(child: HeadingText(localizations.memberships)),
+          ],
+          // TODO
+          body: TabGroup(items: [
             description,
             ManyConsumer<Team, Club>(
               filterObject: data,
               builder: (BuildContext context, List<Team> teams) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.teams,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(
@@ -82,9 +89,8 @@ class ClubOverview extends ConsumerWidget {
             ManyConsumer<Membership, Club>(
               filterObject: data,
               builder: (BuildContext context, List<Membership> memberships) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.memberships,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(

diff --git a/wrestling_scoreboard_client/lib/view/screens/overview/common.dart b/wrestling_scoreboard_client/lib/view/screens/overview/common.dart
@@ -47,41 +47,47 @@ class OverviewScaffold<T extends DataObject> extends ConsumerWidget {
     required this.details,
     this.actions,
     required this.dataObject,
+    required this.tabs,
   });
 
   final Widget body;
   final String label;
   final String details;
   final List<Widget>? actions;
   final T dataObject;
+  final List<Tab> tabs;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final localizations = AppLocalizations.of(context)!;
     final tableName = getTableNameFromType(T);
-    return WindowStateScaffold(
-      appBarTitle: AppBarTitle(label: label, details: details),
-      actions: [
-        ...?actions,
-        LoadingBuilder(
-            future: ref.watch(favoritesNotifierProvider),
-            builder: (BuildContext context, favorites) {
-              final isFavorite = favorites[tableName]?.contains(dataObject.id) ?? false;
-              return IconButton(
-                onPressed: () {
-                  final notifier = ref.read(favoritesNotifierProvider.notifier);
-                  if (isFavorite) {
-                    notifier.removeFavorite(tableName, dataObject.id!);
-                  } else {
-                    notifier.addFavorite(tableName, dataObject.id!);
-                  }
-                },
-                icon: isFavorite ? const Icon(Icons.star) : const Icon(Icons.star_outline),
-                tooltip: localizations.favorite,
-              );
-            }),
-      ],
-      body: body,
+    return DefaultTabController(
+      length: tabs.length,
+      child: WindowStateScaffold(
+        appBarTitle: AppBarTitle(label: label, details: details),
+        appBarBottom: TabBar(tabs: tabs, tabAlignment: TabAlignment.center, isScrollable: true),
+        actions: [
+          ...?actions,
+          LoadingBuilder(
+              future: ref.watch(favoritesNotifierProvider),
+              builder: (BuildContext context, favorites) {
+                final isFavorite = favorites[tableName]?.contains(dataObject.id) ?? false;
+                return IconButton(
+                  onPressed: () {
+                    final notifier = ref.read(favoritesNotifierProvider.notifier);
+                    if (isFavorite) {
+                      notifier.removeFavorite(tableName, dataObject.id!);
+                    } else {
+                      notifier.addFavorite(tableName, dataObject.id!);
+                    }
+                  },
+                  icon: isFavorite ? const Icon(Icons.star) : const Icon(Icons.star_outline),
+                  tooltip: localizations.favorite,
+                );
+              }),
+        ],
+        body: body,
+      ),
     );
   }
 }
diff --git a/wrestling_scoreboard_client/lib/view/screens/overview/organization_overview.dart b/wrestling_scoreboard_client/lib/view/screens/overview/organization_overview.dart
@@ -11,8 +11,10 @@ import 'package:wrestling_scoreboard_client/view/screens/overview/common.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/shared/actions.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/team_match/division_overview.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/consumer.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/font.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/grouped_list.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/info.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/tab_group.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 class OrganizationOverview extends ConsumerWidget {
@@ -65,14 +67,20 @@ class OrganizationOverview extends ConsumerWidget {
           label: localizations.organization,
           details: data.name,
           actions: [OrganizationImportAction(id: id, orgId: id, importType: OrganizationImportType.organization)],
-          body: GroupedList(items: [
+          tabs: [
+            Tab(child: HeadingText(localizations.info)),
+            Tab(child: HeadingText(localizations.organizations)),
+            Tab(child: HeadingText(localizations.divisions)),
+            Tab(child: HeadingText(localizations.clubs)),
+            Tab(child: HeadingText(localizations.competitions))
+          ],
+          body: TabGroup(items: [
             description,
             ManyConsumer<Organization, Organization>(
               filterObject: data,
               builder: (BuildContext context, List<Organization> childOrganizations) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.organizations,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(
@@ -103,9 +111,8 @@ class OrganizationOverview extends ConsumerWidget {
             ManyConsumer<Division, Organization>(
               filterObject: data,
               builder: (BuildContext context, List<Division> organizations) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.divisions,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(
@@ -136,9 +143,8 @@ class OrganizationOverview extends ConsumerWidget {
             ManyConsumer<Club, Organization>(
               filterObject: data,
               builder: (BuildContext context, List<Club> clubs) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.clubs,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(
@@ -169,9 +175,8 @@ class OrganizationOverview extends ConsumerWidget {
             ManyConsumer<Competition, Organization>(
               filterObject: data,
               builder: (BuildContext context, List<Competition> competitions) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.competitions,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () {

diff --git a/wrestling_scoreboard_client/lib/view/screens/overview/person_overview.dart b/wrestling_scoreboard_client/lib/view/screens/overview/person_overview.dart
@@ -10,8 +10,10 @@ import 'package:wrestling_scoreboard_client/view/screens/edit/person_edit.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/common.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/membership_overview.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/consumer.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/font.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/grouped_list.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/info.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/tab_group.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 abstract class AbstractPersonOverview extends ConsumerWidget implements AbstractOverview<Person> {
@@ -25,7 +27,7 @@ abstract class AbstractPersonOverview extends ConsumerWidget implements Abstract
     required Widget editPage,
     required VoidCallback onDelete,
     List<Widget>? tiles,
-    List<Widget> Function(Person data)? buildRelations,
+    Map<Tab, Widget> Function(Person data)? buildRelations,
     required int dataId,
     Person? initialData,
   }) {
@@ -73,13 +75,18 @@ abstract class AbstractPersonOverview extends ConsumerWidget implements Abstract
             ),
           ],
         );
+        final relations = buildRelations != null ? buildRelations(person) : {};
         return OverviewScaffold<Person>(
           dataObject: person,
           label: classLocale,
           details: person.fullName,
-          body: GroupedList(items: [
+          tabs: [
+            Tab(child: HeadingText(localizations.info)),
+            ...relations.keys,
+          ],
+          body: TabGroup(items: [
             description,
-            if (buildRelations != null) ...buildRelations(person),
+            ...relations.values,
           ]),
         );
       },
@@ -110,13 +117,12 @@ class PersonOverview extends AbstractPersonOverview {
         initialOrganization: person?.organization ?? initialOrganization,
       ),
       onDelete: () async {},
-      buildRelations: (Person person) => [
-        ManyConsumer<Membership, Person>(
+      buildRelations: (Person person) => {
+        Tab(child: HeadingText(localizations.memberships)): ManyConsumer<Membership, Person>(
           filterObject: person,
           builder: (BuildContext context, List<Membership> memberships) {
-            return ListGroup(
+            return GroupedList(
               header: HeadingItem(
-                title: localizations.memberships,
                 trailing: IconButton(
                   icon: const Icon(Icons.add),
                   onPressed: () => Navigator.push(
@@ -143,7 +149,7 @@ class PersonOverview extends AbstractPersonOverview {
             );
           },
         ),
-      ],
+      },
     );
   }
 

diff --git a/wrestling_scoreboard_client/lib/view/screens/overview/shared/matches_widget.dart b/wrestling_scoreboard_client/lib/view/screens/overview/shared/matches_widget.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:go_router/go_router.dart';
 import 'package:wrestling_scoreboard_client/localization/date_time.dart';
 import 'package:wrestling_scoreboard_client/view/screens/display/match/match_display.dart';
@@ -16,13 +15,11 @@ class MatchesWidget<T extends DataObject?> extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final localizations = AppLocalizations.of(context)!;
     return ManyConsumer<TeamMatch, T>(
       filterObject: filterObject,
       builder: (BuildContext context, List<TeamMatch> matches) {
-        return ListGroup(
+        return GroupedList(
           header: HeadingItem(
-            title: localizations.matches,
             trailing: IconButton(
               icon: const Icon(Icons.add),
               onPressed: () => Navigator.push(

diff --git a/wrestling_scoreboard_client/lib/view/screens/overview/team_match/division_overview.dart b/wrestling_scoreboard_client/lib/view/screens/overview/team_match/division_overview.dart
@@ -13,8 +13,10 @@ import 'package:wrestling_scoreboard_client/view/screens/overview/common.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/team_match/division_weight_class_overview.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/team_match/league_overview.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/consumer.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/font.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/grouped_list.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/info.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/tab_group.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 class DivisionOverview extends ConsumerWidget {
@@ -76,14 +78,19 @@ class DivisionOverview extends ConsumerWidget {
           dataObject: data,
           label: localizations.division,
           details: data.name,
-          body: GroupedList(items: [
+          tabs: [
+            Tab(child: HeadingText(localizations.info)),
+            Tab(child: HeadingText(localizations.divisions)),
+            Tab(child: HeadingText(localizations.leagues)),
+            Tab(child: HeadingText(localizations.weightClasses)),
+          ],
+          body: TabGroup(items: [
             description,
             ManyConsumer<Division, Division>(
               filterObject: data,
               builder: (BuildContext context, List<Division> childDivisions) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.divisions,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(
@@ -114,9 +121,8 @@ class DivisionOverview extends ConsumerWidget {
             ManyConsumer<League, Division>(
               filterObject: data,
               builder: (BuildContext context, List<League> leagues) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.leagues,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(
@@ -147,9 +153,8 @@ class DivisionOverview extends ConsumerWidget {
             ManyConsumer<DivisionWeightClass, Division>(
               filterObject: data,
               builder: (BuildContext context, List<DivisionWeightClass> divisionWeightClasses) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.weightClasses,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(

diff --git a/wrestling_scoreboard_client/lib/view/screens/overview/team_match/league_overview.dart b/wrestling_scoreboard_client/lib/view/screens/overview/team_match/league_overview.dart
@@ -11,8 +11,10 @@ import 'package:wrestling_scoreboard_client/view/screens/overview/shared/actions
 import 'package:wrestling_scoreboard_client/view/screens/overview/shared/matches_widget.dart';
 import 'package:wrestling_scoreboard_client/view/screens/overview/team_match/league_team_participation_overview.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/consumer.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/font.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/grouped_list.dart';
 import 'package:wrestling_scoreboard_client/view/widgets/info.dart';
+import 'package:wrestling_scoreboard_client/view/widgets/tab_group.dart';
 import 'package:wrestling_scoreboard_common/common.dart';
 
 class LeagueOverview extends ConsumerWidget {
@@ -67,14 +69,18 @@ class LeagueOverview extends ConsumerWidget {
           actions: [
             OrganizationImportAction(id: id, orgId: data.organization!.id!, importType: OrganizationImportType.league)
           ],
-          body: GroupedList(items: [
+          tabs: [
+            Tab(child: HeadingText(localizations.info)),
+            Tab(child: HeadingText(localizations.participatingTeams)),
+            Tab(child: HeadingText(localizations.matches)),
+          ],
+          body: TabGroup(items: [
             description,
             ManyConsumer<LeagueTeamParticipation, League>(
               filterObject: data,
               builder: (BuildContext context, List<LeagueTeamParticipation> teamParticipations) {
-                return ListGroup(
+                return GroupedList(
                   header: HeadingItem(
-                    title: localizations.participatingTeams,
                     trailing: IconButton(
                       icon: const Icon(Icons.add),
                       onPressed: () => Navigator.push(