feat(ui): Implement setting chapters/episodes

lib/src/ui/pages/details.dart

@@ -5,40 +5,23 @@ import 'package:anitrack/src/ui/bloc/details_bloc.dart';
 import 'package:anitrack/src/ui/constants.dart';
 import 'package:anitrack/src/ui/widgets/dropdown.dart';
 import 'package:anitrack/src/ui/widgets/image.dart';
+import 'package:anitrack/src/ui/widgets/integer_input.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:get_it/get_it.dart';
 
-class DetailsPage extends StatefulWidget {
+class DetailsPage extends StatelessWidget {
-  DetailsPage({
+  const DetailsPage({
     super.key,
   });
 
   static MaterialPageRoute<dynamic> get route => MaterialPageRoute<dynamic>(
-    builder: (_) => DetailsPage(),
+    builder: (_) => const DetailsPage(),
     settings: const RouteSettings(
       name: detailsRoute,
     ),
   );
 
-  @override
-  DetailsPageState createState() => DetailsPageState();
-}
-
-class DetailsPageState extends State<DetailsPage> {
-  final TextEditingController _volumesOwnedController = TextEditingController();
-
-  @override
-  void initState() {
-    super.initState();
-
-    final state = GetIt.I.get<DetailsBloc>().state;
-    
-    if (state.trackingType == TrackingMediumType.manga) {
-      _volumesOwnedController.text = '${(state.data as MangaTrackingData).volumesOwned}';
-    }
-  }
-  
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -137,78 +120,62 @@ class DetailsPageState extends State<DetailsPage> {
                   ),
                 ),
 
+                Padding(
+                  padding: const EdgeInsets.symmetric(
+                    vertical: 8,
+                  ),
+                  child: IntegerInput(
+                    labelText: state.trackingType == TrackingMediumType.anime ?
+                      'Episodes' :
+                      'Chapters',
+                    onChanged: (value) {
+                      switch (state.trackingType) {
+                        case TrackingMediumType.anime:
+                          final data = state.data as AnimeTrackingData;
+                          context.read<DetailsBloc>().add(
+                            DetailsUpdatedEvent(
+                              data.copyWith(
+                                episodesWatched: value,
+                              ),
+                            ),
+                          );
+                          break;
+                        case TrackingMediumType.manga:
+                          final data = state.data as MangaTrackingData;
+                          context.read<DetailsBloc>().add(
+                            DetailsUpdatedEvent(
+                              data.copyWith(
+                                chaptersRead: value,
+                              ),
+                            ),
+                          );
+                          break;
+                      }
+                    },
+                    initialValue: state.trackingType == TrackingMediumType.anime ?
+                      (state.data as AnimeTrackingData).episodesWatched :
+                      (state.data as MangaTrackingData).chaptersRead,
+                  ),
+                ),
+                
                 if (state.trackingType == TrackingMediumType.manga)
                   Padding(
                     padding: const EdgeInsets.symmetric(
                       vertical: 8,
                     ),
-                    child: Row(
+                    child: IntegerInput(
-                      children: [
-                        ElevatedButton(
-                          onPressed: () {
-                            final data = (state.data as MangaTrackingData);
-                            if (data.volumesOwned == 0) return;
-
-                            _volumesOwnedController.text = '${data.volumesOwned - 1}';
-                            context.read<DetailsBloc>().add(
-                              DetailsUpdatedEvent(
-                                data.copyWith(
-                                  volumesOwned: data.volumesOwned - 1,
-                                ),
-                              ),
-                            );
-                          },
-                          child: Icon(Icons.remove),
-                        ),
-
-                        Expanded(
-                          child: Padding(
-                            padding: const EdgeInsets.symmetric(
-                              horizontal: 16,
-                            ),
-                            child: TextField(
-                              decoration: const InputDecoration(
-                                border: OutlineInputBorder(),
                       labelText: 'Volumes owned',
-                              ),
+                      onChanged: (value) {
-                              keyboardType: TextInputType.numberWithOptions(
+                        final data = state.data as MangaTrackingData;
-                                signed: false,
-                                decimal: false,
-                              ),
-                              textInputAction: TextInputAction.done,
-                              controller: _volumesOwnedController,
-                              onSubmitted: (value) {
-                                final amount = int.parse(value);
-                                if (amount < 0) return;
-
-                                context.read<DetailsBloc>().add(
-                                  DetailsUpdatedEvent(
-                                    (state.data as MangaTrackingData).copyWith(
-                                      volumesOwned: amount,
-                                    ),
-                                  ),
-                                );
-                              },
-                            ),
-                          ),
-                        ),
-
-                        ElevatedButton(
-                          onPressed: () {
-                            final data = (state.data as MangaTrackingData);
-
-                            _volumesOwnedController.text = '${data.volumesOwned + 1}';
                         context.read<DetailsBloc>().add(
                           DetailsUpdatedEvent(
                             data.copyWith(
-                                  volumesOwned: data.volumesOwned + 1,
+                              volumesOwned: value,
                             ),
                           ),
                         );
                       },
-                          child: Icon(Icons.add),
+                      initialValue: (GetIt.I.get<DetailsBloc>().state.data as MangaTrackingData).volumesOwned,
-                        ),
-                      ],
                     ),
                   ),
               ],

lib/src/ui/widgets/integer_input.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+
+class IntegerInput extends StatefulWidget {
+  const IntegerInput({
+    required this.onChanged,
+    required this.initialValue,
+    required this.labelText,
+    super.key,
+  });
+
+  /// Called when the integer value has been changed.
+  final void Function(int) onChanged;
+
+  /// The label of the TextField.
+  final String labelText;
+
+  /// The initial integer value.
+  final int initialValue;
+
+  @override
+  IntegerInputState createState() => IntegerInputState();
+}
+
+class IntegerInputState extends State<IntegerInput> {
+  /// The integer value backing the widget
+  late int _value;
+
+  /// The controller for the TextField.
+  final TextEditingController _controller = TextEditingController();
+  
+  @override
+  void initState() {
+    super.initState();
+
+    _value = widget.initialValue;
+    _controller.text = _value.toString();
+  }
+  
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        ElevatedButton(
+          onPressed: () {
+            if (_value == 0) return;
+
+            _value--;
+            _controller.text = '$_value';
+            widget.onChanged(_value);
+          },
+          child: const Icon(Icons.remove),
+        ),
+
+        Expanded(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: 16,
+            ),
+            child: TextField(
+              decoration: InputDecoration(
+                border: const OutlineInputBorder(),
+                labelText: widget.labelText,
+              ),
+              keyboardType: TextInputType.number,
+              textInputAction: TextInputAction.done,
+              controller: _controller,
+              onSubmitted: (text) {
+                final value = int.parse(text);
+                if (value < 0) return;
+
+                _value = value;
+                _controller.text = '$_value';
+                widget.onChanged(_value);
+              },
+            ),
+          ),
+        ),
+
+        ElevatedButton(
+          onPressed: () {
+            _value++;
+            _controller.text = '$_value';
+            widget.onChanged(_value);
+          },
+          child: const Icon(Icons.add),
+        ),
+      ],
+    );
+  }
+}