tasq/lib/screens/teams/teams_screen.dart

756 lines
27 KiB
Dart

import 'package:flutter/material.dart';
import '../../theme/m3_motion.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../models/office.dart';
import '../../models/profile.dart';
import '../../models/team.dart';
import '../../providers/teams_provider.dart';
import '../../providers/profile_provider.dart';
import '../../providers/tickets_provider.dart';
import '../../providers/supabase_provider.dart';
import '../../utils/supabase_response.dart';
import 'package:tasq/widgets/multi_select_picker.dart';
import '../../theme/app_surfaces.dart';
import '../../widgets/tasq_adaptive_list.dart';
import '../../widgets/app_page_header.dart';
import '../../widgets/app_state_view.dart';
import '../../utils/snackbar.dart';
// Note: `officesProvider` is provided globally in `tickets_provider.dart` so
// we reuse that StreamProvider here (avoids duplicate queries).
class TeamsScreen extends ConsumerStatefulWidget {
const TeamsScreen({super.key});
@override
ConsumerState<TeamsScreen> createState() => _TeamsScreenState();
}
class _TeamsScreenState extends ConsumerState<TeamsScreen> {
final TextEditingController _searchController = TextEditingController();
String? _selectedOfficeId;
String? _selectedLeaderId;
@override
void dispose() {
_searchController.dispose();
super.dispose();
}
bool get _hasFilters {
return _searchController.text.trim().isNotEmpty ||
_selectedOfficeId != null ||
_selectedLeaderId != null;
}
@override
Widget build(BuildContext context) {
final teamsAsync = ref.watch(teamsProvider);
final profilesAsync = ref.watch(profilesProvider);
final officesAsync = ref.watch(officesProvider);
final teamMembersAsync = ref.watch(teamMembersProvider);
return Scaffold(
body: teamsAsync.when(
data: (teams) {
final profiles = profilesAsync.valueOrNull ?? [];
final offices = officesAsync.valueOrNull ?? [];
final teamMembers = teamMembersAsync.valueOrNull ?? [];
final profileById = {for (var p in profiles) p.id: p};
final officeById = {for (var o in offices) o.id: o};
// filters
final itStaff = profiles.where((p) => p.role == 'it_staff').toList();
final officeOptions = <DropdownMenuItem<String?>>[
const DropdownMenuItem<String?>(
value: null,
child: Text('All offices'),
),
...offices.map(
(o) => DropdownMenuItem(value: o.id, child: Text(o.name)),
),
];
final leaderOptions = <DropdownMenuItem<String?>>[
const DropdownMenuItem<String?>(
value: null,
child: Text('All leaders'),
),
...itStaff.map(
(p) => DropdownMenuItem(
value: p.id,
child: Text(p.fullName.isNotEmpty ? p.fullName : p.id),
),
),
];
final filteredTeams = teams.where((t) {
final matchesName =
_searchController.text.trim().isEmpty ||
t.name.toLowerCase().contains(
_searchController.text.trim().toLowerCase(),
);
final matchesOffice =
_selectedOfficeId == null ||
t.officeIds.contains(_selectedOfficeId);
final matchesLeader =
_selectedLeaderId == null || t.leaderId == _selectedLeaderId;
return matchesName && matchesOffice && matchesLeader;
}).toList();
final filterHeader = Wrap(
spacing: 12,
runSpacing: 12,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
SizedBox(
width: 280,
child: TextField(
controller: _searchController,
onChanged: (_) => setState(() {}),
decoration: const InputDecoration(
labelText: 'Search team name',
prefixIcon: Icon(Icons.search),
),
),
),
SizedBox(
width: 200,
child: DropdownButtonFormField<String?>(
isExpanded: true,
key: ValueKey(_selectedOfficeId),
initialValue: _selectedOfficeId,
items: officeOptions,
onChanged: (v) => setState(() => _selectedOfficeId = v),
decoration: const InputDecoration(labelText: 'Office'),
),
),
SizedBox(
width: 220,
child: DropdownButtonFormField<String?>(
isExpanded: true,
key: ValueKey(_selectedLeaderId),
initialValue: _selectedLeaderId,
items: leaderOptions,
onChanged: (v) => setState(() => _selectedLeaderId = v),
decoration: const InputDecoration(labelText: 'Team leader'),
),
),
if (_hasFilters)
TextButton.icon(
onPressed: () => setState(() {
_searchController.clear();
_selectedOfficeId = null;
_selectedLeaderId = null;
}),
icon: const Icon(Icons.close),
label: const Text('Clear'),
),
],
);
final listBody = TasQAdaptiveList<Team>(
items: filteredTeams,
filterHeader: filterHeader,
columns: [
TasQColumn<Team>(
header: 'Name',
cellBuilder: (context, team) => Text(team.name),
),
TasQColumn<Team>(
header: 'Leader',
cellBuilder: (context, team) {
final leader = profileById[team.leaderId];
return Text(leader?.fullName ?? team.leaderId);
},
),
TasQColumn<Team>(
header: 'Offices',
cellBuilder: (context, team) {
final officeNamesList = team.officeIds
.map((id) => officeById[id]?.name ?? id)
.toList();
officeNamesList.sort(
(a, b) => a.toLowerCase().compareTo(b.toLowerCase()),
);
final officeNames = officeNamesList.join(', ');
return Text(officeNames);
},
),
TasQColumn<Team>(
header: 'Members',
cellBuilder: (context, team) {
final members = team.members(teamMembers);
final memberNames = members
.map((id) => profileById[id]?.fullName ?? id)
.join(', ');
return Text(memberNames);
},
),
],
mobileTileBuilder: (context, team, actions) {
final leader = profileById[team.leaderId];
final officeNamesList = team.officeIds
.map((id) => officeById[id]?.name ?? id)
.toList();
officeNamesList.sort(
(a, b) => a.toLowerCase().compareTo(b.toLowerCase()),
);
final officeNames = officeNamesList.join(', ');
final members = team.members(teamMembers);
final memberNames = members
.map((id) => profileById[id]?.fullName ?? id)
.join(', ');
return ListTile(
title: Text(team.name),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Leader: ${leader?.fullName ?? team.leaderId}'),
Text('Offices: $officeNames'),
Text('Members: $memberNames'),
],
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: actions,
),
onTap: () => _showTeamDialog(context, team: team),
);
},
rowActions: (team) => [
IconButton(
icon: const Icon(Icons.edit),
tooltip: 'Edit',
onPressed: () => _showTeamDialog(context, team: team),
),
IconButton(
icon: const Icon(Icons.delete),
tooltip: 'Delete',
onPressed: () => _deleteTeam(context, team.id),
),
],
);
return Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const AppPageHeader(
title: 'IT Staff Teams',
subtitle: 'Manage support teams and assignments',
),
Expanded(child: listBody),
],
);
},
loading: () => const Center(child: CircularProgressIndicator()),
error: (err, stack) => AppErrorView(
error: err,
onRetry: () => ref.invalidate(teamsProvider),
),
),
floatingActionButton: M3Fab(
onPressed: () => _showTeamDialog(context),
tooltip: 'Add Team',
icon: const Icon(Icons.add),
),
);
}
void _showTeamDialog(BuildContext context, {Team? team}) async {
final profiles = ref.read(profilesProvider).valueOrNull ?? [];
// officesProvider is a StreamProvider (global) — try to read the latest
// synchronous value first, otherwise await the first stream event.
final officesSync = ref.read(officesProvider).valueOrNull;
final List<Office> offices =
officesSync ?? await ref.read(officesProvider.future);
if (!context.mounted) return;
final itStaff = profiles.where((p) => p.role == 'it_staff').toList();
final nameController = TextEditingController(text: team?.name ?? '');
String? leaderId = team?.leaderId;
Color? teamColor = team?.color != null
? Color(int.parse(team!.color!, radix: 16) | 0xFF000000)
: null;
List<String> selectedOffices = List<String>.from(team?.officeIds ?? []);
List<String> selectedMembers = [];
final isEdit = team != null;
// If editing, fetch current members
if (isEdit) {
final members = ref.read(teamMembersProvider).valueOrNull ?? [];
selectedMembers = members
.where((m) => m.teamId == team.id)
.map((m) => m.userId)
.toList();
}
final bool isMobileDialog = MediaQuery.of(context).size.width <= 600;
const double kDialogMaxWidth = 720;
// Dialog content builder (captures outer local vars like leaderId,
// selectedOffices, selectedMembers, nameController).
Widget buildFormContent(StateSetter setState) {
return SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: nameController,
decoration: const InputDecoration(labelText: 'Team Name'),
),
const SizedBox(height: 12),
_TeamColorPicker(
selectedColor: teamColor,
onColorChanged: (c) => setState(() => teamColor = c),
),
const SizedBox(height: 12),
DropdownButtonFormField<String>(
initialValue: leaderId,
items: [
for (final p in itStaff)
DropdownMenuItem(
value: p.id,
child: Text(p.fullName.isNotEmpty ? p.fullName : p.id),
),
],
onChanged: (v) => setState(() => leaderId = v),
decoration: const InputDecoration(labelText: 'Team Leader'),
),
const SizedBox(height: 12),
// Available offices: exclude offices already assigned to other teams
Builder(
builder: (context) {
final allTeams =
ref.read(teamsProvider).valueOrNull ?? <Team>[];
final assignedOfficeIds = allTeams
.where((t) => t.id != team?.id)
.expand((t) => t.officeIds)
.toSet();
final availableOffices = offices
.where(
(o) =>
!assignedOfficeIds.contains(o.id) ||
selectedOffices.contains(o.id),
)
.toList();
return MultiSelectPicker<Office>(
label: 'Offices',
items: availableOffices,
selectedIds: selectedOffices,
getId: (o) => o.id,
getLabel: (o) => o.name,
onChanged: (ids) => setState(() => selectedOffices = ids),
);
},
),
const SizedBox(height: 12),
Builder(
builder: (context) {
final members =
ref.read(teamMembersProvider).valueOrNull ?? <dynamic>[];
final assignedUserIds = members
.where((m) => m.teamId != team?.id)
.map((m) => m.userId)
.toSet();
final availableItStaff = itStaff
.where(
(p) =>
!assignedUserIds.contains(p.id) ||
selectedMembers.contains(p.id),
)
.toList();
return MultiSelectPicker<Profile>(
label: 'Team Members',
items: availableItStaff,
selectedIds: selectedMembers,
getId: (p) => p.id,
getLabel: (p) => p.fullName.isNotEmpty ? p.fullName : p.id,
onChanged: (ids) => setState(() => selectedMembers = ids),
);
},
),
],
),
);
}
Future<void> onSave(StateSetter setState, NavigatorState navigator) async {
final ctx = context; // capture for async use
final name = nameController.text.trim();
if (name.isEmpty) {
showWarningSnackBar(ctx, 'Team name is required');
return;
}
if (leaderId == null) {
showWarningSnackBar(ctx, 'Please select a team leader');
return;
}
if (selectedOffices.isEmpty) {
showWarningSnackBar(ctx, 'Assign at least one office to the team');
return;
}
// ensure leader included
if (leaderId != null && !selectedMembers.contains(leaderId)) {
selectedMembers = [leaderId!, ...selectedMembers];
}
final client = ref.read(supabaseClientProvider);
try {
if (isEdit) {
// update team row
final upRes = await client
.from('teams')
.update({
'name': name,
'leader_id': leaderId,
'office_ids': selectedOffices,
'color': teamColor != null
? (teamColor!.toARGB32() & 0xFFFFFF)
.toRadixString(16)
.padLeft(6, '0')
: null,
})
.eq('id', team.id);
final upErr = extractSupabaseError(upRes);
if (upErr != null) throw Exception(upErr);
// replace members for the team
final delRes = await client
.from('team_members')
.delete()
.eq('team_id', team.id);
final delErr = extractSupabaseError(delRes);
if (delErr != null) throw Exception(delErr);
if (selectedMembers.isNotEmpty) {
final rows = selectedMembers
.map((u) => {'team_id': team.id, 'user_id': u})
.toList();
final memRes = await client.from('team_members').insert(rows);
final memErr = extractSupabaseError(memRes);
if (memErr != null) throw Exception(memErr);
// verify members persisted (handle Map or List response)
final dynamic checkRes = await client
.from('team_members')
.select()
.eq('team_id', team.id);
if (checkRes is Map && checkRes['error'] != null) {
throw Exception('Failed to verify team members');
}
final List persisted = checkRes is List
? List.from(checkRes)
: (checkRes is Map && checkRes['data'] is List)
? List.from(checkRes['data'] as List)
: <dynamic>[];
if (persisted.length != selectedMembers.length) {
throw Exception('Member count mismatch after save');
}
}
} else {
// create team and insert members
final insertRes = await client
.from('teams')
.insert({
'name': name,
'leader_id': leaderId,
'office_ids': selectedOffices,
'color': teamColor != null
? (teamColor!.toARGB32() & 0xFFFFFF)
.toRadixString(16)
.padLeft(6, '0')
: null,
})
.select()
.single();
// normalize inserted row to extract id reliably across client response shapes
dynamic insertedRow;
final dynamic insertResValue = insertRes;
if (insertResValue is List && insertResValue.isNotEmpty) {
insertedRow = insertResValue.first;
} else {
final insertErr = extractSupabaseError(insertResValue);
if (insertErr != null) throw Exception(insertErr);
final dataField = insertResValue['data'];
if (dataField is List && dataField.isNotEmpty) {
insertedRow = dataField.first;
} else if (dataField is Map) {
insertedRow = dataField;
} else if (insertResValue['id'] != null) {
insertedRow = insertResValue;
}
}
if (insertedRow == null || insertedRow['id'] == null) {
throw Exception('Unable to determine created team id');
}
final teamId = insertedRow['id'] as String;
if (selectedMembers.isNotEmpty) {
final rows = selectedMembers
.map((u) => {'team_id': teamId, 'user_id': u})
.toList();
final memRes = await client.from('team_members').insert(rows);
final memErr2 = extractSupabaseError(memRes);
if (memErr2 != null) throw Exception(memErr2);
// verify members persisted (handle Map or List response)
final dynamic checkRes = await client
.from('team_members')
.select()
.eq('team_id', teamId);
if (checkRes is Map && checkRes['error'] != null) {
throw Exception('Failed to verify team members');
}
final List persisted = checkRes is List
? List.from(checkRes)
: (checkRes is Map && checkRes['data'] is List)
? List.from(checkRes['data'] as List)
: <dynamic>[];
if (persisted.length != selectedMembers.length) {
throw Exception('Member count mismatch after save');
}
}
}
} catch (e) {
if (!mounted) return;
// ignore: use_build_context_synchronously
showErrorSnackBar(context, 'Failed to save team: $e');
return;
}
ref.invalidate(teamsProvider);
ref.invalidate(teamMembersProvider);
navigator.pop();
}
if (isMobileDialog) {
// Mobile: bottom sheet presentation
await m3ShowBottomSheet<void>(
context: context,
isScrollControlled: true,
builder: (sheetContext) {
return StatefulBuilder(
builder: (sheetContext, setState) {
final navigator = Navigator.of(sheetContext);
return SafeArea(
child: Padding(
padding: EdgeInsets.only(
left: 16,
right: 16,
top: 12,
bottom: MediaQuery.of(sheetContext).viewInsets.bottom + 12,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
isEdit ? 'Edit Team' : 'Add Team',
style: Theme.of(sheetContext).textTheme.titleLarge,
),
const SizedBox(height: 8),
buildFormContent(setState),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () => navigator.pop(),
child: const Text('Cancel'),
),
const SizedBox(width: 8),
FilledButton(
onPressed: () => onSave(setState, navigator),
child: Text(isEdit ? 'Save' : 'Add'),
),
],
),
],
),
),
);
},
);
},
);
} else {
// Desktop / Tablet: centered fixed-width AlertDialog
await m3ShowDialog<void>(
context: context,
builder: (dialogContext) {
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: kDialogMaxWidth),
child: StatefulBuilder(
builder: (dialogContext, setState) {
final navigator = Navigator.of(dialogContext);
return AlertDialog(
shape: AppSurfaces.of(dialogContext).dialogShape,
title: Text(isEdit ? 'Edit Team' : 'Add Team'),
content: buildFormContent(setState),
actions: [
TextButton(
onPressed: () => navigator.pop(),
child: const Text('Cancel'),
),
FilledButton(
onPressed: () => onSave(setState, navigator),
child: Text(isEdit ? 'Save' : 'Add'),
),
],
);
},
),
),
);
},
);
}
}
void _deleteTeam(BuildContext context, String teamId) async {
final confirmed = await m3ShowDialog<bool?>(
context: context,
builder: (dialogContext) => AlertDialog(
shape: AppSurfaces.of(dialogContext).dialogShape,
title: const Text('Delete Team'),
content: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 520),
child: const Text('Are you sure you want to delete this team?'),
),
actions: [
TextButton(
onPressed: () => Navigator.of(dialogContext).pop(false),
child: const Text('Cancel'),
),
FilledButton(
onPressed: () => Navigator.of(dialogContext).pop(true),
child: const Text('Delete'),
),
],
),
);
if (confirmed != true) return;
final ctx = context; // capture before async gaps
try {
final delMembersRes = await ref
.read(supabaseClientProvider)
.from('team_members')
.delete()
.eq('team_id', teamId);
final delMembersErr = extractSupabaseError(delMembersRes);
if (delMembersErr != null) throw Exception(delMembersErr);
final delTeamRes = await ref
.read(supabaseClientProvider)
.from('teams')
.delete()
.eq('id', teamId);
final delTeamErr = extractSupabaseError(delTeamRes);
if (delTeamErr != null) throw Exception(delTeamErr);
ref.invalidate(teamsProvider);
ref.invalidate(teamMembersProvider);
} catch (e) {
if (!mounted) return;
// ignore: use_build_context_synchronously
showErrorSnackBar(ctx, 'Failed to delete team: $e');
return;
}
}
}
/// Inline color picker for team color selection.
class _TeamColorPicker extends StatelessWidget {
const _TeamColorPicker({
required this.selectedColor,
required this.onColorChanged,
});
final Color? selectedColor;
final ValueChanged<Color?> onColorChanged;
static const List<Color> _presetColors = [
Color(0xFFE53935), // Red
Color(0xFFD81B60), // Pink
Color(0xFF8E24AA), // Purple
Color(0xFF5E35B1), // Deep Purple
Color(0xFF3949AB), // Indigo
Color(0xFF1E88E5), // Blue
Color(0xFF039BE5), // Light Blue
Color(0xFF00ACC1), // Cyan
Color(0xFF00897B), // Teal
Color(0xFF43A047), // Green
Color(0xFF7CB342), // Light Green
Color(0xFFFDD835), // Yellow
Color(0xFFFFB300), // Amber
Color(0xFFFB8C00), // Orange
Color(0xFFF4511E), // Deep Orange
Color(0xFF6D4C41), // Brown
];
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('Team Color', style: Theme.of(context).textTheme.bodyMedium),
if (selectedColor != null) ...[
const SizedBox(width: 8),
GestureDetector(
onTap: () => onColorChanged(null),
child: Text(
'Clear',
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Theme.of(context).colorScheme.primary,
),
),
),
],
],
),
const SizedBox(height: 8),
Wrap(
spacing: 8,
runSpacing: 8,
children: _presetColors.map((color) {
final isSelected =
selectedColor != null &&
(selectedColor!.toARGB32() & 0xFFFFFF) ==
(color.toARGB32() & 0xFFFFFF);
return GestureDetector(
onTap: () => onColorChanged(color),
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
border: isSelected
? Border.all(
color: Theme.of(context).colorScheme.onSurface,
width: 3,
)
: null,
),
child: isSelected
? Icon(Icons.check, color: Colors.white, size: 18)
: null,
),
);
}).toList(),
),
],
);
}
}