refactor: Convert AttendanceFilterBottomSheet to StatefulWidget and enhance state management
This commit is contained in:
parent
9ad8bdc893
commit
706726c787
@ -5,7 +5,7 @@ import 'package:intl/intl.dart';
|
|||||||
import 'package:marco/helpers/widgets/my_text.dart';
|
import 'package:marco/helpers/widgets/my_text.dart';
|
||||||
import 'package:marco/helpers/utils/permission_constants.dart';
|
import 'package:marco/helpers/utils/permission_constants.dart';
|
||||||
|
|
||||||
class AttendanceFilterBottomSheet extends StatelessWidget {
|
class AttendanceFilterBottomSheet extends StatefulWidget {
|
||||||
final AttendanceController controller;
|
final AttendanceController controller;
|
||||||
final PermissionController permissionController;
|
final PermissionController permissionController;
|
||||||
final String selectedTab;
|
final String selectedTab;
|
||||||
@ -17,35 +17,93 @@ class AttendanceFilterBottomSheet extends StatelessWidget {
|
|||||||
required this.selectedTab,
|
required this.selectedTab,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
_AttendanceFilterBottomSheetState createState() =>
|
||||||
|
_AttendanceFilterBottomSheetState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _AttendanceFilterBottomSheetState
|
||||||
|
extends State<AttendanceFilterBottomSheet> {
|
||||||
|
late String? tempSelectedProjectId;
|
||||||
|
late String tempSelectedTab;
|
||||||
|
bool showProjectList = false;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
tempSelectedProjectId = widget.controller.selectedProjectId;
|
||||||
|
tempSelectedTab = widget.selectedTab;
|
||||||
|
}
|
||||||
|
|
||||||
String getLabelText() {
|
String getLabelText() {
|
||||||
final startDate = controller.startDateAttendance;
|
final startDate = widget.controller.startDateAttendance;
|
||||||
final endDate = controller.endDateAttendance;
|
final endDate = widget.controller.endDateAttendance;
|
||||||
if (startDate != null && endDate != null) {
|
if (startDate != null && endDate != null) {
|
||||||
final start = DateFormat('dd MM yyyy').format(startDate);
|
final start = DateFormat('dd/MM/yyyy').format(startDate);
|
||||||
final end = DateFormat('dd MM yyyy').format(endDate);
|
final end = DateFormat('dd/MM/yyyy').format(endDate);
|
||||||
return "$start - $end";
|
return "$start - $end";
|
||||||
}
|
}
|
||||||
return "Date Range";
|
return "Date Range";
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
List<Widget> buildProjectList() {
|
||||||
Widget build(BuildContext context) {
|
final accessibleProjects = widget.controller.projects
|
||||||
String? tempSelectedProjectId = controller.selectedProjectId;
|
|
||||||
String tempSelectedTab = selectedTab;
|
|
||||||
bool showProjectList = false;
|
|
||||||
|
|
||||||
final accessibleProjects = controller.projects
|
|
||||||
.where((project) =>
|
.where((project) =>
|
||||||
permissionController.isUserAssignedToProject(project.id.toString()))
|
widget.permissionController.isUserAssignedToProject(
|
||||||
|
project.id.toString()))
|
||||||
.toList();
|
.toList();
|
||||||
|
|
||||||
bool hasRegularizationPermission =
|
if (accessibleProjects.isEmpty) {
|
||||||
permissionController.hasPermission(Permissions.regularizeAttendance);
|
return [
|
||||||
|
const Padding(
|
||||||
|
padding: EdgeInsets.all(12.0),
|
||||||
|
child: Center(child: Text('No Projects Assigned')),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return accessibleProjects.map((project) {
|
||||||
|
final isSelected = tempSelectedProjectId == project.id.toString();
|
||||||
|
return ListTile(
|
||||||
|
dense: true,
|
||||||
|
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
|
title: Text(project.name),
|
||||||
|
trailing: isSelected ? const Icon(Icons.check) : null,
|
||||||
|
onTap: () {
|
||||||
|
setState(() {
|
||||||
|
tempSelectedProjectId = project.id.toString();
|
||||||
|
showProjectList = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}).toList();
|
||||||
|
}
|
||||||
|
|
||||||
|
List<Widget> buildMainFilters() {
|
||||||
|
final accessibleProjects = widget.controller.projects
|
||||||
|
.where((project) =>
|
||||||
|
widget.permissionController.isUserAssignedToProject(
|
||||||
|
project.id.toString()))
|
||||||
|
.toList();
|
||||||
|
|
||||||
|
final selectedProject = accessibleProjects.isNotEmpty
|
||||||
|
? accessibleProjects.firstWhere(
|
||||||
|
(p) => p.id.toString() == tempSelectedProjectId,
|
||||||
|
orElse: () => accessibleProjects[0],
|
||||||
|
)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
final selectedProjectName = selectedProject?.name ?? "Select Project";
|
||||||
|
|
||||||
|
final hasRegularizationPermission = widget.permissionController
|
||||||
|
.hasPermission(Permissions.regularizeAttendance);
|
||||||
|
|
||||||
final viewOptions = [
|
final viewOptions = [
|
||||||
{'label': 'Today\'s Attendance', 'value': 'todaysAttendance'},
|
{'label': 'Today\'s Attendance', 'value': 'todaysAttendance'},
|
||||||
{'label': 'Attendance Logs', 'value': 'attendanceLogs'},
|
{'label': 'Attendance Logs', 'value': 'attendanceLogs'},
|
||||||
{'label': 'Regularization Requests', 'value': 'regularizationRequests'},
|
{'label': 'Regularization Requests', 'value': 'regularizationRequests'},
|
||||||
];
|
];
|
||||||
|
|
||||||
final filteredViewOptions = viewOptions.where((item) {
|
final filteredViewOptions = viewOptions.where((item) {
|
||||||
if (item['value'] == 'regularizationRequests') {
|
if (item['value'] == 'regularizationRequests') {
|
||||||
return hasRegularizationPermission;
|
return hasRegularizationPermission;
|
||||||
@ -53,190 +111,152 @@ class AttendanceFilterBottomSheet extends StatelessWidget {
|
|||||||
return true;
|
return true;
|
||||||
}).toList();
|
}).toList();
|
||||||
|
|
||||||
return StatefulBuilder(builder: (context, setState) {
|
List<Widget> widgets = [
|
||||||
List<Widget> filterWidgets;
|
Padding(
|
||||||
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
|
||||||
|
child: Align(
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
child: MyText.titleSmall(
|
||||||
|
"Project",
|
||||||
|
fontWeight: 600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
ListTile(
|
||||||
|
dense: true,
|
||||||
|
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
|
title: Text(selectedProjectName),
|
||||||
|
trailing: const Icon(Icons.arrow_drop_down),
|
||||||
|
onTap: () => setState(() => showProjectList = true),
|
||||||
|
),
|
||||||
|
const Divider(),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
|
||||||
|
child: Align(
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
child: MyText.titleSmall(
|
||||||
|
"View",
|
||||||
|
fontWeight: 600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
...filteredViewOptions.map((item) {
|
||||||
|
return RadioListTile<String>(
|
||||||
|
dense: true,
|
||||||
|
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
|
||||||
|
title: Text(item['label']!),
|
||||||
|
value: item['value']!,
|
||||||
|
groupValue: tempSelectedTab,
|
||||||
|
onChanged: (value) => setState(() => tempSelectedTab = value!),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
];
|
||||||
|
|
||||||
if (showProjectList) {
|
if (tempSelectedTab == 'attendanceLogs') {
|
||||||
filterWidgets = accessibleProjects.isEmpty
|
widgets.addAll([
|
||||||
? [
|
const Divider(),
|
||||||
const Padding(
|
Padding(
|
||||||
padding: EdgeInsets.all(12.0),
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
|
||||||
child: Center(child: Text('No Projects Assigned')),
|
child: Align(
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
child: MyText.titleSmall(
|
||||||
|
"Date Range",
|
||||||
|
fontWeight: 600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||||
|
child: InkWell(
|
||||||
|
borderRadius: BorderRadius.circular(10),
|
||||||
|
onTap: () => widget.controller.selectDateRangeForAttendance(
|
||||||
|
context,
|
||||||
|
widget.controller,
|
||||||
|
),
|
||||||
|
child: Ink(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white,
|
||||||
|
border: Border.all(color: Colors.grey.shade400),
|
||||||
|
borderRadius: BorderRadius.circular(10),
|
||||||
|
),
|
||||||
|
padding:
|
||||||
|
const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Icon(Icons.date_range, color: Colors.black87),
|
||||||
|
const SizedBox(width: 12),
|
||||||
|
Expanded(
|
||||||
|
child: Text(
|
||||||
|
getLabelText(),
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 16,
|
||||||
|
color: Colors.black87,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
),
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const Icon(Icons.arrow_drop_down, color: Colors.black87),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return widgets;
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Padding(
|
||||||
|
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
|
||||||
|
child: SingleChildScrollView(
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
// Drag handle
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(top: 12, bottom: 8),
|
||||||
|
child: Center(
|
||||||
|
child: Container(
|
||||||
|
width: 40,
|
||||||
|
height: 4,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.grey[400],
|
||||||
|
borderRadius: BorderRadius.circular(4),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
]
|
|
||||||
: accessibleProjects.map((project) {
|
|
||||||
final isSelected =
|
|
||||||
tempSelectedProjectId == project.id.toString();
|
|
||||||
return ListTile(
|
|
||||||
dense: true,
|
|
||||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
|
|
||||||
title: Text(project.name),
|
|
||||||
trailing: isSelected ? const Icon(Icons.check) : null,
|
|
||||||
onTap: () {
|
|
||||||
setState(() {
|
|
||||||
tempSelectedProjectId = project.id.toString();
|
|
||||||
showProjectList = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}).toList();
|
|
||||||
} else {
|
|
||||||
final selectedProject = accessibleProjects.isNotEmpty
|
|
||||||
? accessibleProjects.firstWhere(
|
|
||||||
(p) => p.id.toString() == tempSelectedProjectId,
|
|
||||||
orElse: () => accessibleProjects[0],
|
|
||||||
)
|
|
||||||
: null;
|
|
||||||
|
|
||||||
final selectedProjectName = selectedProject?.name ?? "Select Project";
|
|
||||||
|
|
||||||
filterWidgets = [
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
|
|
||||||
child: Align(
|
|
||||||
alignment: Alignment.centerLeft,
|
|
||||||
child: MyText.titleSmall(
|
|
||||||
"Project",
|
|
||||||
fontWeight: 600,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
if (showProjectList) ...buildProjectList() else ...buildMainFilters(),
|
||||||
ListTile(
|
|
||||||
dense: true,
|
|
||||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
|
|
||||||
title: Text(selectedProjectName),
|
|
||||||
trailing: const Icon(Icons.arrow_drop_down),
|
|
||||||
onTap: () => setState(() => showProjectList = true),
|
|
||||||
),
|
|
||||||
const Divider(),
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
|
|
||||||
child: Align(
|
|
||||||
alignment: Alignment.centerLeft,
|
|
||||||
child: MyText.titleSmall(
|
|
||||||
"View",
|
|
||||||
fontWeight: 600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
...filteredViewOptions.map((item) {
|
|
||||||
return RadioListTile<String>(
|
|
||||||
dense: true,
|
|
||||||
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
|
|
||||||
title: Text(item['label']!),
|
|
||||||
value: item['value']!,
|
|
||||||
groupValue: tempSelectedTab,
|
|
||||||
onChanged: (value) => setState(() => tempSelectedTab = value!),
|
|
||||||
);
|
|
||||||
}).toList(),
|
|
||||||
];
|
|
||||||
|
|
||||||
if (tempSelectedTab == 'attendanceLogs') {
|
|
||||||
filterWidgets.addAll([
|
|
||||||
const Divider(),
|
const Divider(),
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.fromLTRB(16, 12, 16, 4),
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||||
child: Align(
|
child: SizedBox(
|
||||||
alignment: Alignment.centerLeft,
|
width: double.infinity,
|
||||||
child: MyText.titleSmall(
|
child: ElevatedButton(
|
||||||
"Date Range",
|
style: ElevatedButton.styleFrom(
|
||||||
fontWeight: 600,
|
backgroundColor: const Color.fromARGB(255, 95, 132, 255),
|
||||||
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: const Text('Apply Filter'),
|
||||||
|
onPressed: () {
|
||||||
|
Navigator.pop(context, {
|
||||||
|
'projectId': tempSelectedProjectId,
|
||||||
|
'selectedTab': tempSelectedTab,
|
||||||
|
});
|
||||||
|
},
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Padding(
|
],
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
||||||
child: InkWell(
|
|
||||||
borderRadius: BorderRadius.circular(10),
|
|
||||||
onTap: () => controller.selectDateRangeForAttendance(
|
|
||||||
context,
|
|
||||||
controller,
|
|
||||||
),
|
|
||||||
child: Ink(
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: const Color.fromARGB(255, 255, 255, 255),
|
|
||||||
border: Border.all(color: Colors.grey.shade400),
|
|
||||||
borderRadius: BorderRadius.circular(10),
|
|
||||||
),
|
|
||||||
padding:
|
|
||||||
const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
Icon(Icons.date_range,
|
|
||||||
color: const Color.fromARGB(255, 9, 9, 9)),
|
|
||||||
const SizedBox(width: 12),
|
|
||||||
Expanded(
|
|
||||||
child: Text(
|
|
||||||
getLabelText(),
|
|
||||||
style: const TextStyle(
|
|
||||||
fontSize: 16,
|
|
||||||
color: Colors.black87,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const Icon(Icons.arrow_drop_down,
|
|
||||||
color: Color.fromARGB(255, 0, 0, 0)),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return Padding(
|
|
||||||
padding: EdgeInsets.only(
|
|
||||||
bottom: MediaQuery.of(context).viewInsets.bottom,
|
|
||||||
),
|
),
|
||||||
child: SingleChildScrollView(
|
),
|
||||||
child: Column(
|
);
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.only(top: 12, bottom: 8),
|
|
||||||
child: Center(
|
|
||||||
child: Container(
|
|
||||||
width: 40,
|
|
||||||
height: 4,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: Colors.grey[400],
|
|
||||||
borderRadius: BorderRadius.circular(4),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
...filterWidgets,
|
|
||||||
const Divider(),
|
|
||||||
Padding(
|
|
||||||
padding:
|
|
||||||
const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
||||||
child: SizedBox(
|
|
||||||
width: double.infinity,
|
|
||||||
child: ElevatedButton(
|
|
||||||
style: ElevatedButton.styleFrom(
|
|
||||||
backgroundColor: const Color.fromARGB(255, 95, 132, 255),
|
|
||||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.circular(8),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: const Text('Apply Filter'),
|
|
||||||
onPressed: () {
|
|
||||||
Navigator.pop(context, {
|
|
||||||
'projectId': tempSelectedProjectId,
|
|
||||||
'selectedTab': tempSelectedTab,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user