Feat: order info page

lib/components/history_item_card.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
+import 'package:gymlink_module_web/pages/order_info.dart';
+import 'package:gymlink_module_web/tools/routes.dart';
 
 enum OrderStatus { created, inProgress, completed, canceled }
 
@@ -15,14 +17,12 @@ class HistoryItemCard extends StatelessWidget {
   final String cost;
   final String date;
   final Image image;
-  final OrderStatus status;
 
   const HistoryItemCard({
     super.key,
     required this.id,
     required this.cost,
     required this.date,
-    required this.status,
     required this.image,
   });
 
@@ -38,38 +38,42 @@ class HistoryItemCard extends StatelessWidget {
           minWidth: 600,
           maxWidth: 800,
         ),
-        child: Card(
+        child: GestureDetector(
-          elevation: 4,
+          onTap: () {
-          color: Theme.of(context).scaffoldBackgroundColor,
+            Navigator.of(context).push(
-          shape: RoundedRectangleBorder(
+                CustomPageRoute(builder: (context) => OrderInfoPage(id: id)));
-            borderRadius: BorderRadius.circular(30),
+          },
-          ),
+          child: Card(
-          child: Padding(
+            elevation: 4,
-            padding: const EdgeInsetsDirectional.symmetric(horizontal: 20),
+            color: Theme.of(context).scaffoldBackgroundColor,
-            child: Row(
+            shape: RoundedRectangleBorder(
-              mainAxisAlignment: MainAxisAlignment.start,
+              borderRadius: BorderRadius.circular(30),
-              crossAxisAlignment: CrossAxisAlignment.center,
+            ),
-              children: [
+            child: Padding(
-                Row(
+              padding: const EdgeInsetsDirectional.symmetric(horizontal: 20),
-                  crossAxisAlignment: CrossAxisAlignment.center,
+              child: Row(
-                  children: [
+                mainAxisAlignment: MainAxisAlignment.start,
-                    image,
+                crossAxisAlignment: CrossAxisAlignment.center,
-                    const SizedBox(width: 20),
+                children: [
-                    Column(
+                  Row(
-                      mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.center,
-                      crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
-                      children: [
+                      image,
-                        MarkdownBody(
+                      const SizedBox(width: 20),
-                          data: '### Заказ **№$id** от $date',
+                      Column(
-                        ),
+                        mainAxisSize: MainAxisSize.min,
-                        MarkdownBody(
+                        crossAxisAlignment: CrossAxisAlignment.start,
-                            data: 'Статус: **${orderStatusMap[status]}**'),
+                        children: [
-                        MarkdownBody(data: 'Сумма: **$cost руб.**'),
+                          MarkdownBody(
-                      ],
+                            data: '### Заказ **№$id** от $date',
-                    )
+                          ),
-                  ],
+                          MarkdownBody(data: 'Сумма: **$cost руб.**'),
-                ),
+                        ],
-              ],
+                      )
+                    ],
+                  ),
+                ],
+              ),
             ),
           ),
         ),

lib/components/order_detail_item_card.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+
+class OrderDetailCardItemCard extends StatelessWidget {
+  final String name;
+  final int count;
+  final double price;
+  final Widget image;
+  const OrderDetailCardItemCard(
+      {super.key,
+      required this.image,
+      required this.name,
+      required this.count,
+      required this.price});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding:
+          const EdgeInsetsDirectional.symmetric(horizontal: 10, vertical: 10),
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(minHeight: 130),
+        child: Card(
+          elevation: 4,
+          color: Theme.of(context).scaffoldBackgroundColor,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(30),
+          ),
+          child: Padding(
+            padding: const EdgeInsetsDirectional.symmetric(horizontal: 20),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Row(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    image,
+                    const SizedBox(width: 20),
+                    Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        MarkdownBody(data: '# $name'),
+                        Text(
+                            '${price.toStringAsFixed(2)} руб. x $count = ${(price * count).toStringAsFixed(2)} руб.'),
+                      ],
+                    )
+                  ],
+                ),
+                MarkdownBody(data: '# X$count')
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/interfaces/items.dart

@@ -148,3 +148,156 @@ class GymCategory {
         "name": name,
       };
 }
+
+class GymHistoryItem {
+  final String id;
+  final String date;
+  final String sum;
+  final String photo;
+
+  GymHistoryItem({
+    required this.id,
+    required this.date,
+    required this.sum,
+    required this.photo,
+  });
+
+  factory GymHistoryItem.fromRawJson(String str) =>
+      GymHistoryItem.fromJson(json.decode(str));
+
+  String toRawJson() => json.encode(toJson());
+
+  factory GymHistoryItem.fromJson(Map<String, dynamic> json) => GymHistoryItem(
+        id: json["id"],
+        date: json["date"],
+        sum: json["sum"],
+        photo: json["photo"],
+      );
+
+  Map<String, dynamic> toJson() => {
+        "id": id,
+        "date": date,
+        "sum": sum,
+        "photo": photo,
+      };
+}
+
+class GymHistoryItemDetail {
+  final String id;
+  final String date;
+  final String sum;
+  final String payUrl;
+  final String receiver;
+  final String email;
+  final String address;
+  final List<GymHistoryItemDetailProvider> providers;
+
+  GymHistoryItemDetail({
+    required this.id,
+    required this.date,
+    required this.sum,
+    required this.payUrl,
+    required this.providers,
+    required this.receiver,
+    required this.email,
+    required this.address,
+  });
+
+  factory GymHistoryItemDetail.fromRawJson(String str) =>
+      GymHistoryItemDetail.fromJson(json.decode(str));
+
+  String toRawJson() => json.encode(toJson());
+
+  factory GymHistoryItemDetail.fromJson(Map<String, dynamic> json) =>
+      GymHistoryItemDetail(
+        id: json["id"],
+        date: json["date"],
+        sum: json["sum"],
+        receiver: json["receiver"],
+        email: json["email"],
+        address: json["address"],
+        payUrl: json["pay_url"],
+        providers: List<GymHistoryItemDetailProvider>.from(json["providers"]
+            .map((x) => GymHistoryItemDetailProvider.fromJson(x))),
+      );
+
+  Map<String, dynamic> toJson() => {
+        "id": id,
+        "date": date,
+        "sum": sum,
+        "pay_url": payUrl,
+        "providers": List<dynamic>.from(providers.map((x) => x.toJson())),
+        "receiver": receiver,
+        "email": email,
+        "address": address,
+      };
+}
+
+class GymHistoryItemDetailProvider {
+  final String id;
+  final String name;
+  final String status;
+  final List<GymHistoryItemDetailItem> items;
+
+  GymHistoryItemDetailProvider({
+    required this.id,
+    required this.name,
+    required this.status,
+    required this.items,
+  });
+
+  factory GymHistoryItemDetailProvider.fromRawJson(String str) =>
+      GymHistoryItemDetailProvider.fromJson(json.decode(str));
+
+  String toRawJson() => json.encode(toJson());
+
+  factory GymHistoryItemDetailProvider.fromJson(Map<String, dynamic> json) =>
+      GymHistoryItemDetailProvider(
+        id: json["id"],
+        name: json["name"],
+        status: json["status"],
+        items: List<GymHistoryItemDetailItem>.from(
+            json["items"].map((x) => GymHistoryItemDetailItem.fromJson(x))),
+      );
+
+  Map<String, dynamic> toJson() => {
+        "id": id,
+        "name": name,
+        "status": status,
+        "items": List<dynamic>.from(items.map((x) => x.toJson())),
+      };
+}
+
+class GymHistoryItemDetailItem {
+  final String photo;
+  final String id;
+  final int count;
+  final String price;
+
+  GymHistoryItemDetailItem({
+    required this.photo,
+    required this.id,
+    required this.count,
+    required this.price,
+  });
+
+  factory GymHistoryItemDetailItem.fromRawJson(String str) =>
+      GymHistoryItemDetailItem.fromJson(json.decode(str));
+
+  String toRawJson() => json.encode(toJson());
+
+  factory GymHistoryItemDetailItem.fromJson(Map<String, dynamic> json) =>
+      GymHistoryItemDetailItem(
+        photo: json["photo"],
+        id: json["id"],
+        count: json["count"],
+        price: json["price"],
+      );
+
+  Map<String, dynamic> toJson() => {
+        "photo": photo,
+        "id": id,
+        "count": count,
+        "price": price,
+      };
+}

lib/pages/order_history.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:gymlink_module_web/components/app_bar.dart';
 import 'package:gymlink_module_web/components/heading.dart';
 import 'package:gymlink_module_web/components/history_item_card.dart';
+import 'package:gymlink_module_web/interfaces/items.dart';
 import 'package:gymlink_module_web/tools/relative.dart';
 import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
 
@@ -45,13 +46,16 @@ class HistoryPage extends StatefulWidget {
 }
 
 class _HistoryPageState extends State<HistoryPage> {
-  List<Map<String, String>> my_orders = [];
+  List<GymHistoryItem> my_orders = [];
   late Timer _updateTimer;
 
   @override
   void initState() {
     super.initState();
-    my_orders = orders;
+    my_orders = [
+      GymHistoryItem(
+          id: '123', date: '01.01.1970', sum: '120', photo: 'product.png')
+    ];
     ordersRefresh();
   }
 
@@ -63,12 +67,8 @@ class _HistoryPageState extends State<HistoryPage> {
     await Future.delayed(const Duration(milliseconds: 1000));
     setState(() {
       my_orders.add(
-        {
+        GymHistoryItem(
-          "image": "product.png",
+            id: '123', date: '01.01.1970', sum: '120', photo: 'product.png'),
-          "price": "120",
-          "id": "666666",
-          "date": "11.09.2001"
-        },
       );
     });
   }
@@ -112,14 +112,13 @@ class _HistoryPageState extends State<HistoryPage> {
                             itemBuilder: (context, index) {
                               final item = my_orders[index];
                               return HistoryItemCard(
-                                id: item['id']!,
+                                id: item.id,
-                                cost: item['price']!,
+                                cost: item.sum,
-                                date: item['date']!,
+                                date: item.date,
                                 image: Image(
-                                  image: AssetImage('assets/${item['image']!}'),
+                                  image: AssetImage('assets/${item.photo}'),
                                   width: 50,
                                 ),
-                                status: OrderStatus.completed,
                               );
                             },
                           ),

lib/pages/order_info.dart

@@ -0,0 +1,219 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import 'package:gymlink_module_web/components/app_bar.dart';
+import 'package:gymlink_module_web/components/heading.dart';
+import 'package:gymlink_module_web/interfaces/items.dart';
+import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
+
+final GymHistoryItemDetail item = GymHistoryItemDetail.fromJson({
+  "id": "12345",
+  "date": "01.01.1970",
+  "sum": "45000",
+  "pay_url": "url",
+  "receiver": "Иванов Иван Иванович",
+  "email": "a@a.ru",
+  "address": "г. Москва, ул. Пушкина, д. 17",
+  "providers": [
+    {
+      "id": "123",
+      "name": "Поставщик 1",
+      "status": "Доставлен",
+      "items": [
+        {"photo": "url", "id": "123", "count": 2, "price": "15000"},
+        {"photo": "url", "id": "123", "count": 2, "price": "15000"}
+      ]
+    },
+    {
+      "id": "123",
+      "name": "Поставщик 1",
+      "status": "Доставляется",
+      "items": [
+        {"photo": "url", "id": "123", "count": 2, "price": "15000"}
+      ]
+    }
+  ]
+});
+
+//FIXME: Починить скролл
+class OrderInfoPage extends StatefulWidget {
+  final String id;
+  const OrderInfoPage({super.key, required this.id});
+
+  @override
+  State<StatefulWidget> createState() => _OrderInfoPageState();
+}
+
+class _OrderInfoPageState extends State<OrderInfoPage> {
+  GymHistoryItemDetail? detail;
+  final _scrollController = ScrollController();
+  @override
+  void initState() {
+    super.initState();
+    setState(() {
+      detail = item;
+    });
+    debugPrint("AAAAAAAAAAAA${detail?.toRawJson()}");
+  }
+
+  Future<void> _onRefresh() {
+    return Future.delayed(const Duration(milliseconds: 1000));
+  }
+
+  Widget _buildContent() {
+    return Column(
+      children: [
+        GymLinkHeader(title: "Заказ #${detail?.id} от ${detail?.date}"),
+        Expanded(
+            child: LazyLoadScrollView(
+                onEndOfPage: _onRefresh,
+                child: Scrollbar(
+                  controller: _scrollController,
+                  child: ListView(
+                    controller: _scrollController,
+                    children: [
+                      ListView.builder(
+                        itemCount: 3,
+                        physics: const NeverScrollableScrollPhysics(),
+                        shrinkWrap: true,
+                        itemBuilder: (context, index) {
+                          final provider = detail!.providers[0];
+                          return const Card(
+                            child: Text('test'),
+                          );
+                        },
+                      ),
+                      Expanded(
+                        child: Card(
+                          elevation: 4,
+                          child: Padding(
+                            padding: const EdgeInsetsDirectional.symmetric(
+                                horizontal: 10, vertical: 20),
+                            child: Column(
+                              mainAxisSize: MainAxisSize.min,
+                              children: [
+                                MarkdownBody(
+                                    data:
+                                        "### Адрес получателя: _${detail!.address}_"),
+                                Markdown(data: '### Почта: _${detail!.email}_'),
+                                // Markdown(
+                                //     data: '### ФИО: _${detail!.receiver}_'),
+                              ],
+                            ),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ))),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const GymLinkAppBar(),
+      body: detail == null
+          ? const Center(child: CircularProgressIndicator())
+          : _buildContent(),
+    );
+  }
+
+  // @override
+  // Widget build(BuildContext context) {
+  //   return Scaffold(
+  //     appBar: const GymLinkAppBar(),
+  //     body: detail == null
+  //         ? const Center(child: CircularProgressIndicator())
+  //         : Column(
+  //             mainAxisAlignment: MainAxisAlignment.start,
+  //             children: [
+  //               GymLinkHeader(title: "Заказ #${detail?.id} от ${detail?.date}"),
+  //               Expanded(
+  //                 child: RefreshIndicator(
+  //                   onRefresh: () => _onRefresh(),
+  //                   edgeOffset: 55,
+  //                   child: Scrollbar(
+  //                     controller: _scrollController,
+  //                     child: ListView(
+  //                       shrinkWrap: true,
+  //                       controller: _scrollController,
+  //                       children: [
+  //                         detail != null
+  //                             ? ListView.builder(
+  //                                 itemCount: (detail!.providers.length + 1),
+  //                                 shrinkWrap: true,
+  //                                 physics: const NeverScrollableScrollPhysics(),
+  //                                 itemBuilder: (context, index) {
+  //                                   final provider = detail!.providers[0];
+  //                                   return Card(
+  //                                     elevation: 3,
+  //                                     child: Column(
+  //                                       children: [
+  //                                         MarkdownBody(
+  //                                             data: '# ${provider.name}'),
+  //                                         MarkdownBody(
+  //                                             data:
+  //                                                 '## Статус: ${provider.status}'),
+  //                                         const MarkdownBody(
+  //                                             data: '### Состав:'),
+  //                                         for (final item in provider.items)
+  //                                           OrderDetailCardItemCard(
+  //                                             image: FutureBuilder(
+  //                                               future: precacheImage(
+  //                                                   const AssetImage(
+  //                                                       'assets/product.png'),
+  //                                                   context),
+  //                                               builder: (context, snapshot) {
+  //                                                 if (snapshot
+  //                                                         .connectionState ==
+  //                                                     ConnectionState.done) {
+  //                                                   return const Image(
+  //                                                     image: AssetImage(
+  //                                                         'assets/product.png'),
+  //                                                     width: 50,
+  //                                                   );
+  //                                                 } else {
+  //                                                   return const CircularProgressIndicator();
+  //                                                 }
+  //                                               },
+  //                                             ),
+  //                                             name: 'Протеин',
+  //                                             count: item.count,
+  //                                             price: double.parse(item.price),
+  //                                           ),
+  //                                       ],
+  //                                     ),
+  //                                   );
+  //                                 },
+  //                               )
+  //                             : const SizedBox.shrink(),
+  //                         Card(
+  //                           elevation: 4,
+  //                           child: Padding(
+  //                             padding: const EdgeInsetsDirectional.symmetric(
+  //                                 horizontal: 10, vertical: 20),
+  //                             child: Column(
+  //                               mainAxisSize: MainAxisSize.min,
+  //                               children: [
+  //                                 MarkdownBody(
+  //                                     data:
+  //                                         "### Адрес получателя: _${detail!.address}_"),
+  //                                 Markdown(
+  //                                     data: '### Почта: _${detail!.email}_'),
+  //                                 // Markdown(
+  //                                 //     data: '### ФИО: _${detail!.receiver}_'),
+  //                               ],
+  //                             ),
+  //                           ),
+  //                         ),
+  //                       ],
+  //                     ),
+  //                   ),
+  //                 ),
+  //               ),
+  //             ],
+  //           ),
+  //   );
+  // }
+}