Bazaar - Create UI for main page of Bazaar (#1224)

* first commit of Bazaar main page

* added translation

* added textColor for highlight and neubeileu, highlight on the top

* deleted comment

* changed communityChoose to more informal format, and moved required argument on top

* deleted single_business model

* changed BazaarPage to BazaarMain

* @JsonValue to snake_case

* deleted CustomElevatedButton()

* Try fix Bazaar( overflow errors) (#1263)

* try fix 01

* Test on iPhone 14 pro max

* Tested on Pizex 4

* changed icon

---------

Co-authored-by: Eldiiar Almazbek <76556278+Eldar2021@users.noreply.github.com>

app/lib/models/bazaar/businesses.dart

@@ -0,0 +1,93 @@
+import 'package:encointer_wallet/page-encointer/new_bazaar/widgets/dropdown_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:json_annotation/json_annotation.dart';
+
+part 'businesses.g.dart';
+
+@JsonSerializable()
+class Businesses {
+  const Businesses({
+    required this.name,
+    required this.description,
+    required this.category,
+    required this.photo,
+    this.status,
+  });
+  factory Businesses.fromJson(Map<String, dynamic> json) => _$BusinessesFromJson(json);
+  Map<String, dynamic> toJson() => _$BusinessesToJson(this);
+
+  final String name;
+  final String description;
+  final Category category;
+  final String photo;
+  final Status? status;
+  Color get statusColor {
+    switch (status) {
+      case Status.highlight:
+        return const Color(0xFFE8FBFF);
+      case Status.neuBeiLeu:
+        return Colors.lightGreen.shade100;
+      // ignore: no_default_cases
+      default:
+        return const Color(0xFFf4f7f8);
+    }
+  }
+}
+
+enum Status {
+  @JsonValue('highlight')
+  highlight('Highlight', Color(0xFF00A3FF)),
+  @JsonValue('neu_bei_leu')
+  neuBeiLeu('Neu bei Leu', Color(0xFF00BA77));
+
+  const Status(
+    this.name,
+    this.textColor,
+  );
+  final String name;
+  final Color textColor;
+
+  TextStyle get textStyle {
+    return TextStyle(color: textColor);
+  }
+}
+
+const businessesMockData = {
+  'businesses': [
+    {
+      'name': 'Yoga-Kurse mit Hatha Lisa',
+      'description': 'Nutze deine Leu, um deinem Körper und Geist etwas Gutes zu tun. ...',
+      'category': 'body_soul',
+      'photo': 'https://github.com/SourbaevaJanaraJ/lock_screen/blob/master/assets/hatha-lisa.png?raw=true',
+      'status': 'highlight'
+    },
+    {
+      'name': 'Hardi – Kafi am Tag, Kultur am Abend und zwischen ...',
+      'description': 'Herzhaft unkompliziert empfängt das Hardi seine Gäste im ...',
+      'category': 'food_beverage_store',
+      'photo': 'https://github.com/SourbaevaJanaraJ/lock_screen/blob/master/assets/hatha-lisa-02.png?raw=true',
+      'status': 'highlight'
+    },
+    {
+      'name': 'KAOZ',
+      'description': 'Wir sind KAOZ. Das heisst: kreativ, authentisch, optimistisch und ...',
+      'category': 'fashion_clothing',
+      'photo': 'https://github.com/SourbaevaJanaraJ/lock_screen/blob/master/assets/hatha-lisa-02%20(1).png?raw=true'
+    },
+    {
+      'name': 'GRRRR',
+      'description': 'Papierware, Zines, Bücher, Zeichnungen aus Züri und anders...',
+      'category': 'art_music',
+      'photo':
+          'https://github.com/SourbaevaJanaraJ/lock_screen/blob/master/assets/hatha-lisa-02%20(1)%203.png?raw=true',
+      'status': 'neu_bei_leu'
+    },
+    {
+      'name': 'Sørenbrød',
+      'description': 'Der Künstler Søren Berner (geb. 1977 in Dänemark) begann 1999, als er ...',
+      'category': 'food_beverage_store',
+      'photo': 'https://github.com/SourbaevaJanaraJ/lock_screen/blob/master/assets/sorenbrod.png?raw=true',
+      'status': 'neu_bei_leu'
+    }
+  ]
+};

app/lib/page-encointer/bazaar/0_main/bazaar_main.dart

@@ -1,57 +1,65 @@
-import 'package:encointer_wallet/gen/assets.gen.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
-import 'package:encointer_wallet/page-encointer/bazaar/0_main/bazaar_main_state.dart';
-import 'package:encointer_wallet/page-encointer/bazaar/0_main/bazaar_menu.dart';
-import 'package:encointer_wallet/page-encointer/bazaar/0_main/bazaar_tab_bar.dart';
-import 'package:encointer_wallet/page-encointer/bazaar/1_home/home.dart';
-import 'package:encointer_wallet/page-encointer/bazaar/2_offerings/offerings.dart';
-import 'package:encointer_wallet/page-encointer/bazaar/3_businesses/businesses.dart';
-import 'package:encointer_wallet/page-encointer/bazaar/4_favorites/favorites.dart';
+import 'package:encointer_wallet/theme/custom/extension/theme_extension.dart';
+import 'package:encointer_wallet/page-encointer/new_bazaar/logic/businesses_store.dart';
+import 'package:encointer_wallet/page-encointer/new_bazaar/view/businesses_view.dart';
+import 'package:encointer_wallet/page-encointer/new_bazaar/widgets/dropdown_widget.dart';
 import 'package:encointer_wallet/utils/translations/index.dart';
 
-class BazaarMain extends StatelessWidget {
-  const BazaarMain({super.key});
-
+class BazaarPage extends StatelessWidget {
+  const BazaarPage({super.key});
   static const String route = '/bazaar';
 
   @override
-  Widget build(BuildContext context) => Provider<BazaarMainState>(
-        create: (_) => BazaarMainState(),
-        child: DefaultTabController(
-          length: bazaarTabBar.length,
-          child: Scaffold(
-            appBar: AppBar(
-              title: Text(I18n.of(context)!.translationsForLocale().bazaar.bazaarTitle),
-              centerTitle: true,
-              // leading: IconButton(icon: Image.asset('assets/images/assets/ert.png'), onPressed: () => _chooseCommunity()), // TODO
-              leading: IconButton(icon: Assets.images.assets.ert.image(), onPressed: () {}),
-              bottom: TabBar(
-                tabs: <Widget>[
-                  const Tab(icon: Icon(Icons.home), text: 'Home'),
-                  Tab(
-                      icon: const Icon(Icons.local_offer),
-                      text: I18n.of(context)!.translationsForLocale().bazaar.offerings),
-                  Tab(
-                      icon: const Icon(Icons.business),
-                      text: I18n.of(context)!.translationsForLocale().bazaar.businesses),
-                  Tab(
-                      icon: const Icon(Icons.favorite, color: Colors.pink),
-                      text: I18n.of(context)!.translationsForLocale().bazaar.favorites),
-                ],
-              ),
-            ),
-            endDrawer: const BazaarMenu(),
-            body: TabBarView(
+  Widget build(BuildContext context) {
+    final dic = I18n.of(context)!.translationsForLocale();
+    final textTheme = Theme.of(context).textTheme;
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(
+          dic.bazaar.acceptancePoints,
+          style: textTheme.displaySmall!.copyWith(color: context.colorScheme.secondary),
+        ),
+        actions: [
+          IconButton(
+            onPressed: () {},
+            icon: const Icon(Icons.menu),
+          ),
+        ],
+        bottom: PreferredSize(
+          preferredSize: const Size.fromHeight(50),
+          child: Padding(
+            padding: const EdgeInsets.all(5),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                const Home(),
-                Offerings(),
-                Businesses(),
-                Favorites(),
+                Text(
+                  dic.bazaar.categories,
+                  style: textTheme.bodySmall,
+                ),
+                const SizedBox(
+                  width: 10,
+                ),
+                const DropdownWidget(),
               ],
             ),
           ),
         ),
-      );
+      ),
+      body: const BusinessesView(),
+    );
+  }
+}
+
+class BazaarMain extends StatelessWidget {
+  const BazaarMain({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Provider(
+      create: (context) => BusinessesStore()..getBusinesses(),
+      child: const BazaarPage(),
+    );
+  }
 }

app/lib/page-encointer/new_bazaar/logic/businesses_store.dart

@@ -0,0 +1,36 @@
+import 'package:mobx/mobx.dart';
+
+import 'package:encointer_wallet/page-encointer/new_bazaar/widgets/dropdown_widget.dart';
+import 'package:encointer_wallet/utils/fetch_status.dart';
+import 'package:encointer_wallet/models/bazaar/businesses.dart';
+
+part 'businesses_store.g.dart';
+
+// ignore: library_private_types_in_public_api
+class BusinessesStore = _BusinessesStoreBase with _$BusinessesStore;
+
+abstract class _BusinessesStoreBase with Store {
+  @observable
+  List<Businesses>? businesses;
+
+  @observable
+  FetchStatus fetchStatus = FetchStatus.loading;
+
+  @action
+  Future<void> getBusinesses({Category category = Category.all}) async {
+    fetchStatus = FetchStatus.loading;
+    await Future<void>.delayed(const Duration(seconds: 1));
+    final data = businessesMockData['businesses'];
+    final items = data!.map(Businesses.fromJson).toList();
+    if (category != Category.all) items.removeWhere((element) => element.category != category);
+    items.sort((a, b) {
+      if (a.status == Status.highlight && b.status == Status.neuBeiLeu) return -1;
+      if (a.status == Status.neuBeiLeu && b.status == Status.highlight) return 1;
+      if (a.status == null && b.status == Status.highlight) return 1;
+      if (a.status == Status.highlight && b.status == null) return -1;
+      return 0;
+    });
+    businesses = items;
+    fetchStatus = FetchStatus.success;
+  }
+}

app/lib/page-encointer/new_bazaar/view/businesses_view.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
+import 'package:provider/provider.dart';
+
+import 'package:encointer_wallet/common/components/error/error_view.dart';
+import 'package:encointer_wallet/common/components/loading/centered_activity_indicator.dart';
+import 'package:encointer_wallet/models/bazaar/businesses.dart';
+import 'package:encointer_wallet/page-encointer/new_bazaar/logic/businesses_store.dart';
+import 'package:encointer_wallet/page-encointer/new_bazaar/widgets/businesses_card.dart';
+import 'package:encointer_wallet/utils/fetch_status.dart';
+
+class BusinessesView extends StatelessWidget {
+  const BusinessesView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final store = context.watch<BusinessesStore>();
+
+    return Observer(builder: (_) {
+      switch (store.fetchStatus) {
+        case FetchStatus.loading:
+          return const CenteredActivityIndicator();
+        case FetchStatus.success:
+          return BusinessesList(businesses: store.businesses!);
+        case FetchStatus.error:
+          return const ErrorView();
+      }
+    });
+  }
+}
+
+class BusinessesList extends StatelessWidget {
+  const BusinessesList({super.key, required this.businesses});
+
+  final List<Businesses> businesses;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      padding: const EdgeInsets.fromLTRB(14, 20, 14, 30),
+      itemCount: businesses.length,
+      itemBuilder: (BuildContext context, int index) {
+        final business = businesses[index];
+        return BusinessesCard(businesses: business);
+      },
+    );
+  }
+}