diff --git a/lib/features/email/presentation/styles/event_attendee_detail_widget_styles.dart b/lib/features/email/presentation/styles/event_attendee_detail_widget_styles.dart index 93449a1f4..6c11de9b4 100644 --- a/lib/features/email/presentation/styles/event_attendee_detail_widget_styles.dart +++ b/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; } \ No newline at end of file diff --git a/lib/features/email/presentation/styles/see_all_attendees_button_widget_styles.dart b/lib/features/email/presentation/styles/see_all_attendees_button_widget_styles.dart new file mode 100644 index 000000000..37e0787ec --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/calendar_event/event_attendee_detail_widget.dart b/lib/features/email/presentation/widgets/calendar_event/event_attendee_detail_widget.dart index 9a450d680..73c53bb3f 100644 --- a/lib/features/email/presentation/widgets/calendar_event/event_attendee_detail_widget.dart +++ b/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 createState() => _EventAttendeeDetailWidgetState(); +} + +class _EventAttendeeDetailWidgetState extends State { + + late List _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 get _attendeesDisplayed { - final attendeesWithoutOrganizer = attendees.withoutOrganizer(organizer); - return attendeesWithoutOrganizer.length > _maxAttendeeDisplayed - ? attendeesWithoutOrganizer.sublist(0, _maxAttendeeDisplayed - 1) + List _splitAttendees(List attendees) { + final attendeesWithoutOrganizer = attendees.withoutOrganizer(widget.organizer); + return attendeesWithoutOrganizer.length > EventAttendeeDetailWidget._maxAttendeeDisplayed + ? attendeesWithoutOrganizer.sublist(0, EventAttendeeDetailWidget._maxAttendeeDisplayed - 1) : attendeesWithoutOrganizer; } } \ No newline at end of file diff --git a/lib/features/email/presentation/widgets/calendar_event/see_all_attendees_button_widget.dart b/lib/features/email/presentation/widgets/calendar_event/see_all_attendees_button_widget.dart new file mode 100644 index 000000000..038a44ddb --- /dev/null +++ b/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 + ), + ), + ); + } +} diff --git a/lib/l10n/intl_messages.arb b/lib/l10n/intl_messages.arb index 7318d458a..3c8fb07e6 100644 --- a/lib/l10n/intl_messages.arb +++ b/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": {} } } \ No newline at end of file diff --git a/lib/main/localizations/app_localizations.dart b/lib/main/localizations/app_localizations.dart index b1fc12966..790ebaeb6 100644 --- a/lib/main/localizations/app_localizations.dart +++ b/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'); + } } \ No newline at end of file