Added bottom style sheet for time slot and achievement screen

This commit is contained in:
Aswin B. S 2025-03-06 13:08:08 +05:30
parent b0fcb14b0b
commit 8826e0efd3
2 changed files with 409 additions and 355 deletions

View File

@ -59,7 +59,6 @@ class _ConsultationTimeSlotScreenState
int startMins = startTime.hour * 60 + startTime.minute; int startMins = startTime.hour * 60 + startTime.minute;
int endMins = endTime.hour * 60 + endTime.minute; int endMins = endTime.hour * 60 + endTime.minute;
int duration = endMins - startMins; int duration = endMins - startMins;
int minimumDuration = int minimumDuration =
int.parse(widget.controller.model.averageDurationMinutes ?? '0'); int.parse(widget.controller.model.averageDurationMinutes ?? '0');
if (duration < minimumDuration) { if (duration < minimumDuration) {
@ -94,53 +93,125 @@ class _ConsultationTimeSlotScreenState
(newEndMins > existingStartMins && newEndMins <= existingEndMins) || (newEndMins > existingStartMins && newEndMins <= existingEndMins) ||
(newStartMins <= existingStartMins && (newStartMins <= existingStartMins &&
newEndMins >= existingEndMins)) { newEndMins >= existingEndMins)) {
throw 'This time slot overlaps with existing slot ${slot.startTime} - ${slot.endTime}'; throw 'This time slot overlaps with an existing slot';
// throw 'This time slot overlaps with existing slot ${slot.startTime} - ${slot.endTime}';
} }
} }
} }
void _addTimeSlot() async { void _addTimeSlot() {
try { TimeOfDay? startTime;
TimeOfDay? startTime = await showTimePicker( TimeOfDay? endTime;
context: context, showModalBottomSheet(
initialTime: TimeOfDay.now(), context: context,
); builder: (context) => StatefulBuilder(
builder: (context, setModalState) => Container(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Expanded(
child: _buildTimeField(
context: context,
label: 'Start Time',
time: startTime,
onSelect: (time) => setModalState(() => startTime = time),
),
),
const SizedBox(width: 16),
Expanded(
child: _buildTimeField(
context: context,
label: 'End Time',
time: endTime,
onSelect: (time) => setModalState(() => endTime = time),
),
),
],
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
if (startTime != null && endTime != null) {
try {
_validateTimeSlot(startTime!, endTime!);
_validateOverlap(startTime!, endTime!);
final slot = TimeSlot(
startTime: formatTime(startTime!),
endTime: formatTime(endTime!),
);
widget.controller.addTimeSlot(widget.selectedDay, slot);
Navigator.pop(context);
setState(() {
currentSchedule =
widget.controller.model.weeklySchedule!.firstWhere(
(schedule) => schedule.day == widget.selectedDay,
orElse: () => AvailabilitySchedule(
day: widget.selectedDay,
timeSlots: [],
),
);
});
} catch (e) {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(e.toString()),
backgroundColor: Colors.red,
),
);
}
}
},
child: const Text('Add Time Slot'),
),
],
),
),
),
);
}
if (startTime != null) { Widget _buildTimeField({
TimeOfDay? endTime = await showTimePicker( required BuildContext context,
context: context, required String label,
initialTime: startTime, required TimeOfDay? time,
); required Function(TimeOfDay) onSelect,
}) {
if (endTime != null) { return Column(
_validateTimeSlot(startTime, endTime); crossAxisAlignment: CrossAxisAlignment.start,
_validateOverlap(startTime, endTime); children: [
final slot = TimeSlot( Text(label),
startTime: formatTime(startTime), const SizedBox(height: 8),
endTime: formatTime(endTime), InkWell(
); onTap: () async {
final selected = await showTimePicker(
if (mounted) { context: context,
setState(() { initialTime: time ?? TimeOfDay.now(),
widget.controller.addTimeSlot(widget.selectedDay, slot); );
currentSchedule = if (selected != null) onSelect(selected);
widget.controller.model.weeklySchedule!.firstWhere( },
(schedule) => schedule.day == widget.selectedDay, child: Container(
orElse: () => AvailabilitySchedule( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
day: widget.selectedDay, decoration: BoxDecoration(
timeSlots: [], border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(4),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
time != null ? formatTime(time) : 'Select',
), ),
); const Icon(Icons.access_time),
}); ],
} ),
} ),
} ),
} catch (e) { ],
ScaffoldMessenger.of(context).showSnackBar(SnackBar( );
content: Text(e.toString()),
backgroundColor: Colors.red,
));
}
} }
void _editTimeSlot(TimeSlot currentSlot) async { void _editTimeSlot(TimeSlot currentSlot) async {
@ -238,176 +309,181 @@ class _ConsultationTimeSlotScreenState
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Stack(
backgroundColor: Colors.grey[50], children: [
appBar: AppBar( Scaffold(
elevation: 0, backgroundColor: Colors.grey[50],
backgroundColor: Colors.white, appBar: AppBar(
leading: IconButton( elevation: 0,
icon: const Icon(Icons.arrow_back_ios, size: 20), backgroundColor: Colors.white,
color: Colors.black54, leading: IconButton(
onPressed: () => Navigator.pop(context), icon: const Icon(Icons.arrow_back_ios, size: 20),
), color: Colors.black54,
title: Text( onPressed: () => Navigator.pop(context),
'${widget.selectedDay} Schedule',
style: const TextStyle(
color: Colors.black87,
fontSize: 20,
fontWeight: FontWeight.w600,
),
),
centerTitle: true,
actions: [
IconButton(
onPressed: () {
Navigator.of(context)
.pop(true); // Pop with true to indicate changes
},
icon: const Icon(
Icons.check,
color: Color(0xFF4FB6D8),
), ),
), title: Text(
], '${widget.selectedDay} Schedule',
), style: const TextStyle(
body: Padding( color: Colors.black87,
padding: const EdgeInsets.all(20.0), fontSize: 20,
child: Column( fontWeight: FontWeight.w600,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'Time Slots',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black87,
),
), ),
), ),
Expanded( centerTitle: true,
child: Container( actions: [
height: IconButton(
MediaQuery.of(context).size.height * 0.2, // Reduced height onPressed: () {
margin: const EdgeInsets.only(bottom: 250), Navigator.of(context)
decoration: BoxDecoration( .pop(true); // Pop with true to indicate changes
color: Colors.white, },
borderRadius: BorderRadius.circular(25), icon: const Icon(
boxShadow: [ Icons.check,
BoxShadow( color: Color(0xFF4FB6D8),
color: Colors.grey.withOpacity(0.08), ),
spreadRadius: 5, ),
blurRadius: 15, ],
offset: const Offset(0, 3), ),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'Time Slots',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.black87,
), ),
], ),
), ),
padding: const EdgeInsets.all(16), Expanded(
child: (currentSchedule.timeSlots == null || child: Container(
currentSchedule.timeSlots!.isEmpty) height: MediaQuery.of(context).size.height * 0.2,
? Center( margin: const EdgeInsets.only(bottom: 250),
child: Column( decoration: BoxDecoration(
mainAxisAlignment: MainAxisAlignment.center, color: Colors.white,
children: [ borderRadius: BorderRadius.circular(25),
Icon( boxShadow: [
Icons.access_time, BoxShadow(
size: 48, color: Colors.grey.withOpacity(0.08),
color: Colors.grey[400], spreadRadius: 5,
), blurRadius: 15,
const SizedBox(height: 16), offset: const Offset(0, 3),
Text(
'No time slots added yet',
style: TextStyle(
fontSize: 16,
color: Colors.grey[600],
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 8),
Text(
'Tap + to add your first time slot',
style: TextStyle(
fontSize: 14,
color: Colors.grey[400],
),
),
],
), ),
) ],
: ListView.separated( ),
padding: const EdgeInsets.symmetric(vertical: 8), padding: const EdgeInsets.all(16),
itemCount: currentSchedule.timeSlots!.length, child: (currentSchedule.timeSlots == null ||
separatorBuilder: (context, index) => currentSchedule.timeSlots!.isEmpty)
const Divider(height: 1), ? Center(
itemBuilder: (context, index) { child: Column(
final slot = currentSchedule.timeSlots![index]; mainAxisAlignment: MainAxisAlignment.center,
return Container( children: [
padding: const EdgeInsets.symmetric(vertical: 8), Icon(
child: ListTile(
leading: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.access_time, Icons.access_time,
color: Colors.blue, size: 48,
size: 24, color: Colors.grey[400],
), ),
), const SizedBox(height: 16),
title: Text( Text(
'${slot.startTime} - ${slot.endTime}', 'No time slots added yet',
style: const TextStyle( style: TextStyle(
fontSize: 13.5, fontSize: 16,
fontWeight: FontWeight.w600, color: Colors.grey[600],
color: Colors.black87, fontWeight: FontWeight.w500,
),
), ),
), const SizedBox(height: 8),
trailing: Row( Text(
mainAxisSize: MainAxisSize.min, 'Tap + to add your first time slot',
children: [ style: TextStyle(
IconButton( fontSize: 14,
icon: const Icon( color: Colors.grey[400],
Icons.edit_outlined,
size: 26,
color: Colors.blue,
),
onPressed: () => _editTimeSlot(slot),
), ),
IconButton( ),
icon: const Icon( ],
Icons.delete_outline,
size: 26,
color: Colors.red,
),
onPressed: () => _deleteTimeSlot(slot),
),
],
),
), ),
); )
}, : ListView.separated(
), padding: const EdgeInsets.symmetric(vertical: 8),
), itemCount: currentSchedule.timeSlots!.length,
separatorBuilder: (context, index) =>
const Divider(height: 1),
itemBuilder: (context, index) {
final slot = currentSchedule.timeSlots![index];
return Container(
padding:
const EdgeInsets.symmetric(vertical: 8),
child: ListTile(
leading: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.access_time,
color: Colors.blue,
size: 24,
),
),
title: Text(
'${slot.startTime} - ${slot.endTime}',
style: const TextStyle(
fontSize: 13.5,
fontWeight: FontWeight.w600,
color: Colors.black87,
),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(
Icons.edit_outlined,
size: 26,
color: Colors.blue,
),
onPressed: () => _editTimeSlot(slot),
),
IconButton(
icon: const Icon(
Icons.delete_outline,
size: 26,
color: Colors.red,
),
onPressed: () => _deleteTimeSlot(slot),
),
],
),
),
);
},
),
),
),
],
), ),
],
),
),
floatingActionButton: Container(
margin: const EdgeInsets.only(bottom: 270, right: 25),
child: FloatingActionButton(
onPressed: _addTimeSlot,
backgroundColor: const Color(0xFF4FB6D8),
elevation: 2,
child: const Icon(
Icons.add,
size: 28,
color: Colors.white,
), ),
), ),
), Positioned(
bottom: 280,
right: 29,
child: FloatingActionButton(
onPressed: _addTimeSlot,
backgroundColor: const Color(0xFF4FB6D8),
elevation: 2,
child: const Icon(
Icons.add,
size: 28,
color: Colors.white,
),
),
),
],
); );
} }
} }

View File

@ -74,6 +74,60 @@ class _AchievementsScreenState extends State<AchievementsScreen> {
} }
} }
void _addAchievementBottomSheet() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: Container(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Add Achievement',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 16),
TextFormField(
controller: _achievementController,
decoration: InputDecoration(
hintText: 'Enter your achievement',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
final achievement = _achievementController.text.trim();
if (_validateAchievement(achievement)) {
setState(() {
achievements.add(achievement);
_isEditing = true;
});
_controller
.updateAchievements(List<String>.from(achievements));
_achievementController.clear();
Navigator.pop(context);
}
},
child: const Text('Add'),
),
],
),
),
),
);
}
void _removeAchievement(int index) { void _removeAchievement(int index) {
setState(() { setState(() {
achievements.removeAt(index); achievements.removeAt(index);
@ -103,167 +157,91 @@ class _AchievementsScreenState extends State<AchievementsScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return WillPopScope( return WillPopScope(
onWillPop: () async { onWillPop: () async {
if (_isEditing) { if (_isEditing) {
final shouldPop = await showDialog<bool>( final shouldPop = await showDialog<bool>(
context: context, context: context,
builder: (context) => AlertDialog( builder: (context) => AlertDialog(
title: const Text('Discard Changes?'), title: const Text('Discard Changes?'),
content: const Text( content: const Text(
'You have unsaved changes. Are you sure you want to go back?'), 'You have unsaved changes. Are you sure you want to go back?'),
actions: [ actions: [
TextButton( TextButton(
onPressed: () => Navigator.pop(context, false), onPressed: () => Navigator.pop(context, false),
child: const Text('CANCEL'), child: const Text('CANCEL'),
),
TextButton(
onPressed: () => Navigator.pop(context, true),
child: const Text('DISCARD'),
),
],
),
);
return shouldPop ?? false;
}
return true;
},
child: Scaffold(
appBar: AppBar(
actions: [
IconButton(
onPressed: () {
if (_validateBeforeNextPage()) {
Navigator.pushNamed(
context, RouteNames.digitalSignatureScreeen,
arguments: _controller);
}
},
icon: const Icon(Icons.arrow_forward)),
],
title: const Text('Achievements'),
),
body: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Add Your Achievements',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
), ),
const SizedBox(height: 8), TextButton(
Container( onPressed: () => Navigator.pop(context, true),
margin: child: const Text('DISCARD'),
const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.blueGrey.withOpacity(0.5),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: TextFormField(
controller: _achievementController,
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: InputDecoration(
hintText: 'Enter your achievement',
labelText: 'Achievement',
filled: true,
fillColor: Colors.grey[100],
suffixIcon: IconButton(
icon: const Icon(Icons.add_circle_outline,
color: Colors.blue),
onPressed: _addAchievement,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
BorderSide(color: Colors.grey.shade300, width: 1),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
const BorderSide(color: Colors.blue, width: 1.5),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
const BorderSide(color: Colors.red, width: 1.5),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
const BorderSide(color: Colors.red, width: 1.5),
),
helperText: achievements.isEmpty
? 'Minimum 3 characters required'
: null,
),
validator: (value) {
if (achievements.isEmpty) {
if (value == null || value.isEmpty) {
return 'Please enter an achievement';
}
if (value.length < 3) {
return 'Achievement must be at least 3 characters long';
}
}
if (value != null &&
value.isNotEmpty &&
achievements.any((a) =>
a.toLowerCase() == value.toLowerCase())) {
return 'This achievement has already been added';
}
return null;
},
onFieldSubmitted: (_) => _addAchievement(),
),
),
),
Expanded(
child: ListView.builder(
itemCount: achievements.length,
padding: const EdgeInsets.all(16),
itemBuilder: (context, index) {
return Card(
elevation: 2,
margin: const EdgeInsets.only(bottom: 8),
child: ListTile(
leading: CircleAvatar(
backgroundColor: const Color(0xFF5BC0DE),
child: Text('${index + 1}'),
),
title: Text(achievements[index]),
trailing: IconButton(
icon: const Icon(Icons.delete, color: Colors.red),
onPressed: () => _removeAchievement(index),
),
),
);
},
),
), ),
], ],
), ),
), );
)); return shouldPop ?? false;
}
return true;
},
child: Scaffold(
appBar: AppBar(
actions: [
IconButton(
onPressed: () {
if (_validateBeforeNextPage()) {
Navigator.pushNamed(
context, RouteNames.digitalSignatureScreeen,
arguments: _controller);
}
},
icon: const Icon(Icons.arrow_forward),
),
],
title: const Text('Achievements'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.all(16.0),
child: Text(
'Add Your Achievements',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Expanded(
child: ListView.builder(
itemCount: achievements.length,
padding: const EdgeInsets.all(16),
itemBuilder: (context, index) {
return Card(
elevation: 2,
margin: const EdgeInsets.only(bottom: 8),
child: ListTile(
leading: CircleAvatar(
backgroundColor: const Color(0xFF5BC0DE),
child: Text('${index + 1}'),
),
title: Text(achievements[index]),
trailing: IconButton(
icon: const Icon(Icons.delete, color: Colors.red),
onPressed: () => _removeAchievement(index),
),
),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: _addAchievementBottomSheet,
backgroundColor: const Color(0xFF4FB6D8),
child: const Icon(Icons.add),
),
),
);
} }
@override @override