diff --git a/assets/icons/bookmark/delete.svg b/assets/icons/bookmark/delete.svg new file mode 100644 index 00000000..daf0bcd5 --- /dev/null +++ b/assets/icons/bookmark/delete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/infrastructure/services/img_asset_paths/icons/bookmark_asset_path.dart b/lib/infrastructure/services/img_asset_paths/icons/bookmark_asset_path.dart new file mode 100644 index 00000000..d6b59b45 --- /dev/null +++ b/lib/infrastructure/services/img_asset_paths/icons/bookmark_asset_path.dart @@ -0,0 +1,4 @@ +abstract class BookmarkAssetPath { + static const _basePath = 'assets/icons/bookmark'; + static const delete = '$_basePath/delete.svg'; +} \ No newline at end of file diff --git a/lib/presentation/Screens/charts/screens/chart_screen.dart b/lib/presentation/Screens/charts/screens/chart_screen.dart index 60b660c8..f9db57e3 100644 --- a/lib/presentation/Screens/charts/screens/chart_screen.dart +++ b/lib/presentation/Screens/charts/screens/chart_screen.dart @@ -155,17 +155,17 @@ class _ChartScreen1State extends ConsumerState { }); // ToastUtil.showSuccessToast("Added to Bookmark."); - // ScaffoldMessenger.of(context).showSnackBar( - // SnackBar( - // content: Text( - // AppLocalizations.of(context)!.added_to_Bookmark, - // style: TextStyle( - // color: Color(0xFF2F692C), fontWeight: FontWeight.w600), - // ), - // backgroundColor: Color(0xFFD6E9C6), - // duration: Duration(seconds: 2), - // ), - // ); + ScaffoldMessenger.of(context).showSnackBar( + SnackBar( + content: Text( + AppLocalizations.of(context)!.added_to_Bookmark, + style: TextStyle( + color: Color(0xFF2F692C), fontWeight: FontWeight.w600), + ), + backgroundColor: Color(0xFFD6E9C6), + duration: Duration(seconds: 2), + ), + ); print("Bookmark added: ${response.id}"); } catch (e) { @@ -319,103 +319,103 @@ class _ChartScreen1State extends ConsumerState { } //when the popup need for bookmark - // void showAddBookmarkDialog() { - // double myheight = MediaQuery.of(context).size.height; - // showDialog( - // context: context, - // barrierDismissible: false, // User must tap button to dismiss dialog - // builder: (context) => AlertDialog( - // shape: RoundedRectangleBorder( - // borderRadius: BorderRadius.circular(5.0), // Rounded corners - // ), - // contentPadding: EdgeInsets.zero, - // content: Stack( - // children: [ - // Padding( - // padding: const EdgeInsets.all(10.0), - // child: Column( - // mainAxisSize: MainAxisSize.min, - // children: [ - // SizedBox( - // height: myheight / 30, - // ), - // Text( - // context.translate( - // 'Do you want to add this to bookmarks?', - // 'هل تريد إضافة هذا إلى الإشارات المرجعية؟', - // ), - // textAlign: TextAlign.center, - // style: TextStyle( - // fontSize: 18, - // color: Color(0xFF898C81), - // ), - // ) - // ], - // ), - // ), - // ], - // ), - // actions: [ - // SizedBox(height: 20), - // SizedBox( - // width: 100, // Set the desired width - // child: TextButton( - // onPressed: () => Navigator.pop(context), - // style: TextButton.styleFrom( - // shape: RoundedRectangleBorder( - // borderRadius: BorderRadius.circular( - // 10.0), // Adjust the radius as needed - // ), - // side: BorderSide( - // color: Color(0xFFAA8E83), // Set the outline color - // width: 1, // Set the border width - // ), - // ), - // child: Text( - // context.translate('No', 'لا'), - // style: TextStyle( - // color: Color(0xFFAA8E83), - // fontSize: 16, - // ), - // ), - // ), - // ), - // SizedBox( - // width: 100, // Set the desired width - // child: TextButton( - // onPressed: () { - // Navigator.pop(context); - // addBookmark(); // Close dialog - // }, - // style: TextButton.styleFrom( - // backgroundColor: Color(0xFFAA8E83), // Set background color - // foregroundColor: Colors.white, - // shape: RoundedRectangleBorder( - // borderRadius: BorderRadius.circular(10.0), // Set text color - // ), - // ), - // child: Text( - // context.translate('Yes', 'نعم'), - // style: TextStyle(color: Colors.white, fontSize: 16), - // ), - // ), - // ), - // ], - // ), - // ); - // } void showAddBookmarkDialog() { - addBookmark(); - // ScaffoldMessenger.of(context).showSnackBar( - // SnackBar( - // content: Text( - // 'The bookmark is added successfully', - // ), - // backgroundColor: Colors.green, - // duration: Duration(seconds: 2), - // ), - // ); + double myheight = MediaQuery.of(context).size.height; + showDialog( + context: context, + barrierDismissible: false, // User must tap button to dismiss dialog + builder: (context) => AlertDialog( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(5.0), // Rounded corners + ), + contentPadding: EdgeInsets.zero, + content: Stack( + children: [ + Padding( + padding: const EdgeInsets.all(10.0), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox( + height: myheight / 30, + ), + Text( + context.translate( + 'Do you want to add this to bookmarks?', + 'هل تريد إضافة هذا إلى الإشارات المرجعية؟', + ), + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 18, + color: Color(0xFF898C81), + ), + ) + ], + ), + ), + ], + ), + actions: [ + SizedBox(height: 20), + SizedBox( + width: 100, // Set the desired width + child: TextButton( + onPressed: () => Navigator.pop(context), + style: TextButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + 10.0), // Adjust the radius as needed + ), + side: BorderSide( + color: Color(0xFFAA8E83), // Set the outline color + width: 1, // Set the border width + ), + ), + child: Text( + context.translate('No', 'لا'), + style: TextStyle( + color: Color(0xFFAA8E83), + fontSize: 16, + ), + ), + ), + ), + SizedBox( + width: 100, // Set the desired width + child: TextButton( + onPressed: () { + Navigator.pop(context); + addBookmark(); // Close dialog + }, + style: TextButton.styleFrom( + backgroundColor: Color(0xFFAA8E83), // Set background color + foregroundColor: Colors.white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10.0), // Set text color + ), + ), + child: Text( + context.translate('Yes', 'نعم'), + style: TextStyle(color: Colors.white, fontSize: 16), + ), + ), + ), + ], + ), + ); } + // void showAddBookmarkDialog() { + // addBookmark(); + // // ScaffoldMessenger.of(context).showSnackBar( + // // SnackBar( + // // content: Text( + // // 'The bookmark is added successfully', + // // ), + // // backgroundColor: Colors.green, + // // duration: Duration(seconds: 2), + // // ), + // // ); + // } void handleSkip() { tutorialCoachMark.skip(); @@ -2028,45 +2028,67 @@ class _ChartScreen1State extends ConsumerState { showAddBookmarkDialog(); } }, - child: Row( - children: [ - Text( - context.translate( - 'Bookmark', - 'إشارة مرجعية', + child: Container( + padding: EdgeInsets.all(4), + decoration: BoxDecoration( + color: isBookmarked ?Colors.white.withAlpha(90):null, // Background color + borderRadius: BorderRadius.circular(8), // Curved corners + ), + child: Row( + children: [ + isBookmarked? + Text( + context.translate( + 'Bookmarked', + 'إشارة مرجعية', + ), + style: TextStyle( + fontSize: 16, + color: Color(int.parse( + (chartScreenData['body_color'] ?? '#898C81') + .replaceFirst('#', '0xff'))), + ), + ): + Text( + context.translate( + 'Bookmark', + 'إشارة مرجعية', + ), + style: const TextStyle( + fontSize: 16, + color: Colors.white, + ), ), - style: const TextStyle( - fontSize: 16, - color: Colors.white, - ), - ), - SizedBox(width: 5), + SizedBox(width: 5), - // Text( - // "Bookmark", - // style: const TextStyle( - // fontSize: 16, - // color: Colors.white), - // ), - // const SizedBox(width: 5), - // Image.asset( - // isBookmarked - // ? UaeNumbersAssetPath - // .bookmarksSelectedUae // Filled bookmark image - // : UaeNumbersAssetPath - // .bookmarksUae, // Default bookmark image - // // color: Colors.white, - // width: 24, - // height: 24, - // ), - Icon( - Icons.bookmarks_rounded, - color: isBookmarked - ? Colors.black - : Colors.white, - size: 23, - ), - ], + // Text( + // "Bookmark", + // style: const TextStyle( + // fontSize: 16, + // color: Colors.white), + // ), + // const SizedBox(width: 5), + // Image.asset( + // isBookmarked + // ? UaeNumbersAssetPath + // .bookmarksSelectedUae // Filled bookmark image + // : UaeNumbersAssetPath + // .bookmarksUae, // Default bookmark image + // // color: Colors.white, + // width: 24, + // height: 24, + // ), + Icon( + size: 24, + Icons.bookmarks_rounded, + color: isBookmarked + ? Color(int.parse( + (chartScreenData['body_color'] ?? '#898C81') + .replaceFirst('#', '0xff'))) + : Colors.white, + ), + ], + ), ), ), ], diff --git a/lib/presentation/routes/drawer_routes/Drawer Items/bookmark.dart b/lib/presentation/routes/drawer_routes/Drawer Items/bookmark.dart index 4a192cac..68f06844 100644 --- a/lib/presentation/routes/drawer_routes/Drawer Items/bookmark.dart +++ b/lib/presentation/routes/drawer_routes/Drawer Items/bookmark.dart @@ -1,10 +1,13 @@ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:flutter_svg/svg.dart'; import 'package:go_router/go_router.dart'; import 'package:dio/dio.dart'; import 'package:pocketbase/pocketbase.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:uae_stat/domain/use_cases/language.dart'; +import 'package:uae_stat/infrastructure/services/img_asset_paths/icons/bookmark_asset_path.dart'; +import 'package:uae_stat/infrastructure/services/img_asset_paths/icons/uae_numbers_asset_path.dart'; import 'package:uae_stat/presentation/components/indicators/locale_provider.dart'; import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart'; @@ -20,6 +23,17 @@ class _BookMarkState extends ConsumerState { List> dataList = []; bool isLoading = true; + // Current selected tab index + int selectedTabIndex = 0; + + // Tab categories + final List tabs = [ + 'All Bookmarks', + 'Economy', + 'Social', + 'Environment', + ]; + @override void initState() { super.initState(); @@ -27,6 +41,11 @@ class _BookMarkState extends ConsumerState { fetchBookmarks(locale?.languageCode ?? 'en'); } + String colorToHex(Color color) { + return '0xFF${color.red.toRadixString(16).padLeft(2, '0').toUpperCase()}' + '${color.green.toRadixString(16).padLeft(2, '0').toUpperCase()}' + '${color.blue.toRadixString(16).padLeft(2, '0').toUpperCase()}'; + } // Function to convert hex color string to int Color _parseColor(String? colorString) { if (colorString == null || colorString.isEmpty) { @@ -98,7 +117,6 @@ class _BookMarkState extends ConsumerState { } } - /// Remove bookmark from PocketBase Future removeBookmark(bookmarkId) async { try { final adminAuth = await _pb.admins @@ -124,13 +142,25 @@ class _BookMarkState extends ConsumerState { fetchBookmarks(locale?.languageCode ?? 'en'); // ToastUtil.showSuccessToast("Removed from Bookmark."); + ScaffoldMessenger.of(context).showSnackBar( + SnackBar( + content: Text( + 'Removed From Bookmark', + style: TextStyle(color: Color(0xFF2F692C), + fontWeight: FontWeight.w500), + ), + backgroundColor: Color(0xFFD6E9C6), + duration: Duration(seconds: 2), + ), + ); + print("Bookmark removed"); } catch (e) { SnackBar( content: Text( 'Unable to remove from bookmarks. Please try again', style: - TextStyle(color: Color(0xFFEB5F24), fontWeight: FontWeight.w600), + TextStyle(color: Color(0xFFEB5F24), fontWeight: FontWeight.w600), ), backgroundColor: Color(0xFFD6E9C6), duration: Duration(seconds: 2), @@ -139,7 +169,6 @@ class _BookMarkState extends ConsumerState { } } - /// Show confirmation dialog before removing bookmark void showRemoveBookmarkDialog(id) { double myheight = MediaQuery.of(context).size.height; showDialog( @@ -208,7 +237,7 @@ class _BookMarkState extends ConsumerState { child: TextButton( onPressed: () { Navigator.pop(context); - removeBookmark(id); // Close dialog + removeBookmark(id); }, style: TextButton.styleFrom( backgroundColor: Color(0xFFAA8E83), // Set background color @@ -231,55 +260,88 @@ class _BookMarkState extends ConsumerState { ); } - String colorToHex(Color color) { - return '0xFF${color.red.toRadixString(16).padLeft(2, '0').toUpperCase()}' - '${color.green.toRadixString(16).padLeft(2, '0').toUpperCase()}' - '${color.blue.toRadixString(16).padLeft(2, '0').toUpperCase()}'; - } - @override Widget build(BuildContext context) { - ref.listen(localeProvider, (previous, next) { - final localeCode = next?.languageCode ?? 'en'; // Default to 'en' if null - fetchBookmarks(localeCode); - }); - final filteredList = - dataList.where((item) => item['isBookmark'] == true).toList(); - return PopScope( - canPop: false, - onPopInvokedWithResult: (didPop, result) { - if (didPop) return; - context.go('/myhomepage'); - }, - child: BaseScaffold( - title: Text(context.translate('Bookmark', 'إشارة مرجعية')), - body: isLoading - ? const Center(child: CircularProgressIndicator()) - : filteredList.isEmpty + List> bookmarks = dataList.where((item) => item['isBookmark'] == true).toList(); + List> filteredBookmarks = dataList + .where((bookmark) => + bookmark['main_topic'].toString().trim().toLowerCase() == tabs[selectedTabIndex].toString().trim().toLowerCase()) + .toList(); + + print('filtered $filteredBookmarks'); + return BaseScaffold( + title: Text('Bookmarks'), + body: Column( + children: [ + TabBarHeader( + tabs: tabs, + selectedIndex: selectedTabIndex, + onTabSelected: (index) { + setState(() { + selectedTabIndex = index; + }); + }, + ), + Expanded( + child: selectedTabIndex == 0 + ? Padding( + padding: const EdgeInsets.all(8.0), + child: GridView.builder( + gridDelegate: + const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + crossAxisSpacing: 10.0, + mainAxisSpacing: 10.0, + mainAxisExtent: 100, + ), + itemCount: bookmarks.length, + itemBuilder: (context, index) { + return _buildBox(bookmarks[index], context); + }, + ), + + ):filteredBookmarks.isEmpty ? Center( - child: Text(context.translate('No bookmarks found', - 'لم يتم العثور على إشارات مرجعية'))) - : Padding( - padding: const EdgeInsets.all(8.0), - child: GridView.builder( - gridDelegate: - const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 2, - crossAxisSpacing: 10.0, - mainAxisSpacing: 10.0, - mainAxisExtent: 100, - ), - itemCount: filteredList.length, - itemBuilder: (context, index) { - return _buildBox(filteredList[index], context); - }, - ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon(Icons.info_outline, + size: 100, color: Colors.grey[400]), + SizedBox(height: 16), + Text( + 'No Bookmark is added', + style: + TextStyle(fontSize: 16, color: Colors.grey), ), + ], + ), + ) + : Padding( + padding: const EdgeInsets.all(8.0), + child: GridView.builder( + gridDelegate: + const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + crossAxisSpacing: 10.0, + mainAxisSpacing: 10.0, + mainAxisExtent: 100, + ), + itemCount: filteredBookmarks.length, + itemBuilder: (context, index) { + return _buildBox(filteredBookmarks[index], context); + }, + ), + + ), + ), + ], + ), + + ); } - Widget _buildBox(Map data, BuildContext context) { // Color borderColor = data['valueColor']; return GestureDetector( @@ -329,58 +391,30 @@ class _BookMarkState extends ConsumerState { ), ), GestureDetector( - onTap: () { - debugPrint("Icon clicked in: ${data['title']}"); - removeBookmark(data['id']); - ScaffoldMessenger.of(context).showSnackBar( - SnackBar( - content: Text( - 'Removed from BookMark', - ), - backgroundColor: Colors.black, - duration: Duration(seconds: 2), - ), - ); - }, - child: const Icon( - Icons.bookmarks_rounded, - color: Colors.black, - size: 20, - ), + onTap: () { + debugPrint("Icon clicked in: ${data['title']}"); + showRemoveBookmarkDialog(data['id']); + // removeBookmark(data['id']); + }, + child: SvgPicture.asset( + BookmarkAssetPath.delete, + semanticsLabel: 'share', + width:23, + height: 20, + ) ), // GestureDetector( // onTap: () { // debugPrint("Icon clicked in: ${data['title']}"); - // removeBookmark(data['id']); - // ScaffoldMessenger.of(context).showSnackBar( - // SnackBar( - // content: Text( - // 'The bookmark is removed successfully', - // ), - // backgroundColor: Colors.green, - // duration: Duration(seconds: 2), - // ), - // ); + // // showRemoveBookmarkDialog(data['id']); // }, // child: const Icon( - // Icons.delete, + // Icons.bookmarks_rounded, // color: Colors.black, // size: 20, // ), // ), - - GestureDetector( - onTap: () { - debugPrint("Icon clicked in: ${data['title']}"); - showRemoveBookmarkDialog(data['id']); - }, - child: const Icon( - Icons.bookmarks_rounded, - color: Colors.black, - size: 20, - ), - ), ], ), Text( @@ -407,3 +441,61 @@ class _BookMarkState extends ConsumerState { ); } } + +class TabBarHeader extends StatelessWidget { + final List tabs; + final int selectedIndex; + final ValueChanged onTabSelected; + + const TabBarHeader({ + required this.tabs, + required this.selectedIndex, + required this.onTabSelected, + }); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + padding: const EdgeInsets.symmetric(vertical: 8), + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: tabs.asMap().entries.map((entry) { + int index = entry.key; + String text = entry.value; + return Row( + children: [ + TextButton( + onPressed: () => onTabSelected(index), + style: ButtonStyle( + foregroundColor: + MaterialStateProperty.resolveWith((states) { + return selectedIndex == index + ? Colors.black + : Colors.grey[700]; + }), + ), + child: Text(text), + ), + if (index < tabs.length - 1) buildDivider(), + ], + ); + }).toList(), + ), + ), + ); + } + + Widget buildDivider() { + return Container( + height: 20, + child: const VerticalDivider( + color: Colors.grey, + thickness: 1, + width: 16, + ), + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index d955702d..346ad317 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -138,7 +138,7 @@ flutter: - assets/app_tour/ - assets/icons/misc/group.png - assets/icons/misc/search.png - + - assets/icons/bookmark/ fonts: - family: Segoe