First designs for ui

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

@@ -1,6 +1,8 @@
 import 'dart:convert' show base64Decode;
 
 import 'package:flutter/material.dart';
+import 'package:fotodocumentation/controller/picture_controller.dart';
+import 'package:fotodocumentation/pages/customer/picture_delete_dialog.dart';
 
 import 'package:go_router/go_router.dart';
 
@@ -16,6 +18,7 @@ import 'package:fotodocumentation/pages/ui_utils/component/waiting_widget.dart';
 import 'package:fotodocumentation/pages/ui_utils/general_style.dart';
 import 'package:fotodocumentation/utils/di_container.dart';
 import 'package:fotodocumentation/utils/global_router.dart';
+import 'package:fotodocumentation/pages/customer/picture_widget.dart';
 
 class CustomerWidget extends StatefulWidget {
   final int customerId;
@@ -27,6 +30,7 @@ class CustomerWidget extends StatefulWidget {
 
 class _CustomerWidgetState extends State<CustomerWidget> {
   CustomerController get _customerController => DiContainer.get();
+  PictureController get _pictureController => DiContainer.get();
   GeneralStyle get _generalStyle => DiContainer.get();
 
   late Future<CustomerDto?> _dto;
@@ -103,8 +107,10 @@ class _CustomerWidgetState extends State<CustomerWidget> {
     );
   }
 
-  Widget _customerWidget(CustomerDto dto) {
-    var dtos = dto.pictures;
+  Widget _customerWidget(CustomerDto customerDto) {
+    var pictureDtos = customerDto.pictures;
+
+    pictureDtos.sort((a, b) => b.pictureDate.compareTo(a.pictureDate));
 
     return Card(
       margin: EdgeInsets.zero,
@@ -118,9 +124,9 @@ class _CustomerWidgetState extends State<CustomerWidget> {
           Expanded(
             child: ListView.separated(
               padding: const EdgeInsets.only(top: 8.0),
-              itemCount: dtos.length,
+              itemCount: pictureDtos.length,
               itemBuilder: (BuildContext context, int index) {
-                return _tableDataRow(context, dtos[index]);
+                return _tableDataRow(context, customerDto, pictureDtos[index]);
               },
               separatorBuilder: (BuildContext context, int index) => Divider(color: _generalStyle.secondaryWidgetBackgroundColor),
             ),
@@ -173,21 +179,22 @@ class _CustomerWidgetState extends State<CustomerWidget> {
               ),
             ),
           ),
+          const SizedBox(width: 48),
         ],
       ),
     );
   }
 
-  Widget _tableDataRow(BuildContext context, PictureDto dto) {
+  Widget _tableDataRow(BuildContext context, CustomerDto customerDto, PictureDto pictureDto) {
     final dataStyle = TextStyle(
       fontFamily: _generalStyle.fontFamily,
       fontSize: 16.0,
       color: _generalStyle.secondaryTextLabelColor,
     );
 
-    final dateStr = _dateFormat.format(dto.pictureDate);
+    final dateStr = _dateFormat.format(pictureDto.pictureDate);
     return InkWell(
-      onTap: () => _actionSelect(context, dto),
+      onTap: () => _actionSelect(context, customerDto, pictureDto),
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
         child: Row(
@@ -201,7 +208,7 @@ class _CustomerWidgetState extends State<CustomerWidget> {
                 child: ConstrainedBox(
                   constraints: const BoxConstraints(maxWidth: 70, maxHeight: 70),
                   child: Image.memory(
-                    base64Decode(dto.image),
+                    base64Decode(pictureDto.image),
                     fit: BoxFit.contain,
                   ),
                 ),
@@ -211,7 +218,7 @@ class _CustomerWidgetState extends State<CustomerWidget> {
               flex: 3,
               child: Align(
                 alignment: Alignment.centerLeft,
-                child: Text(dto.comment ?? "", style: dataStyle),
+                child: Text(pictureDto.comment ?? "", style: dataStyle),
               ),
             ),
             Expanded(
@@ -221,14 +228,56 @@ class _CustomerWidgetState extends State<CustomerWidget> {
                 child: Text(dateStr, style: dataStyle),
               ),
             ),
+            SizedBox(
+              width: 48,
+              child: IconButton(
+                icon: Icon(
+                  Icons.delete_outline,
+                  color: _generalStyle.errorColor,
+                ),
+                onPressed: () => _actionDelete(context, customerDto, pictureDto),
+              ),
+            ),
           ],
         ),
       ),
     );
   }
 
-  Future<void> _actionSelect(BuildContext context, PictureDto dto) async {
-    context.go("${GlobalRouter.pathPicture}/${dto.id}");
+  Future<void> _actionDelete(BuildContext context, CustomerDto customerDto, PictureDto pictureDto) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (BuildContext context) {
+        return PictureDeleteDialog();
+      },
+    );
+
+    if (confirmed == true) {
+      _pictureController.delete(pictureDto);
+      setState(() {
+        _dto = _customerController.get(id: widget.customerId);
+      });
+    }
+  }
+
+  Future<void> _actionSelect(BuildContext context, CustomerDto customerDto, PictureDto pictureDto) async {
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return Dialog(
+          backgroundColor: _generalStyle.pageBackgroundColor,
+          insetPadding: const EdgeInsets.all(24),
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(12),
+            child: SizedBox(
+              width: MediaQuery.of(context).size.width * 0.9,
+              height: MediaQuery.of(context).size.height * 0.9,
+              child: PictureWidget(customerDto: customerDto, pictureDto: pictureDto),
+            ),
+          ),
+        );
+      },
+    );
   }
 
   Widget _backButton(BuildContext context) {