From ef728981c9f21b0bbcbbacacac40f47d109b9d64 Mon Sep 17 00:00:00 2001
From: Koen Van Looveren <koen.vanlooveren@impaktfull.com>
Date: Tue, 23 Jan 2024 17:48:21 +0100
Subject: [PATCH] feat(raffle): Option to enter user from the admin screen
 directly

---
 lib/navigation/main_navigator.dart            |   6 +
 lib/repo/raffle_repo.dart                     |  33 +++-
 lib/screen/raffle_winner_picker_screen.dart   | 159 ++++++++----------
 .../raffle_winner_picker_viewmodel.dart       |  18 +-
 lib/widget/general/button.dart                |  77 +++++----
 lib/widget/raffle/add_participant_dialog.dart |  76 +++++++++
 lib/widget/raffle/custom_fortune_wheel.dart   |  58 +++++++
 .../social_login/social_login_button.dart     |   2 +-
 pubspec.lock                                  |  16 ++
 pubspec.yaml                                  |   1 +
 10 files changed, 322 insertions(+), 124 deletions(-)
 create mode 100644 lib/widget/raffle/add_participant_dialog.dart
 create mode 100644 lib/widget/raffle/custom_fortune_wheel.dart

diff --git a/lib/navigation/main_navigator.dart b/lib/navigation/main_navigator.dart
index a56b25e..0f2a1df 100644
--- a/lib/navigation/main_navigator.dart
+++ b/lib/navigation/main_navigator.dart
@@ -1,6 +1,7 @@
 import 'package:another_flushbar/flushbar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_belgium/navigation/page_route/no_transition_page_route.dart';
+import 'package:flutter_belgium/widget/raffle/add_participant_dialog.dart';
 import 'package:flutter_navigation_generator_annotations/flutter_navigation_generator_annotations.dart';
 import 'package:injectable/injectable.dart';
 import 'package:flutter_belgium/navigation/main_navigator.navigator.dart';
@@ -54,4 +55,9 @@ class MainNavigator with BaseNavigator {
       leftBarIndicatorColor: Colors.blue,
     ).show(context);
   }
+
+  Future<String?> goToAddParticipantDialog() => showDialog<String>(
+        context: context,
+        builder: (context) => const AddParticipantDialog(),
+      );
 }
diff --git a/lib/repo/raffle_repo.dart b/lib/repo/raffle_repo.dart
index 27c4bfa..1e13e8d 100644
--- a/lib/repo/raffle_repo.dart
+++ b/lib/repo/raffle_repo.dart
@@ -6,6 +6,7 @@ import 'package:flutter_belgium/model/data/raffle/winner.dart';
 import 'package:flutter_belgium/repo/login_repo.dart';
 import 'package:injectable/injectable.dart';
 import 'package:rxdart/rxdart.dart';
+import 'package:uuid/uuid.dart';
 
 @lazySingleton
 abstract class RaffleRepository {
@@ -32,6 +33,11 @@ abstract class RaffleRepository {
     required String raffleId,
     required RaffleParticipant winner,
   });
+
+  Future<void> manuallyEnterRaffle({
+    required String raffleId,
+    required String name,
+  });
 }
 
 class _RaffleRepository implements RaffleRepository {
@@ -87,7 +93,10 @@ class _RaffleRepository implements RaffleRepository {
       userUid: _loginRepository.userId!,
       name: _loginRepository.userName!,
     );
-    await _firebaseFirestore.collection('raffle').doc(raffleId).collection('participants').doc(_loginRepository.userId).set(participant.toJson());
+    await _addParticipantToRaffle(
+      raffleId: raffleId,
+      raffleParticipant: participant,
+    );
   }
 
   @override
@@ -101,4 +110,26 @@ class _RaffleRepository implements RaffleRepository {
   @override
   Stream<bool> hasWonRaffle(String raffleId) =>
       _firebaseFirestore.collection('raffle').doc(raffleId).collection('winners').doc(_loginRepository.userId).snapshots().map((event) => event.exists);
+
+  @override
+  Future<void> manuallyEnterRaffle({
+    required String raffleId,
+    required String name,
+  }) async {
+    final participant = RaffleParticipant(
+      userUid: 'manual_${const Uuid().v4()}',
+      name: name,
+    );
+    await _addParticipantToRaffle(
+      raffleId: raffleId,
+      raffleParticipant: participant,
+    );
+  }
+
+  Future<void> _addParticipantToRaffle({
+    required String raffleId,
+    required RaffleParticipant raffleParticipant,
+  }) async {
+    await _firebaseFirestore.collection('raffle').doc(raffleId).collection('participants').doc(raffleParticipant.userUid).set(raffleParticipant.toJson());
+  }
 }
diff --git a/lib/screen/raffle_winner_picker_screen.dart b/lib/screen/raffle_winner_picker_screen.dart
index 2abc8d5..d0c332d 100644
--- a/lib/screen/raffle_winner_picker_screen.dart
+++ b/lib/screen/raffle_winner_picker_screen.dart
@@ -1,14 +1,11 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 import 'package:flutter_belgium/style/theme.dart';
-import 'package:flutter_belgium/style/theme_duration.dart';
 import 'package:flutter_belgium/viewmodel/raffle_winner_picker_viewmodel.dart';
 import 'package:flutter_belgium/widget/general/button.dart';
 import 'package:flutter_belgium/widget/general/loading.dart';
 import 'package:flutter_belgium/widget/raffle/custom_confetti.dart';
+import 'package:flutter_belgium/widget/raffle/custom_fortune_wheel.dart';
 import 'package:flutter_navigation_generator_annotations/flutter_navigation_generator_annotations.dart';
-import 'package:flutter_fortune_wheel/flutter_fortune_wheel.dart';
 import 'package:flutter_belgium/di/injectable.dart';
 import 'package:flutter_belgium/widget/provider/provider_widget.dart';
 
@@ -48,49 +45,22 @@ class RaffleWinnerPickerScreen extends StatelessWidget {
                             if (viewModel.isLoading) {
                               return Container();
                             }
-                            if (!viewModel.hasEnoughParticipants) {
-                              return Center(
-                                child: Text('Not enough participants, ${viewModel.participants.length} participant(s) entered this raffle. (min 2 required)'),
-                              );
-                            }
                             return Column(
                               children: [
                                 Expanded(
-                                  child: FortuneWheel(
-                                    selected: viewModel.selectedIndexStream,
-                                    animateFirst: false,
-                                    duration: ThemeDuration.raffleWheelDuration,
-                                    rotationCount: Random().nextInt(10) + 20,
-                                    indicators: const [
-                                      FortuneIndicator(
-                                        alignment: Alignment.topCenter,
-                                        child: TriangleIndicator(
-                                          color: ThemeColors.primary,
-                                        ),
-                                      ),
-                                    ],
-                                    physics: CircularPanPhysics(
-                                      duration: const Duration(seconds: 1),
-                                      curve: Curves.decelerate,
-                                    ),
-                                    items: [
-                                      for (final participant in viewModel.participants)
-                                        FortuneItem(
+                                  child: Builder(
+                                    builder: (context) {
+                                      if (!viewModel.hasEnoughParticipants) {
+                                        return Center(
                                           child: Text(
-                                            participant.name,
-                                            style: TextStyle(
-                                              color: ThemeColors.primary,
-                                              fontSize: viewModel.participants.length > 30 ? 16 : 24,
-                                              fontWeight: FontWeight.bold,
-                                            ),
-                                          ),
-                                          style: const FortuneItemStyle(
-                                            color: ThemeColors.primaryUltraLight, // <-- custom circle slice fill color
-                                            borderColor: ThemeColors.primary,
-                                            borderWidth: 2,
-                                          ),
-                                        ),
-                                    ],
+                                              'Not enough participants, ${viewModel.participants.length} participant(s) entered this raffle. (min ${viewModel.minRequiredParticipants} required)'),
+                                        );
+                                      }
+                                      return CustomFortuneWheel(
+                                        selected: viewModel.selectedIndexStream,
+                                        participants: viewModel.participants,
+                                      );
+                                    },
                                   ),
                                 ),
                                 Text(
@@ -115,57 +85,66 @@ class RaffleWinnerPickerScreen extends StatelessWidget {
                   ],
                 ),
               ),
-              if (viewModel.hasEnoughParticipants) ...[
-                Container(
-                  width: 350,
-                  padding: const EdgeInsets.all(16),
-                  color: ThemeColors.primaryUltraLight,
-                  alignment: Alignment.center,
-                  child: Builder(builder: (context) {
-                    if (viewModel.isLoading) {
-                      return const Loading();
-                    }
-                    return Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text(
-                          'Participants list (${viewModel.participants.length})',
-                          style: const TextStyle(
-                            fontSize: 24,
+              Container(
+                width: 350,
+                padding: const EdgeInsets.all(16),
+                color: ThemeColors.primaryUltraLight,
+                alignment: Alignment.center,
+                child: Builder(builder: (context) {
+                  if (viewModel.isLoading) {
+                    return const Loading();
+                  }
+                  return Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Row(
+                        children: [
+                          Expanded(
+                            child: Text(
+                              'Participants list (${viewModel.participants.length})',
+                              style: const TextStyle(
+                                fontSize: 24,
+                              ),
+                            ),
                           ),
-                        ),
-                        Expanded(
-                          child: ListView.builder(
-                            itemCount: viewModel.participants.length,
-                            itemBuilder: (context, index) {
-                              final item = viewModel.participants[index];
-                              return Padding(
-                                padding: const EdgeInsets.symmetric(vertical: 12),
-                                child: Text(
-                                  item.name,
-                                  style: const TextStyle(
-                                    fontSize: 16,
-                                    fontWeight: FontWeight.bold,
-                                  ),
-                                ),
-                              );
-                            },
+                          Button(
+                            onTap: viewModel.onAddParticipantTapped,
+                            text: '+',
+                            fullWidth: false,
                           ),
+                        ],
+                      ),
+                      Expanded(
+                        child: ListView.builder(
+                          itemCount: viewModel.participants.length,
+                          itemBuilder: (context, index) {
+                            final item = viewModel.participants[index];
+                            return Padding(
+                              padding: const EdgeInsets.symmetric(vertical: 12),
+                              child: Text(
+                                item.name,
+                                style: const TextStyle(
+                                  fontSize: 16,
+                                  fontWeight: FontWeight.bold,
+                                ),
+                              ),
+                            );
+                          },
                         ),
-                        if (viewModel.winnerName == null) ...[
-                          Center(
-                            child: Button(
-                              onTap: viewModel.onPickWinnerTapped,
-                              text: 'Pick Winner',
-                              fullWidth: false,
-                            ),
+                      ),
+                      if (viewModel.hasEnoughParticipants && viewModel.winnerName == null) ...[
+                        Center(
+                          child: Button(
+                            onTap: viewModel.onPickWinnerTapped,
+                            text: 'Pick Winner',
+                            fullWidth: false,
                           ),
-                        ]
-                      ],
-                    );
-                  }),
-                ),
-              ],
+                        ),
+                      ]
+                    ],
+                  );
+                }),
+              ),
             ],
           );
         }),
diff --git a/lib/viewmodel/raffle_winner_picker_viewmodel.dart b/lib/viewmodel/raffle_winner_picker_viewmodel.dart
index 33ba363..d64a646 100644
--- a/lib/viewmodel/raffle_winner_picker_viewmodel.dart
+++ b/lib/viewmodel/raffle_winner_picker_viewmodel.dart
@@ -30,6 +30,8 @@ class RaffleWinnerPickerViewModel with ChangeNotifier {
 
   Stream<int> get selectedIndexStream => _selectedIndexStreamController.stream;
 
+  int get minRequiredParticipants => 2;
+
   List<RaffleParticipant> get participants => _lockedParticipants ?? _allowedParticipants;
 
   bool get isLoading => _raffle == null;
@@ -38,7 +40,7 @@ class RaffleWinnerPickerViewModel with ChangeNotifier {
 
   bool get hasInactiveRaffle => _raffle?.active == false;
 
-  bool get hasEnoughParticipants => participants.length > 2;
+  bool get hasEnoughParticipants => participants.length >= minRequiredParticipants;
 
   RaffleWinnerPickerViewModel(
     this._raffleRepository,
@@ -102,4 +104,18 @@ class RaffleWinnerPickerViewModel with ChangeNotifier {
     }
     _raffleRepository.setRaffleActive(raffleId: docId, active: true);
   }
+
+  Future<void> onAddParticipantTapped() async {
+    final docId = _raffle?.id;
+    if (docId == null) {
+      _mainNavigator.showError('Failed to make raffle active (no raffle available)');
+      return;
+    }
+    final name = await _mainNavigator.goToAddParticipantDialog();
+    if (name == null) return;
+    await _raffleRepository.manuallyEnterRaffle(
+      raffleId: docId,
+      name: name,
+    );
+  }
 }
diff --git a/lib/widget/general/button.dart b/lib/widget/general/button.dart
index ce1e3d3..37607cd 100644
--- a/lib/widget/general/button.dart
+++ b/lib/widget/general/button.dart
@@ -18,7 +18,7 @@ class Button extends StatefulWidget {
     super.key,
   }) : child = null;
 
-  const Button.chidl({
+  const Button.child({
     required this.onTap,
     required this.child,
     this.color,
@@ -34,37 +34,52 @@ class _ButtonState extends State<Button> {
   var _isLoading = false;
   @override
   Widget build(BuildContext context) {
-    if (_isLoading) {
-      return const Loading();
-    }
-    return GestureDetector(
-      onTap: _onTap,
-      child: Container(
-        width: widget.fullWidth && widget.text != null ? double.infinity : null,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(8),
-          boxShadow: const [
-            BoxShadow(
-              blurRadius: 10,
-              spreadRadius: 4,
-              color: ThemeColors.shadow,
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        if (_isLoading) ...[
+          const SizedBox(
+            width: 24,
+            height: 24,
+            child: Loading(),
+          ),
+        ],
+        Opacity(
+          opacity: _isLoading ? 0 : 1,
+          child: IgnorePointer(
+            ignoring: _isLoading,
+            child: GestureDetector(
+              onTap: _onTap,
+              child: Container(
+                width: widget.fullWidth && widget.text != null ? double.infinity : null,
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(8),
+                  boxShadow: const [
+                    BoxShadow(
+                      blurRadius: 10,
+                      spreadRadius: 4,
+                      color: ThemeColors.shadow,
+                    ),
+                  ],
+                  color: widget.color ?? ThemeColors.primary,
+                ),
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 16,
+                  vertical: 12,
+                ),
+                child: Builder(builder: (context) {
+                  if (widget.child != null) return widget.child!;
+                  return Text(
+                    widget.text ?? '',
+                    textAlign: TextAlign.center,
+                    style: Theme.of(context).textTheme.labelMedium?.copyWith(color: ThemeColors.white),
+                  );
+                }),
+              ),
             ),
-          ],
-          color: widget.color ?? ThemeColors.primary,
-        ),
-        padding: const EdgeInsets.symmetric(
-          horizontal: 16,
-          vertical: 12,
-        ),
-        child: Builder(builder: (context) {
-          if (widget.child != null) return widget.child!;
-          return Text(
-            widget.text ?? '',
-            textAlign: TextAlign.center,
-            style: Theme.of(context).textTheme.labelMedium?.copyWith(color: ThemeColors.white),
-          );
-        }),
-      ),
+          ),
+        )
+      ],
     );
   }
 
diff --git a/lib/widget/raffle/add_participant_dialog.dart b/lib/widget/raffle/add_participant_dialog.dart
new file mode 100644
index 0000000..6437e2a
--- /dev/null
+++ b/lib/widget/raffle/add_participant_dialog.dart
@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_belgium/style/theme.dart';
+import 'package:flutter_belgium/widget/general/button.dart';
+
+class AddParticipantDialog extends StatefulWidget {
+  const AddParticipantDialog({
+    super.key,
+  });
+
+  @override
+  State<AddParticipantDialog> createState() => _AddParticipantDialogState();
+}
+
+class _AddParticipantDialogState extends State<AddParticipantDialog> {
+  final textController = TextEditingController();
+
+  @override
+  void dispose() {
+    textController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 300),
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const Text(
+                'Enter name',
+              ),
+              TextField(
+                controller: textController,
+                cursorColor: ThemeColors.primary,
+                decoration: const InputDecoration(
+                  hintText: 'Name',
+                  focusedBorder: UnderlineInputBorder(
+                    borderSide: BorderSide(
+                      color: ThemeColors.primary,
+                      width: 2,
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(height: 16),
+              Row(
+                children: [
+                  Expanded(
+                    child: Button(
+                      onTap: () async => Navigator.of(context).pop(),
+                      text: 'Cancel',
+                      fullWidth: true,
+                    ),
+                  ),
+                  const SizedBox(width: 16),
+                  Expanded(
+                    child: Button(
+                      onTap: () async => Navigator.of(context).pop(textController.text),
+                      text: 'Add participant',
+                      fullWidth: true,
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/widget/raffle/custom_fortune_wheel.dart b/lib/widget/raffle/custom_fortune_wheel.dart
new file mode 100644
index 0000000..1385a45
--- /dev/null
+++ b/lib/widget/raffle/custom_fortune_wheel.dart
@@ -0,0 +1,58 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_belgium/model/data/raffle/participant.dart';
+import 'package:flutter_belgium/style/theme.dart';
+import 'package:flutter_belgium/style/theme_duration.dart';
+import 'package:flutter_fortune_wheel/flutter_fortune_wheel.dart';
+
+class CustomFortuneWheel extends StatelessWidget {
+  final Stream<int> selected;
+  final List<RaffleParticipant> participants;
+
+  const CustomFortuneWheel({
+    required this.selected,
+    required this.participants,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return FortuneWheel(
+      selected: selected,
+      animateFirst: false,
+      duration: ThemeDuration.raffleWheelDuration,
+      rotationCount: Random().nextInt(10) + 20,
+      indicators: const [
+        FortuneIndicator(
+          alignment: Alignment.topCenter,
+          child: TriangleIndicator(
+            color: ThemeColors.primary,
+          ),
+        ),
+      ],
+      physics: CircularPanPhysics(
+        duration: const Duration(seconds: 1),
+        curve: Curves.decelerate,
+      ),
+      items: [
+        for (final participant in participants)
+          FortuneItem(
+            child: Text(
+              participant.name,
+              style: TextStyle(
+                color: ThemeColors.primary,
+                fontSize: participants.length > 30 ? 16 : 24,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            style: const FortuneItemStyle(
+              color: ThemeColors.primaryUltraLight, // <-- custom circle slice fill color
+              borderColor: ThemeColors.primary,
+              borderWidth: 2,
+            ),
+          ),
+      ],
+    );
+  }
+}
diff --git a/lib/widget/social_login/social_login_button.dart b/lib/widget/social_login/social_login_button.dart
index 2b0c709..fdb5aad 100644
--- a/lib/widget/social_login/social_login_button.dart
+++ b/lib/widget/social_login/social_login_button.dart
@@ -17,7 +17,7 @@ class SocialLoginButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Button.chidl(
+    return Button.child(
       onTap: () async => onTap(loginType),
       color: _getBackgroundColor(),
       child: Row(
diff --git a/pubspec.lock b/pubspec.lock
index 4e4c7ed..be77dcd 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -701,6 +701,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.10.0"
+  sprintf:
+    dependency: transitive
+    description:
+      name: sprintf
+      sha256: "1fc9ffe69d4df602376b52949af107d8f5703b77cda567c4d7d86a0693120f23"
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.0"
   stack_trace:
     dependency: transitive
     description:
@@ -773,6 +781,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.2"
+  uuid:
+    dependency: "direct main"
+    description:
+      name: uuid
+      sha256: "22c94e5ad1e75f9934b766b53c742572ee2677c56bc871d850a57dad0f82127f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.2.2"
   vector_graphics:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index aa99106..f389dbb 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -26,6 +26,7 @@ dependencies:
   provider: ^6.0.5
   retrofit: ^4.0.3
   rxdart: ^0.27.0
+  uuid: ^4.2.2
 
 dev_dependencies:
   build_runner: ^2.4.6