From f60684ad0873ed31900b249bdf7120403bba6a2c Mon Sep 17 00:00:00 2001 From: haroon amjad Date: Thu, 14 Oct 2021 16:42:13 +0300 Subject: [PATCH] Notifications UI redesigned --- .../components/SearchByClinic.dart | 3 +- .../notification_details_page.dart | 11 +- .../notifications/notifications_page.dart | 271 +++++++++++------- lib/pages/ToDoList/widgets/paymentDialog.dart | 74 ++--- lib/pages/landing/landing_page.dart | 9 +- lib/widgets/drawer/app_drawer_widget.dart | 2 +- 6 files changed, 212 insertions(+), 158 deletions(-) diff --git a/lib/pages/BookAppointment/components/SearchByClinic.dart b/lib/pages/BookAppointment/components/SearchByClinic.dart index d1030636..ab36738e 100644 --- a/lib/pages/BookAppointment/components/SearchByClinic.dart +++ b/lib/pages/BookAppointment/components/SearchByClinic.dart @@ -13,6 +13,7 @@ import 'package:diplomaticquarterapp/pages/livecare/livecare_home.dart'; import 'package:diplomaticquarterapp/services/appointment_services/GetDoctorsList.dart'; import 'package:diplomaticquarterapp/services/authentication/auth_provider.dart'; import 'package:diplomaticquarterapp/services/clinic_services/get_clinic_service.dart'; +import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/app_toast.dart'; import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; @@ -224,7 +225,7 @@ class _SearchByClinicState extends State { child: Row( children: [ Checkbox( - activeColor: new Color(0xFF40ACC9), + activeColor: CustomColors.accentColor, value: nearestAppo, onChanged: (bool value) { setState(() { diff --git a/lib/pages/DrawerPages/notifications/notification_details_page.dart b/lib/pages/DrawerPages/notifications/notification_details_page.dart index ee1398be..7633ab9c 100644 --- a/lib/pages/DrawerPages/notifications/notification_details_page.dart +++ b/lib/pages/DrawerPages/notifications/notification_details_page.dart @@ -51,12 +51,15 @@ class NotificationsDetailsPage extends StatelessWidget { ), Container( width: double.infinity, - color: Colors.grey[400], child: Padding( padding: const EdgeInsets.all(8.0), - child: Texts( + child: Text( DateUtil.getDayMonthYearDateFormatted(DateUtil.convertStringToDate(notification.createdOn)) + " " + DateUtil.formatDateToTimeLang(DateUtil.convertStringToDate(notification.createdOn), false), - fontSize: 16, + style: TextStyle( + fontSize: 18.0, + color: Colors.black, + fontWeight: FontWeight.w600 + ), ), ), ), @@ -88,7 +91,7 @@ class NotificationsDetailsPage extends StatelessWidget { children: [ Expanded( child: Center( - child: Texts(notification.message), + child: Text(notification.message), ), ), ], diff --git a/lib/pages/DrawerPages/notifications/notifications_page.dart b/lib/pages/DrawerPages/notifications/notifications_page.dart index aba2fb13..07356f01 100644 --- a/lib/pages/DrawerPages/notifications/notifications_page.dart +++ b/lib/pages/DrawerPages/notifications/notifications_page.dart @@ -4,8 +4,8 @@ import 'package:diplomaticquarterapp/pages/DrawerPages/notifications/notificatio import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/date_uitl.dart'; -import 'package:diplomaticquarterapp/uitl/gif_loader_dialog_utils.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; +import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; @@ -18,9 +18,7 @@ class NotificationsPage extends StatelessWidget { DateTime d = DateUtil.convertStringToDate(date); String monthName = DateUtil.getMonth(d.month).toString(); TimeOfDay timeOfDay = TimeOfDay(hour: d.hour, minute: d.minute); - String minute = timeOfDay.minute < 10 - ? timeOfDay.minute.toString().padLeft(2, '0') - : timeOfDay.minute.toString(); + String minute = timeOfDay.minute < 10 ? timeOfDay.minute.toString().padLeft(2, '0') : timeOfDay.minute.toString(); String hour = '${timeOfDay.hourOfPeriod}:$minute'; if (timeOfDay.period == DayPeriod.am) { @@ -42,109 +40,182 @@ class NotificationsPage extends StatelessWidget { var prescriptionReport; return BaseView( onModelReady: (model) { - GetNotificationsRequestModel getNotificationsRequestModel = - new GetNotificationsRequestModel( - currentPage: currentIndex, - pagingSize: 14, - notificationStatusID: 2); + GetNotificationsRequestModel getNotificationsRequestModel = new GetNotificationsRequestModel(currentPage: currentIndex, pagingSize: 14, notificationStatusID: 2); model.getNotifications(getNotificationsRequestModel, context); }, - builder: (_, model, widget) => AppScaffold( - isShowAppBar: true, - showNewAppBar: true, - showNewAppBarTitle: true, - appBarTitle: TranslationBase.of(context).notifications, - baseViewModel: model, - body: ListView( - children: model.notifications - .map( - (notification) => InkWell( - onTap: () async { - if (!notification.isRead) { - model.markAsRead(notification.id); - } - Navigator.push( - context, - FadePage( - page: NotificationsDetailsPage( - notification: notification, - ))); - }, - child: Container( - width: double.infinity, - margin: EdgeInsets.only( - top: 5, left: 10, right: 10, bottom: 5), - padding: EdgeInsets.all(8.0), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.all( - Radius.circular(10.0), + builder: (_, model, widget) => + AppScaffold( + isShowAppBar: true, + showNewAppBar: true, + showNewAppBarTitle: true, + appBarTitle: TranslationBase + .of(context) + .notifications, + baseViewModel: model, + body: ListView.separated( + itemBuilder: (context, index) { + return InkWell( + onTap: () async { + if (!model.notifications[index].isRead) { + model.markAsRead(model.notifications[index].id); + } + Navigator.push( + context, + FadePage( + page: NotificationsDetailsPage( + notification: model.notifications[index], + ))); + }, + child: Container( + width: double.infinity, + padding: EdgeInsets.all(8.0), + decoration: BoxDecoration( + color: model.notifications[index].isRead ? Theme + .of(context) + .scaffoldBackgroundColor : CustomColors.accentColor.withOpacity(0.05), + border: Border( + left: BorderSide( + color: model.notifications[index].isRead ? Theme + .of(context) + .scaffoldBackgroundColor : CustomColors.accentColor, + width: 5.0, + ), + ), ), - border: Border.all( - color: notification.isRead - ? Colors.grey[200] - : CustomColors.accentColor, - width: 0.5), - ), - child: Row( - children: [ - Expanded( - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Texts(DateUtil.getDayMonthYearDateFormatted(DateUtil.convertStringToDate(notification.createdOn)) + " " + DateUtil.formatDateToTimeLang(DateUtil.convertStringToDate(notification.createdOn), false)), - SizedBox( - height: 5, - ), - Row( - children: [ - Expanded( - child: Texts(notification.message)), - if (notification.messageType == "image") - Icon(FontAwesomeIcons.images) - ], - ), - SizedBox( - height: 5, - ), - ], + child: Row( + children: [ + Expanded( + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Texts(DateUtil.getDayMonthYearDateFormatted(DateUtil.convertStringToDate(model.notifications[index].createdOn)) + + " " + + DateUtil.formatDateToTimeLang(DateUtil.convertStringToDate(model.notifications[index].createdOn), false)), + SizedBox( + height: 5, + ), + Row( + children: [ + Expanded(child: Texts(model.notifications[index].message)), + if (model.notifications[index].messageType == "image") + Icon( + FontAwesomeIcons.images, + color: CustomColors.grey, + ) + ], + ), + SizedBox( + height: 5, + ), + ], + ), ), ), - ), - SizedBox( - width: 15, - ), - ], - ), - ), - ), - ) - .toList() - ..add( - InkWell( - onTap: () async { - GifLoaderDialogUtils.showMyDialog(context); - currentIndex++; - GetNotificationsRequestModel - getNotificationsRequestModel = - new GetNotificationsRequestModel( - currentPage: currentIndex, - pagingSize: 14, - notificationStatusID: 2); - - await model.getNotifications( - getNotificationsRequestModel, context); - GifLoaderDialogUtils.hideDialog(context); - }, - child: Center( - child: Image.asset('assets/images/notf.png'), + ], + ), ), - ), - )), - ), + ); + }, + separatorBuilder: (context, index) { + return Column( + children: [ + Divider( + color: Colors.grey[300], + thickness: 2.0, + ), + ], + ); + }, + itemCount: model.notifications.length) + ), + // ListView( + // children: model.notifications + // .map( + // (notification) => InkWell( + // onTap: () async { + // if (!notification.isRead) { + // model.markAsRead(notification.id); + // } + // Navigator.push( + // context, + // FadePage( + // page: NotificationsDetailsPage( + // notification: notification, + // ))); + // }, + // child: Container( + // width: double.infinity, + // padding: EdgeInsets.all(8.0), + // decoration: BoxDecoration( + // color: notification.isRead ? CustomColors.white : CustomColors.accentColor.withOpacity(0.05), + // border: Border( + // left: BorderSide( + // color: notification.isRead ? Colors.grey[200] : CustomColors.accentColor, + // width: 5.0, + // ), + // ), + // ), + // child: Row( + // children: [ + // Expanded( + // child: Padding( + // padding: const EdgeInsets.all(8.0), + // child: Column( + // crossAxisAlignment: CrossAxisAlignment.start, + // children: [ + // Texts(DateUtil.getDayMonthYearDateFormatted(DateUtil.convertStringToDate(notification.createdOn)) + " " + DateUtil.formatDateToTimeLang(DateUtil.convertStringToDate(notification.createdOn), false)), + // SizedBox( + // height: 5, + // ), + // Row( + // children: [ + // Expanded( + // child: Texts(notification.message)), + // if (notification.messageType == "image") + // Icon(FontAwesomeIcons.images, color: CustomColors.grey,) + // ], + // ), + // SizedBox( + // height: 5, + // ), + // Divider( + // height: 5.0, + // color: CustomColors.grey2, + // ), + // ], + // ), + // ), + // ), + // ], + // ), + // ), + // ), + // ) + // .toList() + // ..add( + // InkWell( + // onTap: () async { + // GifLoaderDialogUtils.showMyDialog(context); + // currentIndex++; + // GetNotificationsRequestModel + // getNotificationsRequestModel = + // new GetNotificationsRequestModel( + // currentPage: currentIndex, + // pagingSize: 14, + // notificationStatusID: 2); + // + // await model.getNotifications( + // getNotificationsRequestModel, context); + // GifLoaderDialogUtils.hideDialog(context); + // }, + // child: Center( + // child: Image.asset('assets/images/notf.png'), + // ), + // ), + // )), ); } } diff --git a/lib/pages/ToDoList/widgets/paymentDialog.dart b/lib/pages/ToDoList/widgets/paymentDialog.dart index c46535b3..7c1bf6ed 100644 --- a/lib/pages/ToDoList/widgets/paymentDialog.dart +++ b/lib/pages/ToDoList/widgets/paymentDialog.dart @@ -4,7 +4,9 @@ import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/date_uitl.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/uitl/utils_new.dart'; +import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_datetime_picker/flutter_datetime_picker.dart'; class PaymentDialog extends StatefulWidget { AppoitmentAllHistoryResultList appo; @@ -30,25 +32,18 @@ class _PaymentDialogState extends State { child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ Container( margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 5.0), - child: Text(TranslationBase.of(context).invoiceDetails, style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold)), - ), - Divider( - color: Colors.grey, + child: Text(TranslationBase.of(context).invoiceDetails, style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w600)), ), Container( - margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0), - child: Text(TranslationBase.of(context).appoDetails, style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold)), + margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 0.0), + child: Text(widget.appo.doctorTitle + " " + widget.appo.doctorNameObj, style: TextStyle(color: Colors.black, fontSize: 15.0, fontWeight: FontWeight.w600)), ), Container( - margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0), - child: Text(widget.appo.doctorTitle + " " + widget.appo.doctorNameObj, style: TextStyle(color: Colors.grey[700], fontSize: 15.0, fontWeight: FontWeight.bold)), - ), - Container( - margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0), + margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 0.0), child: Text(getDate(widget.appo.appointmentDate), style: getTextStyle()), ), Container( - margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0), + margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 0.0), child: Text(widget.appo.projectName, style: getTextStyle()), ), Divider( @@ -58,7 +53,7 @@ class _PaymentDialogState extends State { margin: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 5.0), child: Table( children: [ - TableRow(children: [ + TableRow(decoration: BoxDecoration(), children: [ TableCell(child: _getNormalText(TranslationBase.of(context).patientShareToDo)), TableCell(child: _getNormalText(widget.patientShareResponse.patientShare.toString())), ]), @@ -77,46 +72,38 @@ class _PaymentDialogState extends State { color: Colors.grey, ), Container( - margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 5.0), - child: Text(TranslationBase.of(context).YouCanPayByTheFollowingOptions, style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold)), + margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 5.0), + child: Text(TranslationBase.of(context).YouCanPayByTheFollowingOptions, style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600)), ), Container(margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0), child: getPaymentMethods()), Container( - margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 15.0), - child: Text(TranslationBase.of(context).appoPaymentConfirm, style: TextStyle(fontSize: 14.0, color: CustomColors.accentColor)), - ), - Divider( - color: Colors.grey, + margin: EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 15.0), + child: Text(TranslationBase.of(context).appoPaymentConfirm, style: TextStyle(fontSize: 14.0, color: CustomColors.accentColor, fontWeight: FontWeight.w600)), ), Container( alignment: Alignment.center, height: 40.0, + margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0), child: Flex( direction: Axis.horizontal, children: [ Expanded( - child: InkWell( - onTap: () { + child: DefaultButton( + TranslationBase.of(context).cancel, + () { Navigator.pop(context, null); }, - child: Container( - child: Text(TranslationBase.of(context).cancel, textAlign: TextAlign.center, style: TextStyle(fontSize: 18.0, color: CustomColors.accentColor)), - ), + color: Color(0xffEAEAEA), + textColor: Colors.black, ), ), + mWidth(10.0), Expanded( - child: InkWell( - onTap: () { + child: DefaultButton( + TranslationBase.of(context).confirm, + () { Navigator.pop(context, widget.patientShareResponse); -// widget.onPaymentMethodSelected(); }, - child: Container( - child: Text(TranslationBase.of(context).ok, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 18.0, - )), - ), ), ), ], @@ -131,28 +118,17 @@ class _PaymentDialogState extends State { _getNormalText(text) { return Container( margin: EdgeInsets.only(top: 10.0, right: 10.0), - child: Text(text, style: TextStyle(fontSize: 13, letterSpacing: 0.5, color: Colors.grey[700])), + child: Text(text, style: TextStyle(fontSize: 13, letterSpacing: 0.5, color: Colors.black)), ); } TextStyle getTextStyle() { - return TextStyle(color: Colors.grey[700], fontSize: 13.0); + return TextStyle(color: Colors.grey[700], fontSize: 13.0, fontWeight: FontWeight.w600); } -// Future navigateToPaymentMethod(context) async { -// Navigator.push( -// context, MaterialPageRoute(builder: (context) => PaymentMethod())); -// } - String getDate(String date) { DateTime dateObj = DateUtil.convertStringToDate(date); - return DateUtil.getWeekDay(dateObj.weekday) + - ", " + - dateObj.day.toString() + - " " + - DateUtil.getMonth(dateObj.month) + - " " + - dateObj.year.toString() + + return DateUtil.getDayMonthYearDateFormatted(dateObj) + " " + dateObj.hour.toString() + ":" + diff --git a/lib/pages/landing/landing_page.dart b/lib/pages/landing/landing_page.dart index 13cc2dce..cebcacdc 100644 --- a/lib/pages/landing/landing_page.dart +++ b/lib/pages/landing/landing_page.dart @@ -173,19 +173,22 @@ class _LandingPageState extends State with WidgetsBindingObserver { // pageController.jumpToPage(tab); } else { - if (currentTab > 0 && tab == 2) + if (currentTab > 0 && tab == 2) { pageController.jumpToPage(0); - else if (tab != 0) { + currentTab = tab; + } else if (tab != 0) { if (tab == 4 && projectViewModel.isLogin && model.count == 0) { AppToast.showErrorToast(message: TranslationBase.of(context).noBookedAppo); } else { pageController.jumpToPage(tab); + currentTab = tab; } } else { pageController.jumpToPage(tab); + currentTab = tab; } - currentTab = tab; + // currentTab = tab; } }); } diff --git a/lib/widgets/drawer/app_drawer_widget.dart b/lib/widgets/drawer/app_drawer_widget.dart index 53969cd7..ce0a86d3 100644 --- a/lib/widgets/drawer/app_drawer_widget.dart +++ b/lib/widgets/drawer/app_drawer_widget.dart @@ -360,7 +360,7 @@ class _AppDrawerState extends State { onTap: () { //NotificationsPage // Navigator.of(context).pop(); - if (!projectProvider.user.isFamily) Navigator.push(context, FadePage(page: NotificationsPage())); + if (!projectProvider.isLoginChild) Navigator.push(context, FadePage(page: NotificationsPage())); }, ), if (projectProvider.havePrivilege(3))