ihompadmin/tasq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Notification Screen and tasq_adaptive_list enhancements

Browse Source
This commit is contained in:
Marc Rejohn Castillano
2026-05-11 11:34:34 +08:00
parent 30b301765b
commit e9d1af867a
8 changed files with 499 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/notifications/notifications_screen.dart
+326 -134
View File
@@ -3,8 +3,8 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:permission_handler/permission_handler.dart';
import '../../models/notification_item.dart';
import '../../services/notification_service.dart';
import '../../providers/notifications_provider.dart';
import '../../providers/profile_provider.dart';
import '../../providers/tasks_provider.dart';
@@ -37,8 +37,105 @@ class _NotificationsScreenState extends ConsumerState<NotificationsScreen> {
Future<void> _checkChannel() async {
final muted = await NotificationService.isHighPriorityChannelMuted();
if (!mounted) return;
if (muted) {
setState(() => _showBanner = true);
if (muted) setState(() => _showBanner = true);
}
String _relativeTime(DateTime dt) {
final diff = DateTime.now().difference(dt.toLocal());
if (diff.inMinutes < 1) return 'Just now';
if (diff.inMinutes < 60) return '${diff.inMinutes}m ago';
if (diff.inHours < 24) return '${diff.inHours}h ago';
if (diff.inDays == 1) return 'Yesterday';
return '${diff.inDays}d ago';
}
String _dateGroup(DateTime dt) {
final now = DateTime.now();
final today = DateTime(now.year, now.month, now.day);
final yesterday = today.subtract(const Duration(days: 1));
final local = dt.toLocal();
final d = DateTime(local.year, local.month, local.day);
if (d == today) return 'Today';
if (d == yesterday) return 'Yesterday';
return 'Earlier';
}
Color _iconContainerColor(BuildContext context, String type) {
final cs = Theme.of(context).colorScheme;
return switch (type) {
'mention' || 'announcement' || 'announcement_comment' =>
cs.secondaryContainer,
'assignment' || 'created' || 'isr_assigned' => cs.primaryContainer,
_ => cs.tertiaryContainer,
};
}
Color _iconForegroundColor(BuildContext context, String type) {
final cs = Theme.of(context).colorScheme;
return switch (type) {
'mention' || 'announcement' || 'announcement_comment' =>
cs.onSecondaryContainer,
'assignment' || 'created' || 'isr_assigned' => cs.onPrimaryContainer,
_ => cs.onTertiaryContainer,
};
}
String _notificationTitle(String type, String actorName) {
return switch (type) {
'assignment' => '$actorName assigned you',
'created' => '$actorName created a new item',
'swap_request' => '$actorName requested a shift swap',
'swap_update' => '$actorName updated a swap request',
'announcement' => '$actorName posted an announcement',
'announcement_comment' => '$actorName commented on an announcement',
'it_job_reminder' => 'IT Job submission reminder',
'isr_approved' => 'IT Service Request approved',
'isr_status_changed' => 'IT Service Request status updated',
'isr_assigned' => '$actorName assigned you an IT Service Request',
_ => '$actorName mentioned you',
};
}
IconData _notificationIcon(String type) {
return switch (type) {
'assignment' => Icons.assignment_ind_outlined,
'created' => Icons.campaign_outlined,
'swap_request' => Icons.swap_horiz,
'swap_update' => Icons.update,
'announcement' => Icons.campaign,
'announcement_comment' => Icons.comment_outlined,
'it_job_reminder' => Icons.print,
'isr_approved' => Icons.check_circle_outline,
'isr_status_changed' => Icons.sync_alt_outlined,
'isr_assigned' => Icons.engineering_outlined,
_ => Icons.alternate_email,
};
}
Future<void> _handleTap(BuildContext context, NotificationItem item) async {
final ticketId = item.ticketId;
final taskId = item.taskId;
final isrId = item.itServiceRequestId;
if (ticketId != null) {
await ref
.read(notificationsControllerProvider)
.markReadForTicket(ticketId);
} else if (taskId != null) {
await ref.read(notificationsControllerProvider).markReadForTask(taskId);
} else if (item.isUnread) {
await ref.read(notificationsControllerProvider).markRead(item.id);
}
if (!context.mounted) return;
if (item.announcementId != null) {
context.go('/announcements');
} else if (taskId != null) {
context.go('/tasks/$taskId');
} else if (ticketId != null) {
context.go('/tickets/$ticketId');
} else if (isrId != null) {
context.go('/it-service-requests/$isrId');
}
}
@@ -50,23 +147,35 @@ class _NotificationsScreenState extends ConsumerState<NotificationsScreen> {
final tasksAsync = ref.watch(tasksProvider);
final profileById = {
for (final profile in profilesAsync.valueOrNull ?? [])
profile.id: profile,
for (final p in profilesAsync.valueOrNull ?? []) p.id: p,
};
final ticketById = {
for (final ticket in ticketsAsync.valueOrNull ?? []) ticket.id: ticket,
for (final t in ticketsAsync.valueOrNull ?? []) t.id: t,
};
final taskById = {
for (final task in tasksAsync.valueOrNull ?? []) task.id: task,
for (final t in tasksAsync.valueOrNull ?? []) t.id: t,
};
final hasUnread =
notificationsAsync.valueOrNull?.any((n) => n.isUnread) ?? false;
return ResponsiveBody(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const AppPageHeader(
AppPageHeader(
title: 'Notifications',
subtitle: 'Updates and mentions across tasks and tickets',
actions: hasUnread
? [
IconButton(
icon: const Icon(Icons.done_all_outlined),
tooltip: 'Mark all as read',
onPressed: () =>
ref.read(notificationsControllerProvider).markAllRead(),
),
]
: null,
),
if (_showBanner && !_dismissed)
Padding(
@@ -98,94 +207,65 @@ class _NotificationsScreenState extends ConsumerState<NotificationsScreen> {
"You'll see updates here when something needs your attention.",
);
}
return ListView.separated(
padding: const EdgeInsets.only(bottom: 24),
itemCount: items.length,
separatorBuilder: (context, index) =>
const SizedBox(height: 12),
itemBuilder: (context, index) {
final item = items[index];
final actorName = item.actorId == null
? 'System'
: (profileById[item.actorId]?.fullName ??
// Build a flat list interleaving section-header strings and items.
// Parallel animIndexes tracks the per-item animation delay index
// (-1 for headers which don't animate independently).
final entries = <Object>[];
final animIndexes = <int>[];
int ni = 0;
String? lastGroup;
for (final item in items) {
final group = _dateGroup(item.createdAt);
if (group != lastGroup) {
entries.add(group);
animIndexes.add(-1);
lastGroup = group;
}
entries.add(item);
animIndexes.add(ni++);
}
return RefreshIndicator(
onRefresh: () async => ref.invalidate(notificationsProvider),
child: ListView.builder(
padding: const EdgeInsets.only(bottom: 24),
itemCount: entries.length,
itemBuilder: (context, index) {
final entry = entries[index];
if (entry is String) {
return _SectionHeader(label: entry);
}
final item = entry as NotificationItem;
final actorName = item.actorId == null
? 'System'
: (profileById[item.actorId]?.fullName ??
item.actorId!);
final ticketSubject = item.ticketId == null
? 'Ticket'
: (ticketById[item.ticketId]?.subject ??
item.ticketId!);
final taskTitle = item.taskId == null
? 'Task'
: (taskById[item.taskId]?.title ?? item.taskId!);
final subtitle = item.announcementId != null
? 'Announcement'
: item.taskId != null
? taskTitle
: ticketSubject;
final title = _notificationTitle(item.type, actorName);
final icon = _notificationIcon(item.type);
Future<void> handleTap() async {
final ticketId = item.ticketId;
final taskId = item.taskId;
if (ticketId != null) {
await ref
.read(notificationsControllerProvider)
.markReadForTicket(ticketId);
} else if (taskId != null) {
await ref
.read(notificationsControllerProvider)
.markReadForTask(taskId);
} else if (item.isUnread) {
await ref
.read(notificationsControllerProvider)
.markRead(item.id);
}
if (!context.mounted) return;
if (item.announcementId != null) {
context.go('/announcements');
} else if (taskId != null) {
context.go('/tasks/$taskId');
} else if (ticketId != null) {
context.go('/tickets/$ticketId');
}
}
return M3FadeSlideIn(
delay: Duration(
milliseconds: index.clamp(0, 6) * 50,
),
child: M3PressScale(
onTap: handleTap,
child: Card(
shape: AppSurfaces.of(context).compactShape,
child: ListTile(
leading: Icon(icon),
title: Text(title),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(subtitle),
const SizedBox(height: 4),
if (item.ticketId != null)
MonoText('Ticket ${item.ticketId}')
else if (item.taskId != null)
MonoText('Task ${item.taskId}'),
],
),
trailing: item.isUnread
? Icon(
Icons.circle,
size: 10,
color:
Theme.of(context).colorScheme.error,
)
: null,
return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: _NotificationCard(
item: item,
animDelay: Duration(
milliseconds: animIndexes[index].clamp(0, 6) * 50,
),
title: _notificationTitle(item.type, actorName),
icon: _notificationIcon(item.type),
iconContainerColor:
_iconContainerColor(context, item.type),
iconForegroundColor:
_iconForegroundColor(context, item.type),
taskTitle: item.taskId == null
? null
: taskById[item.taskId]?.title,
ticketSubject: item.ticketId == null
? null
: ticketById[item.ticketId]?.subject,
relativeTime: _relativeTime(item.createdAt),
onTap: () => _handleTap(context, item),
),
),
);
},
);
},
),
);
},
loading: () => const Center(child: CircularProgressIndicator()),
@@ -199,48 +279,160 @@ class _NotificationsScreenState extends ConsumerState<NotificationsScreen> {
),
);
}
}
String _notificationTitle(String type, String actorName) {
switch (type) {
case 'assignment':
return '$actorName assigned you';
case 'created':
return '$actorName created a new item';
case 'swap_request':
return '$actorName requested a shift swap';
case 'swap_update':
return '$actorName updated a swap request';
case 'announcement':
return '$actorName posted an announcement';
case 'announcement_comment':
return '$actorName commented on an announcement';
case 'it_job_reminder':
return 'IT Job submission reminder';
case 'mention':
default:
return '$actorName mentioned you';
}
}
class _SectionHeader extends StatelessWidget {
const _SectionHeader({required this.label});
IconData _notificationIcon(String type) {
switch (type) {
case 'assignment':
return Icons.assignment_ind_outlined;
case 'created':
return Icons.campaign_outlined;
case 'swap_request':
return Icons.swap_horiz;
case 'swap_update':
return Icons.update;
case 'announcement':
return Icons.campaign;
case 'announcement_comment':
return Icons.comment_outlined;
case 'it_job_reminder':
return Icons.print;
case 'mention':
default:
return Icons.alternate_email;
}
final String label;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(4, 16, 4, 8),
child: Text(
label,
style: Theme.of(context).textTheme.labelMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
);
}
}
class _NotificationCard extends StatelessWidget {
const _NotificationCard({
required this.item,
required this.animDelay,
required this.title,
required this.icon,
required this.iconContainerColor,
required this.iconForegroundColor,
required this.taskTitle,
required this.ticketSubject,
required this.relativeTime,
required this.onTap,
});
final NotificationItem item;
final Duration animDelay;
final String title;
final IconData icon;
final Color iconContainerColor;
final Color iconForegroundColor;
final String? taskTitle;
final String? ticketSubject;
final String relativeTime;
final VoidCallback onTap;
String get _subtitle {
if (item.announcementId != null) return 'Announcement';
if (item.taskId != null) return taskTitle ?? 'Task';
if (item.itServiceRequestId != null) return 'IT Service Request';
return ticketSubject ?? 'Ticket';
}
// Shows a short monospace reference only when no human-readable label exists.
String? get _refLabel {
if (item.itServiceRequestId != null) {
return 'ISR #${item.itServiceRequestId!.substring(0, 8)}';
}
if (item.ticketId != null && ticketSubject == null) {
return 'Ticket #${item.ticketId!.substring(0, 8)}';
}
if (item.taskId != null && taskTitle == null) {
return 'Task #${item.taskId!.substring(0, 8)}';
}
return null;
}
@override
Widget build(BuildContext context) {
final cs = Theme.of(context).colorScheme;
final tt = Theme.of(context).textTheme;
final cardColor =
item.isUnread ? cs.primaryContainer.withValues(alpha: 0.28) : null;
return M3FadeSlideIn(
delay: animDelay,
child: M3PressScale(
onTap: onTap,
child: Card(
color: cardColor,
shape: AppSurfaces.of(context).compactShape,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Tonal icon container keyed by notification category
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: iconContainerColor,
shape: BoxShape.circle,
),
child: Icon(icon, size: 20, color: iconForegroundColor),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: tt.bodyMedium?.copyWith(
fontWeight: item.isUnread
? FontWeight.w600
: FontWeight.normal,
),
),
const SizedBox(height: 2),
Text(
_subtitle,
style: tt.bodySmall
?.copyWith(color: cs.onSurfaceVariant),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
if (_refLabel != null) ...[
const SizedBox(height: 2),
MonoText(_refLabel!),
],
],
),
),
const SizedBox(width: 8),
// Timestamp + unread indicator
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
relativeTime,
style:
tt.labelSmall?.copyWith(color: cs.onSurfaceVariant),
),
if (item.isUnread) ...[
const SizedBox(height: 6),
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: cs.primary,
shape: BoxShape.circle,
),
),
],
],
),
],
),
),
),
),
);
}
}