432 lines
16 KiB
Dart
432 lines
16 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:marco/controller/layout/layout_controller.dart';
|
|
import 'package:marco/helpers/widgets/my_responsive.dart';
|
|
import 'package:marco/helpers/widgets/my_text.dart';
|
|
import 'package:marco/helpers/services/storage/local_storage.dart';
|
|
import 'package:marco/model/employees/employee_info.dart';
|
|
import 'package:marco/helpers/services/api_endpoints.dart';
|
|
import 'package:marco/images.dart';
|
|
import 'package:marco/controller/project_controller.dart';
|
|
import 'package:marco/view/layouts/user_profile_right_bar.dart';
|
|
|
|
class Layout extends StatefulWidget {
|
|
final Widget? child;
|
|
final Widget? floatingActionButton;
|
|
|
|
const Layout({super.key, this.child, this.floatingActionButton});
|
|
|
|
@override
|
|
State<Layout> createState() => _LayoutState();
|
|
}
|
|
|
|
class _LayoutState extends State<Layout> {
|
|
final LayoutController controller = LayoutController();
|
|
final EmployeeInfo? employeeInfo = LocalStorage.getEmployeeInfo();
|
|
final bool isBetaEnvironment = ApiEndpoints.baseUrl.contains("stage");
|
|
final projectController = Get.find<ProjectController>();
|
|
|
|
bool hasMpin = true;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_checkMpinStatus();
|
|
}
|
|
|
|
Future<void> _checkMpinStatus() async {
|
|
final bool mpinStatus = await LocalStorage.getIsMpin();
|
|
if (mounted) {
|
|
setState(() {
|
|
hasMpin = mpinStatus;
|
|
});
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MyResponsive(builder: (context, _, screenMT) {
|
|
return GetBuilder(
|
|
init: controller,
|
|
builder: (_) {
|
|
return (screenMT.isMobile || screenMT.isTablet)
|
|
? _buildScaffold(context, isMobile: true)
|
|
: _buildScaffold(context);
|
|
},
|
|
);
|
|
});
|
|
}
|
|
|
|
Widget _buildScaffold(BuildContext context, {bool isMobile = false}) {
|
|
return Scaffold(
|
|
key: controller.scaffoldKey,
|
|
endDrawer: const UserProfileBar(),
|
|
floatingActionButton: widget.floatingActionButton,
|
|
body: SafeArea(
|
|
child: GestureDetector(
|
|
behavior: HitTestBehavior.translucent,
|
|
onTap: () {
|
|
if (projectController.isProjectSelectionExpanded.value) {
|
|
projectController.isProjectSelectionExpanded.value = false;
|
|
}
|
|
},
|
|
child: Stack(
|
|
children: [
|
|
Column(
|
|
children: [
|
|
_buildHeader(context, isMobile),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
key: controller.scrollKey,
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 0, vertical: isMobile ? 16 : 32),
|
|
child: widget.child,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
_buildProjectDropdown(context, isMobile),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// Header Section
|
|
Widget _buildHeader(BuildContext context, bool isMobile) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
|
child: Obx(() {
|
|
final isLoading = projectController.isLoading.value;
|
|
|
|
if (isLoading) {
|
|
return _buildLoadingSkeleton();
|
|
}
|
|
|
|
final isExpanded = projectController.isProjectSelectionExpanded.value;
|
|
final selectedProjectId = projectController.selectedProjectId.value;
|
|
final selectedProject = projectController.projects.firstWhereOrNull(
|
|
(p) => p.id == selectedProjectId,
|
|
);
|
|
|
|
final hasProjects = projectController.projects.isNotEmpty;
|
|
|
|
if (!hasProjects) {
|
|
projectController.selectedProjectId.value = '';
|
|
} else if (selectedProject == null) {
|
|
projectController
|
|
.updateSelectedProject(projectController.projects.first.id);
|
|
}
|
|
|
|
return Card(
|
|
elevation: 4,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(5),
|
|
),
|
|
margin: EdgeInsets.zero,
|
|
clipBehavior: Clip.antiAlias,
|
|
child: Stack(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(10),
|
|
child: Row(
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(5),
|
|
child: Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Image.asset(
|
|
Images.logoDark,
|
|
height: 50,
|
|
width: 50,
|
|
fit: BoxFit.contain,
|
|
),
|
|
if (isBetaEnvironment)
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 4, vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: Colors.deepPurple,
|
|
borderRadius:
|
|
BorderRadius.circular(6), // capsule shape
|
|
border: Border.all(
|
|
color: Colors.white, width: 1.2),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black12,
|
|
blurRadius: 2,
|
|
offset: Offset(0, 1),
|
|
)
|
|
],
|
|
),
|
|
child: const Text(
|
|
'B',
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: hasProjects
|
|
? (projectController.projects.length > 1
|
|
? GestureDetector(
|
|
onTap: () => projectController
|
|
.isProjectSelectionExpanded
|
|
.toggle(),
|
|
child: Column(
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: MyText.bodyLarge(
|
|
selectedProject?.name ??
|
|
"Select Project",
|
|
fontWeight: 700,
|
|
maxLines: 1,
|
|
overflow:
|
|
TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
Icon(
|
|
isExpanded
|
|
? Icons
|
|
.arrow_drop_up_outlined
|
|
: Icons
|
|
.arrow_drop_down_outlined,
|
|
color: Colors.black,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
MyText.bodyMedium(
|
|
"Hi, ${employeeInfo?.firstName ?? ''}",
|
|
color: Colors.black54,
|
|
),
|
|
],
|
|
),
|
|
)
|
|
: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.bodyLarge(
|
|
selectedProject?.name ?? "No Project",
|
|
fontWeight: 700,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
MyText.bodyMedium(
|
|
"Hi, ${employeeInfo?.firstName ?? ''}",
|
|
color: Colors.black54,
|
|
),
|
|
],
|
|
))
|
|
: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.bodyLarge(
|
|
"No Project Assigned",
|
|
fontWeight: 700,
|
|
color: Colors.redAccent,
|
|
),
|
|
MyText.bodyMedium(
|
|
"Hi, ${employeeInfo?.firstName ?? ''}",
|
|
color: Colors.black54,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Stack(
|
|
clipBehavior: Clip.none,
|
|
alignment: Alignment.center,
|
|
children: [
|
|
IconButton(
|
|
icon: const Icon(Icons.menu),
|
|
onPressed: () => controller.scaffoldKey.currentState
|
|
?.openEndDrawer(),
|
|
),
|
|
if (!hasMpin)
|
|
Positioned(
|
|
right: 10,
|
|
top: 10,
|
|
child: Container(
|
|
width: 14,
|
|
height: 14,
|
|
decoration: BoxDecoration(
|
|
color: Colors.redAccent,
|
|
shape: BoxShape.circle,
|
|
border:
|
|
Border.all(color: Colors.white, width: 2),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
),
|
|
if (isExpanded && hasProjects)
|
|
Positioned(
|
|
top: 70,
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(5),
|
|
color: Colors.white,
|
|
child: _buildProjectList(context, isMobile),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
|
|
/// Loading Skeleton for Header
|
|
Widget _buildLoadingSkeleton() {
|
|
return Card(
|
|
elevation: 4,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(5),
|
|
),
|
|
margin: EdgeInsets.zero,
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(10),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
height: 50,
|
|
width: 50,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
borderRadius: BorderRadius.circular(5),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
height: 18,
|
|
width: 140,
|
|
color: Colors.grey.shade300,
|
|
),
|
|
const SizedBox(height: 6),
|
|
Container(
|
|
height: 14,
|
|
width: 100,
|
|
color: Colors.grey.shade200,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Container(
|
|
height: 30,
|
|
width: 30,
|
|
color: Colors.grey.shade300,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// Project List Popup
|
|
Widget _buildProjectDropdown(BuildContext context, bool isMobile) {
|
|
return Obx(() {
|
|
if (!projectController.isProjectSelectionExpanded.value) {
|
|
return const SizedBox.shrink();
|
|
}
|
|
return Positioned(
|
|
top: 95,
|
|
left: 16,
|
|
right: 16,
|
|
child: Material(
|
|
elevation: 4,
|
|
borderRadius: BorderRadius.circular(5),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(5),
|
|
),
|
|
padding: const EdgeInsets.all(10),
|
|
child: _buildProjectList(context, isMobile),
|
|
),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
Widget _buildProjectList(BuildContext context, bool isMobile) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleSmall("Switch Project", fontWeight: 600),
|
|
const SizedBox(height: 4),
|
|
ConstrainedBox(
|
|
constraints: BoxConstraints(
|
|
maxHeight:
|
|
isMobile ? MediaQuery.of(context).size.height * 0.4 : 400,
|
|
),
|
|
child: ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount: projectController.projects.length,
|
|
itemBuilder: (context, index) {
|
|
final project = projectController.projects[index];
|
|
final selectedId = projectController.selectedProjectId.value;
|
|
final isSelected = project.id == selectedId;
|
|
|
|
return RadioListTile<String>(
|
|
value: project.id,
|
|
groupValue: selectedId,
|
|
onChanged: (value) {
|
|
projectController.updateSelectedProject(value!);
|
|
projectController.isProjectSelectionExpanded.value = false;
|
|
},
|
|
title: Text(
|
|
project.name,
|
|
style: TextStyle(
|
|
fontWeight:
|
|
isSelected ? FontWeight.bold : FontWeight.normal,
|
|
color: isSelected ? Colors.blueAccent : Colors.black87,
|
|
),
|
|
),
|
|
contentPadding: const EdgeInsets.symmetric(horizontal: 0),
|
|
activeColor: Colors.blueAccent,
|
|
tileColor: isSelected
|
|
? Colors.blueAccent.withOpacity(0.1)
|
|
: Colors.transparent,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(5),
|
|
),
|
|
visualDensity: const VisualDensity(vertical: -4),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|