add noti
This commit is contained in:
Phuoc Nguyen
@@ -0,0 +1,283 @@
|
||||
/// Notifications Page
|
||||
///
|
||||
/// Displays user notifications with category tabs (General/Orders).
|
||||
/// Features:
|
||||
/// - Tab navigation for filtering notifications
|
||||
/// - Unread notification indicators (blue left border)
|
||||
/// - Pull-to-refresh
|
||||
/// - Empty state when no notifications
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart' hide Notification;
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:worker/core/constants/ui_constants.dart';
|
||||
import 'package:worker/core/theme/colors.dart';
|
||||
import 'package:worker/features/notifications/domain/entities/notification.dart';
|
||||
import 'package:worker/features/notifications/presentation/providers/notifications_provider.dart';
|
||||
import 'package:worker/features/notifications/presentation/widgets/notification_card.dart';
|
||||
|
||||
/// Notifications Page
|
||||
///
|
||||
/// Main notifications screen accessible from bottom navigation.
|
||||
class NotificationsPage extends HookConsumerWidget {
|
||||
const NotificationsPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
// Use Flutter hooks for local state management
|
||||
final selectedCategory = useState<String>('general');
|
||||
final notificationsAsync = ref.watch(
|
||||
filteredNotificationsProvider(selectedCategory.value),
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFF4F6F8),
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
// Header
|
||||
_buildHeader(),
|
||||
|
||||
// Tabs
|
||||
_buildTabs(context, selectedCategory),
|
||||
|
||||
// Notifications List
|
||||
Expanded(
|
||||
child: notificationsAsync.when(
|
||||
data: (notifications) => _buildNotificationsList(
|
||||
context,
|
||||
ref,
|
||||
notifications,
|
||||
selectedCategory,
|
||||
),
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (error, stack) =>
|
||||
_buildErrorState(ref, selectedCategory),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build header
|
||||
Widget _buildHeader() {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.05),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: const Text(
|
||||
'Thông báo',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFF212121),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build category tabs
|
||||
Widget _buildTabs(
|
||||
BuildContext context,
|
||||
ValueNotifier<String> selectedCategory,
|
||||
) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildTabButton(
|
||||
context,
|
||||
selectedCategory,
|
||||
label: 'Chung',
|
||||
category: 'general',
|
||||
isSelected: selectedCategory.value == 'general',
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
Expanded(
|
||||
child: _buildTabButton(
|
||||
context,
|
||||
selectedCategory,
|
||||
label: 'Đơn hàng',
|
||||
category: 'order',
|
||||
isSelected: selectedCategory.value == 'order',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build tab button
|
||||
Widget _buildTabButton(
|
||||
BuildContext context,
|
||||
ValueNotifier<String> selectedCategory, {
|
||||
required String label,
|
||||
required String category,
|
||||
required bool isSelected,
|
||||
}) {
|
||||
return ElevatedButton(
|
||||
onPressed: () {
|
||||
selectedCategory.value = category;
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: isSelected ? AppColors.primaryBlue : Colors.white,
|
||||
foregroundColor: isSelected ? Colors.white : const Color(0xFF64748B),
|
||||
elevation: 0,
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.button),
|
||||
side: BorderSide(
|
||||
color: isSelected ? AppColors.primaryBlue : const Color(0xFFE2E8F0),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build notifications list
|
||||
Widget _buildNotificationsList(
|
||||
BuildContext context,
|
||||
WidgetRef ref,
|
||||
List<Notification> notifications,
|
||||
ValueNotifier<String> selectedCategory,
|
||||
) {
|
||||
if (notifications.isEmpty) {
|
||||
return _buildEmptyState();
|
||||
}
|
||||
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
ref.invalidate(filteredNotificationsProvider(selectedCategory.value));
|
||||
},
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
|
||||
itemCount: notifications.length,
|
||||
itemBuilder: (context, index) {
|
||||
final notification = notifications[index];
|
||||
return NotificationCard(
|
||||
notification: notification,
|
||||
onTap: () {
|
||||
// TODO: Handle notification tap (mark as read, navigate to related entity)
|
||||
_handleNotificationTap(context, ref, notification);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build empty state
|
||||
Widget _buildEmptyState() {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.notifications_none,
|
||||
size: 64,
|
||||
color: AppColors.grey500.withValues(alpha: 0.5),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
'Không có thông báo',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.grey500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'Bạn chưa có thông báo nào',
|
||||
style: TextStyle(fontSize: 14, color: AppColors.grey500),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build error state
|
||||
Widget _buildErrorState(
|
||||
WidgetRef ref,
|
||||
ValueNotifier<String> selectedCategory,
|
||||
) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: AppColors.danger.withValues(alpha: 0.5),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Text(
|
||||
'Không thể tải thông báo',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.grey500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton.icon(
|
||||
onPressed: () {
|
||||
ref.invalidate(
|
||||
filteredNotificationsProvider(selectedCategory.value),
|
||||
);
|
||||
},
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Thử lại'),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.primaryBlue,
|
||||
foregroundColor: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Handle notification tap
|
||||
void _handleNotificationTap(
|
||||
BuildContext context,
|
||||
WidgetRef ref,
|
||||
Notification notification,
|
||||
) {
|
||||
// Mark as read if unread
|
||||
if (notification.isUnread) {
|
||||
// TODO: Implement mark as read
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Đã đánh dấu đã đọc'),
|
||||
duration: Duration(seconds: 1),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Navigate to related entity if exists
|
||||
// TODO: Implement navigation based on notification type
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/// Notifications Providers
|
||||
///
|
||||
/// Riverpod providers for managing notification state.
|
||||
library;
|
||||
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:worker/features/notifications/data/datasources/notification_local_datasource.dart';
|
||||
import 'package:worker/features/notifications/data/repositories/notification_repository_impl.dart';
|
||||
import 'package:worker/features/notifications/domain/entities/notification.dart';
|
||||
import 'package:worker/features/notifications/domain/repositories/notification_repository.dart';
|
||||
|
||||
/// Notification Local Data Source Provider
|
||||
final notificationLocalDataSourceProvider =
|
||||
Provider<NotificationLocalDataSource>((ref) {
|
||||
return NotificationLocalDataSource();
|
||||
});
|
||||
|
||||
/// Notification Repository Provider
|
||||
final notificationRepositoryProvider = Provider<NotificationRepository>((ref) {
|
||||
final localDataSource = ref.watch(notificationLocalDataSourceProvider);
|
||||
return NotificationRepositoryImpl(localDataSource: localDataSource);
|
||||
});
|
||||
|
||||
/// All Notifications Provider
|
||||
final notificationsProvider = FutureProvider<List<Notification>>((ref) async {
|
||||
final repository = ref.watch(notificationRepositoryProvider);
|
||||
return await repository.getAllNotifications();
|
||||
});
|
||||
|
||||
/// Filtered Notifications Provider (by category parameter)
|
||||
/// Use .family to pass category as parameter from UI
|
||||
final filteredNotificationsProvider =
|
||||
FutureProvider.family<List<Notification>, String>((ref, category) async {
|
||||
final repository = ref.watch(notificationRepositoryProvider);
|
||||
return await repository.getNotificationsByCategory(category);
|
||||
});
|
||||
|
||||
/// Unread Count Provider
|
||||
final unreadNotificationCountProvider = FutureProvider<int>((ref) async {
|
||||
final repository = ref.watch(notificationRepositoryProvider);
|
||||
return await repository.getUnreadCount();
|
||||
});
|
||||
@@ -0,0 +1,162 @@
|
||||
/// Notification Card Widget
|
||||
///
|
||||
/// Displays a single notification item with icon, title, message, and timestamp.
|
||||
/// Shows unread indicator with blue left border for unread notifications.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:worker/core/constants/ui_constants.dart';
|
||||
import 'package:worker/core/theme/colors.dart';
|
||||
import 'package:worker/features/notifications/domain/entities/notification.dart'
|
||||
as entity;
|
||||
|
||||
/// Notification Card
|
||||
///
|
||||
/// Features:
|
||||
/// - Icon with color based on notification type
|
||||
/// - Title and message text
|
||||
/// - Time ago timestamp
|
||||
/// - Blue left border for unread notifications
|
||||
/// - Tap handler
|
||||
class NotificationCard extends StatelessWidget {
|
||||
/// Notification to display
|
||||
final entity.Notification notification;
|
||||
|
||||
/// Tap callback
|
||||
final VoidCallback? onTap;
|
||||
|
||||
/// Constructor
|
||||
const NotificationCard({super.key, required this.notification, this.onTap});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: notification.isUnread
|
||||
? const Border(
|
||||
left: BorderSide(color: AppColors.primaryBlue, width: 3),
|
||||
)
|
||||
: null,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.05),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Title with icon
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(_getIcon(), size: 18, color: _getIconColor()),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
notification.title,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: notification.isUnread
|
||||
? FontWeight.w600
|
||||
: FontWeight.w500,
|
||||
color: const Color(0xFF212121),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 4),
|
||||
|
||||
// Message
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 26),
|
||||
child: Text(
|
||||
notification.message,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
color: Color(0xFF64748B),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 8),
|
||||
|
||||
// Time ago
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 26),
|
||||
child: Text(
|
||||
notification.formattedTimeAgo,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: Color(0xFF94A3B8),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Get icon based on notification type
|
||||
IconData _getIcon() {
|
||||
final type = notification.type.toLowerCase();
|
||||
|
||||
if (type.contains('points') || type.contains('loyalty')) {
|
||||
return Icons.card_giftcard;
|
||||
} else if (type.contains('promotion') || type.contains('sale')) {
|
||||
return Icons.local_offer;
|
||||
} else if (type.contains('shipping')) {
|
||||
return Icons.local_shipping;
|
||||
} else if (type.contains('tier') || type.contains('upgrade')) {
|
||||
return Icons.workspace_premium;
|
||||
} else if (type.contains('event')) {
|
||||
return Icons.event;
|
||||
} else if (type.contains('confirmed')) {
|
||||
return Icons.check_circle;
|
||||
} else if (type.contains('birthday')) {
|
||||
return Icons.cake;
|
||||
} else {
|
||||
return Icons.notifications;
|
||||
}
|
||||
}
|
||||
|
||||
/// Get icon color based on notification type
|
||||
Color _getIconColor() {
|
||||
final type = notification.type.toLowerCase();
|
||||
|
||||
if (type.contains('points') || type.contains('loyalty')) {
|
||||
return AppColors.primaryBlue; // Blue for points/loyalty
|
||||
} else if (type.contains('promotion') || type.contains('sale')) {
|
||||
return AppColors.warning; // Orange/yellow for promotions
|
||||
} else if (type.contains('shipping')) {
|
||||
return AppColors.success; // Green for shipping
|
||||
} else if (type.contains('tier') || type.contains('upgrade')) {
|
||||
return AppColors.warning; // Gold/yellow for tier
|
||||
} else if (type.contains('event')) {
|
||||
return AppColors.primaryBlue; // Blue for events
|
||||
} else if (type.contains('confirmed')) {
|
||||
return AppColors.success; // Green for confirmations
|
||||
} else if (type.contains('birthday')) {
|
||||
return const Color(0xFFFF69B4); // Pink for birthday
|
||||
} else {
|
||||
return AppColors.grey500; // Gray for system
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user