b0esche/b0esche_cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor invite tab layout and enhance user suggestions dropdown functionality

Browse Source
This commit is contained in:
Leon Bösche
2026-01-24 05:27:51 +01:00
parent 41898dfcc7
commit cd3c91f93e
1 changed files with 214 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

403
b0esche_cloud/lib/widgets/organization_settings_dialog.dart
View File

@@ -37,6 +37,7 @@ class _OrganizationSettingsDialogState
String? _error;
List<User> _userSuggestions = [];
late final TextEditingController usernameController;
final LayerLink _layerLink = LayerLink();
@override
void initState() {
@@ -417,204 +418,228 @@ class _OrganizationSettingsDialogState
Widget _buildInviteTab() {
String selectedRole = 'member';
return Column(
return Stack(
children: [
// Pending invitations
if (_invitations.isNotEmpty) ...[
Text(
'Pending Invitations',
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),
Column(
children: [
// Pending invitations
if (_invitations.isNotEmpty) ...[
Text(
'Pending Invitations',
style: TextStyle(
color: AppTheme.primaryText,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 16),
ModernGlassButton(
onPressed: _copyInviteLink,
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),
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 = []);
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,
),
);
},
);
},
),
),
],
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),
],
// Invite link section
if (_inviteLink != null) ...[
const Divider(),
Text(
'Invite Link',
style: TextStyle(
color: AppTheme.primaryText,
fontWeight: FontWeight.bold,
),
),
),
),
),
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',
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),
),
),
);
}
},
child: const Text('Send Invitation'),
),
const SizedBox(width: 16),
ModernGlassButton(
onPressed: _copyInviteLink,
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 = []);
},
);
},
),
),
),
],
);
}