TF-2057 Add see all attendees button

(cherry picked from commit 9ac78de2505c212d1c14db951a1528d00b91fe26)

lib/features/email/presentation/styles/event_attendee_detail_widget_styles.dart

@@ -2,4 +2,5 @@
 class EventAttendeeDetailWidgetStyles {
   static const double maxWidth = 100;
   static const double textSize = 16;
+  static const double fieldTopPadding = 8;
 }

lib/features/email/presentation/styles/see_all_attendees_button_widget_styles.dart

@@ -0,0 +1,8 @@
+
+class SeeAllAttendeesButtonWidgetStyles {
+  static const double textSize = 16;
+  static const double horizontalPadding = 8;
+  static const double verticalPadding = 4;
+  static const double borderRadius = 20;
+  static const double horizontalMargin = -8;
+}

lib/features/email/presentation/widgets/calendar_event/event_attendee_detail_widget.dart

@@ -7,9 +7,10 @@ import 'package:tmail_ui_user/features/email/presentation/extensions/list_attend
 import 'package:tmail_ui_user/features/email/presentation/styles/event_attendee_detail_widget_styles.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event/attendee_widget.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event/organizer_widget.dart';
+import 'package:tmail_ui_user/features/email/presentation/widgets/calendar_event/see_all_attendees_button_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-class EventAttendeeDetailWidget extends StatelessWidget {
+class EventAttendeeDetailWidget extends StatefulWidget {
 
   static const int _maxAttendeeDisplayed = 6;
 
@@ -22,6 +23,24 @@ class EventAttendeeDetailWidget extends StatelessWidget {
     required this.organizer
   });
 
+  @override
+  State<EventAttendeeDetailWidget> createState() => _EventAttendeeDetailWidgetState();
+}
+
+class _EventAttendeeDetailWidgetState extends State<EventAttendeeDetailWidget> {
+
+  late List<CalendarAttendee> _attendeesDisplayed;
+  bool _isShowAllAttendee = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _attendeesDisplayed = _splitAttendees(widget.attendees);
+    if (_attendeesDisplayed.length == widget.attendees.length - 1) {
+      _isShowAllAttendee = true;
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Row(
@@ -41,20 +60,32 @@ class EventAttendeeDetailWidget extends StatelessWidget {
         Expanded(child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            OrganizerWidget(organizer: organizer),
+            OrganizerWidget(organizer: widget.organizer),
             ..._attendeesDisplayed
                 .map((attendee) => AttendeeWidget(attendee: attendee))
-                .toList()
+                .toList(),
+            if (!_isShowAllAttendee)
+              Padding(
+                padding: const EdgeInsets.only(top: EventAttendeeDetailWidgetStyles.fieldTopPadding),
+                child: SeeAllAttendeesButtonWidget(
+                  onTap: () {
+                    setState(() {
+                      _attendeesDisplayed = widget.attendees.withoutOrganizer(widget.organizer);
+                      _isShowAllAttendee = true;
+                    });
+                  }
+                ),
+              )
           ]
         ))
       ],
     );
   }
 
-  List<CalendarAttendee> get _attendeesDisplayed {
-    final attendeesWithoutOrganizer = attendees.withoutOrganizer(organizer);
-    return attendeesWithoutOrganizer.length > _maxAttendeeDisplayed
-      ? attendeesWithoutOrganizer.sublist(0, _maxAttendeeDisplayed - 1)
+  List<CalendarAttendee> _splitAttendees(List<CalendarAttendee> attendees) {
+    final attendeesWithoutOrganizer = attendees.withoutOrganizer(widget.organizer);
+    return attendeesWithoutOrganizer.length > EventAttendeeDetailWidget._maxAttendeeDisplayed
+      ? attendeesWithoutOrganizer.sublist(0, EventAttendeeDetailWidget._maxAttendeeDisplayed - 1)
       : attendeesWithoutOrganizer;
   }
 }

lib/features/email/presentation/widgets/calendar_event/see_all_attendees_button_widget.dart

@@ -0,0 +1,36 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:tmail_ui_user/features/base/widget/material_text_button.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/see_all_attendees_button_widget_styles.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class SeeAllAttendeesButtonWidget extends StatelessWidget {
+
+  final VoidCallback onTap;
+
+  const SeeAllAttendeesButtonWidget({
+    super.key,
+    required this.onTap
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Transform(
+      transform: Matrix4.translationValues(SeeAllAttendeesButtonWidgetStyles.horizontalMargin, 0.0, 0.0),
+      child: MaterialTextButton(
+        label: AppLocalizations.of(context).seeAllAttendees,
+        onTap: onTap,
+        borderRadius: SeeAllAttendeesButtonWidgetStyles.borderRadius,
+        padding: const EdgeInsetsDirectional.symmetric(
+          horizontal: SeeAllAttendeesButtonWidgetStyles.horizontalPadding,
+          vertical: SeeAllAttendeesButtonWidgetStyles.verticalPadding
+        ),
+        customStyle: const TextStyle(
+          fontSize: SeeAllAttendeesButtonWidgetStyles.textSize,
+          color: AppColor.colorTextButton
+        ),
+      ),
+    );
+  }
+}

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2023-07-27T12:18:46.254059",
+  "@@last_modified": "2023-07-28T02:01:26.243299",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -3095,5 +3095,11 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "seeAllAttendees": "See all attendees",
+  "@seeAllAttendees": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -3192,4 +3192,10 @@ class AppLocalizations {
       'Attendees',
       name: 'attendees');
   }
+
+  String get seeAllAttendees {
+    return Intl.message(
+      'See all attendees',
+      name: 'seeAllAttendees');
+  }
 }