From 19edcc210e32b3c64a0b0ba3c53dc456b8349607 Mon Sep 17 00:00:00 2001 From: Haroon Amjad Date: Tue, 5 Oct 2021 23:46:01 +0300 Subject: [PATCH] Rate appointment UI implemented --- assets/images/new/appointment-rating/1.svg | 3 + assets/images/new/appointment-rating/2.svg | 3 + assets/images/new/appointment-rating/3.svg | 3 + assets/images/new/appointment-rating/4.svg | 3 + assets/images/new/appointment-rating/5.svg | 3 + lib/config/localized_values.dart | 1 + .../rate_appointment_clinic.dart | 397 +++++++++++------- .../rate_appointment_doctor.dart | 67 ++- lib/uitl/translations_delegate_base.dart | 2 + 9 files changed, 297 insertions(+), 185 deletions(-) create mode 100644 assets/images/new/appointment-rating/1.svg create mode 100644 assets/images/new/appointment-rating/2.svg create mode 100644 assets/images/new/appointment-rating/3.svg create mode 100644 assets/images/new/appointment-rating/4.svg create mode 100644 assets/images/new/appointment-rating/5.svg diff --git a/assets/images/new/appointment-rating/1.svg b/assets/images/new/appointment-rating/1.svg new file mode 100644 index 00000000..8c732769 --- /dev/null +++ b/assets/images/new/appointment-rating/1.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/new/appointment-rating/2.svg b/assets/images/new/appointment-rating/2.svg new file mode 100644 index 00000000..60ae2909 --- /dev/null +++ b/assets/images/new/appointment-rating/2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/new/appointment-rating/3.svg b/assets/images/new/appointment-rating/3.svg new file mode 100644 index 00000000..324918df --- /dev/null +++ b/assets/images/new/appointment-rating/3.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/new/appointment-rating/4.svg b/assets/images/new/appointment-rating/4.svg new file mode 100644 index 00000000..a983815e --- /dev/null +++ b/assets/images/new/appointment-rating/4.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/new/appointment-rating/5.svg b/assets/images/new/appointment-rating/5.svg new file mode 100644 index 00000000..4600b411 --- /dev/null +++ b/assets/images/new/appointment-rating/5.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/config/localized_values.dart b/lib/config/localized_values.dart index 179d9fe8..c80c87ac 100644 --- a/lib/config/localized_values.dart +++ b/lib/config/localized_values.dart @@ -1527,4 +1527,5 @@ const Map localizedValues = { "medicalReport": {"en": "Medical Report", "ar": "تقرير طبي"}, "insuredPatient": {"en": "Insured Patient", "ar": "هل لدى المريض تامين؟"}, "rateDoctor": {"en": "Rate Doctor", "ar": "تقييم الطبيب"}, + "rateAppointment": {"en": "Rate Appointment", "ar": "سعر التعيين"}, }; diff --git a/lib/pages/rateAppointment/rate_appointment_clinic.dart b/lib/pages/rateAppointment/rate_appointment_clinic.dart index 15c040ab..c6ab88ab 100644 --- a/lib/pages/rateAppointment/rate_appointment_clinic.dart +++ b/lib/pages/rateAppointment/rate_appointment_clinic.dart @@ -1,27 +1,35 @@ import 'package:diplomaticquarterapp/core/enum/viewstate.dart'; import 'package:diplomaticquarterapp/core/model/rate/appointment_details.dart'; import 'package:diplomaticquarterapp/core/viewModels/appointment_rate_view_model.dart'; +import 'package:diplomaticquarterapp/core/viewModels/project_view_model.dart'; import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/pages/landing/landing_page.dart'; +import 'package:diplomaticquarterapp/theme/colors.dart'; import 'package:diplomaticquarterapp/uitl/app_toast.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/avatar/large_avatar.dart'; +import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart'; import 'package:diplomaticquarterapp/widgets/buttons/secondary_button.dart'; +import 'package:diplomaticquarterapp/widgets/data_display/medical/doctor_card.dart'; import 'package:diplomaticquarterapp/widgets/data_display/text.dart'; import 'package:diplomaticquarterapp/widgets/drawer/app_drawer_widget.dart'; import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart'; import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:hexcolor/hexcolor.dart'; +import 'package:provider/provider.dart'; class RateAppointmentClinic extends StatefulWidget { final AppointmentDetails appointmentDetails; final String doctorNote; final int doctorRate; - RateAppointmentClinic({this.appointmentDetails, this.doctorRate, this.doctorNote}); + RateAppointmentClinic( + {this.appointmentDetails, this.doctorRate, this.doctorNote}); @override _RateAppointmentClinicState createState() => _RateAppointmentClinicState(); @@ -34,164 +42,253 @@ class _RateAppointmentClinicState extends State { @override Widget build(BuildContext context) { + ProjectViewModel projectViewModel = Provider.of(context); return BaseView( builder: (_, model, w) => AppScaffold( + isShowAppBar: true, + showNewAppBar: true, + showNewAppBarTitle: true, baseViewModel: model, - body: Scaffold( - backgroundColor: Colors.grey[200], - appBar: AppBar( - elevation: 0, - textTheme: TextTheme( - headline6: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), - ), - title: Text('Rate'), - leading: Builder( - builder: (BuildContext context) { - return IconButton( - icon: Icon(Icons.menu), - color: Colors.white, - onPressed: () => Scaffold.of(context).openDrawer(), - ); - }, - ), - centerTitle: true, - ), - drawer: SafeArea(child: AppDrawer()), - body: FractionallySizedBox( - widthFactor: 1, - child: SingleChildScrollView( - child: Container( - padding: EdgeInsets.all(12), - child: Column( - children: [ - SizedBox( - height: 25, - ), - Texts( - TranslationBase.of(context).lastAppointment, - bold: true, - color: Colors.black, - ), - SizedBox( - height: 25, + appBarTitle: TranslationBase.of(context).rateAppointment, + body: SingleChildScrollView( + child: Container( + padding: EdgeInsets.all(12), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + height: 25, + ), + Text( + TranslationBase.of(context).lastAppointment, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.64, + height: 23 / 16), + ), + SizedBox( + height: 25, + ), + Card( + elevation: 0, + shape: cardRadius(10), + child: Padding( + padding: const EdgeInsets.only( + left: 12, right: 12, top: 12, bottom: 12), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + margin: EdgeInsets.only(bottom: 10.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + model.appointmentDetails.projectName, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xff2E303A), + letterSpacing: -0.64, + height: 25 / 16), + ), + Text( + model.appointmentDetails.startTime, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: Color(0xff2E303A), + letterSpacing: -0.64, + height: 25 / 16), + ), + ], + ), + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + LargeAvatar( + url: + 'https://hmgwebservices.com/Images/Hospitals/' + + model.appointmentDetails.projectID + .toString() + + '.jpg', + width: 48, + height: 48, + ), + SizedBox(width: 11), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + myRichText( + TranslationBase.of(context).clinic + ":", + model.appointmentDetails.projectName, + projectViewModel.isArabic), + myRichText( + TranslationBase.of(context).date + ":", + DateUtil.getMonthDayYearDateFormatted( + DateUtil.convertStringToDate(model + .appointmentDetails + .appointmentDate)), + projectViewModel.isArabic), + ], + ), + ), + ], + ), + ], ), - Container( - width: double.infinity, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(15), - color: Colors.white, - shape: BoxShape.rectangle, - border: Border.all(color: Colors.white, width: 0.5), - ), + ), + ), + SizedBox( + height: 12, + ), + Container( + width: double.infinity, + child: Card( + elevation: 0, + shape: cardRadius(10), + child: Padding( + padding: const EdgeInsets.all(12.0), child: Column( - children: [ - SizedBox( - height: 8, - ), - LargeAvatar( - url: 'https://hmgwebservices.com/Images/Hospitals/' + model.appointmentDetails.projectID.toString() + '.jpg', - name: model.appointmentDetails.clinicName, - width: 110, - height: 110, - ), - SizedBox( - height: 22, - ), - Texts( - model.appointmentDetails.projectName, - fontSize: 22, - fontWeight: FontWeight.bold, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + TranslationBase.of(context).rateClinic, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.64, + height: 23 / 16), ), SizedBox( - height: 4, + height: 12, ), - Texts( - DateUtil.getMonthDayYearDateFormatted(DateUtil.convertStringToDate(model.appointmentDetails.appointmentDate)), - ), - SizedBox( - height: 8, + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + ...List.generate( + 5, + (index) => AnimatedSwitcher( + duration: Duration(milliseconds: 300), + switchInCurve: Curves.elasticOut, + switchOutCurve: Curves.elasticIn, + transitionBuilder: (Widget child, + Animation animation) { + return ScaleTransition( + child: child, scale: animation); + }, + child: rating == (index + 1) + ? Container( + margin: EdgeInsets.only( + left: 3.0, right: 3.0), + decoration: BoxDecoration( + borderRadius: + BorderRadius.circular(100), + border: Border.all( + width: 3, + color: CustomColors.green)), + key: ValueKey(rating), + child: IconButton( + onPressed: () { + setState(() { + rating = index + 1; + }); + }, + iconSize: 35, + icon: SvgPicture.asset( + 'assets/images/new/appointment-rating/' + + (index + 1).toString() + + '.svg'), + ), + ) + : Container( + key: ValueKey(rating), + child: IconButton( + onPressed: () { + setState(() { + rating = index + 1; + }); + }, + iconSize: 35, + icon: SvgPicture.asset( + 'assets/images/new/appointment-rating/' + + (index + 1).toString() + + '.svg'), + ), + ), + ), + ) + ], ), - Texts(model.appointmentDetails.startTime), - SizedBox( - height: 8, - ) ], ), ), - SizedBox( - height: 12, - ), - Center( - child: Texts( - TranslationBase.of(context).rateClinic, - textAlign: TextAlign.center, - )), - SizedBox( - height: 12, - ), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - ...List.generate( - 5, - (index) => AnimatedSwitcher( - duration: Duration(milliseconds: 1000), - switchInCurve: Curves.elasticOut, - switchOutCurve: Curves.elasticIn, - transitionBuilder: (Widget child, Animation animation) { - return ScaleTransition(child: child, scale: animation); - }, - child: Container( - key: ValueKey(rating), - child: IconButton( - //iconSize: 45.0, - onPressed: () { - setState(() { - rating = index + 1; - }); - }, - iconSize: rating == (index + 1) ? 60 : 40, - // Theme.of(context).hintColor, - icon: Image.asset('assets/images/' + (index + 1).toString() + '.png')), - ), - ), - ) - ], - ), - SizedBox(height: 12), - SizedBox( - height: 12, - ), - ], + ), ), - ), + SizedBox(height: 12), + SizedBox( + height: 12, + ), + ], ), ), - bottomSheet: Container( - height: MediaQuery.of(context).size.height * 0.15, - width: double.infinity, - color: Colors.grey[200], - child: Column( - children: [ - Container( - width: MediaQuery.of(context).size.width * 0.9, - child: SecondaryButton( - onTap: () async { - if (rating > 0) { + ), + bottomSheet: Container( + color: Colors.white, + padding: EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Expanded( + child: DefaultButton( + TranslationBase.of(context).later, + () { + Navigator.pushReplacement( + context, + FadePage( + page: LandingPage(), + ), + ); + }, + color: Color(0xffEAEAEA), + textColor: Color(0xff2B353E), + ), + ), + SizedBox(width: 10), + Expanded( + child: DefaultButton( + TranslationBase.of(context).submit, + rating <= 0 + ? null + : () { model .sendAppointmentRate( - rating, widget.appointmentDetails.appointmentNo, widget.appointmentDetails.projectID, widget.appointmentDetails.doctorID, widget.appointmentDetails.clinicID, note) + rating, + widget.appointmentDetails.appointmentNo, + widget.appointmentDetails.projectID, + widget.appointmentDetails.doctorID, + widget.appointmentDetails.clinicID, + note) .then( (value) => { model .sendDoctorRate( widget.doctorRate, - widget.appointmentDetails.appointmentNo, + widget + .appointmentDetails.appointmentNo, widget.appointmentDetails.projectID, widget.appointmentDetails.doctorID, widget.appointmentDetails.clinicID, note, - widget.appointmentDetails.appointmentDate, + widget.appointmentDetails + .appointmentDate, widget.appointmentDetails.doctorName, widget.appointmentDetails.projectName, widget.appointmentDetails.clinicName) @@ -205,36 +302,12 @@ class _RateAppointmentClinicState extends State { }), }, ); - } else { - AppToast.showErrorToast(message: 'please rate the clinic'); - } - }, - label: TranslationBase.of(context).submit, - disabled: (model.state == ViewState.Busy || rating == 0), - // loading: model.state == ViewState.BusyLocal, - textColor: Theme.of(context).backgroundColor), + }, + color: Color(0xff359846), + disabledColor: Colors.grey, ), - SizedBox( - height: 12, - ), - InkWell( - onTap: () { - Navigator.pushReplacement( - context, - FadePage( - page: LandingPage(), - ), - ); - }, - child: Texts( - TranslationBase.of(context).later, - decoration: TextDecoration.underline, - color: HexColor('#151DFE'), - fontSize: 18, - ), - ) - ], - ), + ), + ], ), ), ), diff --git a/lib/pages/rateAppointment/rate_appointment_doctor.dart b/lib/pages/rateAppointment/rate_appointment_doctor.dart index e7c9ef6e..241412e9 100644 --- a/lib/pages/rateAppointment/rate_appointment_doctor.dart +++ b/lib/pages/rateAppointment/rate_appointment_doctor.dart @@ -4,6 +4,7 @@ import 'package:diplomaticquarterapp/pages/BookAppointment/widgets/DoctorView.da import 'package:diplomaticquarterapp/pages/base/base_view.dart'; import 'package:diplomaticquarterapp/pages/landing/landing_page.dart'; import 'package:diplomaticquarterapp/pages/rateAppointment/rate_appointment_clinic.dart'; +import 'package:diplomaticquarterapp/uitl/app_toast.dart'; import 'package:diplomaticquarterapp/uitl/translations_delegate_base.dart'; import 'package:diplomaticquarterapp/uitl/utils_new.dart'; import 'package:diplomaticquarterapp/widgets/buttons/defaultButton.dart'; @@ -42,7 +43,12 @@ class _RateAppointmentDoctorState extends State { ), Text( TranslationBase.of(context).lastVisit, - style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16), + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.64, + height: 23 / 16), ), SizedBox( height: 25, @@ -69,7 +75,12 @@ class _RateAppointmentDoctorState extends State { children: [ Text( TranslationBase.of(context).tapTitle, - style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16), + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.64, + height: 23 / 16), ), SizedBox( height: 12, @@ -83,8 +94,10 @@ class _RateAppointmentDoctorState extends State { duration: Duration(milliseconds: 1000), switchInCurve: Curves.elasticOut, switchOutCurve: Curves.elasticIn, - transitionBuilder: (Widget child, Animation animation) { - return ScaleTransition(child: child, scale: animation); + transitionBuilder: (Widget child, + Animation animation) { + return ScaleTransition( + child: child, scale: animation); }, child: Container( key: ValueKey(rating), @@ -95,9 +108,13 @@ class _RateAppointmentDoctorState extends State { rating = index + 1; }); }, - color: rating >= (index + 1) ? Color.fromRGBO(255, 186, 0, 1.0) : Colors.grey[400], + color: rating >= (index + 1) + ? Color.fromRGBO(255, 186, 0, 1.0) + : Colors.grey[400], // Theme.of(context).hintColor, - icon: Icon(rating >= (index + 1) ? Icons.star : Icons.star)), + icon: Icon(rating >= (index + 1) + ? Icons.star + : Icons.star)), ), ), ) @@ -120,7 +137,12 @@ class _RateAppointmentDoctorState extends State { maxLines: 5, decoration: InputDecoration.collapsed( hintText: TranslationBase.of(context).notes, - hintStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xff2B353E), letterSpacing: -0.64, height: 23 / 16)), + hintStyle: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Color(0xff2B353E), + letterSpacing: -0.64, + height: 23 / 16)), onChanged: (value) { setState(() { note = value; @@ -156,24 +178,23 @@ class _RateAppointmentDoctorState extends State { Expanded( child: DefaultButton( TranslationBase.of(context).next, - () { - final form = formKey.currentState; - if (form.validate() && rating > 0) { - form.save(); - Navigator.push( - context, - FadePage( - page: RateAppointmentClinic( - appointmentDetails: model.appointmentDetails, - doctorNote: note, - doctorRate: rating, - ), - ), - ); - } - }, + rating <= 0 + ? null + : () { + Navigator.push( + context, + FadePage( + page: RateAppointmentClinic( + appointmentDetails: model.appointmentDetails, + doctorNote: note, + doctorRate: rating, + ), + ), + ); + }, // iconData: Icons.notifications_active, color: Color(0xff359846), + disabledColor: Colors.grey, ), ), ], diff --git a/lib/uitl/translations_delegate_base.dart b/lib/uitl/translations_delegate_base.dart index 0fceca4a..8b3c72cf 100644 --- a/lib/uitl/translations_delegate_base.dart +++ b/lib/uitl/translations_delegate_base.dart @@ -2324,6 +2324,8 @@ class TranslationBase { String get rateDoctor => localizedValues["rateDoctor"][locale.languageCode]; + String get rateAppointment => localizedValues["rateAppointment"][locale.languageCode]; + } class TranslationBaseDelegate extends LocalizationsDelegate {