Finalize Add manual book layout for web

shockbytes · Feb 24, 2024 · 8014d9e · 8014d9e
1 parent 4f2a703
commit 8014d9e
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 14 deletions.
diff --git a/assets/translations/de-DE.json b/assets/translations/de-DE.json
@@ -19,6 +19,10 @@
     "title": "Sprache",
     "empty": "Wähle eine Sprache"
   },
+  "date-picker": {
+    "title": "Veröffentlichungsdatum",
+    "empty": "Wähle ein Datum"
+  },
   "countries": {
     "not-available": "Nicht vorhanden",
     "us": "Englisch",

diff --git a/assets/translations/en-US.json b/assets/translations/en-US.json
@@ -18,6 +18,10 @@
     "title": "Language",
     "empty": "Choose a language"
   },
+  "date-picker": {
+    "title": "Publish Date",
+    "empty": "Choose a date"
+  },
   "countries": {
     "not-available": "Not specified",
     "us": "English",

diff --git a/lib/src/ui/add/date_picker_widget.dart b/lib/src/ui/add/date_picker_widget.dart
@@ -0,0 +1,80 @@
+import 'package:dantex/src/util/extensions.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+class DatePickerWidget extends StatefulWidget {
+  final DateTime? preSelectedDate;
+  final Function(DateTime date) onDateSelected;
+
+  const DatePickerWidget({
+    required this.onDateSelected,
+    this.preSelectedDate,
+    super.key,
+  });
+
+  @override
+  State<DatePickerWidget> createState() => _DatePickerWidgetState();
+}
+
+class _DatePickerWidgetState extends State<DatePickerWidget> {
+  DateTime? _selectedDateTime;
+
+  @override
+  void initState() {
+    _selectedDateTime = widget.preSelectedDate;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Text(
+          'date-picker.title'.tr(),
+          style: Theme.of(context).textTheme.titleMedium,
+        ),
+        Container(
+          constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
+          height: 48,
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            borderRadius: const BorderRadius.all(
+              Radius.circular(4),
+            ),
+            border: Border.all(width: 0.7),
+          ),
+          child: InkWell(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                const SizedBox(width: 16),
+                Center(
+                  child: Text(
+                    _selectedDateTime?.formatDefault() ?? 'date-picker.empty'.tr(),
+                    style: Theme.of(context).textTheme.titleMedium,
+                  ),
+                ),
+              ],
+            ),
+            onTap: () async {
+              final DateTime? selectedDateTime = await showDatePicker(
+                context: context,
+                firstDate: DateTime(1940),
+                lastDate: DateTime.now(),
+              );
+
+              if (selectedDateTime != null) {
+                widget.onDateSelected(selectedDateTime);
+
+                setState(() {
+                  _selectedDateTime = selectedDateTime;
+                });
+              }
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/src/ui/add/language_picker.dart → lib/src/ui/add/language_picker_widget.dart b/lib/src/ui/add/language_picker.dart → lib/src/ui/add/language_picker_widget.dart
@@ -3,21 +3,21 @@ import 'package:dantex/src/data/core/language.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
-class LanguagePicker extends StatefulWidget {
+class LanguagePickerWidget extends StatefulWidget {
   final Language preSelectedLanguage;
   final Function(Language language) onLanguageSelected;
 
-  const LanguagePicker({
+  const LanguagePickerWidget({
     required this.onLanguageSelected,
     this.preSelectedLanguage = Language.na,
     super.key,
   });
 
   @override
-  State<LanguagePicker> createState() => _LanguagePickerState();
+  State<LanguagePickerWidget> createState() => _LanguagePickerWidgetState();
 }
 
-class _LanguagePickerState extends State<LanguagePicker> {
+class _LanguagePickerWidgetState extends State<LanguagePickerWidget> {
   final List<Language> _supportedLanguages = Language.values;
   Language _selectedLanguage = Language.na;
 
@@ -37,7 +37,9 @@ class _LanguagePickerState extends State<LanguagePicker> {
           style: Theme.of(context).textTheme.titleMedium,
         ),
         Container(
-          constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
+          constraints: BoxConstraints(
+            maxWidth: MediaQuery.of(context).size.width,
+          ),
           alignment: Alignment.center,
           decoration: BoxDecoration(
             borderRadius: const BorderRadius.all(

diff --git a/lib/src/ui/add/manual_add_edit_book_page.dart b/lib/src/ui/add/manual_add_edit_book_page.dart
@@ -1,24 +1,26 @@
 import 'package:dantex/src/data/book/entity/book_state.dart';
 import 'package:dantex/src/data/core/language.dart';
-import 'package:dantex/src/ui/add/language_picker.dart';
+import 'package:dantex/src/ui/add/date_picker_widget.dart';
+import 'package:dantex/src/ui/add/language_picker_widget.dart';
 import 'package:dantex/src/ui/core/dante_components.dart';
 import 'package:dantex/src/ui/core/themed_app_bar.dart';
 import 'package:dantex/src/util/layout_utils.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
 /// TODO
-/// 2. Manual Add book
-///   -[ ] Web
-///   -[ ] Translations
+/// 2. Manual Add book UI
+///   -[x] Web
+///   -[x] Translations
 ///   -[ ] App
 ///   -[ ] Dark Mode
 /// 3. Upload image
-/// 4. Entry points for edit book:
+/// 4. Save manual book
+/// 5. Entry points for edit book:
 ///   - Overflow
 ///   - Detail Page
-/// 4. Edit existing book
-/// 5. Test
+/// 6. Edit existing book
+/// 7. Test
 ///   - Web
 ///   - App
 class ManualAddEditBookPage extends StatefulWidget {
@@ -175,9 +177,13 @@ class _ManualAddEditBookPageState extends State<ManualAddEditBookPage> {
               hint: 'add-manual.subtitle'.tr(),
             ),
             const SizedBox(height: 16),
-            Text('TODO DatePicker PublishDate'),
+            DatePickerWidget(
+              onDateSelected: (DateTime date) {
+                print(date);
+              },
+            ),
             const SizedBox(height: 16),
-            LanguagePicker(
+            LanguagePickerWidget(
               onLanguageSelected: (Language language) {
                 print(language);
               },

diff --git a/lib/src/util/extensions.dart b/lib/src/util/extensions.dart
@@ -15,13 +15,17 @@ extension HexColor on String {
   }
 }
 
+final DateFormat _dfDefault = DateFormat('dd.MM.yyyy');
 final DateFormat _dfMonth = DateFormat('MMMM yyyy');
 final DateFormat _dfMonthShort = DateFormat('MMM yy');
 
 extension DateTimeX on DateTime {
   String formatWithMonthAndYear() {
     return _dfMonth.format(this);
   }
+  String formatDefault() {
+    return _dfDefault.format(this);
+  }
   String formatWithMonthAndYearShort() {
     return _dfMonthShort.format(this);
   }