From 1edeff439edd780c04b20c8f222f903e8d3847b6 Mon Sep 17 00:00:00 2001 From: Sultan khan Date: Thu, 15 Jan 2026 10:29:48 +0300 Subject: [PATCH] notifications page updates --- .../notification_details_page.dart | 284 ++++++++++++++++++ .../notifications_list_page.dart | 168 +++++++++-- 2 files changed, 435 insertions(+), 17 deletions(-) create mode 100644 lib/presentation/notifications/notification_details_page.dart diff --git a/lib/presentation/notifications/notification_details_page.dart b/lib/presentation/notifications/notification_details_page.dart new file mode 100644 index 0000000..a4aef02 --- /dev/null +++ b/lib/presentation/notifications/notification_details_page.dart @@ -0,0 +1,284 @@ +import 'package:flutter/material.dart'; +import 'package:hmg_patient_app_new/core/utils/date_util.dart'; +import 'package:hmg_patient_app_new/core/utils/size_utils.dart'; +import 'package:hmg_patient_app_new/extensions/string_extensions.dart'; +import 'package:hmg_patient_app_new/extensions/widget_extensions.dart'; +import 'package:hmg_patient_app_new/features/notifications/models/resp_models/notification_response_model.dart'; +import 'package:hmg_patient_app_new/theme/colors.dart'; +import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart'; +import 'package:intl/intl.dart'; +import 'package:share_plus/share_plus.dart'; + +class NotificationDetailsPage extends StatelessWidget { + final NotificationResponseModel notification; + + const NotificationDetailsPage({ + super.key, + required this.notification, + }); + + @override + Widget build(BuildContext context) { + // Debug logging + print('=== Notification Details ==='); + print('Message: ${notification.message}'); + print('MessageType: ${notification.messageType}'); + print('MessageTypeData: ${notification.messageTypeData}'); + print('VideoURL: ${notification.videoURL}'); + print('========================'); + + return CollapsingListView( + title: "Notification Details".needTranslation, + trailing: IconButton( + icon: Icon( + Icons.share_outlined, + size: 24.h, + color: AppColors.textColor, + ), + onPressed: () { + _shareNotification(); + }, + ), + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: 24.h), + // Notification content card + _buildNotificationCard(context), + SizedBox(height: 24.h), + ], + ).paddingSymmetrical(24.w, 0.h), + ), + ); + } + + Widget _buildNotificationCard(BuildContext context) { + return Container( + decoration: RoundedRectangleBorder().toSmoothCornerDecoration( + color: AppColors.whiteColor, + borderRadius: 24.h, + hasShadow: true, + ), + padding: EdgeInsets.all(16.h), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // Date and Time row + Row( + children: [ + // Time chip with clock icon + Container( + padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), + decoration: BoxDecoration( + color: AppColors.greyColor, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.access_time, size: 12.w, color: AppColors.textColor), + SizedBox(width: 4.w), + _formatTime(notification.isSentOn).toText10( + weight: FontWeight.w500, + color: AppColors.textColor, + ), + ], + ), + ), + SizedBox(width: 8.w), + // Date chip with calendar icon + Container( + padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), + decoration: BoxDecoration( + color: AppColors.greyColor, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.calendar_today, size: 12.w, color: AppColors.textColor), + SizedBox(width: 4.w), + _formatDate(notification.isSentOn).toText10( + weight: FontWeight.w500, + color: AppColors.textColor, + ), + ], + ), + ), + ], + ), + SizedBox(height: 16.h), + + // Notification message + if (notification.message != null && notification.message!.isNotEmpty) + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + 'Message'.needTranslation.toText14( + weight: FontWeight.w600, + color: AppColors.greyTextColor, + ), + SizedBox(height: 8.h), + notification.message!.toText16( + weight: FontWeight.w400, + color: AppColors.textColor, + maxlines: 100, + ), + SizedBox(height: 16.h), + ], + ), + + // Notification image (if MessageType is "image") + if (notification.messageType != null && + notification.messageType!.toLowerCase() == "image") + Builder( + builder: (context) { + // Try to get image URL from videoURL or messageTypeData + String? imageUrl; + + if (notification.videoURL != null && notification.videoURL!.isNotEmpty) { + imageUrl = notification.videoURL; + print('Image URL from videoURL: $imageUrl'); + } else if (notification.messageTypeData != null && notification.messageTypeData!.isNotEmpty) { + imageUrl = notification.messageTypeData; + print('Image URL from messageTypeData: $imageUrl'); + } + + if (imageUrl == null || imageUrl.isEmpty) { + print('No image URL found. videoURL: ${notification.videoURL}, messageTypeData: ${notification.messageTypeData}'); + return SizedBox.shrink(); + } + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + 'Attached Image'.needTranslation.toText14( + weight: FontWeight.w600, + color: AppColors.greyTextColor, + ), + SizedBox(height: 8.h), + ClipRRect( + borderRadius: BorderRadius.circular(12.h), + child: Image.network( + imageUrl, + width: double.infinity, + fit: BoxFit.cover, + errorBuilder: (context, error, stackTrace) { + print('Error loading image: $error'); + print('Image URL: $imageUrl'); + return Container( + height: 200.h, + decoration: BoxDecoration( + color: AppColors.greyColor.withValues(alpha: 0.2), + borderRadius: BorderRadius.circular(12.h), + ), + child: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.broken_image_outlined, + size: 48.h, + color: AppColors.greyTextColor, + ), + SizedBox(height: 8.h), + 'Failed to load image'.needTranslation.toText12( + color: AppColors.greyTextColor, + ), + SizedBox(height: 4.h), + Text( + imageUrl!, + style: TextStyle(fontSize: 8, color: AppColors.greyTextColor), + textAlign: TextAlign.center, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ), + ], + ), + ), + ); + }, + loadingBuilder: (context, child, loadingProgress) { + if (loadingProgress == null) { + print('Image loaded successfully'); + return child; + } + return Container( + height: 200.h, + decoration: BoxDecoration( + color: AppColors.greyColor.withValues(alpha: 0.2), + borderRadius: BorderRadius.circular(12.h), + ), + child: Center( + child: CircularProgressIndicator( + value: loadingProgress.expectedTotalBytes != null + ? loadingProgress.cumulativeBytesLoaded / + loadingProgress.expectedTotalBytes! + : null, + ), + ), + ); + }, + ), + ), + SizedBox(height: 16.h), + ], + ); + }, + ), + + // Additional notification info + if (notification.notificationType != null && notification.notificationType!.isNotEmpty) + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + 'Type'.needTranslation.toText14( + weight: FontWeight.w600, + color: AppColors.greyTextColor, + ), + SizedBox(height: 8.h), + notification.notificationType!.toText16( + weight: FontWeight.w400, + color: AppColors.textColor, + ), + ], + ), + ], + ), + ); + } + + void _shareNotification() async { + final String shareText = ''' +${notification.message ?? 'Notification'} + +Time: ${_formatTime(notification.isSentOn)} +Date: ${_formatDate(notification.isSentOn)} +${notification.notificationType != null ? '\nType: ${notification.notificationType}' : ''} + '''.trim(); + + await Share.share(shareText); + } + + String _formatTime(String? dateTimeString) { + if (dateTimeString == null || dateTimeString.isEmpty) return '--'; + try { + final dateTime = DateUtil.convertStringToDate(dateTimeString); + return DateFormat('hh:mm a').format(dateTime); + } catch (e) { + return '--'; + } + } + + String _formatDate(String? dateTimeString) { + if (dateTimeString == null || dateTimeString.isEmpty) return '--'; + try { + final dateTime = DateUtil.convertStringToDate(dateTimeString); + return DateFormat('dd MMM yyyy').format(dateTime); + } catch (e) { + return '--'; + } + } +} + diff --git a/lib/presentation/notifications/notifications_list_page.dart b/lib/presentation/notifications/notifications_list_page.dart index 99d4270..650753c 100644 --- a/lib/presentation/notifications/notifications_list_page.dart +++ b/lib/presentation/notifications/notifications_list_page.dart @@ -1,15 +1,19 @@ import 'package:flutter/material.dart'; import 'package:flutter_staggered_animations/flutter_staggered_animations.dart'; +import 'package:hmg_patient_app_new/core/app_assets.dart'; import 'package:hmg_patient_app_new/core/utils/date_util.dart'; import 'package:hmg_patient_app_new/core/utils/size_utils.dart'; +import 'package:hmg_patient_app_new/core/utils/utils.dart'; import 'package:hmg_patient_app_new/extensions/int_extensions.dart'; import 'package:hmg_patient_app_new/extensions/string_extensions.dart'; import 'package:hmg_patient_app_new/extensions/widget_extensions.dart'; import 'package:hmg_patient_app_new/features/notifications/notifications_view_model.dart'; import 'package:hmg_patient_app_new/presentation/lab/lab_result_item_view.dart'; +import 'package:hmg_patient_app_new/presentation/notifications/notification_details_page.dart'; import 'package:hmg_patient_app_new/theme/colors.dart'; import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart'; import 'package:provider/provider.dart'; +import 'package:intl/intl.dart'; class NotificationsListPage extends StatelessWidget { const NotificationsListPage({super.key}); @@ -46,24 +50,134 @@ class NotificationsListPage extends StatelessWidget { child: SlideAnimation( verticalOffset: 100.0, child: FadeInAnimation( - child: AnimatedContainer( - duration: Duration(milliseconds: 300), - curve: Curves.easeInOut, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox(height: 16.h), - // "Notification Title".toText14(), - // SizedBox(height: 8.h), - Row( - children: [ - Expanded(child: notificationsVM.notificationsList[index].message!.toText16(isBold: notificationsVM.notificationsList[index].isRead ?? false)), - ], + child: GestureDetector( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => NotificationDetailsPage( + notification: notificationsVM.notificationsList[index], + ), ), - SizedBox(height: 12.h), - DateUtil.formatDateToDate(DateUtil.convertStringToDate(notificationsVM.notificationsList[index].isSentOn!), false).toText14(weight: FontWeight.w500), - 1.divider, - ], + ); + }, + child: AnimatedContainer( + duration: Duration(milliseconds: 300), + curve: Curves.easeInOut, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: 16.h), + // Message row with red dot for unread + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: notificationsVM.notificationsList[index].message!.toText16( + isBold: (notificationsVM.notificationsList[index].isRead == false), + weight: (notificationsVM.notificationsList[index].isRead == false) + ? FontWeight.w600 + : FontWeight.w400, + ), + ), + SizedBox(width: 8.w), + // Red dot for unread notifications ONLY + if (notificationsVM.notificationsList[index].isRead == false) + Container( + width: 8.w, + height: 8.w, + decoration: BoxDecoration( + color: Colors.red, + shape: BoxShape.circle, + ), + ), + ], + ), + SizedBox(height: 12.h), + // First row: Time and Date chips with arrow + Row( + children: [ + // Time chip with clock icon + Container( + padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), + decoration: BoxDecoration( + color: AppColors.greyColor, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.access_time, size: 12.w, color: AppColors.textColor), + SizedBox(width: 4.w), + _formatTime(notificationsVM.notificationsList[index].isSentOn).toText10( + weight: FontWeight.w500, + color: AppColors.textColor, + ), + ], + ), + ), + SizedBox(width: 8.w), + // Date chip with calendar icon + Container( + padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), + decoration: BoxDecoration( + color: AppColors.greyColor, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.calendar_today, size: 12.w, color: AppColors.textColor), + SizedBox(width: 4.w), + _formatDate(notificationsVM.notificationsList[index].isSentOn).toText10( + weight: FontWeight.w500, + color: AppColors.textColor, + ), + ], + ), + ), + Spacer(), + // Arrow icon + Utils.buildSvgWithAssets( + icon: AppAssets.arrow_forward, + width: 16.w, + height: 16.h, + iconColor: AppColors.greyTextColor, + ), + ], + ), + // Second row: Contains Image chip (if MessageType is "image") + if (notificationsVM.notificationsList[index].messageType != null && + notificationsVM.notificationsList[index].messageType!.toLowerCase() == "image") + Padding( + padding: EdgeInsets.only(top: 8.h), + child: Row( + children: [ + Container( + padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h), + decoration: BoxDecoration( + color: AppColors.greyColor, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(Icons.image_outlined, size: 12.w, color: AppColors.textColor), + SizedBox(width: 4.w), + 'Contains Image'.toText10( + weight: FontWeight.w500, + color: AppColors.textColor, + ), + ], + ), + ), + ], + ), + ), + SizedBox(height: 16.h), + 1.divider, + ], + ), ), ), ), @@ -75,4 +189,24 @@ class NotificationsListPage extends StatelessWidget { ), ); } + + String _formatTime(String? dateTimeString) { + if (dateTimeString == null || dateTimeString.isEmpty) return '--'; + try { + final dateTime = DateUtil.convertStringToDate(dateTimeString); + return DateFormat('hh:mm a').format(dateTime); + } catch (e) { + return '--'; + } + } + + String _formatDate(String? dateTimeString) { + if (dateTimeString == null || dateTimeString.isEmpty) return '--'; + try { + final dateTime = DateUtil.convertStringToDate(dateTimeString); + return DateFormat('dd MMM yyyy').format(dateTime); + } catch (e) { + return '--'; + } + } }