diff --git a/Frontend/lib/mih_packages/calendar/builder/build_appointment_list.dart b/Frontend/lib/mih_packages/calendar/builder/build_appointment_list.dart index 21db4f68..ba9b0617 100644 --- a/Frontend/lib/mih_packages/calendar/builder/build_appointment_list.dart +++ b/Frontend/lib/mih_packages/calendar/builder/build_appointment_list.dart @@ -71,7 +71,7 @@ class _BuildAppointmentListState extends State { } } - Widget displayAppointment(int index) { + Widget displayAppointment(int index, double bodyWidth) { String heading = "${widget.appointmentList[index].date_time.split('T')[1].substring(0, 5)} - ${widget.appointmentList[index].title.toUpperCase()}"; String description = widget.appointmentList[index].description; @@ -102,54 +102,50 @@ class _BuildAppointmentListState extends State { MzanziInnovationHub.of(context)!.theme.messageTextColor(); } - return Padding( - padding: const EdgeInsets.all(5.0), - child: Container( - decoration: BoxDecoration( - border: Border.all( - width: 3.0, - color: appointmentColor, - ), - borderRadius: BorderRadius.circular(20)), - child: ListTile( - title: Text( - heading, - style: TextStyle( - color: appointmentColor, - fontWeight: FontWeight.bold, - ), + return Container( + decoration: BoxDecoration( + border: Border.all( + width: 3.0, + color: appointmentColor, ), - subtitle: Text( - description, - style: TextStyle( - color: appointmentColor, - overflow: TextOverflow.ellipsis, - ), + borderRadius: BorderRadius.circular(20)), + child: ListTile( + title: Text( + heading, + style: TextStyle( + color: appointmentColor, + fontWeight: FontWeight.bold, ), - onTap: () { - setState(() { - widget.titleController.text = widget.appointmentList[index].title; - widget.descriptionIDController.text = - widget.appointmentList[index].description; - widget.dateController.text = - widget.appointmentList[index].date_time.split('T')[0]; - widget.timeController.text = widget - .appointmentList[index].date_time - .split('T')[1] - .substring(0, 5); - }); - if (widget.inWaitingRoom == false) { - appointmentDetailsWindow(index); - } else { - waitingRiinAppointmentDetailsWindow(index); - } - }, ), + subtitle: Text( + description, + style: TextStyle( + color: appointmentColor, + overflow: TextOverflow.ellipsis, + ), + ), + onTap: () { + setState(() { + widget.titleController.text = widget.appointmentList[index].title; + widget.descriptionIDController.text = + widget.appointmentList[index].description; + widget.dateController.text = + widget.appointmentList[index].date_time.split('T')[0]; + widget.timeController.text = widget.appointmentList[index].date_time + .split('T')[1] + .substring(0, 5); + }); + if (widget.inWaitingRoom == false) { + appointmentDetailsWindow(index, bodyWidth); + } else { + waitingRiinAppointmentDetailsWindow(index, bodyWidth); + } + }, ), ); } - void appointmentDetailsWindow(int index) { + void appointmentDetailsWindow(int index, double bodyWidth) { showDialog( context: context, barrierDismissible: false, @@ -173,7 +169,7 @@ class _BuildAppointmentListState extends State { backgroundColor: MzanziInnovationHub.of(context)!.theme.successColor(), onTap: () { - appointmentUpdateWindow(index); + appointmentUpdateWindow(index, bodyWidth); }, ), SpeedDialChild( @@ -202,66 +198,72 @@ class _BuildAppointmentListState extends State { widget.titleController.clear(); widget.descriptionIDController.clear(); }, - windowBody: Column( - children: [ - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.titleController, - multiLineInput: false, - requiredText: true, - readOnly: true, - hintText: "Appointment Title", - ), - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.dateController, - multiLineInput: false, - requiredText: true, - readOnly: true, - hintText: "Date", - ), - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.timeController, - multiLineInput: false, - requiredText: true, - readOnly: true, - hintText: "Time", - ), - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.descriptionIDController, - multiLineInput: true, - height: 250, - requiredText: true, - readOnly: true, - hintText: "Appointment Description", - ), - const SizedBox(height: 10), - ], + windowBody: Padding( + padding: + MzanziInnovationHub.of(context)!.theme.screenType == "desktop" + ? EdgeInsets.symmetric(horizontal: width * 0.05) + : const EdgeInsets.symmetric(horizontal: 0), + child: Column( + children: [ + const SizedBox(height: 10), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.titleController, + multiLineInput: false, + requiredText: true, + readOnly: true, + hintText: "Appointment Title", + ), + const SizedBox(height: 10), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.dateController, + multiLineInput: false, + requiredText: true, + readOnly: true, + hintText: "Date", + ), + const SizedBox(height: 10), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.timeController, + multiLineInput: false, + requiredText: true, + readOnly: true, + hintText: "Time", + ), + const SizedBox(height: 10), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.descriptionIDController, + multiLineInput: true, + height: 250, + requiredText: true, + readOnly: true, + hintText: "Appointment Description", + ), + const SizedBox(height: 10), + ], + ), ), ); }, ); } - void waitingRiinAppointmentDetailsWindow(int index) { + void waitingRiinAppointmentDetailsWindow(int index, double bodyWidth) { showDialog( context: context, barrierDismissible: false, @@ -285,7 +287,7 @@ class _BuildAppointmentListState extends State { backgroundColor: MzanziInnovationHub.of(context)!.theme.successColor(), onTap: () { - appointmentUpdateWindow(index); + appointmentUpdateWindow(index, bodyWidth); }, ), SpeedDialChild( @@ -314,76 +316,82 @@ class _BuildAppointmentListState extends State { widget.titleController.clear(); widget.descriptionIDController.clear(); }, - windowBody: Column( - children: [ - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.titleController, - multiLineInput: false, - requiredText: true, - readOnly: true, - hintText: "Appointment Title", - ), - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.dateController, - multiLineInput: false, - requiredText: true, - readOnly: true, - hintText: "Date", - ), - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.timeController, - multiLineInput: false, - requiredText: true, - readOnly: true, - hintText: "Time", - ), - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.descriptionIDController, - multiLineInput: true, - height: 250, - requiredText: true, - readOnly: true, - hintText: "Appointment Description", - ), - const SizedBox(height: 10), - // SizedBox( - // // width: 500, - // child: MIHTextField( - // controller: widget.titleController, - // hintText: "Patient ID Number", - // editable: false, - // required: false, - // ), - // ), - // const SizedBox(height: 10), - ], + windowBody: Padding( + padding: + MzanziInnovationHub.of(context)!.theme.screenType == "desktop" + ? EdgeInsets.symmetric(horizontal: width * 0.05) + : const EdgeInsets.symmetric(horizontal: 0), + child: Column( + children: [ + const SizedBox(height: 10), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.titleController, + multiLineInput: false, + requiredText: true, + readOnly: true, + hintText: "Appointment Title", + ), + const SizedBox(height: 10), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.dateController, + multiLineInput: false, + requiredText: true, + readOnly: true, + hintText: "Date", + ), + const SizedBox(height: 10), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.timeController, + multiLineInput: false, + requiredText: true, + readOnly: true, + hintText: "Time", + ), + const SizedBox(height: 10), + MihTextFormField( + fillColor: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.descriptionIDController, + multiLineInput: true, + height: 250, + requiredText: true, + readOnly: true, + hintText: "Appointment Description", + ), + const SizedBox(height: 10), + // SizedBox( + // // width: 500, + // child: MIHTextField( + // controller: widget.titleController, + // hintText: "Patient ID Number", + // editable: false, + // required: false, + // ), + // ), + // const SizedBox(height: 10), + ], + ), ), ); }, ); } - void appointmentUpdateWindow(int index) { + void appointmentUpdateWindow(int index, double bodyWidth) { showDialog( context: context, barrierDismissible: false, @@ -405,91 +413,99 @@ class _BuildAppointmentListState extends State { }); Navigator.of(context).pop(); }, - windowBody: Column( - children: [ - MihForm( - formKey: _formKey, - formFields: [ - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.titleController, - multiLineInput: false, - requiredText: true, - hintText: "Appointment Title", - validator: (value) { - return MihValidationServices().isEmpty(value); - }, - ), - const SizedBox(height: 10), - SizedBox( - // width: 500, - child: MIHDateField( - controller: widget.dateController, - lableText: "Date", - required: true, + windowBody: Padding( + padding: + MzanziInnovationHub.of(context)!.theme.screenType == "desktop" + ? EdgeInsets.symmetric(horizontal: width * 0.05) + : const EdgeInsets.symmetric(horizontal: 0), + child: Column( + children: [ + MihForm( + formKey: _formKey, + formFields: [ + MihTextFormField( + fillColor: MzanziInnovationHub.of(context)! + .theme + .secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.titleController, + multiLineInput: false, + requiredText: true, + hintText: "Appointment Title", + validator: (value) { + return MihValidationServices().isEmpty(value); + }, ), - ), - const SizedBox(height: 10), - SizedBox( - // width: 500, - child: MIHTimeField( - controller: widget.timeController, - lableText: "Time", - required: true, + const SizedBox(height: 10), + SizedBox( + // width: 500, + child: MIHDateField( + controller: widget.dateController, + lableText: "Date", + required: true, + ), ), - ), - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: widget.descriptionIDController, - multiLineInput: true, - height: 250, - requiredText: true, - hintText: "Appointment Description", - validator: (value) { - return MihValidationServices().isEmpty(value); - }, - ), - const SizedBox(height: 20), - Center( - child: Wrap( - alignment: WrapAlignment.center, - runSpacing: 10, - spacing: 10, - children: [ - MihButton( - onPressed: () { - if (_formKey.currentState!.validate()) { - updateAppointmentCall(index); - } - }, - buttonColor: MzanziInnovationHub.of(context)! - .theme - .successColor(), - width: 300, - child: Text( - "Update", - style: TextStyle( - color: MzanziInnovationHub.of(context)! - .theme - .primaryColor(), - fontSize: 20, - fontWeight: FontWeight.bold, + const SizedBox(height: 10), + SizedBox( + // width: 500, + child: MIHTimeField( + controller: widget.timeController, + lableText: "Time", + required: true, + ), + ), + const SizedBox(height: 10), + MihTextFormField( + fillColor: MzanziInnovationHub.of(context)! + .theme + .secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: widget.descriptionIDController, + multiLineInput: true, + height: 250, + requiredText: true, + hintText: "Appointment Description", + validator: (value) { + return MihValidationServices().isEmpty(value); + }, + ), + const SizedBox(height: 20), + Center( + child: Wrap( + alignment: WrapAlignment.center, + runSpacing: 10, + spacing: 10, + children: [ + MihButton( + onPressed: () { + if (_formKey.currentState!.validate()) { + updateAppointmentCall(index); + } + }, + buttonColor: MzanziInnovationHub.of(context)! + .theme + .successColor(), + width: 300, + child: Text( + "Update", + style: TextStyle( + color: MzanziInnovationHub.of(context)! + .theme + .primaryColor(), + fontSize: 20, + fontWeight: FontWeight.bold, + ), ), ), - ), - ], + ], + ), ), - ), - ], - ), - ], + ], + ), + ], + ), ), ); }, @@ -624,7 +640,7 @@ class _BuildAppointmentListState extends State { shrinkWrap: true, itemCount: widget.appointmentList.length, itemBuilder: (context, index) { - return displayAppointment(index); + return displayAppointment(index, width); }, ), ); diff --git a/Frontend/lib/mih_packages/calendar/package_tools/appointments.dart b/Frontend/lib/mih_packages/calendar/package_tools/appointments.dart index d556bc74..e72c6717 100644 --- a/Frontend/lib/mih_packages/calendar/package_tools/appointments.dart +++ b/Frontend/lib/mih_packages/calendar/package_tools/appointments.dart @@ -99,7 +99,7 @@ class _PatientAccessRequestState extends State { ); } - void addAppointmentWindow() { + void addAppointmentWindow(double width) { showDialog( context: context, barrierDismissible: false, @@ -114,83 +114,92 @@ class _PatientAccessRequestState extends State { _appointmentTitleController.clear(); _appointmentDescriptionIDController.clear(); }, - windowBody: Column( - children: [ - MihForm( - formKey: _formKey, - formFields: [ - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: _appointmentTitleController, - multiLineInput: false, - requiredText: true, - hintText: "Appointment Title", - validator: (value) { - return MihValidationServices().isEmpty(value); - }, - ), - const SizedBox(height: 10), - SizedBox( - // width: 500, - child: MIHDateField( - controller: _appointmentDateController, - lableText: "Date", - required: true, - ), - ), - const SizedBox(height: 10), - SizedBox( - // width: 500, - child: MIHTimeField( - controller: _appointmentTimeController, - lableText: "Time", - required: true, - ), - ), - const SizedBox(height: 10), - MihTextFormField( - fillColor: - MzanziInnovationHub.of(context)!.theme.secondaryColor(), - inputColor: - MzanziInnovationHub.of(context)!.theme.primaryColor(), - controller: _appointmentDescriptionIDController, - multiLineInput: true, - height: 250, - requiredText: true, - hintText: "Appointment Description", - validator: (value) { - return MihValidationServices().isEmpty(value); - }, - ), - const SizedBox(height: 20), - Center( - child: MihButton( - onPressed: () { - if (_formKey.currentState!.validate()) { - addAppointmentCall(); - } + windowBody: Padding( + padding: + MzanziInnovationHub.of(context)!.theme.screenType == "desktop" + ? EdgeInsets.symmetric(horizontal: width * 0.05) + : const EdgeInsets.symmetric(horizontal: 0), + child: Column( + children: [ + MihForm( + formKey: _formKey, + formFields: [ + MihTextFormField( + fillColor: MzanziInnovationHub.of(context)! + .theme + .secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: _appointmentTitleController, + multiLineInput: false, + requiredText: true, + hintText: "Appointment Title", + validator: (value) { + return MihValidationServices().isEmpty(value); }, - buttonColor: - MzanziInnovationHub.of(context)!.theme.successColor(), - width: 300, - child: Text( - "Add", - style: TextStyle( - color: MzanziInnovationHub.of(context)! - .theme - .primaryColor(), - fontSize: 20, - fontWeight: FontWeight.bold, + ), + const SizedBox(height: 10), + SizedBox( + // width: 500, + child: MIHDateField( + controller: _appointmentDateController, + lableText: "Date", + required: true, + ), + ), + const SizedBox(height: 10), + SizedBox( + // width: 500, + child: MIHTimeField( + controller: _appointmentTimeController, + lableText: "Time", + required: true, + ), + ), + const SizedBox(height: 10), + MihTextFormField( + fillColor: MzanziInnovationHub.of(context)! + .theme + .secondaryColor(), + inputColor: + MzanziInnovationHub.of(context)!.theme.primaryColor(), + controller: _appointmentDescriptionIDController, + multiLineInput: true, + height: 250, + requiredText: true, + hintText: "Appointment Description", + validator: (value) { + return MihValidationServices().isEmpty(value); + }, + ), + const SizedBox(height: 20), + Center( + child: MihButton( + onPressed: () { + if (_formKey.currentState!.validate()) { + addAppointmentCall(); + } + }, + buttonColor: MzanziInnovationHub.of(context)! + .theme + .successColor(), + width: 300, + child: Text( + "Add", + style: TextStyle( + color: MzanziInnovationHub.of(context)! + .theme + .primaryColor(), + fontSize: 20, + fontWeight: FontWeight.bold, + ), ), ), ), - ), - ], - ), - ], + ], + ), + ], + ), ), ); }, @@ -268,7 +277,7 @@ class _PatientAccessRequestState extends State { }); } - Widget getBody() { + Widget getBody(double width) { return Stack( children: [ MihSingleChildScroll( @@ -341,7 +350,7 @@ class _PatientAccessRequestState extends State { backgroundColor: MzanziInnovationHub.of(context)!.theme.successColor(), onTap: () { - addAppointmentWindow(); + addAppointmentWindow(width); }, ) ], @@ -383,9 +392,10 @@ class _PatientAccessRequestState extends State { @override Widget build(BuildContext context) { + double screenWidth = MediaQuery.of(context).size.width; return MihPackageToolBody( borderOn: false, - bodyItem: getBody(), + bodyItem: getBody(screenWidth), ); } }