admin/marco.pms.mobileapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(team_members): enhance Team Members Bottom Sheet with bucket details and edit functionality

Browse Source
This commit is contained in:
Vaibhav Surve 2025-07-15 14:52:25 +05:30
parent 219815dd27
commit e624fb00a0
3 changed files with 313 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
lib/helpers/widgets/team_members_bottom_sheet.dart
View File

@ -1,9 +1,16 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:marco/helpers/widgets/my_text.dart'; import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/avatar.dart'; import 'package:marco/helpers/widgets/avatar.dart';
import 'package:marco/model/directory/contact_bucket_list_model.dart';
class TeamMembersBottomSheet { class TeamMembersBottomSheet {
static void show(BuildContext context, List<dynamic> members) { static void show(
BuildContext context,
ContactBucket bucket,
List<dynamic> members, {
bool canEdit = false,
VoidCallback? onEdit,
}) {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
isScrollControlled: true, isScrollControlled: true,
@ -19,14 +26,13 @@ class TeamMembersBottomSheet {
), ),
child: DraggableScrollableSheet( child: DraggableScrollableSheet(
expand: false, expand: false,
initialChildSize: 0.6, initialChildSize: 0.7,
minChildSize: 0.4, minChildSize: 0.5,
maxChildSize: 0.9, maxChildSize: 0.95,
builder: (context, scrollController) { builder: (context, scrollController) {
return Column( return Column(
children: [ children: [
const SizedBox(height: 6), const SizedBox(height: 6),
// Drag handle
Container( Container(
width: 36, width: 36,
height: 4, height: 4,
@ -36,18 +42,170 @@ class TeamMembersBottomSheet {
), ),
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
// Title at top center
MyText.titleMedium(
'Bucket Details',
fontWeight: 700,
),
const SizedBox(height: 12),
// Header with title and optional edit button
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
children: [
Expanded(
child: MyText.titleMedium(
bucket.name,
fontWeight: 700,
),
),
if (canEdit)
IconButton(
onPressed: onEdit,
icon: const Icon(Icons.edit, color: Colors.red),
tooltip: 'Edit Bucket',
),
],
),
),
// Bucket info
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
MyText.titleMedium('Team Members', fontWeight: 700), if (bucket.description.isNotEmpty)
const SizedBox(height: 6), Padding(
const Divider(thickness: 1), padding: const EdgeInsets.only(bottom: 6),
child: MyText.bodySmall(
bucket.description,
color: Colors.grey[700],
),
),
Row(
children: [
const Icon(Icons.contacts_outlined,
size: 14, color: Colors.grey),
const SizedBox(width: 4),
MyText.labelSmall(
'${bucket.numberOfContacts} contact(s)',
fontWeight: 600,
color: Colors.red,
),
const SizedBox(width: 12),
const Icon(Icons.ios_share_outlined,
size: 14, color: Colors.grey),
const SizedBox(width: 4),
MyText.labelSmall(
'Shared with (${members.length})',
fontWeight: 600,
color: Colors.indigo,
),
],
),
// Can edit indicator
Padding(
padding: const EdgeInsets.only(top: 8),
child: Row(
children: [
const Icon(Icons.edit_outlined,
size: 14, color: Colors.grey),
const SizedBox(width: 4),
MyText.labelSmall(
canEdit
? 'Can be edited by you'
: 'You don’t have edit access',
fontWeight: 600,
color: canEdit ? Colors.green : Colors.grey,
),
], ],
), ),
), ),
const SizedBox(height: 10),
// Created by
Row(
children: [
CircleAvatar(
radius: 14,
backgroundColor: Colors.grey.shade300,
backgroundImage:
bucket.createdBy.photo != null &&
bucket.createdBy.photo!.isNotEmpty
? NetworkImage(bucket.createdBy.photo!)
: null,
child: bucket.createdBy.photo == null
? Text(
bucket.createdBy.firstName.isNotEmpty
? bucket.createdBy.firstName[0]
: '?',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
),
)
: null,
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: MyText.labelSmall(
'${bucket.createdBy.firstName} ${bucket.createdBy.lastName}',
fontWeight: 600,
),
),
const SizedBox(width: 6),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: Colors.red.shade50,
borderRadius:
BorderRadius.circular(4),
),
child: MyText.labelSmall(
"Owner",
fontWeight: 600,
color: Colors.red,
),
),
],
),
MyText.bodySmall(
bucket.createdBy.jobRoleName,
color: Colors.grey[600],
),
],
),
),
],
),
const SizedBox(height: 12),
const Divider(thickness: 1),
const SizedBox(height: 6),
MyText.labelLarge(
'Shared with',
fontWeight: 700,
color: Colors.black,
),
],
),
),
const SizedBox(height: 4), const SizedBox(height: 4),
// Members list
Expanded( Expanded(
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16), padding: const EdgeInsets.symmetric(horizontal: 16),
@ -63,7 +221,7 @@ class TeamMembersBottomSheet {
controller: scrollController, controller: scrollController,
itemCount: members.length, itemCount: members.length,
separatorBuilder: (_, __) => separatorBuilder: (_, __) =>
const SizedBox(height: 4), // tighter spacing const SizedBox(height: 4),
itemBuilder: (context, index) { itemBuilder: (context, index) {
final member = members[index]; final member = members[index];
final firstName = member.firstName ?? ''; final firstName = member.firstName ?? '';
@ -75,7 +233,7 @@ class TeamMembersBottomSheet {
leading: Avatar( leading: Avatar(
firstName: firstName, firstName: firstName,
lastName: lastName, lastName: lastName,
size: 32, // smaller avatar size: 32,
), ),
title: MyText.bodyMedium( title: MyText.bodyMedium(
'${firstName.isNotEmpty ? firstName : 'Unnamed'} ${lastName.isNotEmpty ? lastName : ''}', '${firstName.isNotEmpty ? firstName : 'Unnamed'} ${lastName.isNotEmpty ? lastName : ''}',

14
lib/view/directory/directory_view.dart
View File

@ -15,7 +15,6 @@ import 'package:marco/model/directory/create_bucket_bottom_sheet.dart';
import 'package:marco/view/directory/contact_detail_screen.dart'; import 'package:marco/view/directory/contact_detail_screen.dart';
import 'package:marco/view/directory/manage_bucket_screen.dart'; import 'package:marco/view/directory/manage_bucket_screen.dart';
import 'package:marco/controller/permission_controller.dart'; import 'package:marco/controller/permission_controller.dart';
import 'package:marco/helpers/utils/permission_constants.dart';
class DirectoryView extends StatefulWidget { class DirectoryView extends StatefulWidget {
@override @override
@ -268,11 +267,7 @@ class _DirectoryViewState extends State<DirectoryView> {
itemBuilder: (context) { itemBuilder: (context) {
List<PopupMenuEntry<int>> menuItems = []; List<PopupMenuEntry<int>> menuItems = [];
// Section: Actions // Section: Actions (Always visible now)
if (permissionController
.hasPermission(Permissions.directoryAdmin) ||
permissionController
.hasPermission(Permissions.directoryManager)) {
menuItems.add( menuItems.add(
const PopupMenuItem<int>( const PopupMenuItem<int>(
enabled: false, enabled: false,
@ -281,7 +276,8 @@ class _DirectoryViewState extends State<DirectoryView> {
"Actions", "Actions",
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.grey), color: Colors.grey,
),
), ),
), ),
); );
@ -306,7 +302,6 @@ class _DirectoryViewState extends State<DirectoryView> {
}, },
), ),
); );
}
// Section: Preferences // Section: Preferences
menuItems.add( menuItems.add(
@ -317,7 +312,8 @@ class _DirectoryViewState extends State<DirectoryView> {
"Preferences", "Preferences",
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.grey), color: Colors.grey,
),
), ),
), ),
); );

75
lib/view/directory/manage_bucket_screen.dart
View File

@ -109,8 +109,8 @@ class _ManageBucketsScreenState extends State<ManageBucketsScreen> {
decoration: InputDecoration( decoration: InputDecoration(
contentPadding: contentPadding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 0), const EdgeInsets.symmetric(horizontal: 12, vertical: 0),
prefixIcon: const Icon(Icons.search, prefixIcon:
size: 18, color: Colors.grey), const Icon(Icons.search, size: 18, color: Colors.grey),
suffixIcon: searchText.isNotEmpty suffixIcon: searchText.isNotEmpty
? IconButton( ? IconButton(
icon: const Icon(Icons.close, color: Colors.grey), icon: const Icon(Icons.close, color: Colors.grey),
@ -134,12 +134,11 @@ class _ManageBucketsScreenState extends State<ManageBucketsScreen> {
), ),
Expanded( Expanded(
child: Obx(() { child: Obx(() {
final buckets = directoryController.contactBuckets.where((bucket) { final buckets =
directoryController.contactBuckets.where((bucket) {
return bucket.name.toLowerCase().contains(searchText) || return bucket.name.toLowerCase().contains(searchText) ||
bucket.description.toLowerCase().contains(searchText) || bucket.description.toLowerCase().contains(searchText) ||
bucket.numberOfContacts bucket.numberOfContacts.toString().contains(searchText);
.toString()
.contains(searchText);
}).toList(); }).toList();
if (directoryController.isLoading.value || if (directoryController.isLoading.value ||
@ -152,7 +151,8 @@ class _ManageBucketsScreenState extends State<ManageBucketsScreen> {
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
const Icon(Icons.folder_off, size: 48, color: Colors.grey), const Icon(Icons.folder_off,
size: 48, color: Colors.grey),
MySpacing.height(12), MySpacing.height(12),
MyText.bodyMedium("No buckets available.", MyText.bodyMedium("No buckets available.",
fontWeight: 600, color: Colors.grey[700]), fontWeight: 600, color: Colors.grey[700]),
@ -176,7 +176,23 @@ class _ManageBucketsScreenState extends State<ManageBucketsScreen> {
.hasPermission(Permissions.directoryManager); .hasPermission(Permissions.directoryManager);
final isExpanded = _expandedMap[bucket.id] ?? false; final isExpanded = _expandedMap[bucket.id] ?? false;
return Row( final matchedEmployees = manageBucketController.allEmployees
.where((emp) => bucket.employeeIds.contains(emp.id))
.toList();
return GestureDetector(
onTap: () {
TeamMembersBottomSheet.show(
context,
bucket,
matchedEmployees,
canEdit: canEdit,
onEdit: () {
print('Edit bucket: ${bucket.name}');
},
);
},
child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Padding( const Padding(
@ -189,35 +205,11 @@ class _ManageBucketsScreenState extends State<ManageBucketsScreen> {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Row( MyText.titleSmall(
children: [
Expanded(
child: MyText.titleSmall(
bucket.name, bucket.name,
fontWeight: 700, fontWeight: 700,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
),
if (canEdit)
IconButton(
icon: const Icon(Icons.edit_outlined,
size: 20, color: Colors.red),
tooltip: 'View Members',
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
onPressed: () {
final matchedEmployees =
manageBucketController.allEmployees
.where((emp) =>
bucket.employeeIds
.contains(emp.id))
.toList();
TeamMembersBottomSheet.show(
context, matchedEmployees);
},
),
],
),
MySpacing.height(4), MySpacing.height(4),
Row( Row(
children: [ children: [
@ -230,30 +222,18 @@ class _ManageBucketsScreenState extends State<ManageBucketsScreen> {
fontWeight: 600, fontWeight: 600,
), ),
MySpacing.width(12), MySpacing.width(12),
GestureDetector( Row(
onTap: () {
final matchedEmployees =
manageBucketController.allEmployees
.where((emp) =>
bucket.employeeIds
.contains(emp.id))
.toList();
TeamMembersBottomSheet.show(
context, matchedEmployees);
},
child: Row(
children: [ children: [
const Icon(Icons.ios_share_outlined, const Icon(Icons.ios_share_outlined,
size: 14, color: Colors.grey), size: 14, color: Colors.grey),
MySpacing.width(4), MySpacing.width(4),
MyText.labelSmall( MyText.labelSmall(
'Shared with', 'Shared with (${matchedEmployees.length})',
color: Colors.indigo, color: Colors.indigo,
fontWeight: 600, fontWeight: 600,
), ),
], ],
), ),
),
], ],
), ),
if (bucket.description.isNotEmpty) if (bucket.description.isNotEmpty)
@ -317,6 +297,7 @@ class _ManageBucketsScreenState extends State<ManageBucketsScreen> {
), ),
), ),
], ],
),
); );
}, },
); );