Initial commit
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../../models/office.dart';
|
||||
import '../../models/notification_item.dart';
|
||||
import '../../providers/notifications_provider.dart';
|
||||
import '../../providers/tickets_provider.dart';
|
||||
import '../../providers/typing_provider.dart';
|
||||
import '../../widgets/responsive_body.dart';
|
||||
import '../../widgets/typing_dots.dart';
|
||||
|
||||
class TicketsListScreen extends ConsumerWidget {
|
||||
const TicketsListScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final ticketsAsync = ref.watch(ticketsProvider);
|
||||
final officesAsync = ref.watch(officesProvider);
|
||||
final notificationsAsync = ref.watch(notificationsProvider);
|
||||
|
||||
return Scaffold(
|
||||
body: ResponsiveBody(
|
||||
child: ticketsAsync.when(
|
||||
data: (tickets) {
|
||||
if (tickets.isEmpty) {
|
||||
return const Center(child: Text('No tickets yet.'));
|
||||
}
|
||||
final officeById = {
|
||||
for (final office in officesAsync.valueOrNull ?? [])
|
||||
office.id: office,
|
||||
};
|
||||
final unreadByTicketId = _unreadByTicketId(notificationsAsync);
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 16, bottom: 8),
|
||||
child: Align(
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
'Tickets',
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: ListView.separated(
|
||||
padding: const EdgeInsets.only(bottom: 24),
|
||||
itemCount: tickets.length,
|
||||
separatorBuilder: (context, index) =>
|
||||
const SizedBox(height: 12),
|
||||
itemBuilder: (context, index) {
|
||||
final ticket = tickets[index];
|
||||
final officeName =
|
||||
officeById[ticket.officeId]?.name ?? ticket.officeId;
|
||||
final hasMention = unreadByTicketId[ticket.id] == true;
|
||||
final typingState = ref.watch(
|
||||
typingIndicatorProvider(ticket.id),
|
||||
);
|
||||
final showTyping = typingState.userIds.isNotEmpty;
|
||||
return ListTile(
|
||||
leading: const Icon(Icons.confirmation_number_outlined),
|
||||
title: Text(ticket.subject),
|
||||
subtitle: Text(officeName),
|
||||
trailing: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_buildStatusChip(context, ticket.status),
|
||||
if (showTyping) ...[
|
||||
const SizedBox(width: 6),
|
||||
TypingDots(
|
||||
size: 6,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
],
|
||||
if (hasMention)
|
||||
const Padding(
|
||||
padding: EdgeInsets.only(left: 8),
|
||||
child: Icon(
|
||||
Icons.circle,
|
||||
size: 10,
|
||||
color: Colors.red,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () => context.go('/tickets/${ticket.id}'),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (error, _) =>
|
||||
Center(child: Text('Failed to load tickets: $error')),
|
||||
),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton.extended(
|
||||
onPressed: () => _showCreateTicketDialog(context, ref),
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('New Ticket'),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _showCreateTicketDialog(
|
||||
BuildContext context,
|
||||
WidgetRef ref,
|
||||
) async {
|
||||
final subjectController = TextEditingController();
|
||||
final descriptionController = TextEditingController();
|
||||
Office? selectedOffice;
|
||||
|
||||
await showDialog<void>(
|
||||
context: context,
|
||||
builder: (dialogContext) {
|
||||
return StatefulBuilder(
|
||||
builder: (context, setState) {
|
||||
return AlertDialog(
|
||||
title: const Text('Create Ticket'),
|
||||
content: Consumer(
|
||||
builder: (context, ref, child) {
|
||||
final officesAsync = ref.watch(officesProvider);
|
||||
return SizedBox(
|
||||
width: 360,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
TextField(
|
||||
controller: subjectController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Subject',
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextField(
|
||||
controller: descriptionController,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Description',
|
||||
),
|
||||
maxLines: 3,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
officesAsync.when(
|
||||
data: (offices) {
|
||||
if (offices.isEmpty) {
|
||||
return const Text('No offices assigned.');
|
||||
}
|
||||
selectedOffice ??= offices.first;
|
||||
return DropdownButtonFormField<Office>(
|
||||
key: ValueKey(selectedOffice?.id),
|
||||
initialValue: selectedOffice,
|
||||
items: offices
|
||||
.map(
|
||||
(office) => DropdownMenuItem(
|
||||
value: office,
|
||||
child: Text(office.name),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
onChanged: (value) =>
|
||||
setState(() => selectedOffice = value),
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Office',
|
||||
),
|
||||
);
|
||||
},
|
||||
loading: () => const LinearProgressIndicator(),
|
||||
error: (error, _) =>
|
||||
Text('Failed to load offices: $error'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(dialogContext).pop(),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
onPressed: () async {
|
||||
final subject = subjectController.text.trim();
|
||||
final description = descriptionController.text.trim();
|
||||
if (subject.isEmpty ||
|
||||
description.isEmpty ||
|
||||
selectedOffice == null) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Fill out all fields.')),
|
||||
);
|
||||
return;
|
||||
}
|
||||
await ref
|
||||
.read(ticketsControllerProvider)
|
||||
.createTicket(
|
||||
subject: subject,
|
||||
description: description,
|
||||
officeId: selectedOffice!.id,
|
||||
);
|
||||
ref.invalidate(ticketsProvider);
|
||||
if (context.mounted) {
|
||||
Navigator.of(dialogContext).pop();
|
||||
}
|
||||
},
|
||||
child: const Text('Create'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Map<String, bool> _unreadByTicketId(
|
||||
AsyncValue<List<NotificationItem>> notificationsAsync,
|
||||
) {
|
||||
return notificationsAsync.maybeWhen(
|
||||
data: (items) {
|
||||
final map = <String, bool>{};
|
||||
for (final item in items) {
|
||||
if (item.ticketId == null) continue;
|
||||
if (item.isUnread) {
|
||||
map[item.ticketId!] = true;
|
||||
}
|
||||
}
|
||||
return map;
|
||||
},
|
||||
orElse: () => <String, bool>{},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatusChip(BuildContext context, String status) {
|
||||
return Chip(
|
||||
label: Text(status.toUpperCase()),
|
||||
backgroundColor: _statusColor(context, status),
|
||||
labelStyle: TextStyle(
|
||||
color: _statusTextColor(context, status),
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Color _statusColor(BuildContext context, String status) {
|
||||
return switch (status) {
|
||||
'pending' => Colors.amber.shade300,
|
||||
'promoted' => Colors.blue.shade300,
|
||||
'closed' => Colors.green.shade300,
|
||||
_ => Theme.of(context).colorScheme.surfaceContainerHighest,
|
||||
};
|
||||
}
|
||||
|
||||
Color _statusTextColor(BuildContext context, String status) {
|
||||
return switch (status) {
|
||||
'pending' => Colors.brown.shade900,
|
||||
'promoted' => Colors.blue.shade900,
|
||||
'closed' => Colors.green.shade900,
|
||||
_ => Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user