add detail, fetch products, categories

2025-10-15 17:46:50 +07:00
parent 4038f8e8a6
commit 02e5fd4244
12 changed files with 814 additions and 84 deletions
--- a/lib/features/categories/presentation/pages/category_detail_page.dart
+++ b/lib/features/categories/presentation/pages/category_detail_page.dart
@@ -0,0 +1,169 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../domain/entities/category.dart';
+import '../../../products/presentation/providers/products_provider.dart';
+import '../../../products/presentation/widgets/product_card.dart';
+import '../../../products/presentation/widgets/product_list_item.dart';
+
+/// View mode for products display
+enum ViewMode { grid, list }
+
+/// Category detail page showing products in the category
+class CategoryDetailPage extends ConsumerStatefulWidget {
+  final Category category;
+
+  const CategoryDetailPage({
+    super.key,
+    required this.category,
+  });
+
+  @override
+  ConsumerState<CategoryDetailPage> createState() => _CategoryDetailPageState();
+}
+
+class _CategoryDetailPageState extends ConsumerState<CategoryDetailPage> {
+  ViewMode _viewMode = ViewMode.grid;
+
+  @override
+  Widget build(BuildContext context) {
+    final productsAsync = ref.watch(productsProvider);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.category.name),
+        actions: [
+          // View mode toggle
+          IconButton(
+            icon: Icon(
+              _viewMode == ViewMode.grid
+                  ? Icons.view_list_rounded
+                  : Icons.grid_view_rounded,
+            ),
+            onPressed: () {
+              setState(() {
+                _viewMode =
+                    _viewMode == ViewMode.grid ? ViewMode.list : ViewMode.grid;
+              });
+            },
+            tooltip: _viewMode == ViewMode.grid
+                ? 'Switch to list view'
+                : 'Switch to grid view',
+          ),
+        ],
+      ),
+      body: productsAsync.when(
+        data: (products) {
+          // Filter products by category
+          final categoryProducts = products
+              .where((product) => product.categoryId == widget.category.id)
+              .toList();
+
+          if (categoryProducts.isEmpty) {
+            return Center(
+              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 products in this category',
+                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
+                  ),
+                  const SizedBox(height: 8),
+                  Text(
+                    'Products will appear here once added',
+                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
+                  ),
+                ],
+              ),
+            );
+          }
+
+          return RefreshIndicator(
+            onRefresh: () async {
+              await ref.read(productsProvider.notifier).syncProducts();
+            },
+            child: _viewMode == ViewMode.grid
+                ? _buildGridView(categoryProducts)
+                : _buildListView(categoryProducts),
+          );
+        },
+        loading: () => const Center(
+          child: CircularProgressIndicator(),
+        ),
+        error: (error, stack) => Center(
+          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 products',
+                style: Theme.of(context).textTheme.titleMedium,
+              ),
+              const SizedBox(height: 8),
+              Text(
+                error.toString(),
+                style: Theme.of(context).textTheme.bodySmall,
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 16),
+              FilledButton.icon(
+                onPressed: () {
+                  ref.invalidate(productsProvider);
+                },
+                icon: const Icon(Icons.refresh),
+                label: const Text('Retry'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build grid view
+  Widget _buildGridView(List products) {
+    return GridView.builder(
+      padding: const EdgeInsets.all(16),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: 0.75,
+        crossAxisSpacing: 12,
+        mainAxisSpacing: 12,
+      ),
+      itemCount: products.length,
+      itemBuilder: (context, index) {
+        return ProductCard(product: products[index]);
+      },
+    );
+  }
+
+  /// Build list view
+  Widget _buildListView(List products) {
+    return ListView.builder(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      itemCount: products.length,
+      itemBuilder: (context, index) {
+        return ProductListItem(
+          product: products[index],
+          onTap: () {
+            // TODO: Navigate to product detail or add to cart
+          },
+        );
+      },
+    );
+  }
+}