Add option to switch layout for events from grid to list view

app/lib/blocs/sharezone_bloc_providers.dart

@@ -37,7 +37,9 @@ import 'package:sharezone/blocs/auth/type_of_user_bloc.dart';
 import 'package:sharezone/blocs/bloc_dependencies.dart';
 import 'package:sharezone/blocs/settings/change_data_bloc.dart';
 import 'package:sharezone/blocs/settings/notifications_bloc_factory.dart';
+import 'package:sharezone/calendrical_events/analytics/calendrical_events_page_analytics.dart';
 import 'package:sharezone/calendrical_events/bloc/calendrical_events_page_bloc_factory.dart';
+import 'package:sharezone/calendrical_events/bloc/calendrical_events_page_cache.dart';
 import 'package:sharezone/comments/comment_view_factory.dart';
 import 'package:sharezone/comments/comments_analytics.dart';
 import 'package:sharezone/comments/comments_bloc_factory.dart';
@@ -380,7 +382,14 @@ class _SharezoneBlocProvidersState extends State<SharezoneBlocProviders> {
       )),
       BlocProvider<CalendricalEventsPageBlocFactory>(
         bloc: CalendricalEventsPageBlocFactory(
-            api.timetable, api.course, api.schoolClassGateway),
+          api.timetable,
+          api.course,
+          api.schoolClassGateway,
+          CalendricalEventsPageCache(
+            FlutterKeyValueStore(widget.blocDependencies.sharedPreferences),
+          ),
+          CalendricalEventsPageAnalytics(analytics),
+        ),
       ),
       BlocProvider<AccountPageBlocFactory>(
           bloc: AccountPageBlocFactory(api.user)),

app/lib/calendrical_events/analytics/calendrical_events_page_analytics.dart

@@ -0,0 +1,32 @@
+// Copyright (c) 2023 Sharezone UG (haftungsbeschränkt)
+// Licensed under the EUPL-1.2-or-later.
+//
+// You may obtain a copy of the Licence at:
+// https://joinup.ec.europa.eu/software/page/eupl
+//
+// SPDX-License-Identifier: EUPL-1.2
+
+import 'package:analytics/analytics.dart';
+import 'package:sharezone/calendrical_events/models/calendrical_events_layout.dart';
+
+class CalendricalEventsPageAnalytics {
+  final Analytics analytics;
+
+  const CalendricalEventsPageAnalytics(this.analytics);
+
+  void logChangeLayout(CalendricalEventsPageLayout layout) {
+    analytics.log(
+      CalendricalEventsPageAnalyticsEvent(
+        'changed_layout',
+        data: {'layout': layout.name},
+      ),
+    );
+  }
+}
+
+class CalendricalEventsPageAnalyticsEvent extends AnalyticsEvent {
+  const CalendricalEventsPageAnalyticsEvent(
+    String name, {
+    Map<String, dynamic>? data,
+  }) : super('events_page_$name', data: data);
+}

app/lib/calendrical_events/bloc/calendrical_events_page_bloc.dart

@@ -10,7 +10,10 @@ import 'package:bloc_base/bloc_base.dart';
 import 'package:date/date.dart';
 import 'package:group_domain_models/group_domain_models.dart';
 import 'package:rxdart/rxdart.dart';
+import 'package:sharezone/calendrical_events/analytics/calendrical_events_page_analytics.dart';
+import 'package:sharezone/calendrical_events/bloc/calendrical_events_page_cache.dart';
 import 'package:sharezone/calendrical_events/models/calendrical_event.dart';
+import 'package:sharezone/calendrical_events/models/calendrical_events_layout.dart';
 import 'package:sharezone/timetable/src/widgets/events/event_view.dart';
 import 'package:sharezone/util/api/course_gateway.dart';
 import 'package:sharezone/util/api/school_class_gateway.dart';
@@ -20,17 +23,28 @@ class CalendricalEventsPageBloc extends BlocBase {
   final TimetableGateway timetableGateway;
   final CourseGateway courseGateway;
   final SchoolClassGateway schoolClassGateway;
+  final CalendricalEventsPageCache cache;
+  final CalendricalEventsPageAnalytics analytics;
+
+  static const CalendricalEventsPageLayout defaultLayout =
+      CalendricalEventsPageLayout.grid;
 
   final _allUpcomingEventsSubject = BehaviorSubject<List<EventView>>();
+  final _layoutSubject = BehaviorSubject<CalendricalEventsPageLayout>();
 
+  Stream<CalendricalEventsPageLayout> get layout => _layoutSubject.stream;
   ValueStream<List<EventView>> get allUpcomingEvents =>
       _allUpcomingEventsSubject;
 
   CalendricalEventsPageBloc(
     this.timetableGateway,
     this.courseGateway,
     this.schoolClassGateway,
+    this.cache,
+    this.analytics,
   ) {
+    _layoutSubject.add(cache.getLayout() ?? defaultLayout);
+
     CombineLatestStream([
       timetableGateway.streamEvents(Date.today()),
       courseGateway.getGroupInfoStream(schoolClassGateway)
@@ -47,8 +61,15 @@ class CalendricalEventsPageBloc extends BlocBase {
     }).listen(_allUpcomingEventsSubject.sink.add);
   }
 
+  void setLayout(CalendricalEventsPageLayout layout) {
+    _layoutSubject.add(layout);
+    analytics.logChangeLayout(layout);
+    cache.setLayout(layout);
+  }
+
   @override
   void dispose() {
+    _layoutSubject.close();
     _allUpcomingEventsSubject.close();
   }
 }

app/lib/calendrical_events/bloc/calendrical_events_page_bloc_factory.dart

@@ -7,6 +7,8 @@
 // SPDX-License-Identifier: EUPL-1.2
 
 import 'package:bloc_base/bloc_base.dart';
+import 'package:sharezone/calendrical_events/analytics/calendrical_events_page_analytics.dart';
+import 'package:sharezone/calendrical_events/bloc/calendrical_events_page_cache.dart';
 import 'package:sharezone/util/api/course_gateway.dart';
 import 'package:sharezone/util/api/school_class_gateway.dart';
 import 'package:sharezone/util/api/timetable_gateway.dart';
@@ -17,13 +19,25 @@ class CalendricalEventsPageBlocFactory extends BlocBase {
   final TimetableGateway _timetableGateway;
   final CourseGateway _courseGateway;
   final SchoolClassGateway _schoolClassGateway;
+  final CalendricalEventsPageCache _cache;
+  final CalendricalEventsPageAnalytics _analytics;
 
   CalendricalEventsPageBlocFactory(
-      this._timetableGateway, this._courseGateway, this._schoolClassGateway);
+    this._timetableGateway,
+    this._courseGateway,
+    this._schoolClassGateway,
+    this._cache,
+    this._analytics,
+  );
 
   CalendricalEventsPageBloc create() {
     return CalendricalEventsPageBloc(
-        _timetableGateway, _courseGateway, _schoolClassGateway);
+      _timetableGateway,
+      _courseGateway,
+      _schoolClassGateway,
+      _cache,
+      _analytics,
+    );
   }
 
   @override

app/lib/calendrical_events/bloc/calendrical_events_page_cache.dart

@@ -0,0 +1,27 @@
+// Copyright (c) 2023 Sharezone UG (haftungsbeschränkt)
+// Licensed under the EUPL-1.2-or-later.
+//
+// You may obtain a copy of the Licence at:
+// https://joinup.ec.europa.eu/software/page/eupl
+//
+// SPDX-License-Identifier: EUPL-1.2
+
+import 'package:key_value_store/key_value_store.dart';
+import 'package:sharezone/calendrical_events/models/calendrical_events_layout.dart';
+import 'package:sharezone_common/helper_functions.dart';
+
+class CalendricalEventsPageCache {
+  final KeyValueStore keyValueStore;
+  static const _layoutKey = 'calendrical-events-page-layout';
+
+  const CalendricalEventsPageCache(this.keyValueStore);
+
+  CalendricalEventsPageLayout? getLayout() {
+    final layoutString = keyValueStore.getString(_layoutKey);
+    return CalendricalEventsPageLayout.values.byNameOrNull(layoutString);
+  }
+
+  Future<bool> setLayout(CalendricalEventsPageLayout layout) {
+    return keyValueStore.setString(_layoutKey, layout.name);
+  }
+}

app/lib/calendrical_events/models/calendrical_events_layout.dart

@@ -0,0 +1,14 @@
+// Copyright (c) 2023 Sharezone UG (haftungsbeschränkt)
+// Licensed under the EUPL-1.2-or-later.
+//
+// You may obtain a copy of the Licence at:
+// https://joinup.ec.europa.eu/software/page/eupl
+//
+// SPDX-License-Identifier: EUPL-1.2
+
+/// Enum for the layout of the calendrical events cards on the calendrical
+/// events page.
+enum CalendricalEventsPageLayout {
+  grid,
+  list,
+}

app/lib/calendrical_events/page/calendrical_events_page.dart

@@ -10,8 +10,10 @@ import 'package:bloc_provider/bloc_provider.dart';
 import 'package:flutter/material.dart';
 import 'package:sharezone/calendrical_events/bloc/calendrical_events_page_bloc.dart';
 import 'package:sharezone/calendrical_events/bloc/calendrical_events_page_bloc_factory.dart';
+import 'package:sharezone/calendrical_events/models/calendrical_events_layout.dart';
 import 'package:sharezone/navigation/logic/navigation_bloc.dart';
 import 'package:sharezone/navigation/models/navigation_item.dart';
+import 'package:sharezone/navigation/scaffold/app_bar_configuration.dart';
 import 'package:sharezone/navigation/scaffold/sharezone_main_scaffold.dart';
 import 'package:sharezone/timetable/src/widgets/events/calender_event_card.dart';
 import 'package:sharezone/timetable/src/widgets/events/event_view.dart';
@@ -46,6 +48,9 @@ class _CalendricalEventsPageState extends State<CalendricalEventsPage> {
       child: BlocProvider(
         bloc: bloc,
         child: SharezoneMainScaffold(
+          appBarConfiguration: const AppBarConfiguration(
+            actions: [_LayoutIconButton()],
+          ),
           body: const _CalendricalEventsPageBody(),
           floatingActionButton: _EventListFAB(),
           navigationItem: NavigationItem.events,
@@ -55,6 +60,83 @@ class _CalendricalEventsPageState extends State<CalendricalEventsPage> {
   }
 }
 
+class _LayoutIconButton extends StatefulWidget {
+  const _LayoutIconButton();
+
+  @override
+  State<_LayoutIconButton> createState() => _LayoutIconButtonState();
+}
+
+class _LayoutIconButtonState extends State<_LayoutIconButton>
+    with SingleTickerProviderStateMixin {
+  late AnimationController controller;
+  late Animation<double> animation;
+
+  @override
+  void initState() {
+    super.initState();
+    controller = AnimationController(vsync: this);
+    animation = Tween<double>(begin: 0.0, end: 1.0).animate(controller);
+
+    _setInitialAnimatedIconPosition();
+  }
+
+  void _setInitialAnimatedIconPosition() {
+    final bloc = BlocProvider.of<CalendricalEventsPageBloc>(context);
+    bloc.layout.first.then((layout) {
+      controller.value = switch (layout) {
+        CalendricalEventsPageLayout.list => 0.0,
+        CalendricalEventsPageLayout.grid => 1.0,
+      };
+    });
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final bloc = BlocProvider.of<CalendricalEventsPageBloc>(context);
+    return StreamBuilder<CalendricalEventsPageLayout>(
+      stream: bloc.layout,
+      builder: (context, snapshot) {
+        final layout = snapshot.data;
+        if (layout == null) return const SizedBox();
+
+        return IconButton(
+          tooltip: switch (layout) {
+            CalendricalEventsPageLayout.list => 'Auf Kacheln umschalten',
+            CalendricalEventsPageLayout.grid => 'Auf Liste umschalten',
+          },
+          onPressed: () {
+            bloc.setLayout(
+              switch (layout) {
+                CalendricalEventsPageLayout.list =>
+                  CalendricalEventsPageLayout.grid,
+                CalendricalEventsPageLayout.grid =>
+                  CalendricalEventsPageLayout.list,
+              },
+            );
+            controller.fling(
+              velocity: switch (layout) {
+                CalendricalEventsPageLayout.list => 1.0,
+                CalendricalEventsPageLayout.grid => -1.0,
+              },
+            );
+          },
+          icon: AnimatedIcon(
+            icon: AnimatedIcons.view_list,
+            progress: animation,
+          ),
+        );
+      },
+    );
+  }
+}
+
 class _CalendricalEventsPageBody extends StatelessWidget {
   const _CalendricalEventsPageBody({Key? key}) : super(key: key);
 
@@ -69,14 +151,66 @@ class _CalendricalEventsPageBody extends StatelessWidget {
 
         if (events == null) return Container();
         if (events.isEmpty) return const _EmptyEventList();
-        return _EventList(events: events);
+        return _Events(events: events);
       },
     );
   }
 }
 
+class _Events extends StatelessWidget {
+  const _Events({required this.events});
+
+  final List<EventView> events;
+
+  @override
+  Widget build(BuildContext context) {
+    final bloc = BlocProvider.of<CalendricalEventsPageBloc>(context);
+    return SafeArea(
+      child: StreamBuilder<CalendricalEventsPageLayout>(
+        stream: bloc.layout,
+        builder: (context, snapshot) {
+          final layout = snapshot.data;
+          return AnimatedSwitcher(
+            duration: const Duration(milliseconds: 300),
+            child: switch (layout) {
+              CalendricalEventsPageLayout.list => _EventList(events: events),
+              CalendricalEventsPageLayout.grid => _EventGrid(events: events),
+              null => const SizedBox()
+            },
+          );
+        },
+      ),
+    );
+  }
+}
+
 class _EventList extends StatelessWidget {
-  const _EventList({Key? key, required this.events}) : super(key: key);
+  const _EventList({required this.events});
+
+  final List<EventView> events;
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: ListView.builder(
+        padding: const EdgeInsets.fromLTRB(0, 16, 12, 4),
+        itemCount: events.length,
+        itemBuilder: (context, index) {
+          final event = events[index];
+          return MaxWidthConstraintBox(
+            child: Padding(
+              padding: const EdgeInsets.only(bottom: 12),
+              child: CalenderEventCard(event),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+
+class _EventGrid extends StatelessWidget {
+  const _EventGrid({required this.events});
 
   final List<EventView> events;
 

lib/sharezone_common/lib/src/helper_functions.dart

@@ -69,4 +69,12 @@ extension EnumByNameWithDefault<T extends Enum> on Iterable<T> {
     if (defaultValue != null) return defaultValue;
     throw ArgumentError.value(name, "name", "No enum value with that name");
   }
+
+  T? byNameOrNull(String? name) {
+    for (T value in this) {
+      if (value.name == name) return value;
+    }
+
+    return null;
+  }
 }