Refactor invite tab layout and enhance user suggestions dropdown functionality
This commit is contained in:
Leon Bösche
@@ -37,6 +37,7 @@ class _OrganizationSettingsDialogState
|
|||||||
String? _error;
|
String? _error;
|
||||||
List<User> _userSuggestions = [];
|
List<User> _userSuggestions = [];
|
||||||
late final TextEditingController usernameController;
|
late final TextEditingController usernameController;
|
||||||
|
final LayerLink _layerLink = LayerLink();
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
@@ -417,204 +418,228 @@ class _OrganizationSettingsDialogState
|
|||||||
Widget _buildInviteTab() {
|
Widget _buildInviteTab() {
|
||||||
String selectedRole = 'member';
|
String selectedRole = 'member';
|
||||||
|
|
||||||
return Column(
|
return Stack(
|
||||||
children: [
|
children: [
|
||||||
// Pending invitations
|
Column(
|
||||||
if (_invitations.isNotEmpty) ...[
|
children: [
|
||||||
Text(
|
// Pending invitations
|
||||||
'Pending Invitations',
|
if (_invitations.isNotEmpty) ...[
|
||||||
style: TextStyle(
|
Text(
|
||||||
color: AppTheme.primaryText,
|
'Pending Invitations',
|
||||||
fontWeight: FontWeight.bold,
|
style: TextStyle(
|
||||||
),
|
color: AppTheme.primaryText,
|
||||||
),
|
fontWeight: FontWeight.bold,
|
||||||
const SizedBox(height: 8),
|
|
||||||
SizedBox(
|
|
||||||
height: 150,
|
|
||||||
child: ListView.builder(
|
|
||||||
itemCount: _invitations.length,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final inv = _invitations[index];
|
|
||||||
return ListTile(
|
|
||||||
title: Text(
|
|
||||||
inv.username,
|
|
||||||
style: TextStyle(color: AppTheme.primaryText),
|
|
||||||
),
|
|
||||||
subtitle: Text(
|
|
||||||
'Role: ${inv.role}',
|
|
||||||
style: TextStyle(color: AppTheme.secondaryText),
|
|
||||||
),
|
|
||||||
trailing: IconButton(
|
|
||||||
icon: Icon(Icons.cancel, color: AppTheme.errorColor),
|
|
||||||
onPressed: () => _cancelInvitation(inv.id),
|
|
||||||
splashColor: Colors.transparent,
|
|
||||||
highlightColor: Colors.transparent,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
|
|
||||||
// Invite link section
|
|
||||||
if (_inviteLink != null) ...[
|
|
||||||
const Divider(),
|
|
||||||
Text(
|
|
||||||
'Invite Link',
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppTheme.primaryText,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 8),
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: Text(
|
|
||||||
'https://b0esche.cloud/join?token=${_inviteLink ?? ''}',
|
|
||||||
maxLines: 1,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
style: TextStyle(color: AppTheme.secondaryText),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(width: 16),
|
const SizedBox(height: 8),
|
||||||
ModernGlassButton(
|
SizedBox(
|
||||||
onPressed: _copyInviteLink,
|
height: 150,
|
||||||
child: const Icon(Icons.content_copy),
|
child: ListView.builder(
|
||||||
),
|
itemCount: _invitations.length,
|
||||||
if (_canManage) ...[
|
itemBuilder: (context, index) {
|
||||||
const SizedBox(width: 16),
|
final inv = _invitations[index];
|
||||||
ModernGlassButton(
|
return ListTile(
|
||||||
onPressed: _regenerateInviteLink,
|
title: Text(
|
||||||
child: const Icon(Icons.refresh),
|
inv.username,
|
||||||
),
|
style: TextStyle(color: AppTheme.primaryText),
|
||||||
],
|
),
|
||||||
],
|
subtitle: Text(
|
||||||
),
|
'Role: ${inv.role}',
|
||||||
] else if (_canManage) ...[
|
style: TextStyle(color: AppTheme.secondaryText),
|
||||||
const Divider(),
|
),
|
||||||
const Text('No invite link available'),
|
trailing: IconButton(
|
||||||
],
|
icon: Icon(Icons.cancel, color: AppTheme.errorColor),
|
||||||
|
onPressed: () => _cancelInvitation(inv.id),
|
||||||
// Invite form
|
splashColor: Colors.transparent,
|
||||||
const Divider(),
|
highlightColor: Colors.transparent,
|
||||||
Text(
|
),
|
||||||
'Invite New User',
|
);
|
||||||
style: TextStyle(
|
|
||||||
color: AppTheme.primaryText,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 16),
|
|
||||||
TextField(
|
|
||||||
controller: usernameController,
|
|
||||||
cursorColor: AppTheme.accentColor,
|
|
||||||
decoration: InputDecoration(
|
|
||||||
hintText: 'Username',
|
|
||||||
hintStyle: TextStyle(color: AppTheme.secondaryText),
|
|
||||||
contentPadding: const EdgeInsets.all(12),
|
|
||||||
border: OutlineInputBorder(
|
|
||||||
borderSide: BorderSide(
|
|
||||||
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
enabledBorder: OutlineInputBorder(
|
|
||||||
borderSide: BorderSide(
|
|
||||||
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
focusedBorder: OutlineInputBorder(
|
|
||||||
borderSide: BorderSide(color: AppTheme.accentColor),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
style: TextStyle(color: AppTheme.primaryText),
|
|
||||||
onChanged: (value) async {
|
|
||||||
if (value.length > 2) {
|
|
||||||
try {
|
|
||||||
_userSuggestions = await widget.orgApi.searchUsers(
|
|
||||||
widget.organization.id,
|
|
||||||
value,
|
|
||||||
);
|
|
||||||
} catch (e) {
|
|
||||||
_userSuggestions = [];
|
|
||||||
}
|
|
||||||
setState(() {});
|
|
||||||
} else {
|
|
||||||
_userSuggestions = [];
|
|
||||||
setState(() {});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
),
|
|
||||||
const SizedBox(height: 8),
|
|
||||||
if (_userSuggestions.isNotEmpty) ...[
|
|
||||||
SizedBox(
|
|
||||||
height: 100,
|
|
||||||
child: ListView.builder(
|
|
||||||
itemCount: _userSuggestions.length,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final user = _userSuggestions[index];
|
|
||||||
return ListTile(
|
|
||||||
title: Text(
|
|
||||||
user.displayName ?? user.username,
|
|
||||||
style: TextStyle(color: AppTheme.primaryText),
|
|
||||||
),
|
|
||||||
onTap: () {
|
|
||||||
usernameController.text = user.username;
|
|
||||||
setState(() => _userSuggestions = []);
|
|
||||||
},
|
},
|
||||||
);
|
),
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
DropdownButtonFormField<String>(
|
|
||||||
initialValue: selectedRole,
|
|
||||||
items: ['admin', 'member'].map((role) {
|
|
||||||
return DropdownMenuItem(value: role, child: Text(role));
|
|
||||||
}).toList(),
|
|
||||||
onChanged: (value) => selectedRole = value ?? 'member',
|
|
||||||
decoration: InputDecoration(
|
|
||||||
labelText: 'Role',
|
|
||||||
labelStyle: TextStyle(color: AppTheme.secondaryText),
|
|
||||||
border: OutlineInputBorder(
|
|
||||||
borderSide: BorderSide(
|
|
||||||
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
focusedBorder: OutlineInputBorder(
|
|
||||||
borderSide: BorderSide(color: AppTheme.accentColor),
|
// Invite link section
|
||||||
),
|
if (_inviteLink != null) ...[
|
||||||
enabledBorder: OutlineInputBorder(
|
const Divider(),
|
||||||
borderSide: BorderSide(
|
Text(
|
||||||
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
'Invite Link',
|
||||||
|
style: TextStyle(
|
||||||
|
color: AppTheme.primaryText,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
const SizedBox(height: 8),
|
||||||
),
|
Row(
|
||||||
),
|
children: [
|
||||||
const SizedBox(height: 16),
|
Expanded(
|
||||||
SizedBox(
|
child: Text(
|
||||||
width: 240,
|
'https://b0esche.cloud/join?token=${_inviteLink ?? ''}',
|
||||||
child: ModernGlassButton(
|
maxLines: 1,
|
||||||
onPressed: () {
|
overflow: TextOverflow.ellipsis,
|
||||||
if (_canManage) {
|
style: TextStyle(color: AppTheme.secondaryText),
|
||||||
final username = usernameController.text.trim();
|
|
||||||
if (username.isNotEmpty) {
|
|
||||||
_inviteUser(username, selectedRole);
|
|
||||||
usernameController.clear();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
ScaffoldMessenger.of(context).showSnackBar(
|
|
||||||
const SnackBar(
|
|
||||||
content: Text(
|
|
||||||
'You do not have permission to send invitations',
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
const SizedBox(width: 16),
|
||||||
}
|
ModernGlassButton(
|
||||||
},
|
onPressed: _copyInviteLink,
|
||||||
child: const Text('Send Invitation'),
|
child: const Icon(Icons.content_copy),
|
||||||
),
|
),
|
||||||
|
if (_canManage) ...[
|
||||||
|
const SizedBox(width: 16),
|
||||||
|
ModernGlassButton(
|
||||||
|
onPressed: _regenerateInviteLink,
|
||||||
|
child: const Icon(Icons.refresh),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
),
|
||||||
|
] else if (_canManage) ...[
|
||||||
|
const Divider(),
|
||||||
|
const Text('No invite link available'),
|
||||||
|
],
|
||||||
|
|
||||||
|
// Invite form
|
||||||
|
const Divider(),
|
||||||
|
Text(
|
||||||
|
'Invite New User',
|
||||||
|
style: TextStyle(
|
||||||
|
color: AppTheme.primaryText,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
CompositedTransformTarget(
|
||||||
|
link: _layerLink,
|
||||||
|
child: TextField(
|
||||||
|
controller: usernameController,
|
||||||
|
cursorColor: AppTheme.accentColor,
|
||||||
|
decoration: InputDecoration(
|
||||||
|
hintText: 'Username',
|
||||||
|
hintStyle: TextStyle(color: AppTheme.secondaryText),
|
||||||
|
contentPadding: const EdgeInsets.all(12),
|
||||||
|
border: OutlineInputBorder(
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
enabledBorder: OutlineInputBorder(
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
focusedBorder: OutlineInputBorder(
|
||||||
|
borderSide: BorderSide(color: AppTheme.accentColor),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
style: TextStyle(color: AppTheme.primaryText),
|
||||||
|
onChanged: (value) async {
|
||||||
|
if (value.length > 2) {
|
||||||
|
try {
|
||||||
|
_userSuggestions = await widget.orgApi.searchUsers(
|
||||||
|
widget.organization.id,
|
||||||
|
value,
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
_userSuggestions = [];
|
||||||
|
}
|
||||||
|
setState(() {});
|
||||||
|
} else {
|
||||||
|
_userSuggestions = [];
|
||||||
|
setState(() {});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
DropdownButtonFormField<String>(
|
||||||
|
initialValue: selectedRole,
|
||||||
|
items: ['admin', 'member'].map((role) {
|
||||||
|
return DropdownMenuItem(value: role, child: Text(role));
|
||||||
|
}).toList(),
|
||||||
|
onChanged: (value) => selectedRole = value ?? 'member',
|
||||||
|
decoration: InputDecoration(
|
||||||
|
labelText: 'Role',
|
||||||
|
labelStyle: TextStyle(color: AppTheme.secondaryText),
|
||||||
|
border: OutlineInputBorder(
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
focusedBorder: OutlineInputBorder(
|
||||||
|
borderSide: BorderSide(color: AppTheme.accentColor),
|
||||||
|
),
|
||||||
|
enabledBorder: OutlineInputBorder(
|
||||||
|
borderSide: BorderSide(
|
||||||
|
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
SizedBox(
|
||||||
|
width: 240,
|
||||||
|
child: ModernGlassButton(
|
||||||
|
onPressed: () {
|
||||||
|
if (_canManage) {
|
||||||
|
final username = usernameController.text.trim();
|
||||||
|
if (username.isNotEmpty) {
|
||||||
|
_inviteUser(username, selectedRole);
|
||||||
|
usernameController.clear();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ScaffoldMessenger.of(context).showSnackBar(
|
||||||
|
const SnackBar(
|
||||||
|
content: Text(
|
||||||
|
'You do not have permission to send invitations',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
child: const Text('Send Invitation'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
|
if (_userSuggestions.isNotEmpty)
|
||||||
|
CompositedTransformFollower(
|
||||||
|
link: _layerLink,
|
||||||
|
offset: const Offset(0, 48),
|
||||||
|
child: Container(
|
||||||
|
width: 300,
|
||||||
|
height: 100,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: AppTheme.primaryBackground,
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
border: Border.all(
|
||||||
|
color: AppTheme.accentColor.withValues(alpha: 0.3),
|
||||||
|
),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black.withValues(alpha: 0.2),
|
||||||
|
blurRadius: 8,
|
||||||
|
offset: const Offset(0, 4),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: ListView.builder(
|
||||||
|
itemCount: _userSuggestions.length,
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
final user = _userSuggestions[index];
|
||||||
|
return ListTile(
|
||||||
|
title: Text(
|
||||||
|
user.displayName ?? user.username,
|
||||||
|
style: TextStyle(color: AppTheme.primaryText),
|
||||||
|
),
|
||||||
|
onTap: () {
|
||||||
|
usernameController.text = user.username;
|
||||||
|
setState(() => _userSuggestions = []);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user