From 06cc7e378143d0cb6169d7cc3c7f4fb023135c84 Mon Sep 17 00:00:00 2001 From: efrilm Date: Fri, 29 Aug 2025 21:02:57 +0700 Subject: [PATCH] feat: merchant page --- lib/common/theme/theme.dart | 13 -- .../pages/merchant/merchant_page.dart | 120 ++++++++++++++++-- 2 files changed, 106 insertions(+), 27 deletions(-) diff --git a/lib/common/theme/theme.dart b/lib/common/theme/theme.dart index df77779..fbedba4 100644 --- a/lib/common/theme/theme.dart +++ b/lib/common/theme/theme.dart @@ -16,19 +16,6 @@ class ThemeApp { fontFamily: FontFamily.quicksand, primaryColor: AppColor.primary, scaffoldBackgroundColor: AppColor.white, - textTheme: TextTheme( - bodySmall: AppStyle.xs, - bodyMedium: AppStyle.md, - bodyLarge: AppStyle.lg, - labelSmall: AppStyle.sm, - labelLarge: AppStyle.xl, - headlineSmall: AppStyle.h6, - headlineMedium: AppStyle.h5, - headlineLarge: AppStyle.h4, - displaySmall: AppStyle.h3, - displayMedium: AppStyle.h2, - displayLarge: AppStyle.h1, - ), appBarTheme: AppBarTheme( backgroundColor: AppColor.white, foregroundColor: AppColor.textPrimary, diff --git a/lib/presentation/pages/merchant/merchant_page.dart b/lib/presentation/pages/merchant/merchant_page.dart index 8ed0601..0769c12 100644 --- a/lib/presentation/pages/merchant/merchant_page.dart +++ b/lib/presentation/pages/merchant/merchant_page.dart @@ -19,11 +19,14 @@ class _MerchantPageState extends State { final TextEditingController _searchController = TextEditingController(); final List _allMerchants = _generateMockMerchants(); List _filteredMerchants = []; + String? _selectedCategory; + late List _categories; @override void initState() { super.initState(); _filteredMerchants = _allMerchants; + _categories = _getAllCategories(); } @override @@ -32,12 +35,29 @@ class _MerchantPageState extends State { super.dispose(); } + List _getAllCategories() { + final categories = _allMerchants + .map((merchant) => merchant.category) + .toSet() + .toList(); + categories.sort(); + return categories; + } + void _filterMerchants(String query) { setState(() { - if (query.isEmpty) { - _filteredMerchants = _allMerchants; - } else { - _filteredMerchants = _allMerchants + var merchants = _allMerchants; + + // Filter by category first + if (_selectedCategory != null) { + merchants = merchants + .where((merchant) => merchant.category == _selectedCategory) + .toList(); + } + + // Then filter by search query + if (query.isNotEmpty) { + merchants = merchants .where( (merchant) => merchant.name.toLowerCase().contains(query.toLowerCase()) || @@ -45,25 +65,97 @@ class _MerchantPageState extends State { ) .toList(); } + + _filteredMerchants = merchants; }); } + void _onCategorySelected(String? category) { + setState(() { + _selectedCategory = category; + }); + _filterMerchants(_searchController.text); + } + @override Widget build(BuildContext context) { return Scaffold( backgroundColor: AppColor.background, appBar: AppBar( - title: Text('Merchants'), + title: const Text('Merchants'), bottom: PreferredSize( - preferredSize: const Size.fromHeight(70), - child: SearchTextField( - hintText: 'Search merchants...', - prefixIcon: Icons.search, - controller: _searchController, - onClear: () { - _searchController.clear(); - _filterMerchants(''); - }, + preferredSize: const Size.fromHeight( + 130, + ), // Increased height for filter chips + child: Column( + children: [ + // Search Field + SearchTextField( + hintText: 'Search merchants...', + prefixIcon: Icons.search, + controller: _searchController, + // onChanged: _filterMerchants, + onClear: () { + _searchController.clear(); + _filterMerchants(''); + }, + ), + const SizedBox(height: 12), + // Category Filter Chips + // Category Filter Chips - Updated with AppColor and opacity 1 + Container( + height: 40, + padding: const EdgeInsets.symmetric(horizontal: 16), + child: ListView( + scrollDirection: Axis.horizontal, + children: [ + // "All" filter chip + Padding( + padding: const EdgeInsets.only(right: 8), + child: FilterChip( + label: const Text('All'), + selected: _selectedCategory == null, + onSelected: (selected) { + _onCategorySelected(null); + }, + selectedColor: AppColor.primary, + backgroundColor: AppColor.white, + checkmarkColor: AppColor.white, + labelStyle: TextStyle( + color: _selectedCategory == null + ? AppColor.white + : AppColor.primary, + ), + side: BorderSide(color: AppColor.primary, width: 1), + ), + ), + // Category filter chips + ..._categories.map( + (category) => Padding( + padding: const EdgeInsets.only(right: 8), + child: FilterChip( + label: Text(category), + selected: _selectedCategory == category, + onSelected: (selected) { + _onCategorySelected(selected ? category : null); + }, + selectedColor: AppColor.primary, + backgroundColor: AppColor.white, + checkmarkColor: AppColor.white, + labelStyle: TextStyle( + color: _selectedCategory == category + ? AppColor.white + : AppColor.primary, + ), + side: BorderSide(color: AppColor.primary, width: 1), + ), + ), + ), + ], + ), + ), + const SizedBox(height: 8), + ], ), ), ),