First designs for ui

hartmann-foto-documentation-frontend/lib/pages/customer/picture_widget.dart

@@ -1,31 +1,25 @@
 import 'dart:convert' show base64Decode;
 
 import 'package:flutter/material.dart';
-import 'package:fotodocumentation/controller/picture_controller.dart';
-
-import 'package:intl/intl.dart';
-
-import 'package:fotodocumentation/controller/base_controller.dart';
 import 'package:fotodocumentation/dto/customer_dto.dart';
-import 'package:fotodocumentation/l10n/app_localizations.dart';
-import 'package:fotodocumentation/pages/ui_utils/component/general_error_widget.dart';
-import 'package:fotodocumentation/pages/ui_utils/component/waiting_widget.dart';
+import 'package:fotodocumentation/pages/customer/picture_fullscreen_dialog.dart';
 import 'package:fotodocumentation/pages/ui_utils/general_style.dart';
 import 'package:fotodocumentation/utils/di_container.dart';
+import 'package:intl/intl.dart';
 
 class PictureWidget extends StatefulWidget {
-  final int id;
-  const PictureWidget({super.key, required this.id});
+  final CustomerDto customerDto;
+  final PictureDto pictureDto;
+  const PictureWidget({super.key, required this.customerDto, required this.pictureDto});
 
   @override
   State<PictureWidget> createState() => _PictureWidgetState();
 }
 
 class _PictureWidgetState extends State<PictureWidget> {
-  PictureController get _pictureController => DiContainer.get();
   GeneralStyle get _generalStyle => DiContainer.get();
 
-  late Future<PictureDto?> _dto;
+  late PictureDto _selectedPicture;
   late DateFormat _dateFormat;
   final ScrollController _commentScrollController = ScrollController();
 
@@ -33,7 +27,7 @@ class _PictureWidgetState extends State<PictureWidget> {
   void initState() {
     super.initState();
     _dateFormat = DateFormat('dd MMMM yyyy');
-    _dto = _pictureController.get(id: widget.id);
+    _selectedPicture = widget.pictureDto;
   }
 
   @override
@@ -44,91 +38,164 @@ class _PictureWidgetState extends State<PictureWidget> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      body: Container(
-        color: _generalStyle.pageBackgroundColor,
-        child: Padding(
-          padding: const EdgeInsets.only(top: 8.0, left: 50.0, right: 50.0, bottom: 8.0),
-          child: _body(context),
+    final pictures = widget.customerDto.pictures;
+    final currentIndex = pictures.indexWhere((p) => p.id == _selectedPicture.id);
+    final hasPrevious = currentIndex > 0;
+    final hasNext = currentIndex < pictures.length - 1;
+
+    return Stack(
+      children: [
+        Container(
+          width: double.infinity,
+          height: double.infinity,
+          color: _generalStyle.pageBackgroundColor,
+          child: Padding(
+            padding: const EdgeInsets.only(top: 50.0, left: 50.0, right: 50.0, bottom: 8.0),
+            child: _body(context),
+          ),
         ),
-      ),
+        // Left navigation button
+        if (hasPrevious)
+          Positioned(
+            left: 0,
+            top: 0,
+            bottom: 0,
+            child: GestureDetector(
+              onTap: () => _navigateToPicture(currentIndex - 1),
+              child: MouseRegion(
+                cursor: SystemMouseCursors.click,
+                child: Container(
+                  width: 50,
+                  color: Colors.transparent,
+                  child: Center(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: _generalStyle.primaryButtonBackgroundColor,
+                        shape: BoxShape.circle,
+                      ),
+                      child: Padding(
+                        padding: const EdgeInsets.all(8.0),
+                        child: Icon(
+                          Icons.chevron_left,
+                          color: _generalStyle.primaryButtonTextColor,
+                          size: 32,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        // Right navigation button
+        if (hasNext)
+          Positioned(
+            right: 0,
+            top: 0,
+            bottom: 0,
+            child: GestureDetector(
+              onTap: () => _navigateToPicture(currentIndex + 1),
+              child: MouseRegion(
+                cursor: SystemMouseCursors.click,
+                child: Container(
+                  width: 50,
+                  color: Colors.transparent,
+                  child: Center(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: _generalStyle.primaryButtonBackgroundColor,
+                        shape: BoxShape.circle,
+                      ),
+                      child: Padding(
+                        padding: const EdgeInsets.all(8.0),
+                        child: Icon(
+                          Icons.chevron_right,
+                          color: _generalStyle.primaryButtonTextColor,
+                          size: 32,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        // Close button
+        Positioned(
+          top: 16,
+          right: 16,
+          child: Container(
+            decoration: BoxDecoration(
+              color: _generalStyle.primaryButtonBackgroundColor,
+              shape: BoxShape.circle,
+            ),
+            child: IconButton(
+              icon: Icon(Icons.close, color: _generalStyle.primaryButtonTextColor, size: 24),
+              onPressed: () => Navigator.of(context).pop(),
+            ),
+          ),
+        ),
+      ],
     );
   }
 
-  Widget _body(BuildContext context) {
-    return FutureBuilder<PictureDto?>(
-      future: _dto,
-      builder: (BuildContext context, AsyncSnapshot<PictureDto?> snapshot) {
-        if (snapshot.connectionState != ConnectionState.done) {
-          return const WaitingWidget();
-        }
-        if (snapshot.hasData) {
-          PictureDto? dto = snapshot.data;
+  void _navigateToPicture(int index) {
+    final pictures = widget.customerDto.pictures;
+    if (index >= 0 && index < pictures.length) {
+      setState(() {
+        _selectedPicture = pictures[index];
+      });
+    }
+  }
 
-          return _mainWidget(dto);
-        } else if (snapshot.hasError) {
-          var error = snapshot.error;
-          return (error is ServerError) ? GeneralErrorWidget.fromServerError(error) : GeneralErrorWidget(error: snapshot.error.toString());
-        }
-        return const WaitingWidget();
+  Widget _body(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isNarrow = constraints.maxWidth < 800;
+        return SingleChildScrollView(
+          child: isNarrow
+              ? Column(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    _imageWidget(_selectedPicture),
+                    const SizedBox(height: 32),
+                    _contentWidget(_selectedPicture),
+                  ],
+                )
+              : Row(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    _imageWidget(_selectedPicture),
+                    const SizedBox(width: 32),
+                    Expanded(child: _contentWidget(_selectedPicture)),
+                  ],
+                ),
+        );
       },
     );
   }
 
-  Widget _mainWidget(PictureDto? dto) {
-    if (dto == null) {
-      return Text(
-        AppLocalizations.of(context)!.customerWidgetNotFound,
-        style: TextStyle(
-          fontFamily: _generalStyle.fontFamily,
-          fontWeight: FontWeight.bold,
-          fontSize: 20,
-          color: _generalStyle.secondaryWidgetBackgroundColor,
-        ),
-      );
-    }
-
-    return Card(
-      margin: EdgeInsets.zero,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
-      ),
-      child: Padding(
-        padding: const EdgeInsets.all(24.0),
-        child: LayoutBuilder(
-          builder: (context, constraints) {
-            final isNarrow = constraints.maxWidth < 800;
-            return SingleChildScrollView(
-              child: isNarrow
-                  ? Column(
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        _imageWidget(dto),
-                        const SizedBox(height: 32),
-                        _contentWidget(dto),
-                      ],
-                    )
-                  : Row(
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        _imageWidget(dto),
-                        const SizedBox(width: 32),
-                        _contentWidget(dto),
-                      ],
-                    ),
-            );
-          },
+  Widget _imageWidget(PictureDto dto) {
+    return GestureDetector(
+      onTap: () => _showFullscreenImage(dto),
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        child: Image.memory(
+          base64Decode(dto.image),
+          fit: BoxFit.contain,
         ),
       ),
     );
   }
 
-  Widget _imageWidget(PictureDto dto) {
-    return Image.memory(
-      base64Decode(dto.image),
-      fit: BoxFit.contain,
+  void _showFullscreenImage(PictureDto dto) {
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return PictureFullscreenDialog(dto: dto);
+      },
     );
   }
 
@@ -167,7 +234,7 @@ class _PictureWidgetState extends State<PictureWidget> {
       Padding(
         padding: const EdgeInsets.only(top: 4.0),
         child: Text(
-          "Name of apotheke",
+          dto.customerListDto.name,
           style: contentStyle,
         ),
       ),
@@ -181,7 +248,7 @@ class _PictureWidgetState extends State<PictureWidget> {
       Padding(
         padding: const EdgeInsets.only(top: 4.0),
         child: Text(
-          "123445587474873",
+          dto.customerListDto.customerNumber,
           style: contentStyle,
         ),
       ),
@@ -209,7 +276,7 @@ class _PictureWidgetState extends State<PictureWidget> {
       Padding(
         padding: const EdgeInsets.only(top: 4.0),
         child: Container(
-          width: 300,
+          width: double.infinity,
           height: 150,
           decoration: BoxDecoration(
             border: Border.all(color: _generalStyle.secondaryTextLabelColor.withValues(alpha: 0.3)),