fill
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../../../../core/di/providers.dart';
|
||||
import '../widgets/warehouse_card.dart';
|
||||
|
||||
/// Warehouse selection page
|
||||
/// Displays a list of warehouses and allows user to select one
|
||||
///
|
||||
/// Features:
|
||||
/// - Loads warehouses on init
|
||||
/// - Pull to refresh
|
||||
/// - Loading, error, empty, and success states
|
||||
/// - Navigate to operations page on warehouse selection
|
||||
class WarehouseSelectionPage extends ConsumerStatefulWidget {
|
||||
const WarehouseSelectionPage({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<WarehouseSelectionPage> createState() =>
|
||||
_WarehouseSelectionPageState();
|
||||
}
|
||||
|
||||
class _WarehouseSelectionPageState
|
||||
extends ConsumerState<WarehouseSelectionPage> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// Load warehouses when page is first created
|
||||
Future.microtask(() {
|
||||
ref.read(warehouseProvider.notifier).loadWarehouses();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Watch warehouse state
|
||||
final warehouseState = ref.watch(warehouseProvider);
|
||||
final warehouses = warehouseState.warehouses;
|
||||
final isLoading = warehouseState.isLoading;
|
||||
final error = warehouseState.error;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Select Warehouse'),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: () {
|
||||
ref.read(warehouseProvider.notifier).loadWarehouses();
|
||||
},
|
||||
tooltip: 'Refresh',
|
||||
),
|
||||
],
|
||||
),
|
||||
body: _buildBody(
|
||||
isLoading: isLoading,
|
||||
error: error,
|
||||
warehouses: warehouses,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build body based on state
|
||||
Widget _buildBody({
|
||||
required bool isLoading,
|
||||
required String? error,
|
||||
required List warehouses,
|
||||
}) {
|
||||
// Loading state
|
||||
if (isLoading && warehouses.isEmpty) {
|
||||
return const Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
CircularProgressIndicator(),
|
||||
SizedBox(height: 16),
|
||||
Text('Loading warehouses...'),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error != null && warehouses.isEmpty) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Error Loading Warehouses',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
error,
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
FilledButton.icon(
|
||||
onPressed: () {
|
||||
ref.read(warehouseProvider.notifier).loadWarehouses();
|
||||
},
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Empty state
|
||||
if (warehouses.isEmpty) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.inventory_2_outlined,
|
||||
size: 64,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'No Warehouses Available',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'There are no warehouses to display.',
|
||||
textAlign: TextAlign.center,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
OutlinedButton.icon(
|
||||
onPressed: () {
|
||||
ref.read(warehouseProvider.notifier).loadWarehouses();
|
||||
},
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Refresh'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Success state - show warehouse list
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
await ref.read(warehouseProvider.notifier).loadWarehouses();
|
||||
},
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: warehouses.length,
|
||||
itemBuilder: (context, index) {
|
||||
final warehouse = warehouses[index];
|
||||
return WarehouseCard(
|
||||
warehouse: warehouse,
|
||||
onTap: () {
|
||||
// Select warehouse and navigate to operations
|
||||
ref.read(warehouseProvider.notifier).selectWarehouse(warehouse);
|
||||
|
||||
// Navigate to operations page
|
||||
context.go('/operations', extra: warehouse);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,396 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../../domain/entities/warehouse_entity.dart';
|
||||
import '../widgets/warehouse_card.dart';
|
||||
import '../../../../core/router/app_router.dart';
|
||||
|
||||
/// EXAMPLE: Warehouse selection page with proper navigation integration
|
||||
///
|
||||
/// This is a complete example showing how to integrate the warehouse selection
|
||||
/// page with the new router. Use this as a reference when implementing the
|
||||
/// actual warehouse provider and state management.
|
||||
///
|
||||
/// Key Features:
|
||||
/// - Uses type-safe navigation with extension methods
|
||||
/// - Proper error handling
|
||||
/// - Loading states
|
||||
/// - Pull to refresh
|
||||
/// - Integration with router
|
||||
class WarehouseSelectionPageExample extends ConsumerStatefulWidget {
|
||||
const WarehouseSelectionPageExample({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<WarehouseSelectionPageExample> createState() =>
|
||||
_WarehouseSelectionPageExampleState();
|
||||
}
|
||||
|
||||
class _WarehouseSelectionPageExampleState
|
||||
extends ConsumerState<WarehouseSelectionPageExample> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// Load warehouses when page is first created
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
// TODO: Replace with actual provider
|
||||
// ref.read(warehouseProvider.notifier).loadWarehouses();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// TODO: Replace with actual provider
|
||||
// final state = ref.watch(warehouseProvider);
|
||||
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Select Warehouse'),
|
||||
backgroundColor: colorScheme.primaryContainer,
|
||||
foregroundColor: colorScheme.onPrimaryContainer,
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.logout),
|
||||
onPressed: () => _handleLogout(context),
|
||||
tooltip: 'Logout',
|
||||
),
|
||||
],
|
||||
),
|
||||
body: _buildBody(context),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody(BuildContext context) {
|
||||
// For demonstration, showing example warehouse list
|
||||
// In actual implementation, use state from provider:
|
||||
// if (state.isLoading) return _buildLoadingState();
|
||||
// if (state.error != null) return _buildErrorState(context, state.error!);
|
||||
// if (!state.hasWarehouses) return _buildEmptyState(context);
|
||||
// return _buildWarehouseList(state.warehouses);
|
||||
|
||||
// Example warehouses for demonstration
|
||||
final exampleWarehouses = _getExampleWarehouses();
|
||||
return _buildWarehouseList(exampleWarehouses);
|
||||
}
|
||||
|
||||
/// Build loading state UI
|
||||
Widget _buildLoadingState() {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
CircularProgressIndicator(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Loading warehouses...',
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build error state UI
|
||||
Widget _buildErrorState(BuildContext context, String error) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline,
|
||||
size: 64,
|
||||
color: colorScheme.error,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Error Loading Warehouses',
|
||||
style: theme.textTheme.titleLarge?.copyWith(
|
||||
color: colorScheme.error,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
error,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
FilledButton.icon(
|
||||
onPressed: () {
|
||||
// TODO: Replace with actual provider
|
||||
// ref.read(warehouseProvider.notifier).loadWarehouses();
|
||||
},
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build empty state UI
|
||||
Widget _buildEmptyState(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.inventory_2_outlined,
|
||||
size: 64,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'No Warehouses Available',
|
||||
style: theme.textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'There are no warehouses to display.',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
OutlinedButton.icon(
|
||||
onPressed: () {
|
||||
// TODO: Replace with actual provider
|
||||
// ref.read(warehouseProvider.notifier).loadWarehouses();
|
||||
},
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Refresh'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Build warehouse list UI
|
||||
Widget _buildWarehouseList(List<WarehouseEntity> warehouses) {
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
// TODO: Replace with actual provider
|
||||
// await ref.read(warehouseProvider.notifier).refresh();
|
||||
},
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: warehouses.length,
|
||||
itemBuilder: (context, index) {
|
||||
final warehouse = warehouses[index];
|
||||
return WarehouseCard(
|
||||
warehouse: warehouse,
|
||||
onTap: () => _onWarehouseSelected(context, warehouse),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Handle warehouse selection
|
||||
///
|
||||
/// This is the key integration point with the router!
|
||||
/// Uses the type-safe extension method to navigate to operations page
|
||||
void _onWarehouseSelected(BuildContext context, WarehouseEntity warehouse) {
|
||||
// TODO: Optionally save selected warehouse to provider
|
||||
// ref.read(warehouseProvider.notifier).selectWarehouse(warehouse);
|
||||
|
||||
// Navigate to operations page using type-safe extension method
|
||||
context.goToOperations(warehouse);
|
||||
}
|
||||
|
||||
/// Handle logout
|
||||
void _handleLogout(BuildContext context) async {
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Logout'),
|
||||
content: const Text('Are you sure you want to logout?'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
onPressed: () => Navigator.of(context).pop(true),
|
||||
child: const Text('Logout'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (confirmed == true && context.mounted) {
|
||||
// TODO: Call logout from auth provider
|
||||
// await ref.read(authProvider.notifier).logout();
|
||||
|
||||
// Router will automatically redirect to login page
|
||||
// due to authentication state change
|
||||
}
|
||||
}
|
||||
|
||||
/// Get example warehouses for demonstration
|
||||
List<WarehouseEntity> _getExampleWarehouses() {
|
||||
return [
|
||||
WarehouseEntity(
|
||||
id: 1,
|
||||
name: 'Kho nguyên vật liệu',
|
||||
code: '001',
|
||||
description: 'Warehouse for raw materials',
|
||||
isNGWareHouse: false,
|
||||
totalCount: 8,
|
||||
),
|
||||
WarehouseEntity(
|
||||
id: 2,
|
||||
name: 'Kho bán thành phẩm công đoạn',
|
||||
code: '002',
|
||||
description: 'Semi-finished goods warehouse',
|
||||
isNGWareHouse: false,
|
||||
totalCount: 8,
|
||||
),
|
||||
WarehouseEntity(
|
||||
id: 3,
|
||||
name: 'Kho thành phẩm',
|
||||
code: '003',
|
||||
description: 'Finished goods warehouse',
|
||||
isNGWareHouse: false,
|
||||
totalCount: 8,
|
||||
),
|
||||
WarehouseEntity(
|
||||
id: 4,
|
||||
name: 'Kho tiêu hao',
|
||||
code: '004',
|
||||
description: 'Để chứa phụ tùng',
|
||||
isNGWareHouse: false,
|
||||
totalCount: 8,
|
||||
),
|
||||
WarehouseEntity(
|
||||
id: 5,
|
||||
name: 'Kho NG',
|
||||
code: '005',
|
||||
description: 'Non-conforming products warehouse',
|
||||
isNGWareHouse: true,
|
||||
totalCount: 3,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// EXAMPLE: Alternative approach using named routes
|
||||
///
|
||||
/// This shows how to use named routes instead of path-based navigation
|
||||
class WarehouseSelectionWithNamedRoutesExample extends ConsumerWidget {
|
||||
const WarehouseSelectionWithNamedRoutesExample({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
// Example warehouse for demonstration
|
||||
final warehouse = WarehouseEntity(
|
||||
id: 1,
|
||||
name: 'Example Warehouse',
|
||||
code: '001',
|
||||
isNGWareHouse: false,
|
||||
totalCount: 10,
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Named Routes Example')),
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
// Using named route navigation
|
||||
context.goToOperationsNamed(warehouse);
|
||||
},
|
||||
child: const Text('Go to Operations (Named)'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
// Using path-based navigation
|
||||
context.goToOperations(warehouse);
|
||||
},
|
||||
child: const Text('Go to Operations (Path)'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// EXAMPLE: Navigation from operation to products
|
||||
///
|
||||
/// Shows how to navigate from operation selection to products page
|
||||
class OperationNavigationExample extends StatelessWidget {
|
||||
final WarehouseEntity warehouse;
|
||||
|
||||
const OperationNavigationExample({
|
||||
super.key,
|
||||
required this.warehouse,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Operation Navigation Example')),
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
ElevatedButton.icon(
|
||||
onPressed: () {
|
||||
// Navigate to products with import operation
|
||||
context.goToProducts(
|
||||
warehouse: warehouse,
|
||||
operationType: 'import',
|
||||
);
|
||||
},
|
||||
icon: const Icon(Icons.arrow_downward),
|
||||
label: const Text('Import Products'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton.icon(
|
||||
onPressed: () {
|
||||
// Navigate to products with export operation
|
||||
context.goToProducts(
|
||||
warehouse: warehouse,
|
||||
operationType: 'export',
|
||||
);
|
||||
},
|
||||
icon: const Icon(Icons.arrow_upward),
|
||||
label: const Text('Export Products'),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
OutlinedButton(
|
||||
onPressed: () {
|
||||
// Navigate back
|
||||
context.goBack();
|
||||
},
|
||||
child: const Text('Go Back'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user