diff --git a/assets/icons/amazon.svg b/assets/icons/amazon.svg new file mode 100644 index 0000000..ef7d110 --- /dev/null +++ b/assets/icons/amazon.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/main.dart b/lib/main.dart index f0ddc6a..ef8512f 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,12 +1,13 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:shopping_assistant_mobile_client/screens/wishlists.dart'; +import 'package:shopping_assistant_mobile_client/screens/cart.dart'; void main() { runApp(const MyApp()); } -class MyApp extends StatefulWidget { +class MyApp extends StatelessWidget { const MyApp({super.key}); static const List _pageNameOptions = [ @@ -24,90 +25,99 @@ class MyApp extends StatefulWidget { static const Color _selectedColor = Color.fromRGBO(36, 36, 36, 1); static const Color _unselectedColor = Color.fromRGBO(144, 144, 144, 1); - @override - State createState() => _MyAppState(); -} - -class _MyAppState extends State { - int _selectedIndex = 0; - - void _onItemTapped(int index) { - setState(() { - _selectedIndex = index; - }); - } - @override Widget build(BuildContext context) { return MaterialApp( - theme: ThemeData( - useMaterial3: true, - appBarTheme: AppBarTheme(), - textTheme: TextTheme( - bodyMedium: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - ), - ), - ), - home: Scaffold( - appBar: AppBar( - title: Text(MyApp._pageNameOptions[_selectedIndex]), - centerTitle: true, - bottom: PreferredSize( - preferredSize: const Size.fromHeight(1), - child: Container( - color: Color.fromRGBO(234, 234, 234, 1), - height: 1, - ), - ), - ), - body: MyApp._widgetOptions[_selectedIndex], - bottomNavigationBar: BottomNavigationBar( - items: [ - BottomNavigationBarItem( - icon: SvgPicture.asset( - 'assets/icons/wishlists.svg', - color: _selectedIndex == 0 - ? MyApp._selectedColor - : MyApp._unselectedColor, - ), - label: 'Wishlists', - ), - BottomNavigationBarItem( - icon: SvgPicture.asset( - 'assets/icons/start-new-search.svg', - color: _selectedIndex == 1 - ? MyApp._selectedColor - : MyApp._unselectedColor, - ), - label: 'New Chat', - ), - BottomNavigationBarItem( - icon: SvgPicture.asset( - 'assets/icons/settings.svg', - color: _selectedIndex == 2 - ? MyApp._selectedColor - : MyApp._unselectedColor, - ), - label: 'Settings', - ), - ], - selectedItemColor: MyApp._selectedColor, - unselectedItemColor: MyApp._unselectedColor, - selectedFontSize: 14, - unselectedFontSize: 14, - currentIndex: _selectedIndex, - onTap: _onItemTapped, - ), - ), + home: CartScreen() ); } + //State createState() => _MyAppState(); } -// Use to seed wishlists for new user -// final ApiClient client = ApiClient(); +// class _MyAppState extends State { +// int _selectedIndex = 0; +// +// void _onItemTapped(int index) { +// setState(() { +// _selectedIndex = index; +// }); +// } +// +// @override +// Widget build(BuildContext context) { +// return MaterialApp( +// theme: ThemeData( +// useMaterial3: true, +// appBarTheme: AppBarTheme(), +// textTheme: TextTheme( +// bodyMedium: TextStyle( +// fontSize: 16, +// fontWeight: FontWeight.w500, +// ), +// ), +// ), +// home: Scaffold( +// appBar: AppBar( +// title: Text(MyApp._pageNameOptions[_selectedIndex]), +// centerTitle: true, +// bottom: PreferredSize( +// preferredSize: const Size.fromHeight(1), +// child: Container( +// color: Color.fromRGBO(234, 234, 234, 1), +// height: 1, +// ), +// ), +// ), +// body: MyApp._widgetOptions[_selectedIndex], +// bottomNavigationBar: BottomNavigationBar( +// items: [ +// BottomNavigationBarItem( +// icon: SvgPicture.asset( +// 'assets/icons/wishlists.svg', +// color: _selectedIndex == 0 +// ? MyApp._selectedColor +// : MyApp._unselectedColor, +// ), +// label: 'Wishlists', +// ), +// BottomNavigationBarItem( +// icon: SvgPicture.asset( +// 'assets/icons/start-new-search.svg', +// color: _selectedIndex == 1 +// ? MyApp._selectedColor +// : MyApp._unselectedColor, +// ), +// label: 'New Chat', +// ), +// BottomNavigationBarItem( +// icon: SvgPicture.asset( +// 'assets/icons/settings.svg', +// color: _selectedIndex == 2 +// ? MyApp._selectedColor +// : MyApp._unselectedColor, +// ), +// label: 'Settings', +// ), +// ], +// selectedItemColor: MyApp._selectedColor, +// unselectedItemColor: MyApp._unselectedColor, +// selectedFontSize: 14, +// unselectedFontSize: 14, +// currentIndex: _selectedIndex, +// onTap: _onItemTapped, +// ), +// ), +// ); +// } +// } + + + + +// Use to seed wishlists for new user +//final ApiClient client = ApiClient(); +// // const String startPersonalWishlistMutations = r''' // mutation startPersonalWishlist($dto: WishlistCreateDtoInput!) { // startPersonalWishlist(dto: $dto) { diff --git a/lib/models/product.dart b/lib/models/product.dart new file mode 100644 index 0000000..df75e1e --- /dev/null +++ b/lib/models/product.dart @@ -0,0 +1,25 @@ +class Product { + Product({ + required this.id, + required this.name, + required this.url, + required this.imageUrls, + required this.rating, + required this.price +}); + + String id; + String name; + String url; + List imageUrls; + double rating; + double price; + + Product.fromJson(Map json) + : id = json['id'] as String, + name = json['name'] as String, + url = json['url'] as String, + imageUrls = json['imageUrls'] as List, + rating = json['rating'] as double, + price = json['name'] as double; +} \ No newline at end of file diff --git a/lib/screens/cart.dart b/lib/screens/cart.dart new file mode 100644 index 0000000..52c2861 --- /dev/null +++ b/lib/screens/cart.dart @@ -0,0 +1,245 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:graphql/client.dart'; +import 'package:shopping_assistant_mobile_client/models/product.dart'; +import 'package:shopping_assistant_mobile_client/network/api_client.dart'; + +const String defaultUrl = 'https://s3-alpha-sig.figma.com/img/b8d6/7b6f/59839f0f3abfdeed91ca32d3501cbfa3?Expires=1702252800&Signature=aDWc2xO9d01Criwp829ZjhWE1pu~XGezZiM9oNOGkVZOYyGwxfDq5lVOSV0WOEkYdBR83hW7a-I2LY-U5R9evtoKf0BRGY1VVZ0H1wkp5WOHlC196gKr5tLPfseWahP2GWsQNSxfsgxg0cg8l8LamgqS1sUmD1Qt8jWdsqVcwlvTBY8X0q~ScDeCGn1n-7Npj315r4CbVLYMLfZWjpXROcR~Jpx-sqKVaxakw5OWdjegw7YBn~MAY6~yNi~Ylf44oFLkBpzI2aA65Z-TiRMPJ7HoLqJ3id8Eq7NoJ2PKxL88aZ2cOk9ZduRU7jI8FO-PvEBT-Qiwz0tUyEzmbiziDg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4'; + + +class CartScreen extends StatefulWidget { + const CartScreen({super.key}); + + @override + State createState() => _CartScreenState(); +} + +class _CartScreenState extends State { + // final _products = [ + // Product(name : '1', id: "Belkin USB C to VGA + Charge Adapter - USB C to VGA Cable for MacBook", price: 12.57, rating: 4.34, url: 'a', imageUrls: [defaultUrl,'a','b']), + // Product(id : '1', name: "USB C to VGA 2", price: 12.57, rating: 4.5, url: 'a', imageUrls: [defaultUrl,'a','b']), + // Product(id : '1', name: "USB C to VGA 2", price: 12.57, rating: 4.2, url: 'a', imageUrls: [defaultUrl,'a','b']), + // Product(id : '1', name: "USB C to VGA 2", price: 12.57, rating: 4.7, url: 'a', imageUrls: [defaultUrl,'a','b']), + // Product(id : '1', name: "USB C to VGA 2", price: 12.57, rating: 4.8, url: 'a', imageUrls: [defaultUrl,'a','b']) + // ]; + + var client = ApiClient(); + + late Future _productsFuture; + late List _products; + + @override + void initState(){ + super.initState(); + _productsFuture = _fetchProducts(); + } + + Future _fetchProducts() async { + const String productsPageFromPersonalWishlistQuery = r''' + query ProductsPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) { + productsPageFromPersonalWishlist( + wishlistId: $wishlistId, + pageNumber: $pageNumber, + pageSize: $pageSize + ) { + items { + id + url + name + rating + price + imagesUrls + } + } +}'''; + + QueryOptions queryOptions = QueryOptions( + document: gql(productsPageFromPersonalWishlistQuery), + variables: const { + 'wishlistId': "657310c6892da98a23091bdf", + 'pageNumber': 1, + 'pageSize': 10, + }); + + var result = await client.query(queryOptions); + print(result); + + _products = List>.from( + result?['productsPageFromPersonalWishlist']['items']) + .map((e) => Product.fromJson(e)) + .toList(); + + return; + } + + @override + Widget build(BuildContext context){ + return FutureBuilder( + future: _productsFuture, + builder: (context, snapshot) { + if (snapshot.hasError) { + return Center( + child: Text('Error: ${snapshot.error}'), + ); + } else if (snapshot.connectionState == ConnectionState.done) { + // Data loaded successfully, display the widget + return Scaffold( + appBar: AppBar( + title: Text("Cart"), + centerTitle: true, + //titleTextStyle: TextStyle(color: Colors.black), + //backgroundColor: , + leading: IconButton( + icon: Icon(Icons.arrow_back), + onPressed: () { + print('Back button pressed'); + }, + ), + ), + body: ListView.builder( + padding: EdgeInsets.symmetric(vertical: 30), + itemCount: _products.length, + itemBuilder: (context, index){ + return CartItem(product: _products[index]); + } + ), + backgroundColor: Colors.white, + ); + }; + + return Center( + child: CircularProgressIndicator(), + ); + } + ); + // return Scaffold( + // appBar: AppBar( + // title: Text("Cart"), + // centerTitle: true, + // //titleTextStyle: TextStyle(color: Colors.black), + // //backgroundColor: , + // leading: IconButton( + // icon: Icon(Icons.arrow_back), + // onPressed: () { + // print('Back button pressed'); + // }, + // ), + // ), + // body: ListView.builder( + // padding: EdgeInsets.symmetric(vertical: 30), + // itemCount: _products.length, + // itemBuilder: (context, index){ + // return CartItem(product: _products[index]); + // } + // ), + // backgroundColor: Colors.white, + // ); + } +} + +class CartItem extends StatelessWidget{ + CartItem({ + super.key, + required Product product, +}) : _product = product; + + final Product _product; + + + Widget _buildRatingStar(int index) { + int whole = _product.rating.floor().toInt(); + double fractional = _product.rating - whole; + + if (index < whole) { + return Icon(Icons.star, color: Colors.yellow[600], size: 20); + } + if (fractional >= 0.25 && fractional <= 0.75) { + return Icon(Icons.star_half, color: Colors.yellow[600], size: 20); + } + if (fractional > 0.75) { + return Icon(Icons.star, color: Colors.yellow[600], size: 20); + }else { + return Icon(Icons.star_border, color: Colors.grey, size: 20); + } + } + + List _buildRatingStars() { + List stars = []; + for (int i = 0; i < 5; i++) { + stars.add(_buildRatingStar(i)); + } + return stars; + } + + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + height: 140, + margin: EdgeInsets.all(10), + padding: EdgeInsets.all(10), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.all(Radius.circular(10)), + boxShadow: [ + BoxShadow( + color: Colors.grey.withOpacity(0.5), + spreadRadius: 2, + blurRadius: 2, + offset: Offset(1, 2), + ) + ] + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Container( + width: 100, + alignment: Alignment.center, + child: Image(image: NetworkImage(_product.imageUrls[0]),), + ), + SizedBox(width: 20), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + _product.name, + style: const TextStyle(fontSize: 13), + overflow: TextOverflow.ellipsis, + maxLines: 3, + ), + Row( + children: [ + Row( + children: [ + Text(_product.rating.toStringAsFixed(1), style: TextStyle(fontSize: 14)) + ] + _buildRatingStars(), + ), + Text("\$" + _product.price.toStringAsFixed(2), style: TextStyle(fontSize: 14)), + ], + mainAxisAlignment: MainAxisAlignment.spaceBetween, + ), + Container( + width: double.infinity, + height: 35, + child: ElevatedButton.icon( + onPressed: ()=>{}, + style: ElevatedButton.styleFrom( + backgroundColor: Colors.blue,// Блакитний колір фону кнопки + padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6), + ), + icon: SvgPicture.asset("../assets/icons/amazon.svg", height: 15), + label: Text(""), + ), + ) + + ], + ) + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/pubspec.lock b/pubspec.lock index ccd3ceb..19c09c9 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -53,10 +53,10 @@ packages: dependency: transitive description: name: connectivity_plus - sha256: b502a681ba415272ecc41400bd04fe543ed1a62632137dc84d25a91e7746f55f + sha256: "224a77051d52a11fbad53dd57827594d3bd24f945af28bd70bab376d68d437f0" url: "https://pub.dev" source: hosted - version: "5.0.1" + version: "5.0.2" connectivity_plus_platform_interface: dependency: transitive description: @@ -85,10 +85,10 @@ packages: dependency: transitive description: name: dbus - sha256: "6f07cba3f7b3448d42d015bfd3d53fe12e5b36da2423f23838efc1d5fb31a263" + sha256: "365c771ac3b0e58845f39ec6deebc76e3276aa9922b0cc60840712094d9047ac" url: "https://pub.dev" source: hosted - version: "0.7.8" + version: "0.7.10" fake_async: dependency: transitive description: @@ -134,6 +134,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.0.3" + flutter_spinkit: + dependency: "direct main" + description: + name: flutter_spinkit + sha256: b39c753e909d4796906c5696a14daf33639a76e017136c8d82bf3e620ce5bb8e + url: "https://pub.dev" + source: hosted + version: "5.2.0" flutter_svg: dependency: "direct main" description: @@ -156,50 +164,50 @@ packages: dependency: transitive description: name: gql - sha256: e5225e3be4d7eb4027406ab07cb68ad3a089deb3f7f6dc46edbdec78f2e5549f + sha256: aa3e0be4548353007b6e6fd24fcad0ce8c1179f9cb2ae5239d392fddb84a5ce5 url: "https://pub.dev" source: hosted - version: "1.0.1-alpha+1696717343881" + version: "1.0.1-alpha+1700868214564" gql_dedupe_link: dependency: transitive description: name: gql_dedupe_link - sha256: "79625bc8029755ce6b26483adf0255c6b6114acc56e7ef81469a99f1ce2296db" + sha256: e97e3f9490add43ba96cf5cc02d9d10a3723965c0bcc7bb1e04ef4f2e7a31a00 url: "https://pub.dev" source: hosted - version: "2.0.4-alpha+1696717344020" + version: "2.0.4-alpha+1700868214643" gql_error_link: dependency: transitive description: name: gql_error_link - sha256: bfdb543137da89448cc5d003fd029c2e8718931d39d4a7dedb16f9169862fbb9 + sha256: "93901458f3c050e33386dedb0ca7173e08cebd7078e4e0deca4bf23ab7a71f63" url: "https://pub.dev" source: hosted - version: "1.0.0" + version: "1.0.0+1" gql_exec: dependency: transitive description: name: gql_exec - sha256: da419a3ebaae7672ed662c42d754ffba996347af7fe0ca031f1dd699334994d8 + sha256: "394944626fae900f1d34343ecf2d62e44eb984826189c8979d305f0ae5846e38" url: "https://pub.dev" source: hosted - version: "1.0.1-alpha+1696717343896" + version: "1.1.1-alpha+1699813812660" gql_http_link: dependency: transitive description: name: gql_http_link - sha256: "0789d397d46ce274942fcc73e18a080cd2584296dadc33d8ae53d0666d7fe981" + sha256: "1f922eed1b7078fdbfd602187663026f9f659fe9a9499e2207b5d5e01617f658" url: "https://pub.dev" source: hosted - version: "1.0.1" + version: "1.0.1+1" gql_link: dependency: transitive description: name: gql_link - sha256: bcbb09ae8b200f413aa2d21fbf6ce4c4ac1ac443e81c612f29ef1587f4c84122 + sha256: "48dbf63b4831d800a2ce9675c9fecea3c9f2801de92072c7644a4bc52aa26c13" url: "https://pub.dev" source: hosted - version: "1.0.1-alpha+1696717343909" + version: "1.0.1-alpha+1700868214578" gql_transform_link: dependency: transitive description: @@ -272,6 +280,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.1.1" + logger: + dependency: "direct main" + description: + name: logger + sha256: "6bbb9d6f7056729537a4309bda2e74e18e5d9f14302489cc1e93f33b3fe32cac" + url: "https://pub.dev" + source: hosted + version: "2.0.2+1" matcher: dependency: transitive description: @@ -396,10 +412,10 @@ packages: dependency: transitive description: name: plugin_platform_interface - sha256: da3fdfeccc4d4ff2da8f8c556704c08f912542c5fb3cf2233ed75372384a034d + sha256: f4f88d4a900933e7267e2b353594774fc0d07fb072b47eedcd5b54e1ea3269f8 url: "https://pub.dev" source: hosted - version: "2.1.6" + version: "2.1.7" rxdart: dependency: transitive description: @@ -585,10 +601,10 @@ packages: dependency: transitive description: name: win32 - sha256: "350a11abd2d1d97e0cc7a28a81b781c08002aa2864d9e3f192ca0ffa18b06ed3" + sha256: b0f37db61ba2f2e9b7a78a1caece0052564d1bc70668156cf3a29d676fe4e574 url: "https://pub.dev" source: hosted - version: "5.0.9" + version: "5.1.1" xdg_directories: dependency: transitive description: