397 lines
12 KiB
Dart
397 lines
12 KiB
Dart
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'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|