From b6bb34e2d283625637dc92ec8dd6ea1c7e85be99 Mon Sep 17 00:00:00 2001 From: Lu Shueh Chou Date: Wed, 11 Sep 2024 15:40:31 +0800 Subject: [PATCH] feat: responsible width design (#211) - Breakpoints - Routing - showMenu v.s. showModalBottomSheet - AlertDialog v.s. Dialog.fullscreen --- .vscode/settings.json | 1 + assets/l10n/en/analysis.yaml | 3 +- assets/l10n/en/cashier.yaml | 4 +- assets/l10n/en/global.yaml | 12 + assets/l10n/en/menu.yaml | 5 +- assets/l10n/en/order.yaml | 23 +- assets/l10n/en/order_attribute.yaml | 14 +- assets/l10n/en/setting.yaml | 15 - assets/l10n/en/stock.yaml | 30 +- assets/l10n/zh/analysis.yaml | 1 + assets/l10n/zh/cashier.yaml | 2 +- assets/l10n/zh/global.yaml | 12 + assets/l10n/zh/menu.yaml | 4 +- assets/l10n/zh/order.yaml | 20 +- assets/l10n/zh/order_attribute.yaml | 8 +- assets/l10n/zh/setting.yaml | 12 - assets/l10n/zh/stock.yaml | 2 +- devtools_options.yaml | 3 + lib/{my_app.dart => app.dart} | 52 +- lib/components/bottom_sheet_actions.dart | 93 +- lib/components/dialog/confirm_dialog.dart | 4 +- lib/components/dialog/delete_dialog.dart | 8 +- lib/components/dialog/dialog_page.dart | 51 + lib/components/dialog/responsive_dialog.dart | 98 ++ lib/components/dialog/single_text_dialog.dart | 17 +- lib/components/dialog/slider_text_dialog.dart | 3 +- lib/components/item_loader.dart | 64 +- lib/components/linkify.dart | 10 +- lib/components/models/order_loader.dart | 9 +- lib/components/router_pop_scope.dart | 98 ++ lib/components/scaffold/item_modal.dart | 34 +- .../scaffold/reorderable_scaffold.dart | 99 +- .../scrollable_draggable_sheet.dart | 20 +- lib/components/sign_in_button.dart | 28 +- lib/components/slidable_item_list.dart | 59 +- .../slivers/sliver_image_app_bar.dart | 7 +- lib/components/style/buttons.dart | 15 +- lib/components/style/date_range_picker.dart | 53 +- lib/components/style/empty_body.dart | 2 +- lib/components/style/footer.dart | 27 + .../style/gradient_scroll_hint.dart | 31 + lib/components/style/image_holder.dart | 108 +- lib/components/style/info_popup.dart | 2 +- lib/components/style/pop_button.dart | 14 +- lib/components/style/route_buttons.dart | 96 ++ .../style/route_circular_button.dart | 60 - lib/components/style/single_row_warp.dart | 4 +- lib/components/style/slide_to_delete.dart | 2 +- lib/components/style/snackbar.dart | 1 + lib/components/style/text_divider.dart | 18 +- lib/components/tutorial.dart | 152 ++- lib/constants/constant.dart | 12 +- lib/constants/icons.dart | 28 +- lib/debug/debug_page.dart | 6 +- lib/helpers/breakpoint.dart | 93 ++ lib/l10n/app_en.arb | 102 +- lib/l10n/app_zh.arb | 74 +- lib/main.dart | 4 +- lib/routes.dart | 1032 ++++++++++------- lib/settings/order_outlook_setting.dart | 32 - .../order_product_axis_count_setting.dart | 24 - lib/settings/settings_provider.dart | 4 - lib/translator.dart | 13 +- lib/ui/analysis/analysis_view.dart | 229 ++-- lib/ui/analysis/history_page.dart | 49 +- lib/ui/analysis/widgets/chart_card_view.dart | 54 +- lib/ui/analysis/widgets/chart_modal.dart | 3 +- lib/ui/analysis/widgets/chart_range_page.dart | 145 ++- lib/ui/analysis/widgets/goals_card_view.dart | 184 +-- .../widgets/history_calendar_view.dart | 6 +- .../analysis/widgets/history_order_list.dart | 2 +- .../analysis/widgets/history_order_modal.dart | 58 +- lib/ui/analysis/widgets/reloadable_card.dart | 66 +- lib/ui/cashier/cashier_view.dart | 129 ++- lib/ui/cashier/changer_modal.dart | 144 +++ lib/ui/cashier/changer_page.dart | 86 -- lib/ui/cashier/surplus_page.dart | 72 +- .../cashier/widgets/changer_custom_view.dart | 121 +- .../widgets/changer_favorite_view.dart | 78 +- ...nit_list_view.dart => unit_list_tile.dart} | 21 +- lib/ui/home/elf_page.dart | 44 + lib/ui/home/feature_request_page.dart | 37 - lib/ui/home/features_page.dart | 252 ---- lib/ui/home/home_page.dart | 465 ++++++-- lib/ui/home/mobile_more_view.dart | 194 ++++ lib/ui/home/setting_view.dart | 298 ----- lib/ui/home/settings_page.dart | 228 ++++ lib/ui/image_gallery_page.dart | 195 ++-- lib/ui/menu/menu_page.dart | 217 ++-- lib/ui/menu/product_page.dart | 186 ++- lib/ui/menu/widgets/catalog_modal.dart | 4 +- lib/ui/menu/widgets/menu_catalog_list.dart | 52 +- lib/ui/menu/widgets/menu_product_list.dart | 52 +- .../widgets/product_ingredient_modal.dart | 6 +- .../menu/widgets/product_ingredient_view.dart | 32 +- lib/ui/menu/widgets/product_modal.dart | 12 +- .../menu/widgets/product_quantity_modal.dart | 10 +- lib/ui/order/cart/cart_actions.dart | 8 +- lib/ui/order/cart/cart_snapshot.dart | 4 +- .../checkout/checkout_attribute_view.dart | 15 +- .../checkout/checkout_cashier_calculator.dart | 142 +-- .../checkout/checkout_cashier_snapshot.dart | 61 +- .../checkout/stashed_order_list_view.dart | 6 +- lib/ui/order/order_checkout_page.dart | 327 ++++-- lib/ui/order/order_page.dart | 152 ++- .../order/widgets/draggable_sheet_view.dart | 31 +- lib/ui/order/widgets/order_actions.dart | 68 -- .../widgets/order_catalog_list_view.dart | 96 +- .../widgets/order_product_list_view.dart | 103 +- lib/ui/order/widgets/orientated_view.dart | 45 +- lib/ui/order_attr/order_attribute_page.dart | 81 +- .../widgets/order_attribute_modal.dart | 4 +- .../widgets/order_attribute_option_modal.dart | 7 +- ...te_list.dart => order_attribute_tile.dart} | 119 +- lib/ui/stock/quantities_page.dart | 52 + lib/ui/stock/quantity_page.dart | 45 - lib/ui/stock/replenishment_page.dart | 125 +- lib/ui/stock/stock_view.dart | 120 +- lib/ui/stock/widgets/replenishment_apply.dart | 58 +- lib/ui/stock/widgets/replenishment_modal.dart | 4 +- ...t.dart => stock_ingredient_list_tile.dart} | 88 +- .../stock/widgets/stock_ingredient_modal.dart | 65 +- .../stock_ingredient_restock_modal.dart | 12 +- lib/ui/stock/widgets/stock_quantity_list.dart | 55 +- .../stock/widgets/stock_quantity_modal.dart | 4 +- .../google_sheet/export_basic_view.dart | 13 +- .../google_sheet/export_order_view.dart | 108 +- .../google_sheet/import_basic_view.dart | 24 +- lib/ui/transit/google_sheet/sheet_namer.dart | 5 +- .../google_sheet/sheet_preview_page.dart | 55 +- .../google_sheet/spreadsheet_selector.dart | 2 +- .../transit/plain_text/export_order_view.dart | 56 +- lib/ui/transit/previews/preview_page.dart | 80 +- lib/ui/transit/transit_order_list.dart | 98 +- lib/ui/transit/transit_order_range.dart | 2 +- lib/ui/transit/transit_page.dart | 38 +- pubspec.lock | 15 +- pubspec.yaml | 8 +- test/{my_app_test.dart => app_test.dart} | 4 +- .../components/bottom_sheet_actions_test.dart | 4 +- test/components/slidable_item_list_test.dart | 9 +- test/components/tutorial_test.dart | 97 -- test/image_gallery_page_test.dart | 316 ++--- test/test_helpers/breakpoint_mocker.dart | 24 + test/ui/analysis/analysis_view_test.dart | 37 +- test/ui/analysis/history_page_test.dart | 35 +- .../widgets/chart_card_view_test.dart | 4 +- .../widgets/chart_range_page_test.dart | 124 +- .../widgets/goals_card_view_test.dart | 6 +- .../widgets/history_order_list_test.dart | 24 +- test/ui/cashier/cashier_view_test.dart | 4 +- test/ui/cashier/changer_modal_test.dart | 218 ++++ test/ui/cashier/changer_page_test.dart | 203 ---- test/ui/home/features_page_test.dart | 52 +- test/ui/home/home_page_test.dart | 275 +++-- test/ui/menu/catalog_view_test.dart | 23 +- test/ui/menu/menu_page_test.dart | 375 +++--- test/ui/menu/product_page_test.dart | 187 +-- test/ui/order/order_actions_test.dart | 4 +- test/ui/order/order_checkout_page_test.dart | 510 ++++---- test/ui/order/order_page_test.dart | 73 +- test/ui/order/stashed_order_test.dart | 2 +- .../order_attr/order_attribute_page_test.dart | 22 +- ...ge_test.dart => quantities_page_test.dart} | 28 +- test/ui/stock/replenishment_page_test.dart | 9 +- test/ui/stock/stock_view_test.dart | 8 +- .../google_sheet/export_basic_test.dart | 27 +- .../google_sheet/export_order_test.dart | 23 +- .../google_sheet/import_basic_test.dart | 113 +- .../google_sheet/select_spreadsheet_test.dart | 23 +- .../transit/plain_text/export_basic_test.dart | 19 +- test/ui/transit/transit_order_list_test.dart | 1 + test/ui/transit/transit_page_test.dart | 4 +- 173 files changed, 6785 insertions(+), 5168 deletions(-) create mode 100644 devtools_options.yaml rename lib/{my_app.dart => app.dart} (71%) create mode 100644 lib/components/dialog/dialog_page.dart create mode 100644 lib/components/dialog/responsive_dialog.dart create mode 100644 lib/components/router_pop_scope.dart create mode 100644 lib/components/style/footer.dart create mode 100644 lib/components/style/gradient_scroll_hint.dart create mode 100644 lib/components/style/route_buttons.dart delete mode 100644 lib/components/style/route_circular_button.dart create mode 100644 lib/helpers/breakpoint.dart delete mode 100644 lib/settings/order_outlook_setting.dart delete mode 100644 lib/settings/order_product_axis_count_setting.dart create mode 100644 lib/ui/cashier/changer_modal.dart delete mode 100644 lib/ui/cashier/changer_page.dart rename lib/ui/cashier/widgets/{unit_list_view.dart => unit_list_tile.dart} (78%) create mode 100644 lib/ui/home/elf_page.dart delete mode 100644 lib/ui/home/feature_request_page.dart delete mode 100644 lib/ui/home/features_page.dart create mode 100644 lib/ui/home/mobile_more_view.dart delete mode 100644 lib/ui/home/setting_view.dart create mode 100644 lib/ui/home/settings_page.dart delete mode 100644 lib/ui/order/widgets/order_actions.dart rename lib/ui/order_attr/widgets/{order_attribute_list.dart => order_attribute_tile.dart} (55%) create mode 100644 lib/ui/stock/quantities_page.dart delete mode 100644 lib/ui/stock/quantity_page.dart rename lib/ui/stock/widgets/{stock_ingredient_list.dart => stock_ingredient_list_tile.dart} (79%) rename test/{my_app_test.dart => app_test.dart} (93%) create mode 100644 test/test_helpers/breakpoint_mocker.dart create mode 100644 test/ui/cashier/changer_modal_test.dart delete mode 100644 test/ui/cashier/changer_page_test.dart rename test/ui/stock/{quantity_page_test.dart => quantities_page_test.dart} (88%) diff --git a/.vscode/settings.json b/.vscode/settings.json index 0b9bef3b..4e71d826 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,6 +9,7 @@ "firestore", "Formattable", "googleapis", + "Ingr", "Linkify", "loadmore", "LTRB", diff --git a/assets/l10n/en/analysis.yaml b/assets/l10n/en/analysis.yaml index 42b5bae6..3dfdf575 100644 --- a/assets/l10n/en/analysis.yaml +++ b/assets/l10n/en/analysis.yaml @@ -68,7 +68,7 @@ goals: title: Cost achievedRate: - |- - Profit Achievement + Profit Goal {rate} - rate: chart: @@ -76,6 +76,7 @@ chart: _title: $prefix: title create: Create Chart + update: Edit Chart reorder: Reorder Charts tutorial: title: Chart Analysis diff --git a/assets/l10n/en/cashier.yaml b/assets/l10n/en/cashier.yaml index 9e45a24c..6dfeb9e4 100644 --- a/assets/l10n/en/cashier.yaml +++ b/assets/l10n/en/cashier.yaml @@ -64,8 +64,8 @@ changer: label: Currency addBtn: Add Currency divider: - from: Withdraw from Cash Register - to: Exchange + from: Take + to: Exchange to surplus: title: Surplus button: Surplus diff --git a/assets/l10n/en/global.yaml b/assets/l10n/en/global.yaml index 246ec924..6617318c 100644 --- a/assets/l10n/en/global.yaml +++ b/assets/l10n/en/global.yaml @@ -25,6 +25,18 @@ searchCount: - Found {count} results - Total count displayed on the SearchScaffold. - count: {type: int, format: compact} +title: +- analysis: Stats + stock: Inventory + cashier: Cashier + settings: Settings + menu: Menu + transit: Data Transfer + orderAttributes: Customer Settings + stockQuantities: Quantities + elf: Suggestions + more: More + debug: Debug dialog: deletionTitle: - Delete Confirmation diff --git a/assets/l10n/en/menu.yaml b/assets/l10n/en/menu.yaml index 4e8042e2..1d7cc83b 100644 --- a/assets/l10n/en/menu.yaml +++ b/assets/l10n/en/menu.yaml @@ -73,6 +73,9 @@ product: emptyBody: |- "Products" are the basic units in the menu, such as: "Cheese Burger", "Cola" + notSelected: + - Please select a category first + - When not selecting a category, the product list will not be displayed. This message will be displayed in the product list title: create: Add Product update: Edit Product @@ -137,7 +140,7 @@ ingredient: quantity: title: create: Add Quantity - update: Edit Quantity + update: Edit meta: amount: - 'Amount: {amount}' diff --git a/assets/l10n/en/order.yaml b/assets/l10n/en/order.yaml index c5d497e4..65612e98 100644 --- a/assets/l10n/en/order.yaml +++ b/assets/l10n/en/order.yaml @@ -46,14 +46,12 @@ loader: catalogList: empty: No product categories set yet productList: - tutorial: - title: Start Ordering! - content: - - |- - Ordering through images is more convenient! - You can go to "Settings" > "[Items Per Row]({link})" to adjust - and allow text-only ordering here. - - link: + view: + helper: + - grid: Grid + list: List + - Product list display mode + noIngredient: No ingredients cart: action: bulkify: Bulk Actions @@ -82,15 +80,6 @@ cart: free: Free delete: Delete snapshot: - tutorial: - title: Cart - content: - - |- - To make selecting products more convenient, - we've placed the products you've ordered here. - If you need a layout that shows all information at once (suitable for large screens), - go to "Settings" > "[Ordering Layout]({link})" to adjust. - - link: empty: No items in cart meta: totalPrice: diff --git a/assets/l10n/en/order_attribute.yaml b/assets/l10n/en/order_attribute.yaml index 1d99581c..b433b5c0 100644 --- a/assets/l10n/en/order_attribute.yaml +++ b/assets/l10n/en/order_attribute.yaml @@ -13,7 +13,7 @@ headerInfo: - Customer Settings - Displayed on the upper rectangle in homepage tutorial: - title: Customer Settings + title: Create Your Customer Settings content: |- This is where you set customer information, such as dine-in, takeout, office worker, etc. This information helps us track who comes to consume and make better business strategies. @@ -69,19 +69,19 @@ name: option: title: create: Add Option - createWith: - - Add option for {name} - - name: update: Edit Option reorder: Reorder Options meta: default: Default + optionOf: + - option of {name} + - name: name: label: Option Name helper: |- - For example, possible options for age include: - - Under 20 - - 20 to 30 + For 'age', possible options are: + - ⇣ 20 + - 20 ⇢ 30 error: repeat: Name already exists mode: diff --git a/assets/l10n/en/setting.yaml b/assets/l10n/en/setting.yaml index 60fd282e..2c0a4264 100644 --- a/assets/l10n/en/setting.yaml +++ b/assets/l10n/en/setting.yaml @@ -29,17 +29,6 @@ theme: - name: language: title: Language -orderOutlook: - title: Ordering Outlook - name: - - slidingPanel: Sliding Panel - singleView: Classic Mode - - Appearance during ordering - - name: - tip: - - slidingPanel: Panel slides up during ordering, suitable for small-screen phones - singleView: All info displayed on a single screen, suitable for large-screen tablets - - name: checkoutWarning: title: Cash Registry Warnings name: @@ -55,10 +44,6 @@ checkoutWarning: onlyNotEnough: Show warning when cash registry not enough money. hideAll: Won't display any warnings during ordering. - name: -orderProductCount: - title: Products per Row during Ordering - hint: Set to "0" to display only text during ordering - minLabel: Text Only orderAwakening: title: - Keep Screen On During Ordering diff --git a/assets/l10n/en/stock.yaml b/assets/l10n/en/stock.yaml index 46830596..2929b455 100644 --- a/assets/l10n/en/stock.yaml +++ b/assets/l10n/en/stock.yaml @@ -73,47 +73,47 @@ ingredient: - Origin - The original amount before the restock replenishment: - button: Purchase + button: Replenish emptyBody: Purchasing helps you quickly adjust ingredient inventory title: - list: Purchase List - create: Add Purchase - update: Edit Purchase + list: Replenishment + create: Add Replenishment + update: Edit Replenishment meta: affect: - Affects {count} Ingredients - - Indicates in the purchase list how many ingredients are affected + - Indicates in the replenishment list how many ingredients are affected - count: {type: int} never: - - Never Purchased + - Never Replenished - The stock page displays the last replenishment time; if never replenished, this text is set apply: - button: Apply Purchase + preview: Preview confirm: button: Apply - title: Apply Purchase? + title: Apply Replenishment? column: - name: Name amount: Amount - value: hint: After apply, following ingredients will be adjusted tutorial: - title: Ingredient Purchases + title: Replenishment content: |- - Through purchases, you no longer need to set the inventory of each ingredient one by one. - Set up purchases now and adjust multiple ingredients at once! + Through Replenishment, you no longer need to set the inventory of each ingredient one by one. + Set up Replenishment now and adjust multiple ingredients at once! name: - label: Purchase Name - hint: e.g., Costco Purchase + label: Replenishment Name + hint: e.g., Costco Shopping error: - repeat: Purchase name already exists + repeat: Replenishment name already exists ingredients: divider: Ingredients helper: Click to set the quantity of different ingredients to be purchased ingredientAmount: hint: Set the amount to increase/decrease quantity: - title: Quantity + title: Quantities description: Half Sugar, Low Sugar, etc. _title: $prefix: title diff --git a/assets/l10n/zh/analysis.yaml b/assets/l10n/zh/analysis.yaml index f69c9cd7..149923a9 100644 --- a/assets/l10n/zh/analysis.yaml +++ b/assets/l10n/zh/analysis.yaml @@ -63,6 +63,7 @@ chart: _title: $prefix: title create: 新增圖表 + update: 編輯圖表 reorder: 排序圖表 tutorial: title: 圖表分析 diff --git a/assets/l10n/zh/cashier.yaml b/assets/l10n/zh/cashier.yaml index 8e34c155..9d34ba11 100644 --- a/assets/l10n/zh/cashier.yaml +++ b/assets/l10n/zh/cashier.yaml @@ -49,7 +49,7 @@ changer: label: 幣值 addBtn: 新增幣種 divider: - from: 從收銀機中拿出 + from: 拿 to: 換 surplus: title: 結餘 diff --git a/assets/l10n/zh/global.yaml b/assets/l10n/zh/global.yaml index 0d9b765e..578314f7 100644 --- a/assets/l10n/zh/global.yaml +++ b/assets/l10n/zh/global.yaml @@ -8,6 +8,18 @@ multiChoices: 可以選擇多種 totalCount: - other: 總共 {count} 項 searchCount: 搜尋到 {count} 個結果 +title: +- analysis: 分析 + stock: 庫存 + cashier: 收銀 + settings: 設定 + menu: 菜單 + transit: 資料轉移 + orderAttributes: 顧客設定 + stockQuantities: 份量 + elf: 建議 + more: 更多 + debug: Debug dialog: deletionTitle: 刪除確認通知 deletionContent: |- diff --git a/assets/l10n/zh/menu.yaml b/assets/l10n/zh/menu.yaml index 6de91419..5ac3d214 100644 --- a/assets/l10n/zh/menu.yaml +++ b/assets/l10n/zh/menu.yaml @@ -64,6 +64,8 @@ product: emptyBody: |- 「產品」是菜單裡的基本單位，例如： 「起司漢堡」、「可樂」 + notSelected: + - 請先選擇產品種類 title: create: 新增產品 update: 編輯產品 @@ -110,7 +112,7 @@ ingredient: quantity: title: create: 新增份量 - update: 編輯份量 + update: 編輯 meta: amount: 使用量：{amount} additionalPrice: 額外售價：{price} diff --git a/assets/l10n/zh/order.yaml b/assets/l10n/zh/order.yaml index c3267677..10c90297 100644 --- a/assets/l10n/zh/order.yaml +++ b/assets/l10n/zh/order.yaml @@ -33,14 +33,11 @@ loader: catalogList: empty: 尚未設定產品種類 productList: - tutorial: - title: 開始點餐！ - content: - - |- - 透過圖片點餐更方便！ - 可以至「設定」>「[每行顯示幾個產品]({link})」調整 - 讓這裡僅使用文字點餐。 - - link: + view: + helper: + - grid: 圖片 + list: 列表 + noIngredient: 無設定成分 cart: action: bulkify: 批量操作 @@ -69,13 +66,6 @@ cart: free: 招待 delete: 刪除 snapshot: - tutorial: - title: 購物車 - content: |- - 為了讓點選產品可以更方便， - 我們把點餐後的產品設定至於此面板。 - 如果需要一次顯示所有訊息的排版（適合大螢幕）， - 可以至「設定」>「[點餐的外觀]({link})」調整。 empty: 尚未點餐 meta: totalPrice: 總價：{price} diff --git a/assets/l10n/zh/order_attribute.yaml b/assets/l10n/zh/order_attribute.yaml index 26b21b17..b81fadca 100644 --- a/assets/l10n/zh/order_attribute.yaml +++ b/assets/l10n/zh/order_attribute.yaml @@ -11,7 +11,7 @@ emptyBody: |- 20-30歲、外帶、上班族。 headerInfo: 顧客設定 tutorial: - title: 顧客設定 + title: 建立屬於你的顧客設定 content: |- 這裡是用來設定顧客的資訊，例如：內用、外帶、上班族等。 這些資訊可以幫助我們統計哪些人來消費，進而做出更好的經營策略。 @@ -59,17 +59,17 @@ name: option: title: create: 新增選項 - createWith: 新增{name}的選項 update: 編輯選項 reorder: 排序選項 meta: default: 預設 + optionOf: '{name}的選項' name: label: 選項名稱 helper: |- 以年齡為例，可能的選項有： - - 20 歲以下 - - 20 到 30 歲 + - ⇣ 20 + - 20 ⇢ 30 error: repeat: 名稱不能重複 mode: diff --git a/assets/l10n/zh/setting.yaml b/assets/l10n/zh/setting.yaml index 7be2e0ca..bc7f05f4 100644 --- a/assets/l10n/zh/setting.yaml +++ b/assets/l10n/zh/setting.yaml @@ -21,14 +21,6 @@ theme: system: 跟隨系統 language: title: 語言 -orderOutlook: - title: 點餐的外觀 - name: - - slidingPanel: 酷炫面板 - singleView: 經典模式 - tip: - - slidingPanel: 點餐時下方會有可拉動的面板，內含點餐中的資訊，適合小螢幕的手機 - singleView: 所有資訊顯示在單一螢幕中，適合大螢幕的平板 checkoutWarning: title: 收銀機提示 name: @@ -41,10 +33,6 @@ checkoutWarning: 例如 5 塊錢不夠了，開始用 5 個 1 塊去找錢 onlyNotEnough: 當零錢不夠找的時候，顯示提示。 hideAll: 當點餐時，收銀機不會顯示任何提示 -orderProductCount: - title: 點餐時每行顯示幾個產品 - hint: 設定「零」則點餐時僅會以文字顯示 - minLabel: 純文字顯示 orderAwakening: title: 點餐時不關閉螢幕 description: 若取消，則會根據系統設定時間關閉螢幕 diff --git a/assets/l10n/zh/stock.yaml b/assets/l10n/zh/stock.yaml index f9f54dbd..85831e44 100644 --- a/assets/l10n/zh/stock.yaml +++ b/assets/l10n/zh/stock.yaml @@ -63,7 +63,7 @@ replenishment: affect: 會影響 {count} 項成分 never: 尚未補貨過 apply: - button: 套用採購 + preview: 預覽 confirm: button: 套用 title: 套用採購？ diff --git a/devtools_options.yaml b/devtools_options.yaml new file mode 100644 index 00000000..fa0b357c --- /dev/null +++ b/devtools_options.yaml @@ -0,0 +1,3 @@ +description: This file stores settings for Dart & Flutter DevTools. +documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states +extensions: diff --git a/lib/my_app.dart b/lib/app.dart similarity index 71% rename from lib/my_app.dart rename to lib/app.dart index 68d42a16..0ec3c427 100644 --- a/lib/my_app.dart +++ b/lib/app.dart @@ -4,8 +4,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_native_splash/flutter_native_splash.dart'; import 'package:go_router/go_router.dart'; -import 'package:intl/date_symbol_data_local.dart'; -import 'package:intl/intl.dart'; import 'constants/app_themes.dart'; import 'routes.dart'; @@ -14,54 +12,56 @@ import 'settings/settings_provider.dart'; import 'settings/theme_setting.dart'; import 'translator.dart'; -class MyApp extends StatelessWidget { +class App extends StatelessWidget { static final routeObserver = RouteObserver>(); + static ValueNotifier? routingConfig; + // singleton be avoid recreate after hot reload. - static final router = GoRouter( - initialLocation: Routes.base, - redirect: (context, state) { - return state.path?.startsWith(Routes.base) == false ? Routes.base : null; - }, - routes: [Routes.home], - // By default, go_router comes with default error screens for both - // MaterialApp and CupertinoApp as well as a default error screen in - // the case that none is used. - // onException: (context, state, route) => context.go('/pos'), - debugLogDiagnostics: kDebugMode, - observers: [ - FirebaseAnalyticsObserver(analytics: FirebaseAnalytics.instance), - routeObserver, - ], - ); + static RouterConfig? router; - const MyApp({super.key}); + const App({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { + final routes = Routes.getDesiredRoute(MediaQuery.sizeOf(context).width); + routingConfig ??= ValueNotifier(routes); + routingConfig!.value = routes; + router ??= GoRouter.routingConfig( + initialLocation: Routes.initLocation, + routingConfig: routingConfig!, + navigatorKey: Routes.rootNavigatorKey, + // By default, go_router comes with default error screens for both + // MaterialApp and CupertinoApp as well as a default error screen in + // the case that none is used. + // onException: (context, state, route) => context.go('/pos'), + debugLogDiagnostics: kDebugMode, + observers: [ + FirebaseAnalyticsObserver(analytics: FirebaseAnalytics.instance), + routeObserver, + ], + ); + // Glue the SettingsController to the MaterialApp. // // The AnimatedBuilder Widget listens to the SettingsController for changes. // Whenever the user updates their settings, the MaterialApp is rebuilt. return AnimatedBuilder( animation: SettingsProvider.instance, - builder: (_, __) { + builder: (context, child) { return MaterialApp.router( - routerConfig: router, + routerConfig: router!, onGenerateTitle: (context) { // According to document, it should followed when system changed language. // https://docs.flutter.dev/development/accessibility-and-localization/internationalization#specifying-the-apps-supportedlocales-parameter final localizations = AppLocalizations.of(context)!; - S = localizations; - Intl.systemLocale = S.localeName; - Intl.defaultLocale = S.localeName; + setAppLocalizations(localizations); // if no setup language, it will use system language. We try to // catch system language here. Only first time calling will take // effect. LanguageSetting.instance.systemLanguage = S.localeName; - initializeDateFormatting(S.localeName); FlutterNativeSplash.remove(); diff --git a/lib/components/bottom_sheet_actions.dart b/lib/components/bottom_sheet_actions.dart index 97b1b2ed..8d9cfe28 100644 --- a/lib/components/bottom_sheet_actions.dart +++ b/lib/components/bottom_sheet_actions.dart @@ -1,35 +1,59 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:possystem/constants/icons.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'dialog/delete_dialog.dart'; Future showCircularBottomSheet( BuildContext context, { - required List actions, - bool useRootNavigator = true, + required List> actions, }) { Feedback.forLongPress(context); - final size = MediaQuery.of(context).size; + final size = MediaQuery.sizeOf(context); + final bp = Breakpoint.find(width: size.width); + + if (bp <= Breakpoint.medium) { + return showModalBottomSheet( + context: context, + useRootNavigator: true, + clipBehavior: Clip.hardEdge, + constraints: BoxConstraints(maxWidth: size.width - 24), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)), + useSafeArea: true, + isScrollControlled: true, + builder: (context) => SingleChildScrollView( + child: BottomSheetActions(actions: actions), + ), + ); + } - return showModalBottomSheet( + // copy from [flutter/src/material/popup_menu.dart] + final RenderBox widget = context.findRenderObject()! as RenderBox; + final RenderBox overlay = Navigator.of(context).overlay!.context.findRenderObject()! as RenderBox; + final Offset offset = Offset(0, widget.size.height); + final RelativeRect position = RelativeRect.fromRect( + Rect.fromPoints( + widget.localToGlobal(offset, ancestor: overlay), + widget.localToGlobal(widget.size.bottomRight(Offset.zero) + offset, ancestor: overlay), + ), + Offset.zero & overlay.size, + ); + + return showMenu( context: context, - useRootNavigator: useRootNavigator, + position: position, clipBehavior: Clip.hardEdge, - constraints: BoxConstraints(maxWidth: size.width - 24), - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)), - useSafeArea: true, - isScrollControlled: true, - builder: (context) => SingleChildScrollView( - child: BottomSheetActions(actions: actions), - ), + items: [ + for (final action in actions) action.toPopupMenuItem(context), + ], ); } class BottomSheetAction { final Widget title; - final Widget? leading; + final Widget leading; final T? returnValue; @@ -42,37 +66,48 @@ class BottomSheetAction { final Map routeQueryParameters; const BottomSheetAction({ - required this.title, this.key, - this.leading, + required this.title, + required this.leading, this.returnValue, this.route, this.routePathParameters = const {}, this.routeQueryParameters = const {}, }) : assert(returnValue != null || route != null); - Widget toWidget(BuildContext context) { + Widget toListTile(BuildContext context) { return ListTile( key: key, enableFeedback: true, leading: leading, title: title, - onTap: () { - if (route == null) { - // pop off bottom sheet + onTap: () async { + if (context.mounted) { Navigator.of(context).pop(returnValue); - return; } - - Navigator.of(context).pop(); - context.pushNamed( - route!, - pathParameters: routePathParameters, - queryParameters: routeQueryParameters, - ); + await onTap(context); }, ); } + + PopupMenuItem toPopupMenuItem(BuildContext context) { + return PopupMenuItem( + key: key, + value: returnValue, + onTap: () => onTap(context), + child: ListTile(leading: leading, title: title), + ); + } + + Future onTap(BuildContext context) async { + if (route != null && context.mounted) { + await context.pushNamed( + route!, + pathParameters: routePathParameters, + queryParameters: routeQueryParameters, + ); + } + } } class BottomSheetActions extends StatelessWidget { @@ -84,7 +119,7 @@ class BottomSheetActions extends StatelessWidget { Widget build(BuildContext context) { return Column(mainAxisSize: MainAxisSize.min, children: [ _buildHeading(context), - ...[for (final action in actions) action.toWidget(context)], + ...[for (final action in actions) action.toListTile(context)], _buildCancelAction(context), ]); } @@ -118,7 +153,7 @@ class BottomSheetActions extends StatelessWidget { /// [popAfterDeleted] - Whether `Navigator.of(context).pop` after deleted static Future withDelete( BuildContext context, { - List actions = const [], + List> actions = const [], required T deleteValue, Widget? warningContent, required Future Function() deleteCallback, diff --git a/lib/components/dialog/confirm_dialog.dart b/lib/components/dialog/confirm_dialog.dart index 25cce1cd..98561e0e 100644 --- a/lib/components/dialog/confirm_dialog.dart +++ b/lib/components/dialog/confirm_dialog.dart @@ -17,7 +17,7 @@ class ConfirmDialog extends StatelessWidget { String? content, Widget? body, }) async { - final result = await showDialog( + final result = await showAdaptiveDialog( context: context, builder: (_) => ConfirmDialog( title: title, @@ -31,7 +31,7 @@ class ConfirmDialog extends StatelessWidget { @override Widget build(BuildContext context) { final local = MaterialLocalizations.of(context); - return AlertDialog( + return AlertDialog.adaptive( title: Text(title), content: content == null ? null : SingleChildScrollView(child: content), actions: [ diff --git a/lib/components/dialog/delete_dialog.dart b/lib/components/dialog/delete_dialog.dart index 015bcff0..e22640c8 100644 --- a/lib/components/dialog/delete_dialog.dart +++ b/lib/components/dialog/delete_dialog.dart @@ -12,7 +12,7 @@ class DeleteDialog extends StatelessWidget { @override Widget build(BuildContext context) { final local = MaterialLocalizations.of(context); - return AlertDialog( + return AlertDialog.adaptive( title: Text(S.dialogDeletionTitle), content: SingleChildScrollView(child: content), actions: [ @@ -57,11 +57,9 @@ class DeleteDialog extends StatelessWidget { return startDelete(); } - final isConfirmed = await showDialog( + final isConfirmed = await showAdaptiveDialog( context: context, - builder: (BuildContext context) => DeleteDialog( - content: warningContent, - ), + builder: (BuildContext context) => DeleteDialog(content: warningContent), ); if (isConfirmed == true) { diff --git a/lib/components/dialog/dialog_page.dart b/lib/components/dialog/dialog_page.dart new file mode 100644 index 00000000..5f3296d2 --- /dev/null +++ b/lib/components/dialog/dialog_page.dart @@ -0,0 +1,51 @@ +import 'package:flutter/material.dart'; + +/// A dialog page with Material entrance and exit animations, modal barrier color, +/// and modal barrier behavior (dialog is dismissible with a tap on the barrier). +/// +/// exported from https://croxx5f.hashnode.dev/adding-modal-routes-to-your-gorouter +class MaterialDialogPage extends Page { + final Offset? anchorPoint; + final Color? barrierColor; + final bool barrierDismissible; + final String? barrierLabel; + final bool useSafeArea; + final CapturedThemes? themes; + final TraversalEdgeBehavior? traversalEdgeBehavior; + + /// only if constant child is allowed, otherwise use [builder] + final Widget? child; + + /// if child is constant, use [child] instead + final WidgetBuilder? builder; + + const MaterialDialogPage({ + this.child, + this.builder, + this.anchorPoint, + this.barrierColor = Colors.black54, + this.barrierDismissible = true, + this.barrierLabel, + this.useSafeArea = true, + this.themes, + this.traversalEdgeBehavior, + super.key, + super.name, + super.arguments, + super.restorationId, + }) : assert(child != null || builder != null); + + @override + Route createRoute(BuildContext context) => DialogRoute( + context: context, + settings: this, + builder: builder ?? (context) => child!, + anchorPoint: anchorPoint, + barrierColor: barrierColor, + barrierDismissible: barrierDismissible, + barrierLabel: barrierLabel, + useSafeArea: useSafeArea, + themes: themes, + traversalEdgeBehavior: traversalEdgeBehavior, + ); +} diff --git a/lib/components/dialog/responsive_dialog.dart b/lib/components/dialog/responsive_dialog.dart new file mode 100644 index 00000000..dc7dd5a3 --- /dev/null +++ b/lib/components/dialog/responsive_dialog.dart @@ -0,0 +1,98 @@ +import 'package:flutter/material.dart'; +import 'package:possystem/components/style/gradient_scroll_hint.dart'; +import 'package:possystem/components/style/pop_button.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/helpers/breakpoint.dart'; + +class ResponsiveDialog extends StatelessWidget { + final Widget title; + final Widget content; + final Widget? action; + final bool scrollable; + final Size? fixedSizeOnDialog; + + const ResponsiveDialog({ + super.key, + required this.title, + required this.content, + this.action, + this.scrollable = true, + this.fixedSizeOnDialog, + }); + + @override + Widget build(BuildContext context) { + final size = MediaQuery.sizeOf(context); + final dialog = size.width > Breakpoint.medium.max; + + if (dialog) { + final realContent = fixedSizeOnDialog == null + ? content + : SizedBox( + width: fixedSizeOnDialog!.width == 0 ? null : fixedSizeOnDialog!.width, + height: fixedSizeOnDialog!.height == 0 ? null : fixedSizeOnDialog!.height, + child: content, + ); + final dialog = AlertDialog( + title: title, + contentPadding: const EdgeInsets.fromLTRB(24, 16, 24, 0), + scrollable: scrollable, + content: Stack( + children: [ + ConstrainedBox( + constraints: BoxConstraints(minWidth: Breakpoint.compact.max), + child: realContent, + ), + const Positioned( + bottom: 0, + left: 0, + right: 0, + height: kDialogBottomSpacing, + child: GradientScrollHint( + isDialog: true, + direction: Axis.vertical, + ), + ), + ], + ), + actions: action == null + ? null + : [ + PopButton( + key: const Key('pop'), + title: MaterialLocalizations.of(context).cancelButtonLabel, + ), + action!, + ], + ); + + // TODO: use another package for showing snackbar in dialog. + // This is a workaround for showing snackbar in dialog. [IgnorePointer] is + // used to pass the touch event to the dialog behind the scaffold. But + // this will also block the action (i.e. close SnackBar) in snackbar. + return ScaffoldMessenger( + child: Stack(children: [ + dialog, + const IgnorePointer( + child: Scaffold(primary: false, backgroundColor: Colors.transparent), + ), + ]), + ); + } + + return Dialog.fullscreen( + child: ScaffoldMessenger( + child: Scaffold( + primary: false, + appBar: AppBar( + primary: false, + title: title, + leading: const CloseButton(key: Key('pop')), + actions: action == null ? [] : [action!], + ), + body: scrollable ? SingleChildScrollView(child: content) : content, + ), + ), + ); + } +} diff --git a/lib/components/dialog/single_text_dialog.dart b/lib/components/dialog/single_text_dialog.dart index df223ac1..4bc640de 100644 --- a/lib/components/dialog/single_text_dialog.dart +++ b/lib/components/dialog/single_text_dialog.dart @@ -58,15 +58,14 @@ class _SingleTextDialogState extends State { return AlertDialog( title: widget.title, - content: SingleChildScrollView( - child: Column(children: [ - if (widget.header != null) widget.header!, - Form( - key: form, - child: textField, - ) - ]), - ), + scrollable: true, + content: Column(children: [ + if (widget.header != null) widget.header!, + Form( + key: form, + child: textField, + ) + ]), actions: [ PopButton( key: const Key('text_dialog.cancel'), diff --git a/lib/components/dialog/slider_text_dialog.dart b/lib/components/dialog/slider_text_dialog.dart index c1476d1d..a0ebfe28 100644 --- a/lib/components/dialog/slider_text_dialog.dart +++ b/lib/components/dialog/slider_text_dialog.dart @@ -48,7 +48,8 @@ class _SliderTextDialogState extends State { return AlertDialog.adaptive( title: widget.title, - content: SingleChildScrollView(child: Form(key: form, child: child)), + scrollable: true, + content: Form(key: form, child: child), actions: [ PopButton( key: const Key('slider_dialog.cancel'), diff --git a/lib/components/item_loader.dart b/lib/components/item_loader.dart index b90a6048..06cb5401 100644 --- a/lib/components/item_loader.dart +++ b/lib/components/item_loader.dart @@ -21,6 +21,8 @@ class ItemLoader extends StatefulWidget { final EdgeInsets? padding; + final Widget? leading; + const ItemLoader({ super.key, required this.builder, @@ -31,6 +33,7 @@ class ItemLoader extends StatefulWidget { required this.metricsBuilder, this.notifier, this.emptyChild = const SizedBox.shrink(), + this.leading, this.padding, }); @@ -51,34 +54,39 @@ class ItemLoaderState extends State> { return isFinish ? widget.emptyChild : const CircularLoading(); } - return Column(children: [ - const SizedBox(height: 4.0), - widget.metricsBuilder(metrics as U), - const SizedBox(height: 4.0), - Expanded( - child: ListView.builder( - padding: widget.padding, - key: const Key('item_loader'), - prototypeItem: widget.prototypeItem, - itemBuilder: (context, index) { - // loading over the size - if (items.length == index) { - if (isFinish) { - return null; - } - // fetch more! - loadData(); - return const CircularLoading(); - } else if (items.length < index) { - // wait for fetching, this condition is only allowed when we are fetching more - return null; - } - - return widget.builder(context, items[index]); - }, - ), - ), - ]); + return ListView.builder( + padding: widget.padding, + key: const Key('item_loader'), + prototypeItem: widget.leading == null ? widget.prototypeItem : null, + itemBuilder: (context, index) { + if (index == 0) { + return Padding( + padding: const EdgeInsets.symmetric(vertical: 4), + child: widget.metricsBuilder(metrics as U), + ); + } + + if (widget.leading != null && index == 1) { + return widget.leading!; + } + + index = widget.leading == null ? index - 1 : index - 2; + // loading over the size + if (items.length == index) { + if (isFinish) { + return null; + } + // fetch more! + loadData(); + return const CircularLoading(); + } else if (items.length < index) { + // wait for fetching, this condition is only allowed when we are fetching more + return null; + } + + return widget.builder(context, items[index]); + }, + ); } @override diff --git a/lib/components/linkify.dart b/lib/components/linkify.dart index 3331e0bb..e57131a3 100644 --- a/lib/components/linkify.dart +++ b/lib/components/linkify.dart @@ -11,7 +11,15 @@ class Linkify extends StatelessWidget { const Linkify(this.data, {super.key, this.textAlign}); - factory Linkify.fromString(text, {TextAlign? textAlign}) { + /// Not sure why need nullable text, since I got error in production + /// + /// Issue ID: 9e4fa89521982197e4212f2c0b1ee6b4 + /// ```txt + /// type 'Null' is not a subtype of type 'String'. Error thrown . + /// at new Linkify.fromString(linkify.dart:15) + /// at Tutorial.build(tutorial.dart:107) + /// ``` + factory Linkify.fromString(String text, {TextAlign? textAlign, String? id}) { return Linkify(_parseText(text), textAlign: textAlign); } diff --git a/lib/components/models/order_loader.dart b/lib/components/models/order_loader.dart index fd1b5caa..8de3fc6d 100644 --- a/lib/components/models/order_loader.dart +++ b/lib/components/models/order_loader.dart @@ -14,6 +14,10 @@ class OrderLoader extends StatefulWidget { final Widget Function(BuildContext, OrderMetrics)? trailingBuilder; + final Widget? leading; + + final Widget? emptyChild; + final bool countingAll; const OrderLoader({ @@ -22,6 +26,8 @@ class OrderLoader extends StatefulWidget { required this.builder, this.trailingBuilder, this.countingAll = false, + this.leading, + this.emptyChild, }); @override @@ -32,6 +38,7 @@ class _OrderLoaderState extends State { @override Widget build(BuildContext context) { return ItemLoader( + leading: widget.leading, prototypeItem: widget.builder( context, OrderObject(createdAt: DateTime.now()), @@ -51,7 +58,7 @@ class _OrderLoaderState extends State { if (widget.trailingBuilder != null) buildTrailing(metrics), ]); }, - emptyChild: HintText(S.orderLoaderEmpty), + emptyChild: widget.emptyChild ?? HintText(S.orderLoaderEmpty), ); } diff --git a/lib/components/router_pop_scope.dart b/lib/components/router_pop_scope.dart new file mode 100644 index 00000000..cb093df4 --- /dev/null +++ b/lib/components/router_pop_scope.dart @@ -0,0 +1,98 @@ +import 'dart:io' show Platform; + +import 'package:flutter/material.dart'; + +/// Try handle tricky issue: https://github.com/flutter/flutter/issues/140869 +/// Solution from: +/// https://github.com/flutter/flutter/issues/140869#issuecomment-2247181468 +class RouterPopScope extends StatefulWidget { + final Widget child; + + final PopInvokedCallback? onPopInvoked; + + final bool canPop; + + const RouterPopScope({ + super.key, + required this.child, + this.canPop = true, + this.onPopInvoked, + }); + + @override + State createState() => _RouterPopScopeState(); +} + +class _RouterPopScopeState extends State { + ModalRoute? _route; + BackButtonDispatcher? _parentBackBtnDispatcher; + ChildBackButtonDispatcher? _backBtnDispatcher; + + @override + void didChangeDependencies() { + super.didChangeDependencies(); + _route = ModalRoute.of(context); + _updateBackButtonDispatcher(); + } + + @override + void activate() { + super.activate(); + _updateBackButtonDispatcher(); + } + + @override + void deactivate() { + super.deactivate(); + _disposeBackBtnDispatcher(); + } + + @override + void dispose() { + _disposeBackBtnDispatcher(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return PopScope( + canPop: widget.canPop, + onPopInvoked: widget.onPopInvoked, + child: widget.child, + ); + } + + void _updateBackButtonDispatcher() { + if (!Platform.isAndroid) return; + + var dispatcher = Router.maybeOf(context)?.backButtonDispatcher; + if (dispatcher != _parentBackBtnDispatcher) { + _disposeBackBtnDispatcher(); + _parentBackBtnDispatcher = dispatcher; + if (dispatcher is BackButtonDispatcher && dispatcher is! ChildBackButtonDispatcher) { + dispatcher = dispatcher.createChildBackButtonDispatcher(); + } + _backBtnDispatcher = dispatcher as ChildBackButtonDispatcher; + } + _backBtnDispatcher?.removeCallback(_handleBackButton); + _backBtnDispatcher?.addCallback(_handleBackButton); + _backBtnDispatcher?.takePriority(); + } + + void _disposeBackBtnDispatcher() { + _backBtnDispatcher?.removeCallback(_handleBackButton); + if (_backBtnDispatcher is ChildBackButtonDispatcher) { + final child = _backBtnDispatcher as ChildBackButtonDispatcher; + _parentBackBtnDispatcher?.forget(child); + } + _backBtnDispatcher = null; + _parentBackBtnDispatcher = null; + } + + Future _handleBackButton() async { + if (_route != null && _route!.isFirst && _route!.isCurrent) { + widget.onPopInvoked?.call(widget.canPop); + } + return !widget.canPop; + } +} diff --git a/lib/components/scaffold/item_modal.dart b/lib/components/scaffold/item_modal.dart index 32b918f5..ade1b449 100644 --- a/lib/components/scaffold/item_modal.dart +++ b/lib/components/scaffold/item_modal.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:possystem/components/style/pop_button.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/constants/constant.dart'; mixin ItemModal on State { @@ -11,28 +11,20 @@ mixin ItemModal on State { @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - leading: const PopButton(), - title: Text(title), - actions: [ - TextButton( - key: const Key('modal.save'), - onPressed: () => handleSubmit(), - child: Text(MaterialLocalizations.of(context).saveButtonLabel), - ), - ], + return ResponsiveDialog( + title: Text(title), + action: TextButton( + key: const Key('modal.save'), + onPressed: () => handleSubmit(), + child: Text(MaterialLocalizations.of(context).saveButtonLabel), ), - body: buildForm(), - ); - } - - Widget buildForm() { - return SingleChildScrollView( - child: Form( + content: Form( key: formKey, child: Column( - children: buildFormFields()..add(const SizedBox(height: 76)), + children: [ + ...buildFormFields(), + const SizedBox(height: kDialogBottomSpacing), + ], ), ), ); @@ -71,7 +63,7 @@ mixin ItemModal on State { /// Padding widget Widget p(Widget child) { return Padding( - padding: const EdgeInsets.symmetric(horizontal: kSpacing3), + padding: const EdgeInsets.symmetric(horizontal: kHorizontalSpacing), child: child, ); } diff --git a/lib/components/scaffold/reorderable_scaffold.dart b/lib/components/scaffold/reorderable_scaffold.dart index eb79c5af..b1c976d5 100644 --- a/lib/components/scaffold/reorderable_scaffold.dart +++ b/lib/components/scaffold/reorderable_scaffold.dart @@ -1,8 +1,9 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/components/style/hint_text.dart'; -import 'package:possystem/components/style/pop_button.dart'; import 'package:possystem/constants/constant.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/model.dart'; import 'package:possystem/translator.dart'; @@ -27,63 +28,65 @@ class ReorderableScaffold extends StatefulWidget { class _ReorderableScaffoldState extends State> { @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - leading: const PopButton(), - actions: [ - TextButton( - key: const Key('reorder.save'), - onPressed: () async { - await widget.handleSubmit(widget.items); - if (context.mounted) { - Navigator.of(context).pop(); - } - }, - child: Text(MaterialLocalizations.of(context).saveButtonLabel), + Widget child = ReorderableList( + itemCount: widget.items.length, + onReorder: _handleReorder, + onReorderStart: (int index) => HapticFeedback.lightImpact(), + onReorderEnd: (int index) => HapticFeedback.lightImpact(), + itemBuilder: (BuildContext context, int index) { + final item = widget.items[index]; + + // delayed drag let it able to scroll + return ReorderableDelayedDragStartListener( + key: Key('reorder.$index'), // required for reorder + index: index, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 1.0), + child: Material( + elevation: 1.0, + child: ListTile( + title: Text(item.name), + trailing: ReorderableDragStartListener( + index: index, + child: const Icon(Icons.reorder_outlined), + ), + ), + ), ), - ], - title: Text(widget.title), + ); + }, + ); + final size = MediaQuery.sizeOf(context); + if (size.width > Breakpoint.medium.max) { + child = SizedBox( + width: Breakpoint.compact.max, + child: child, + ); + } + return ResponsiveDialog( + title: Text(widget.title), + scrollable: false, + action: TextButton( + key: const Key('reorder.save'), + onPressed: () async { + await widget.handleSubmit(widget.items); + if (context.mounted) { + Navigator.of(context).pop(); + } + }, + child: Text(MaterialLocalizations.of(context).saveButtonLabel), ), - body: Column( + content: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.end, children: [ Center( child: Padding( - padding: const EdgeInsets.all(kSpacing0), + padding: const EdgeInsets.only(top: kTopSpacing, bottom: kInternalSpacing), child: HintText(S.totalCount(widget.items.length)), ), ), - Expanded( - child: ReorderableList( - itemCount: widget.items.length, - onReorder: _handleReorder, - onReorderStart: (int index) => HapticFeedback.lightImpact(), - onReorderEnd: (int index) => HapticFeedback.lightImpact(), - itemBuilder: (BuildContext context, int index) { - final item = widget.items[index]; - - // delayed drag let it able to scroll - return ReorderableDelayedDragStartListener( - key: Key('reorder.$index'), // required for reorder - index: index, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 1.0), - child: Material( - elevation: 1.0, - child: ListTile( - title: Text(item.name), - trailing: ReorderableDragStartListener( - index: index, - child: const Icon(Icons.reorder_sharp), - ), - ), - ), - ), - ); - }, - ), - ), + Expanded(child: child), ], ), ); diff --git a/lib/components/scrollable_draggable_sheet.dart b/lib/components/scrollable_draggable_sheet.dart index dc7b5c0b..f7a60219 100644 --- a/lib/components/scrollable_draggable_sheet.dart +++ b/lib/components/scrollable_draggable_sheet.dart @@ -174,15 +174,17 @@ class ScrollableDraggableController extends DraggableScrollableController implem double get maxSnap => snapSizes[snapSizes.length - 1]; Future animateToClosestSnap(double velocity) async { - final index = getNextSnapIndex(velocity); - await animateTo( - snapSizes[index], - duration: const Duration(milliseconds: 120), - curve: Curves.bounceOut, - ); - // only update the value after correctly move to target - isDrag = false; - snapIndex.value = index; + if (isAttached) { + final index = getNextSnapIndex(velocity); + await animateTo( + snapSizes[index], + duration: const Duration(milliseconds: 120), + curve: Curves.bounceOut, + ); + // only update the value after correctly move to target + isDrag = false; + snapIndex.value = index; + } } void updateSnapIndex(double size) { diff --git a/lib/components/sign_in_button.dart b/lib/components/sign_in_button.dart index 1bcf5d0a..4cfd8ead 100644 --- a/lib/components/sign_in_button.dart +++ b/lib/components/sign_in_button.dart @@ -1,4 +1,4 @@ -import 'package:firebase_auth/firebase_auth.dart' show User, FirebaseAuthException; +import 'package:firebase_auth/firebase_auth.dart' as firebase; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:possystem/helpers/logger.dart'; @@ -23,12 +23,16 @@ class SignInButton extends StatelessWidget { @override Widget build(BuildContext context) { - return StreamBuilder( + return StreamBuilder( stream: Auth.instance.authStateChanges(), builder: (context, snapshot) { - final user = snapshot.data; + User user = User(user: snapshot.data); + // if (kDebugMode) { + // user = User(displayName: 'Test'); + // } + // User is not signed in - if (user == null) { + if (user.notSignedIn) { return const _GoogleSignInButton(key: Key('google_sign_in')); } @@ -160,10 +164,24 @@ class _GoogleSignInButtonState extends State<_GoogleSignInButton> { } catch (e, stack) { Log.err(e, 'auth_signin', stack); setState(() { - error = e is FirebaseAuthException ? e.message : e.toString(); + error = e is firebase.FirebaseAuthException ? e.message : e.toString(); }); } finally { if (mounted && !success) setState(() => isLoading = false); } } } + +class User { + final firebase.User? user; + + final String? _displayName; + + String get displayName => user?.displayName ?? _displayName!; + + final bool notSignedIn; + + User({String? displayName, this.user}) + : _displayName = displayName, + notSignedIn = user == null && displayName == null; +} diff --git a/lib/components/slidable_item_list.dart b/lib/components/slidable_item_list.dart index d7e89cce..fdeb2a78 100644 --- a/lib/components/slidable_item_list.dart +++ b/lib/components/slidable_item_list.dart @@ -3,48 +3,56 @@ import 'package:flutter/material.dart'; import 'package:possystem/components/bottom_sheet_actions.dart'; import 'package:possystem/components/style/hint_text.dart'; import 'package:possystem/components/style/slide_to_delete.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/translator.dart'; class SlidableItemList extends StatelessWidget { final SlidableItemDelegate delegate; - final String? hintText; + final Widget? leading; + final Widget? tailing; + final Widget? action; const SlidableItemList({ super.key, required this.delegate, this.hintText, + this.leading, + this.tailing, + this.action, }); @override Widget build(BuildContext context) { - return ListView( - padding: const EdgeInsets.only(bottom: 76), - children: [ - Center( - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 2.0), - child: HintText(hintText ?? S.totalCount(delegate.items.length)), - ), - ), + return SingleChildScrollView( + padding: const EdgeInsets.only(top: kTopSpacing, bottom: kFABSpacing), + child: Column(children: [ + if (leading != null) leading!, + Row(children: [ + Expanded(child: Center(child: HintText(hintText ?? S.totalCount(delegate.items.length)))), + if (action != null) + Padding( + padding: const EdgeInsets.only(right: kHorizontalSpacing), + child: action, + ), + ]), + const SizedBox(height: kInternalSpacing), for (final widget in delegate.items.mapIndexed( - (index, item) => delegate.build(context, item, index), + (index, item) => delegate.build(item, index), )) widget, - ], + if (tailing != null) tailing!, + ]), ); } } +typedef ActorBuilder = void Function([BuildContext?]) Function(BuildContext context); + class SlidableItemDelegate { final List items; - final Widget Function( - BuildContext context, - T item, - int index, - VoidCallback showActions, - ) tileBuilder; + final Widget Function(T item, int index, ActorBuilder actorBuilder) tileBuilder; final Future Function(T item) handleDelete; @@ -70,20 +78,15 @@ class SlidableItemDelegate { this.handleAction, }); - Widget build( - BuildContext context, - T item, - int index, - ) { + Widget build(T item, int index) { return SlideToDelete( item: item, deleteCallback: () => handleDelete(item), warningContentBuilder: (ctx) => warningContentBuilder?.call(ctx, item), child: tileBuilder( - context, item, index, - () => showActions(context, item), + (BuildContext context) => ([BuildContext? ctx]) => showActions(ctx ?? context, item), ), ); } @@ -91,7 +94,7 @@ class SlidableItemDelegate { Future showActions(BuildContext context, T item) async { assert(deleteValue != null, "deleteValue should be set when using actions"); - final customActions = actionBuilder == null ? const [] : actionBuilder!(item).toList(); + final customActions = actionBuilder == null ? >[] : actionBuilder!(item).toList(); final result = await BottomSheetActions.withDelete( context, @@ -101,8 +104,8 @@ class SlidableItemDelegate { deleteCallback: () => handleDelete(item), ); - if (result != null) { - handleAction?.call(item, result); + if (result != null && handleAction != null) { + handleAction!(item, result); } } } diff --git a/lib/components/slivers/sliver_image_app_bar.dart b/lib/components/slivers/sliver_image_app_bar.dart index 4924636c..ee81b660 100644 --- a/lib/components/slivers/sliver_image_app_bar.dart +++ b/lib/components/slivers/sliver_image_app_bar.dart @@ -1,6 +1,5 @@ import 'package:flutter/material.dart'; import 'package:possystem/components/style/image_holder.dart'; -import 'package:possystem/components/style/pop_button.dart'; import 'package:possystem/models/model.dart'; class SliverImageAppBar extends StatelessWidget { @@ -19,6 +18,7 @@ class SliverImageAppBar extends StatelessWidget { final background = ImageHolder( image: model.image, padding: const EdgeInsets.fromLTRB(0, 36, 0, 0), + // required for the gradient title: '', onImageError: () => model.saveImage(null), ); @@ -26,7 +26,7 @@ class SliverImageAppBar extends StatelessWidget { return SliverAppBar( expandedHeight: 250.0, pinned: true, - leading: const PopButton(), + leading: const CloseButton(), flexibleSpace: FlexibleSpaceBar( title: Text( model.name, @@ -34,8 +34,7 @@ class SliverImageAppBar extends StatelessWidget { color: Theme.of(context).textTheme.bodyMedium!.color, ), ), - titlePadding: const EdgeInsets.fromLTRB(48, 0, 48, 6), - background: model.useDefaultImage ? background : Hero(tag: model, child: background), + background: background, ), actions: actions, ); diff --git a/lib/components/style/buttons.dart b/lib/components/style/buttons.dart index 0fbf11b6..26ffa269 100644 --- a/lib/components/style/buttons.dart +++ b/lib/components/style/buttons.dart @@ -3,7 +3,7 @@ import 'package:possystem/constants/icons.dart'; import 'package:possystem/translator.dart'; class MoreButton extends StatelessWidget { - final VoidCallback onPressed; + final void Function(BuildContext) onPressed; const MoreButton({ super.key, @@ -13,7 +13,7 @@ class MoreButton extends StatelessWidget { @override Widget build(BuildContext context) { return IconButton( - onPressed: onPressed, + onPressed: () => onPressed(context), enableFeedback: true, tooltip: MaterialLocalizations.of(context).moreButtonTooltip, icon: const Icon(KIcons.more), @@ -22,17 +22,14 @@ class MoreButton extends StatelessWidget { } class EntryMoreButton extends StatelessWidget { - final VoidCallback onPressed; + final void Function(BuildContext) onPressed; - const EntryMoreButton({ - super.key, - required this.onPressed, - }); + const EntryMoreButton({super.key, required this.onPressed}); @override Widget build(BuildContext context) { return IconButton( - onPressed: onPressed, + onPressed: () => onPressed(context), enableFeedback: true, tooltip: MaterialLocalizations.of(context).moreButtonTooltip, icon: const Icon(KIcons.entryMore), @@ -53,7 +50,7 @@ class NavToButton extends StatelessWidget { return IconButton( onPressed: onPressed, tooltip: S.btnNavTo, - icon: const Icon(Icons.open_in_new_sharp), + icon: const Icon(Icons.open_in_new_outlined), ); } } diff --git a/lib/components/style/date_range_picker.dart b/lib/components/style/date_range_picker.dart index bb7a2f75..6f5187ee 100644 --- a/lib/components/style/date_range_picker.dart +++ b/lib/components/style/date_range_picker.dart @@ -7,32 +7,37 @@ import 'package:possystem/settings/language_setting.dart'; /// Machine usually think 5/1~5/2 is one day (5/1 0:0 ~ 5/2 0:0). /// So we need to convert between human and machine by adding a day to the end. Future showMyDateRangePicker(BuildContext context, DateTimeRange range) async { + final end = range.end.subtract(const Duration(days: 1)); + final now = DateTime.now(); + // TODO: using fullscreen and dialog final result = await showDateRangePicker( - context: context, - initialDateRange: DateTimeRange( - start: range.start, - end: range.end.subtract(const Duration(days: 1)), - ), - initialEntryMode: DatePickerEntryMode.calendarOnly, - firstDate: DateTime(2021, 1), - lastDate: DateTime.now(), - locale: LanguageSetting.instance.language.locale, + context: context, + initialDateRange: DateTimeRange( + start: range.start, + // must be greater than [lastDate] + end: end.microsecondsSinceEpoch > now.microsecondsSinceEpoch ? now : end, + ), + initialEntryMode: DatePickerEntryMode.calendarOnly, + firstDate: DateTime(2021, 1), + lastDate: now, + locale: LanguageSetting.instance.language.locale, - /// TODO: should fix this bug - /// Wrapping the design, because the background will use a slightly - /// transparent primary color when selecting a date, which will reduce - /// the expected contrast, making it difficult to see, so adjust the color - /// of onPrimary. - builder: (context, dialog) { - final theme = Theme.of(context); - final colorScheme = theme.colorScheme.copyWith( - onPrimary: theme.textTheme.bodyMedium?.color, - ); - return Theme( - data: theme.copyWith(colorScheme: colorScheme), - child: dialog ?? const SizedBox.shrink(), - ); - }); + /// TODO: should fix this bug + /// Wrapping the design, because the background will use a slightly + /// transparent primary color when selecting a date, which will reduce + /// the expected contrast, making it difficult to see, so adjust the color + /// of onPrimary. + builder: (context, dialog) { + final theme = Theme.of(context); + final colorScheme = theme.colorScheme.copyWith( + onPrimary: theme.textTheme.bodyMedium?.color, + ); + return Theme( + data: theme.copyWith(colorScheme: colorScheme), + child: dialog ?? const SizedBox.shrink(), + ); + }, + ); if (result != null) { return DateTimeRange( diff --git a/lib/components/style/empty_body.dart b/lib/components/style/empty_body.dart index 73c95b45..31f6b2bd 100644 --- a/lib/components/style/empty_body.dart +++ b/lib/components/style/empty_body.dart @@ -45,7 +45,7 @@ class EmptyBody extends StatelessWidget { ), TextButton( key: const Key('empty_body'), - onPressed: onPressed ?? () => context.goNamed(routeName!, pathParameters: pathParameters), + onPressed: onPressed ?? () => context.pushNamed(routeName!, pathParameters: pathParameters), child: Text(S.emptyBodyAction), ), ], diff --git a/lib/components/style/footer.dart b/lib/components/style/footer.dart new file mode 100644 index 00000000..e0336c72 --- /dev/null +++ b/lib/components/style/footer.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; +import 'package:possystem/components/linkify.dart'; +import 'package:possystem/components/meta_block.dart'; + +class Footer extends StatelessWidget { + const Footer({super.key}); + + @override + Widget build(BuildContext context) { + return Wrap(alignment: WrapAlignment.center, children: [ + TextButton( + onPressed: _links[0].launch, + child: Text(_links[0].text), + ), + const Text(MetaBlock.string), + TextButton( + onPressed: _links[1].launch, + child: Text(_links[1].text), + ), + ]); + } +} + +const _links = [ + LinkifyData('Privacy Policy', 'https://evan361425.github.io/flutter-pos-system/PRIVACY_POLICY/'), + LinkifyData('License', 'https://evan361425.github.io/flutter-pos-system/LICENSE/'), +]; diff --git a/lib/components/style/gradient_scroll_hint.dart b/lib/components/style/gradient_scroll_hint.dart new file mode 100644 index 00000000..61244e2f --- /dev/null +++ b/lib/components/style/gradient_scroll_hint.dart @@ -0,0 +1,31 @@ +import 'package:flutter/material.dart'; + +/// GradientScrollHint help to show a gradient hint when the content is scrollable. +class GradientScrollHint extends StatelessWidget { + final Axis direction; + + final bool isDialog; + + const GradientScrollHint({ + super.key, + this.direction = Axis.horizontal, + this.isDialog = false, + }); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final color = isDialog ? theme.dialogBackgroundColor : theme.scaffoldBackgroundColor; + return IgnorePointer( + child: DecoratedBox( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: direction == Axis.horizontal ? Alignment.centerRight : Alignment.topCenter, + end: direction == Axis.horizontal ? Alignment.centerLeft : Alignment.bottomCenter, + colors: [color.withAlpha(0), color], + ), + ), + ), + ); + } +} diff --git a/lib/components/style/image_holder.dart b/lib/components/style/image_holder.dart index f93d777f..d0d86a2f 100644 --- a/lib/components/style/image_holder.dart +++ b/lib/components/style/image_holder.dart @@ -8,7 +8,7 @@ import 'package:possystem/translator.dart'; class ImageHolder extends StatelessWidget { final ImageProvider image; - final String title; + final String? title; final void Function()? onPressed; @@ -18,10 +18,13 @@ class ImageHolder extends StatelessWidget { final EdgeInsets padding; + final double size; + const ImageHolder({ super.key, required this.image, - required this.title, + this.title, + this.size = 256, this.onPressed, this.onImageError, this.focusNode, @@ -34,31 +37,32 @@ class ImageHolder extends StatelessWidget { final style = Theme.of(context).textTheme.bodyMedium; final colors = [color, color.withAlpha(180), color.withAlpha(10)]; - Widget body = Container( - width: double.infinity, - constraints: const BoxConstraints(maxHeight: 512, maxWidth: 512), - decoration: const BoxDecoration(border: Border()), - child: Align( - alignment: Alignment.bottomCenter, - child: Container( - width: double.infinity, - padding: padding, - decoration: BoxDecoration( - border: Border(bottom: BorderSide(color: colors[0])), - gradient: LinearGradient( - colors: colors, - begin: Alignment.bottomCenter, - end: Alignment.topCenter, + Widget body = title == null + ? const SizedBox.expand() + : Container( + width: double.infinity, + decoration: const BoxDecoration(border: Border()), + child: Align( + alignment: Alignment.bottomCenter, + child: Container( + width: double.infinity, + padding: padding, + decoration: BoxDecoration( + border: Border(bottom: BorderSide(color: colors[0])), + gradient: LinearGradient( + colors: colors, + begin: Alignment.bottomCenter, + end: Alignment.topCenter, + ), + ), + child: Text( + title!, + textAlign: TextAlign.center, + style: style?.copyWith(fontWeight: FontWeight.bold), + ), + ), ), - ), - child: Text( - title, - textAlign: TextAlign.center, - style: style?.copyWith(fontWeight: FontWeight.bold), - ), - ), - ), - ); + ); if (onPressed != null) { body = InkWell( @@ -68,20 +72,23 @@ class ImageHolder extends StatelessWidget { ); } - return AspectRatio( - aspectRatio: 1, - child: Material( - type: MaterialType.transparency, - textStyle: TextStyle(color: style?.color), - child: Ink.image( - padding: EdgeInsets.zero, - image: image, - fit: BoxFit.cover, - onImageError: (error, stack) { - Log.err(error, 'image_holder_error', stack); - onImageError?.call(); - }, - child: body, + return ConstrainedBox( + constraints: BoxConstraints(maxHeight: size, maxWidth: size), + child: AspectRatio( + aspectRatio: 1, + child: Material( + type: MaterialType.transparency, + textStyle: TextStyle(color: style?.color), + child: Ink.image( + padding: EdgeInsets.zero, + image: image, + fit: BoxFit.cover, + onImageError: (error, stack) { + Log.err(error, 'image_error', stack); + onImageError?.call(); + }, + child: body, + ), ), ), ); @@ -90,14 +97,17 @@ class ImageHolder extends StatelessWidget { class EditImageHolder extends StatelessWidget { final String? path; - - final void Function(String) onSelected; + final void Function(String)? onSelected; + final void Function()? onPressed; + final double size; const EditImageHolder({ super.key, this.path, - required this.onSelected, - }); + this.onSelected, + this.onPressed, + this.size = 256, + }) : assert(onSelected != null || onPressed != null); @override Widget build(BuildContext context) { @@ -108,10 +118,12 @@ class EditImageHolder extends StatelessWidget { key: const Key('image_holder.edit'), image: image, title: path == null ? S.imageHolderCreate : S.imageHolderUpdate, - onPressed: () async { - final file = await context.pushNamed(Routes.imageGallery); - if (file != null && file is String) onSelected(file); - }, + size: size, + onPressed: onPressed ?? + () async { + final file = await context.pushNamed(Routes.imageGallery); + if (file != null && file is String) onSelected!(file); + }, ); } } diff --git a/lib/components/style/info_popup.dart b/lib/components/style/info_popup.dart index e28bcf7c..888befa0 100644 --- a/lib/components/style/info_popup.dart +++ b/lib/components/style/info_popup.dart @@ -15,7 +15,7 @@ class InfoPopup extends StatelessWidget { triggerMode: TooltipTriggerMode.tap, showDuration: const Duration(seconds: 30), margin: const EdgeInsets.symmetric(horizontal: 16.0), - child: const Icon(Icons.help_outline_sharp), + child: const Icon(Icons.help_outline_outlined), ); } } diff --git a/lib/components/style/pop_button.dart b/lib/components/style/pop_button.dart index 1ce6fc23..e2c7e6e5 100644 --- a/lib/components/style/pop_button.dart +++ b/lib/components/style/pop_button.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; +import 'package:possystem/routes.dart'; class PopButton extends StatelessWidget { final String? title; @@ -11,18 +13,26 @@ class PopButton extends StatelessWidget { this.onPressed, }); + static safePop(BuildContext context, {String path = Routes.base, T? value}) { + if (context.mounted) { + context.canPop() ? context.pop(value) : context.go(path); + } + } + @override Widget build(BuildContext context) { + cb() => onPressed == null ? safePop(context) : onPressed!(); + if (title != null) { return TextButton( - onPressed: () => Navigator.of(context).maybePop(), + onPressed: cb, child: Text(title!), ); } return BackButton( key: const Key('pop'), - onPressed: onPressed, + onPressed: cb, ); } } diff --git a/lib/components/style/route_buttons.dart b/lib/components/style/route_buttons.dart new file mode 100644 index 00000000..1efc12b5 --- /dev/null +++ b/lib/components/style/route_buttons.dart @@ -0,0 +1,96 @@ +import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; +import 'package:possystem/components/style/snackbar.dart'; +import 'package:possystem/helpers/breakpoint.dart'; +import 'package:possystem/translator.dart'; + +class RouteElevatedIconButton extends StatelessWidget { + final Icon icon; + + final String label; + + final String? route; + + final Map pathParameters; + + final Map queryParameters; + + const RouteElevatedIconButton({ + super.key, + required this.icon, + required this.route, + required this.label, + this.pathParameters = const {}, + this.queryParameters = const {}, + }); + + @override + Widget build(BuildContext context) { + return ElevatedButton.icon( + icon: icon, + label: Text(label), + onPressed: () => context.pushNamed( + route!, + pathParameters: pathParameters, + queryParameters: queryParameters, + ), + ); + } +} + +class RouteIconButton extends StatelessWidget { + final String label; + final Icon icon; + final String? route; + final Map pathParameters; + final VoidCallback? onPressed; + final bool popTrueShowSuccess; + final bool hideLabel; + + const RouteIconButton({ + super.key, + required this.label, + required this.icon, + this.route, + this.pathParameters = const {}, + this.onPressed, + this.popTrueShowSuccess = false, + this.hideLabel = false, + }); + + @override + Widget build(BuildContext context) { + return IconButton( + tooltip: hideLabel ? label : null, + onPressed: onPressed ?? + () async { + final result = await context.pushNamed(route!, pathParameters: pathParameters); + if (result == true && popTrueShowSuccess) { + if (context.mounted) { + showSnackBar(context, S.actSuccess); + } + } + }, + icon: _buildIcon(context), + ); + } + + Widget _buildIcon(BuildContext context) { + if (hideLabel) { + return icon; + } + + final bp = Breakpoint.find(width: MediaQuery.sizeOf(context).width); + return bp <= Breakpoint.medium + ? Column(children: [ + icon, + const SizedBox(height: 4), + Text(label), + ]) + : Row(children: [ + icon, + const SizedBox(width: 4), + Text(label), + ]); + } +} diff --git a/lib/components/style/route_circular_button.dart b/lib/components/style/route_circular_button.dart deleted file mode 100644 index 2306b917..00000000 --- a/lib/components/style/route_circular_button.dart +++ /dev/null @@ -1,60 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:go_router/go_router.dart'; -import 'package:possystem/components/style/snackbar.dart'; -import 'package:possystem/translator.dart'; - -class RouteCircularButton extends StatelessWidget { - final String text; - - final IconData icon; - - final String? route; - - final bool popTrueShowSuccess; - - final VoidCallback? onTap; - - const RouteCircularButton({ - super.key, - required this.text, - required this.icon, - this.route, - this.popTrueShowSuccess = false, - this.onTap, - }); - - @override - Widget build(BuildContext context) { - return Tooltip( - message: text, // text will be ellipsis, so show full text in tooltip - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - ElevatedButton( - style: ElevatedButton.styleFrom( - shape: const CircleBorder(), - padding: const EdgeInsets.all(14), - maximumSize: const Size(96, 96), - ), - onPressed: onTap ?? - () async { - final result = await context.pushNamed(route!); - if (result == true) { - if (context.mounted) { - showSnackBar(context, S.actSuccess); - } - } - }, - child: Icon(icon, size: 32), - ), - const SizedBox(height: 4), - Text( - text, - style: const TextStyle(overflow: TextOverflow.ellipsis), - ), - ], - ), - ); - } -} diff --git a/lib/components/style/single_row_warp.dart b/lib/components/style/single_row_warp.dart index 028a9740..793ce96d 100644 --- a/lib/components/style/single_row_warp.dart +++ b/lib/components/style/single_row_warp.dart @@ -21,9 +21,9 @@ class SingleRowWrap extends StatelessWidget { child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Padding( - padding: const EdgeInsets.symmetric(horizontal: kSpacing1), + padding: const EdgeInsets.symmetric(horizontal: kHorizontalSpacing), child: Wrap( - spacing: kSpacing1, + spacing: kInternalSpacing, children: children, ), ), diff --git a/lib/components/style/slide_to_delete.dart b/lib/components/style/slide_to_delete.dart index d86d25c0..d8796430 100644 --- a/lib/components/style/slide_to_delete.dart +++ b/lib/components/style/slide_to_delete.dart @@ -40,7 +40,7 @@ class SlideToDelete extends StatelessWidget { ? null : (direction) => DeleteDialog.show( context, - deleteCallback: () => Future.value(), + deleteCallback: deleteCallback, warningContent: warningContent ?? warningContentBuilder!(context), ), child: child, diff --git a/lib/components/style/snackbar.dart b/lib/components/style/snackbar.dart index b6943fc5..d94c9f01 100644 --- a/lib/components/style/snackbar.dart +++ b/lib/components/style/snackbar.dart @@ -14,6 +14,7 @@ void showSnackBar( // make floating button below behavior: SnackBarBehavior.floating, content: Text(message), + width: MediaQuery.sizeOf(context).width > 700 ? 600 : null, action: action, )); } diff --git a/lib/components/style/text_divider.dart b/lib/components/style/text_divider.dart index dd643d58..af4eec7e 100644 --- a/lib/components/style/text_divider.dart +++ b/lib/components/style/text_divider.dart @@ -12,19 +12,19 @@ class TextDivider extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.symmetric(vertical: kSpacing1), + padding: const EdgeInsets.symmetric(vertical: kHorizontalSpacing), child: Row(children: [ - Expanded( - child: Container( - margin: const EdgeInsets.only(left: kSpacing1, right: kSpacing2), - child: const Divider(), + const Expanded( + child: Divider( + indent: kInternalSpacing, + endIndent: kInternalSpacing, ), ), Text(label), - Expanded( - child: Container( - margin: const EdgeInsets.only(left: kSpacing2, right: kSpacing1), - child: const Divider(), + const Expanded( + child: Divider( + indent: kInternalSpacing, + endIndent: kInternalSpacing, ), ), ]), diff --git a/lib/components/tutorial.dart b/lib/components/tutorial.dart index 9a7bcceb..01275874 100644 --- a/lib/components/tutorial.dart +++ b/lib/components/tutorial.dart @@ -1,29 +1,24 @@ import 'package:flutter/material.dart'; import 'package:possystem/components/linkify.dart'; +import 'package:possystem/helpers/setup_example.dart'; +import 'package:possystem/models/repository/menu.dart'; +import 'package:possystem/models/repository/order_attributes.dart'; import 'package:possystem/services/cache.dart'; +import 'package:possystem/translator.dart'; import 'package:spotlight_ant/spotlight_ant.dart'; class TutorialWrapper extends StatelessWidget { final Widget child; - final TutorialInTab? tab; - const TutorialWrapper({ super.key, required this.child, - this.tab, }); @override Widget build(BuildContext context) { return SpotlightShow( - startWhenReady: tab == null, // start if no tab passed - child: Builder( - builder: (context) { - tab?.listenIndexChanging(context); - return child; - }, - ), + child: child, ); } } @@ -59,6 +54,8 @@ class Tutorial extends StatelessWidget { /// action to be executed after the tutorial is dismissed final Future Function()? action; + final bool preferVertical; + static bool debug = false; const Tutorial({ @@ -73,6 +70,7 @@ class Tutorial extends StatelessWidget { this.disable = false, this.monitorVisibility = false, this.action, + this.preferVertical = false, required this.child, }); @@ -83,7 +81,6 @@ class Tutorial extends StatelessWidget { } final theme = Theme.of(context); - SpotlightAnt.debug = true; return SpotlightAnt( enable: enabled, index: index, @@ -99,14 +96,20 @@ class Tutorial extends StatelessWidget { action: const SpotlightActionConfig( enabled: [SpotlightAntAction.prev, SpotlightAntAction.next], ), + contentLayout: preferVertical + ? const SpotlightContentLayoutConfig(prefer: ContentPreferLayout.vertical) + : const SpotlightContentLayoutConfig(prefer: ContentPreferLayout.largerRatio), content: SpotlightContent( fontSize: theme.textTheme.titleMedium!.fontSize, - child: Column(children: [ - if (title != null) Text(title!, style: theme.textTheme.headlineMedium!.copyWith(color: Colors.white)), - const SizedBox(height: 16), - Linkify.fromString(message), - if (below != null) below!, - ]), + child: SizedBox( + width: 500, + child: Column(children: [ + if (title != null) Text(title!, style: theme.textTheme.headlineMedium!.copyWith(color: Colors.white)), + const SizedBox(height: 16), + Linkify.fromString(message, id: id), + if (below != null) below!, + ]), + ), ), child: child, ); @@ -125,44 +128,99 @@ class Tutorial extends StatelessWidget { } } -class TutorialInTab { - final TabController? controller; - final BuildContext? context; - final int index; +class MenuTutorial extends StatelessWidget { + final GlobalKey checkbox = GlobalKey(); - bool hasRegistered = false; + final Widget child; - TutorialInTab({ - this.controller, - this.context, - required this.index, - }) : assert(controller != null || context != null); + MenuTutorial({super.key, required this.child}); - /// get the tab controller, if not provided, use the default one - TabController? get cont { - return controller ?? (context!.mounted ? DefaultTabController.of(context!) : null); + @override + Widget build(BuildContext context) { + return Tutorial( + id: 'home.menu', + index: 0, + title: S.menuTutorialTitle, + message: S.menuTutorialContent, + below: TutorialCheckboxListTile( + key: checkbox, + title: S.menuTutorialCreateExample, + value: Menu.instance.isEmpty, + ), + spotlightBuilder: const SpotlightRectBuilder(), + action: () async { + if (checkbox.currentState?.value == true) { + await setupExampleMenu(); + } + }, + child: child, + ); } +} + +class OrderAttrTutorial extends StatelessWidget { + final GlobalKey checkbox = GlobalKey(); + + final Widget child; - bool get shouldShow { - return index == cont?.index && !cont!.indexIsChanging; + final void Function()? onDismissed; + + OrderAttrTutorial({super.key, required this.child, this.onDismissed}); + + @override + Widget build(BuildContext context) { + return Tutorial( + id: 'home.order_attr', + index: 1, + title: S.orderAttributeTutorialTitle, + message: S.orderAttributeTutorialContent, + below: TutorialCheckboxListTile( + key: checkbox, + title: S.orderAttributeTutorialCreateExample, + value: OrderAttributes.instance.isEmpty, + ), + spotlightBuilder: const SpotlightRectBuilder(), + action: () async { + if (checkbox.currentState?.value == true) { + await setupExampleOrderAttrs(); + } + onDismissed?.call(); + }, + child: child, + ); } +} - void listenIndexChanging(BuildContext context) { - if (hasRegistered) { - return; - } +class TutorialCheckboxListTile extends StatefulWidget { + final String title; - void handler() { - if (shouldShow && context.mounted) { - SpotlightShow.maybeOf(context)?.start(); - cont?.removeListener(handler); - } - } + final bool value; + + const TutorialCheckboxListTile({super.key, required this.title, required this.value}); + + @override + State createState() => TutorialCheckboxListTileState(); +} + +class TutorialCheckboxListTileState extends State { + late bool value; - cont?.addListener(handler); - WidgetsBinding.instance.scheduleFrameCallback((timeStamp) { - handler(); - }); - hasRegistered = true; + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(top: 8.0), + child: CheckboxListTile( + value: value, + onChanged: (v) => setState(() => value = v!), + tileColor: Theme.of(context).primaryColor, + title: Text(widget.title, style: const TextStyle(color: Colors.white)), + ), + ); + } + + @override + void initState() { + super.initState(); + value = widget.value; } } diff --git a/lib/constants/constant.dart b/lib/constants/constant.dart index 95adacef..4b5b8529 100644 --- a/lib/constants/constant.dart +++ b/lib/constants/constant.dart @@ -1,9 +1,9 @@ -const double kSpacing0 = 8.0; -const double kSpacing1 = 10.0; -const double kSpacing2 = 14.0; -const double kSpacing3 = 18.0; -const double kSpacing4 = 22.0; -const double kSpacing5 = 24.0; +const double kTopSpacing = 12.0; +const double kHorizontalSpacing = 10.0; +const double kInternalSpacing = 5.5; +const double kInternalLargeSpacing = 12.0; +const double kFABSpacing = 76.0; +const double kDialogBottomSpacing = 24.0; const bool isLocalTest = String.fromEnvironment('appFlavor') == 'debug'; const bool isInternalTest = String.fromEnvironment('appFlavor') == 'dev'; const bool isProd = String.fromEnvironment('appFlavor') == 'prod'; diff --git a/lib/constants/icons.dart b/lib/constants/icons.dart index 9a6f2905..4ba58ddc 100644 --- a/lib/constants/icons.dart +++ b/lib/constants/icons.dart @@ -1,21 +1,21 @@ import 'package:flutter/material.dart'; class KIcons { - static const add = Icons.add_sharp; - static const cancel = Icons.cancel_sharp; - static const delete = Icons.delete_sharp; - static const reorder = Icons.switch_access_shortcut_sharp; - static const modal = Icons.text_fields_sharp; - static const image = Icons.image_sharp; + static const add = Icons.add_outlined; + static const cancel = Icons.cancel_outlined; + static const delete = Icons.delete_outlined; + static const reorder = Icons.switch_access_shortcut_outlined; + static const modal = Icons.text_fields_outlined; + static const image = Icons.image_outlined; - static const entryRemove = Icons.remove_circle_sharp; - static const entryMore = Icons.more_vert_sharp; - static const entryAdd = Icons.add_circle_outline_sharp; + static const entryRemove = Icons.remove_circle_outlined; + static const entryMore = Icons.more_vert_outlined; + static const entryAdd = Icons.add_circle_outline_outlined; - static const more = Icons.more_horiz_sharp; - static const edit = Icons.edit_sharp; - static const search = Icons.search_sharp; - static const preview = Icons.remove_red_eye_sharp; + static const more = Icons.more_horiz_outlined; + static const edit = Icons.edit_outlined; + static const search = Icons.search_outlined; + static const preview = Icons.remove_red_eye_outlined; - static const warn = Icons.warning_amber_sharp; + static const warn = Icons.warning_amber_outlined; } diff --git a/lib/debug/debug_page.dart b/lib/debug/debug_page.dart index 011ffb50..a1dd26ba 100644 --- a/lib/debug/debug_page.dart +++ b/lib/debug/debug_page.dart @@ -16,17 +16,17 @@ class DebugPage extends StatelessWidget { children: [ ListTile( title: const Text('Generate orders'), - trailing: const Icon(Icons.add_sharp), + trailing: const Icon(Icons.add_outlined), onTap: goGenerateRandomOrders(context), ), ListTile( title: const Text('Cache Reset'), - trailing: const Icon(Icons.clear_all_sharp), + trailing: const Icon(Icons.clear_all_outlined), onTap: Cache.instance.reset, ), const ListTile( title: Text('Migrate DB Again'), - trailing: Icon(Icons.refresh_sharp), + trailing: Icon(Icons.refresh_outlined), onTap: rerunMigration, ) ], diff --git a/lib/helpers/breakpoint.dart b/lib/helpers/breakpoint.dart new file mode 100644 index 00000000..a76b55a5 --- /dev/null +++ b/lib/helpers/breakpoint.dart @@ -0,0 +1,93 @@ +import 'package:flutter/widgets.dart'; + +/// follow material design breakpoints +/// https://m3.material.io/foundations/layout/applying-layout/window-size-classes +enum Breakpoint { + /// Below 600 + /// + /// - Phone in portrait + compact(0, 600), + + /// Between 600 and 840 + /// + /// - Tablet in portrait + /// - Foldable in portrait (unfolded) + medium(600, 840), + + /// Between 840 and 1200 + /// + /// - Phone in landscape + /// - Tablet in landscape + /// - Foldable in landscape (unfolded) + /// - Desktop + expanded(840, 1200), + + /// Between 1200 and 1600 + /// + /// - Desktop + large(1200, 1600), + + /// Above 1600 + /// + /// - Desktop + /// - Ultra-wide + extraLarge(1600, double.maxFinite); + + final double min; + final double max; + + const Breakpoint(this.min, this.max); + + static Breakpoint find({BoxConstraints? box, double? width}) { + assert(box != null || width != null, 'box or width must be provided'); + width ??= box!.maxWidth; + + if (width < compact.max) { + return compact; + } + if (width < medium.max) { + return medium; + } + if (width < expanded.max) { + return expanded; + } + if (width < large.max) { + return large; + } + return extraLarge; + } + + /// Lookup the value based on the breakpoint + T lookup({ + T? extraLarge, + T? large, + T? expanded, + T? medium, + required T compact, + }) { + switch (this) { + case Breakpoint.extraLarge: + if (extraLarge != null) { + return extraLarge; + } + case Breakpoint.large: + if (large != null) { + return large; + } + case Breakpoint.expanded: + if (expanded != null) { + return expanded; + } + case Breakpoint.medium: + if (medium != null) { + return medium; + } + default: + } + return compact; + } + + bool operator <=(Breakpoint other) { + return max <= other.max; + } +} diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index 67ccf28d..67639fa5 100644 --- a/lib/l10n/app_en.arb +++ b/lib/l10n/app_en.arb @@ -1,6 +1,6 @@ { "@@locale": "en", - "@@last_modified": "2024-07-08T13:16:38.533669Z", + "@@last_modified": "2024-09-11T07:30:16.339769Z", "@@author": "Lu Shueh Chou", "settingTab": "Settings", "settingVersion": "Version: {version}", @@ -38,24 +38,6 @@ } }, "settingLanguageTitle": "Language", - "settingOrderOutlookTitle": "Ordering Outlook", - "settingOrderOutlookName": "{name, select, slidingPanel{Sliding Panel} singleView{Classic Mode} other{UNKNOWN}}", - "@settingOrderOutlookName": { - "description": "Appearance during ordering", - "placeholders": { - "name": { - "type": "String" - } - } - }, - "settingOrderOutlookTip": "{name, select, slidingPanel{Panel slides up during ordering, suitable for small-screen phones} singleView{All info displayed on a single screen, suitable for large-screen tablets} other{UNKNOWN}}", - "@settingOrderOutlookTip": { - "placeholders": { - "name": { - "type": "String" - } - } - }, "settingCheckoutWarningTitle": "Cash Registry Warnings", "settingCheckoutWarningName": "{name, select, showAll{Show All} onlyNotEnough{Show Only When Not Enough} hideAll{Hide All} other{UNKNOWN}}", "@settingCheckoutWarningName": { @@ -74,9 +56,6 @@ } } }, - "settingOrderProductCountTitle": "Products per Row during Ordering", - "settingOrderProductCountHint": "Set to \"0\" to display only text during ordering", - "settingOrderProductCountMinLabel": "Text Only", "settingOrderAwakeningTitle": "Keep Screen On During Ordering", "@settingOrderAwakeningTitle": { "description": "Keep the screen on during ordering, even when idle" @@ -125,7 +104,7 @@ "stockIngredientAmountLabel": "Current Amount", "stockIngredientAmountMaxLabel": "Maximum Amount", "stockIngredientAmountMaxHelper": "Setting this value helps you see how much of the ingredient is being used.\nLeave blank or don't fill it in, and the value will automatically be set each time inventory is increased.", - "stockIngredientRestockTitle": "The amount of ingredient you can restock each time.\nFor example, if 30 units of cheese cost 100 dollars,\nfill in \"30\" for \"Restock Unit\" and \"100\" for \"Restock Price.\"\nThis helps you quickly restock by price.", + "stockIngredientRestockTitle": "The amount of ingredient you can restock each time.\nFor example, if 30 units of cheese cost 100 dollars,\nfill in \"30\" for \"Restock Unit\" and \"100\" for \"Restock Price.\"\n\nThis helps you quickly restock by price.", "stockIngredientRestockPriceLabel": "Restock Price", "stockIngredientRestockQuantityLabel": "Restock Unit", "stockIngredientRestockDialogTitle": "Each {quantity} costs {price} dollars", @@ -159,27 +138,27 @@ "@stockIngredientRestockDialogPriceOldAmount": { "description": "The original amount before the restock" }, - "stockReplenishmentButton": "Purchase", + "stockReplenishmentButton": "Replenish", "stockReplenishmentEmptyBody": "Purchasing helps you quickly adjust ingredient inventory", - "stockReplenishmentTitleList": "Purchase List", - "stockReplenishmentTitleCreate": "Add Purchase", - "stockReplenishmentTitleUpdate": "Edit Purchase", + "stockReplenishmentTitleList": "Replenishment", + "stockReplenishmentTitleCreate": "Add Replenishment", + "stockReplenishmentTitleUpdate": "Edit Replenishment", "stockReplenishmentMetaAffect": "Affects {count} Ingredients", "@stockReplenishmentMetaAffect": { - "description": "Indicates in the purchase list how many ingredients are affected", + "description": "Indicates in the replenishment list how many ingredients are affected", "placeholders": { "count": { "type": "int" } } }, - "stockReplenishmentNever": "Never Purchased", + "stockReplenishmentNever": "Never Replenished", "@stockReplenishmentNever": { "description": "The stock page displays the last replenishment time; if never replenished, this text is set" }, - "stockReplenishmentApplyButton": "Apply Purchase", + "stockReplenishmentApplyPreview": "Preview", "stockReplenishmentApplyConfirmButton": "Apply", - "stockReplenishmentApplyConfirmTitle": "Apply Purchase?", + "stockReplenishmentApplyConfirmTitle": "Apply Replenishment?", "stockReplenishmentApplyConfirmColumn": "{value, select, name{Name} amount{Amount} other{UNKNOWN}}", "@stockReplenishmentApplyConfirmColumn": { "placeholders": { @@ -189,15 +168,15 @@ } }, "stockReplenishmentApplyConfirmHint": "After apply, following ingredients will be adjusted", - "stockReplenishmentTutorialTitle": "Ingredient Purchases", - "stockReplenishmentTutorialContent": "Through purchases, you no longer need to set the inventory of each ingredient one by one.\nSet up purchases now and adjust multiple ingredients at once!", - "stockReplenishmentNameLabel": "Purchase Name", - "stockReplenishmentNameHint": "e.g., Costco Purchase", - "stockReplenishmentNameErrorRepeat": "Purchase name already exists", + "stockReplenishmentTutorialTitle": "Replenishment", + "stockReplenishmentTutorialContent": "Through Replenishment, you no longer need to set the inventory of each ingredient one by one.\nSet up Replenishment now and adjust multiple ingredients at once!", + "stockReplenishmentNameLabel": "Replenishment Name", + "stockReplenishmentNameHint": "e.g., Costco Shopping", + "stockReplenishmentNameErrorRepeat": "Replenishment name already exists", "stockReplenishmentIngredientsDivider": "Ingredients", "stockReplenishmentIngredientsHelper": "Click to set the quantity of different ingredients to be purchased", "stockReplenishmentIngredientAmountHint": "Set the amount to increase/decrease", - "stockQuantityTitle": "Quantity", + "stockQuantityTitle": "Quantities", "stockQuantityDescription": "Half Sugar, Low Sugar, etc.", "stockQuantityTitleCreate": "Add Quantity", "stockQuantityTitleUpdate": "Edit Quantity", @@ -1014,6 +993,7 @@ } } }, + "title": "{name, select, analysis{Stats} stock{Inventory} cashier{Cashier} settings{Settings} menu{Menu} transit{Data Transfer} orderAttributes{Customer Settings} stockQuantities{Quantities} elf{Suggestions} more{More} debug{Debug} other{UNKNOWN}}", "dialogDeletionTitle": "Delete Confirmation", "@dialogDeletionTitle": { "description": "Title displayed on the DeleteDialog." @@ -1169,7 +1149,7 @@ "@orderAttributeHeaderInfo": { "description": "Displayed on the upper rectangle in homepage" }, - "orderAttributeTutorialTitle": "Customer Settings", + "orderAttributeTutorialTitle": "Create Your Customer Settings", "orderAttributeTutorialContent": "This is where you set customer information, such as dine-in, takeout, office worker, etc.\nThis information helps us track who comes to consume and make better business strategies.", "orderAttributeTutorialCreateExample": "Help create an example to test.", "orderAttributeExampleAge": "Age", @@ -1217,19 +1197,19 @@ "orderAttributeNameHint": "e.g., Age", "orderAttributeNameErrorRepeat": "Name already exists", "orderAttributeOptionTitleCreate": "Add Option", - "orderAttributeOptionTitleCreateWith": "Add option for {name}", - "@orderAttributeOptionTitleCreateWith": { + "orderAttributeOptionTitleUpdate": "Edit Option", + "orderAttributeOptionTitleReorder": "Reorder Options", + "orderAttributeOptionMetaDefault": "Default", + "orderAttributeOptionMetaOptionOf": "option of {name}", + "@orderAttributeOptionMetaOptionOf": { "placeholders": { "name": { "type": "String" } } }, - "orderAttributeOptionTitleUpdate": "Edit Option", - "orderAttributeOptionTitleReorder": "Reorder Options", - "orderAttributeOptionMetaDefault": "Default", "orderAttributeOptionNameLabel": "Option Name", - "orderAttributeOptionNameHelper": "For example, possible options for age include:\n- Under 20\n- 20 to 30", + "orderAttributeOptionNameHelper": "For 'age', possible options are:\n- ⇣ 20\n- 20 ⇢ 30", "orderAttributeOptionNameErrorRepeat": "Name already exists", "orderAttributeOptionModeTitle": "Option Mode", "orderAttributeOptionModeHelper": "{name, select, statOnly{No need to set \"Discount\" or \"Price Change\" because this setting is \"Normal\"} changePrice{Selecting this option during ordering will apply this price change} changeDiscount{Selecting this option during ordering will apply this discount} other{UNKNOWN}}", @@ -1359,6 +1339,10 @@ "description": "Displayed on the upper rectangle in homepage" }, "menuProductEmptyBody": "\"Products\" are the basic units in the menu, such as:\n\"Cheese Burger\", \"Cola\"", + "menuProductNotSelected": "Please select a category first", + "@menuProductNotSelected": { + "description": "When not selecting a category, the product list will not be displayed. This message will be displayed in the product list" + }, "menuProductTitleCreate": "Add Product", "menuProductTitleUpdate": "Edit Product", "menuProductTitleReorder": "Reorder Products", @@ -1429,7 +1413,7 @@ "menuIngredientAmountLabel": "Amount Used", "menuIngredientAmountHelper": "Default amount used.\nIf customers are able to adjust the amount,\nset different quantities in \"Quantity.\"", "menuQuantityTitleCreate": "Add Quantity", - "menuQuantityTitleUpdate": "Edit Quantity", + "menuQuantityTitleUpdate": "Edit", "menuQuantityMetaAmount": "Amount: {amount}", "@menuQuantityMetaAmount": { "placeholders": { @@ -1558,8 +1542,8 @@ "cashierChangerCustomCountLabel": "Quantity", "cashierChangerCustomUnitLabel": "Currency", "cashierChangerCustomUnitAddBtn": "Add Currency", - "cashierChangerCustomDividerFrom": "Withdraw from Cash Register", - "cashierChangerCustomDividerTo": "Exchange", + "cashierChangerCustomDividerFrom": "Take", + "cashierChangerCustomDividerTo": "Exchange to", "cashierSurplusTitle": "Surplus", "cashierSurplusButton": "Surplus", "cashierSurplusTutorialTitle": "Daily Surplus", @@ -1635,15 +1619,11 @@ }, "orderLoaderEmpty": "No order records found", "orderCatalogListEmpty": "No product categories set yet", - "orderProductListTutorialTitle": "Start Ordering!", - "orderProductListTutorialContent": "Ordering through images is more convenient!\nYou can go to \"Settings\" > \"[Items Per Row]({link})\" to adjust\nand allow text-only ordering here.", - "@orderProductListTutorialContent": { - "placeholders": { - "link": { - "type": "String" - } - } + "orderProductListViewHelper": "{name, select, grid{Grid} list{List} other{UNKNOWN}}", + "@orderProductListViewHelper": { + "description": "Product list display mode" }, + "orderProductListNoIngredient": "No ingredients", "orderCartActionBulkify": "Bulk Actions", "orderCartActionToggle": "Toggle", "orderCartActionSelectAll": "Select All", @@ -1663,15 +1643,6 @@ "orderCartActionChangeCountSuffix": "items", "orderCartActionFree": "Free", "orderCartActionDelete": "Delete", - "orderCartSnapshotTutorialTitle": "Cart", - "orderCartSnapshotTutorialContent": "To make selecting products more convenient,\nwe've placed the products you've ordered here.\nIf you need a layout that shows all information at once (suitable for large screens),\ngo to \"Settings\" > \"[Ordering Layout]({link})\" to adjust.", - "@orderCartSnapshotTutorialContent": { - "placeholders": { - "link": { - "type": "String" - } - } - }, "orderCartSnapshotEmpty": "No items in cart", "orderCartMetaTotalPrice": "Price: {price}", "@orderCartMetaTotalPrice": { @@ -1868,7 +1839,7 @@ "analysisGoalsProfitTitle": "Profit", "analysisGoalsProfitDescription": "Profit is the balance after deducting operating costs from operating income and is crucial for the company's ongoing operations.\nProfit directly reflects operational efficiency and cost management capabilities.\nUnlike revenue, profit considers the business expenses, including raw material costs, labor, rent, etc.\nIt's a more practical indicator that helps you evaluate the effectiveness and sustainability of operations.", "analysisGoalsCostTitle": "Cost", - "analysisGoalsAchievedRate": "Profit Achievement\n{rate}", + "analysisGoalsAchievedRate": "Profit Goal\n{rate}", "@analysisGoalsAchievedRate": { "placeholders": { "rate": { @@ -1878,6 +1849,7 @@ }, "analysisChartTitle": "Chart Analysis", "analysisChartTitleCreate": "Create Chart", + "analysisChartTitleUpdate": "Edit Chart", "analysisChartTitleReorder": "Reorder Charts", "analysisChartTutorialTitle": "Chart Analysis", "analysisChartTutorialContent": "With charts, you can visualize data changes more intuitively.\nStart designing charts to track your sales performance now!", diff --git a/lib/l10n/app_zh.arb b/lib/l10n/app_zh.arb index 930c6143..b49f00b4 100644 --- a/lib/l10n/app_zh.arb +++ b/lib/l10n/app_zh.arb @@ -1,6 +1,6 @@ { "@@locale": "zh", - "@@last_modified": "2024-07-08T13:16:38.559010Z", + "@@last_modified": "2024-09-11T07:30:16.362623Z", "@@author": "Lu Shueh Chou", "settingTab": "設定", "settingVersion": "版本：{version}", @@ -38,24 +38,6 @@ } }, "settingLanguageTitle": "語言", - "settingOrderOutlookTitle": "點餐的外觀", - "settingOrderOutlookName": "{name, select, slidingPanel{酷炫面板} singleView{經典模式} other{UNKNOWN}}", - "@settingOrderOutlookName": { - "description": "Appearance during ordering", - "placeholders": { - "name": { - "type": "String" - } - } - }, - "settingOrderOutlookTip": "{name, select, slidingPanel{點餐時下方會有可拉動的面板，內含點餐中的資訊，適合小螢幕的手機} singleView{所有資訊顯示在單一螢幕中，適合大螢幕的平板} other{UNKNOWN}}", - "@settingOrderOutlookTip": { - "placeholders": { - "name": { - "type": "String" - } - } - }, "settingCheckoutWarningTitle": "收銀機提示", "settingCheckoutWarningName": "{name, select, showAll{全部顯示} onlyNotEnough{僅不夠時顯示} hideAll{全部隱藏} other{UNKNOWN}}", "@settingCheckoutWarningName": { @@ -74,9 +56,6 @@ } } }, - "settingOrderProductCountTitle": "點餐時每行顯示幾個產品", - "settingOrderProductCountHint": "設定「零」則點餐時僅會以文字顯示", - "settingOrderProductCountMinLabel": "純文字顯示", "settingOrderAwakeningTitle": "點餐時不關閉螢幕", "@settingOrderAwakeningTitle": { "description": "Keep the screen on during ordering, even when idle" @@ -125,7 +104,7 @@ "stockIngredientAmountLabel": "現有庫存", "stockIngredientAmountMaxLabel": "最大庫存", "stockIngredientAmountMaxHelper": "設定這個值可以幫助你一眼看出用了多少成分。\n填空或不填寫則每次增加庫存，都會自動設定這值，", - "stockIngredientRestockTitle": "每次補貨可以補貨多少成分。\n例如，每 30 份起司要價 100 元，「補貨單位」就填寫 30，「補貨單價」就填寫 100。\n這可以幫助你透過價錢快速補貨。", + "stockIngredientRestockTitle": "每次補貨可以補貨多少成分。\n例如，每 30 份起司要價 100 元，「補貨單位」就填寫 30，「補貨單價」就填寫 100。\n\n這可以幫助你透過價錢快速補貨。", "stockIngredientRestockPriceLabel": "補貨單價", "stockIngredientRestockQuantityLabel": "補貨單位", "stockIngredientRestockDialogTitle": "目前每{quantity}個要價{price}元", @@ -166,7 +145,7 @@ "stockReplenishmentTitleUpdate": "編輯採購", "stockReplenishmentMetaAffect": "會影響 {count} 項成分", "@stockReplenishmentMetaAffect": { - "description": "Indicates in the purchase list how many ingredients are affected", + "description": "Indicates in the replenishment list how many ingredients are affected", "placeholders": { "count": { "type": "int" @@ -177,7 +156,7 @@ "@stockReplenishmentNever": { "description": "The stock page displays the last replenishment time; if never replenished, this text is set" }, - "stockReplenishmentApplyButton": "套用採購", + "stockReplenishmentApplyPreview": "預覽", "stockReplenishmentApplyConfirmButton": "套用", "stockReplenishmentApplyConfirmTitle": "套用採購？", "stockReplenishmentApplyConfirmColumn": "{value, select, name{名稱} amount{數量} other{UNKNOWN}}", @@ -1014,6 +993,7 @@ } } }, + "title": "{name, select, analysis{分析} stock{庫存} cashier{收銀} settings{設定} menu{菜單} transit{資料轉移} orderAttributes{顧客設定} stockQuantities{份量} elf{建議} more{更多} debug{Debug} other{UNKNOWN}}", "dialogDeletionTitle": "刪除確認通知", "@dialogDeletionTitle": { "description": "Title displayed on the DeleteDialog." @@ -1169,7 +1149,7 @@ "@orderAttributeHeaderInfo": { "description": "Displayed on the upper rectangle in homepage" }, - "orderAttributeTutorialTitle": "顧客設定", + "orderAttributeTutorialTitle": "建立屬於你的顧客設定", "orderAttributeTutorialContent": "這裡是用來設定顧客的資訊，例如：內用、外帶、上班族等。\n這些資訊可以幫助我們統計哪些人來消費，進而做出更好的經營策略。", "orderAttributeTutorialCreateExample": "幫助建立一份範例以供測試。", "orderAttributeExampleAge": "年齡", @@ -1217,19 +1197,19 @@ "orderAttributeNameHint": "例如：顧客年齡", "orderAttributeNameErrorRepeat": "名稱不能重複", "orderAttributeOptionTitleCreate": "新增選項", - "orderAttributeOptionTitleCreateWith": "新增{name}的選項", - "@orderAttributeOptionTitleCreateWith": { + "orderAttributeOptionTitleUpdate": "編輯選項", + "orderAttributeOptionTitleReorder": "排序選項", + "orderAttributeOptionMetaDefault": "預設", + "orderAttributeOptionMetaOptionOf": "{name}的選項", + "@orderAttributeOptionMetaOptionOf": { "placeholders": { "name": { "type": "String" } } }, - "orderAttributeOptionTitleUpdate": "編輯選項", - "orderAttributeOptionTitleReorder": "排序選項", - "orderAttributeOptionMetaDefault": "預設", "orderAttributeOptionNameLabel": "選項名稱", - "orderAttributeOptionNameHelper": "以年齡為例，可能的選項有：\n- 20 歲以下\n- 20 到 30 歲", + "orderAttributeOptionNameHelper": "以年齡為例，可能的選項有：\n- ⇣ 20\n- 20 ⇢ 30", "orderAttributeOptionNameErrorRepeat": "名稱不能重複", "orderAttributeOptionModeTitle": "選項模式", "orderAttributeOptionModeHelper": "{name, select, statOnly{因為本設定為「一般」故無須設定「折價」或「變價」} changePrice{訂單時選擇此項會套用此變價} changeDiscount{訂單時選擇此項會套用此折價} other{UNKNOWN}}", @@ -1359,6 +1339,10 @@ "description": "Displayed on the upper rectangle in homepage" }, "menuProductEmptyBody": "「產品」是菜單裡的基本單位，例如：\n「起司漢堡」、「可樂」", + "menuProductNotSelected": "請先選擇產品種類", + "@menuProductNotSelected": { + "description": "When not selecting a category, the product list will not be displayed. This message will be displayed in the product list" + }, "menuProductTitleCreate": "新增產品", "menuProductTitleUpdate": "編輯產品", "menuProductTitleReorder": "排序產品", @@ -1429,7 +1413,7 @@ "menuIngredientAmountLabel": "使用量", "menuIngredientAmountHelper": "預設的使用量，若餐點可以調整該成分的使用量，請於成分的「份量」中設定。", "menuQuantityTitleCreate": "新增份量", - "menuQuantityTitleUpdate": "編輯份量", + "menuQuantityTitleUpdate": "編輯", "menuQuantityMetaAmount": "使用量：{amount}", "@menuQuantityMetaAmount": { "placeholders": { @@ -1558,7 +1542,7 @@ "cashierChangerCustomCountLabel": "數量", "cashierChangerCustomUnitLabel": "幣值", "cashierChangerCustomUnitAddBtn": "新增幣種", - "cashierChangerCustomDividerFrom": "從收銀機中拿出", + "cashierChangerCustomDividerFrom": "拿", "cashierChangerCustomDividerTo": "換", "cashierSurplusTitle": "結餘", "cashierSurplusButton": "結餘", @@ -1635,15 +1619,11 @@ }, "orderLoaderEmpty": "查無點餐紀錄", "orderCatalogListEmpty": "尚未設定產品種類", - "orderProductListTutorialTitle": "開始點餐！", - "orderProductListTutorialContent": "透過圖片點餐更方便！\n可以至「設定」>「[每行顯示幾個產品]({link})」調整\n讓這裡僅使用文字點餐。", - "@orderProductListTutorialContent": { - "placeholders": { - "link": { - "type": "String" - } - } + "orderProductListViewHelper": "{name, select, grid{圖片} list{列表} other{UNKNOWN}}", + "@orderProductListViewHelper": { + "description": "Product list display mode" }, + "orderProductListNoIngredient": "無設定成分", "orderCartActionBulkify": "批量操作", "orderCartActionToggle": "反選", "orderCartActionSelectAll": "全選", @@ -1663,15 +1643,6 @@ "orderCartActionChangeCountSuffix": "個", "orderCartActionFree": "招待", "orderCartActionDelete": "刪除", - "orderCartSnapshotTutorialTitle": "購物車", - "orderCartSnapshotTutorialContent": "為了讓點選產品可以更方便，\n我們把點餐後的產品設定至於此面板。\n如果需要一次顯示所有訊息的排版（適合大螢幕），\n可以至「設定」>「[點餐的外觀]({link})」調整。", - "@orderCartSnapshotTutorialContent": { - "placeholders": { - "link": { - "type": "String" - } - } - }, "orderCartSnapshotEmpty": "尚未點餐", "orderCartMetaTotalPrice": "總價：{price}", "@orderCartMetaTotalPrice": { @@ -1878,6 +1849,7 @@ }, "analysisChartTitle": "圖表分析", "analysisChartTitleCreate": "新增圖表", + "analysisChartTitleUpdate": "編輯圖表", "analysisChartTitleReorder": "排序圖表", "analysisChartTutorialTitle": "圖表分析", "analysisChartTutorialContent": "透過圖表，你可以更直觀地看到數據變化。\n現在就開始設計圖表追蹤你的銷售狀況吧！。", diff --git a/lib/main.dart b/lib/main.dart index 22f1e2e1..cf92dce8 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -12,6 +12,7 @@ import 'package:possystem/models/analysis/analysis.dart'; import 'package:possystem/models/repository/cart.dart'; import 'package:provider/provider.dart'; +import 'app.dart'; import 'firebase_compatible_options.dart'; import 'helpers/logger.dart'; import 'models/repository/cashier.dart'; @@ -21,7 +22,6 @@ import 'models/repository/quantities.dart'; import 'models/repository/replenisher.dart'; import 'models/repository/seller.dart'; import 'models/repository/stock.dart'; -import 'my_app.dart'; import 'services/cache.dart'; import 'services/database.dart'; import 'services/storage.dart'; @@ -79,7 +79,7 @@ void main() async { ChangeNotifierProvider.value(value: Cashier.instance), ChangeNotifierProvider.value(value: Cart.instance), ], - child: const MyApp(), + child: const App(), )); }, (error, stack) => FirebaseCrashlytics.instance.recordError(error, stack, fatal: true), diff --git a/lib/routes.dart b/lib/routes.dart index 5ef688ae..ee325449 100644 --- a/lib/routes.dart +++ b/lib/routes.dart @@ -2,499 +2,701 @@ import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:intl/intl.dart'; +import 'package:possystem/components/dialog/dialog_page.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/debug/debug_page.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/analysis/analysis.dart'; +import 'package:possystem/models/repository/menu.dart'; +import 'package:possystem/models/repository/order_attributes.dart'; +import 'package:possystem/models/repository/quantities.dart'; +import 'package:possystem/models/repository/replenisher.dart'; +import 'package:possystem/models/repository/stock.dart'; +import 'package:possystem/services/cache.dart'; +import 'package:possystem/ui/analysis/analysis_view.dart'; import 'package:possystem/ui/analysis/history_page.dart'; import 'package:possystem/ui/analysis/widgets/chart_modal.dart'; import 'package:possystem/ui/analysis/widgets/chart_reorder.dart'; +import 'package:possystem/ui/analysis/widgets/history_order_modal.dart'; +import 'package:possystem/ui/cashier/cashier_view.dart'; +import 'package:possystem/ui/cashier/changer_modal.dart'; +import 'package:possystem/ui/cashier/surplus_page.dart'; +import 'package:possystem/ui/home/elf_page.dart'; +import 'package:possystem/ui/home/home_page.dart'; +import 'package:possystem/ui/home/mobile_more_view.dart'; +import 'package:possystem/ui/home/settings_page.dart'; +import 'package:possystem/ui/image_gallery_page.dart'; +import 'package:possystem/ui/menu/menu_page.dart'; +import 'package:possystem/ui/menu/product_page.dart'; +import 'package:possystem/ui/menu/widgets/catalog_modal.dart'; +import 'package:possystem/ui/menu/widgets/catalog_reorder.dart'; +import 'package:possystem/ui/menu/widgets/product_ingredient_modal.dart'; import 'package:possystem/ui/menu/widgets/product_ingredient_reorder.dart'; +import 'package:possystem/ui/menu/widgets/product_modal.dart'; +import 'package:possystem/ui/menu/widgets/product_quantity_modal.dart'; +import 'package:possystem/ui/menu/widgets/product_reorder.dart'; +import 'package:possystem/ui/order/order_checkout_page.dart'; +import 'package:possystem/ui/order/order_page.dart'; +import 'package:possystem/ui/order_attr/order_attribute_page.dart'; +import 'package:possystem/ui/order_attr/widgets/order_attribute_modal.dart'; +import 'package:possystem/ui/order_attr/widgets/order_attribute_option_modal.dart'; +import 'package:possystem/ui/order_attr/widgets/order_attribute_option_reorder.dart'; +import 'package:possystem/ui/order_attr/widgets/order_attribute_reorder.dart'; +import 'package:possystem/ui/stock/quantities_page.dart'; +import 'package:possystem/ui/stock/replenishment_page.dart'; +import 'package:possystem/ui/stock/stock_view.dart'; import 'package:possystem/ui/stock/widgets/replenishment_apply.dart'; +import 'package:possystem/ui/stock/widgets/replenishment_modal.dart'; +import 'package:possystem/ui/stock/widgets/stock_ingredient_modal.dart'; import 'package:possystem/ui/stock/widgets/stock_ingredient_restock_modal.dart'; - -import 'models/repository/menu.dart'; -import 'models/repository/order_attributes.dart'; -import 'models/repository/quantities.dart'; -import 'models/repository/replenisher.dart'; -import 'models/repository/stock.dart'; -import 'ui/analysis/widgets/history_order_modal.dart'; -import 'ui/cashier/changer_page.dart'; -import 'ui/cashier/surplus_page.dart'; -import 'ui/home/feature_request_page.dart'; -import 'ui/home/features_page.dart'; -import 'ui/home/home_page.dart'; -import 'ui/image_gallery_page.dart'; -import 'ui/menu/menu_page.dart'; -import 'ui/menu/product_page.dart'; -import 'ui/menu/widgets/catalog_modal.dart'; -import 'ui/menu/widgets/catalog_reorder.dart'; -import 'ui/menu/widgets/product_ingredient_modal.dart'; -import 'ui/menu/widgets/product_modal.dart'; -import 'ui/menu/widgets/product_quantity_modal.dart'; -import 'ui/menu/widgets/product_reorder.dart'; -import 'ui/order/order_checkout_page.dart'; -import 'ui/order/order_page.dart'; -import 'ui/order_attr/order_attribute_page.dart'; -import 'ui/order_attr/widgets/order_attribute_modal.dart'; -import 'ui/order_attr/widgets/order_attribute_option_modal.dart'; -import 'ui/order_attr/widgets/order_attribute_option_reorder.dart'; -import 'ui/order_attr/widgets/order_attribute_reorder.dart'; -import 'ui/stock/quantity_page.dart'; -import 'ui/stock/replenishment_page.dart'; -import 'ui/stock/widgets/replenishment_modal.dart'; -import 'ui/stock/widgets/stock_ingredient_modal.dart'; -import 'ui/stock/widgets/stock_quantity_modal.dart'; -import 'ui/transit/transit_page.dart'; -import 'ui/transit/transit_station.dart'; +import 'package:possystem/ui/stock/widgets/stock_quantity_modal.dart'; +import 'package:possystem/ui/transit/transit_page.dart'; +import 'package:possystem/ui/transit/transit_station.dart'; String serializeRange(DateTimeRange range) { final f = DateFormat('y-M-d'); return "${f.format(range.start)}-${f.format(range.end)}"; } -T _findEnum(Iterable values, String? path, T other) { - return values.firstWhere((e) => e.name == path, orElse: () => other); -} - -DateTimeRange? _parseRange(String? val) { - try { - final ss = val?.split('-') ?? const []; - return DateTimeRange( - start: DateTime(int.parse(ss[0]), int.parse(ss[1]), int.parse(ss[2])), - end: DateTime(int.parse(ss[3]), int.parse(ss[4]), int.parse(ss[5])), - ); - } catch (e) { - return null; - } -} - -String? Function(BuildContext, GoRouterState) _redirectIfMissed({ - required String path, - required bool Function(String id) hasItem, -}) { - return (ctx, state) { - final id = state.pathParameters['id']; - // namedLocation is not allowed. - return id == null || !hasItem(id) ? Routes.base + path : null; - }; -} - class Routes { + /// The base path of the app + /// avoid using root because we bind it to GitHub page: + /// https://github.com/evan361425/evan361425.github.io static const base = '/pos'; + /// The mode of the home page, should change the layout of the home page + static final ValueNotifier homeMode = ValueNotifier(HomeMode.bottomNavigationBar); + + /// Get the full path of the route static getRoute(String path) => 'https://evan361425.github.io$base/$path'; - static final home = GoRoute( - name: 'home', - path: base, - builder: (ctx, state) { - final query = state.uri.queryParameters['tab']; - final tab = HomeTab.values.firstWhereOrNull((e) => e.name == query) ?? - (Menu.instance.isEmpty ? HomeTab.setting : HomeTab.analysis); - return HomePage(tab: tab); - }, - routes: routes, - ); + static final rootNavigatorKey = GlobalKey(); - static final routes = [ - _menuRoute, - _stockRoute, - _orderAttrRoute, - GoRoute( - name: order, - path: 'order', - builder: (ctx, state) => const OrderPage(), - routes: [ - GoRoute( - name: orderDetails, - path: 'details', - builder: (ctx, state) => const OrderDetailsPage(), - ), - ], - ), - GoRoute( - name: history, - path: 'history/o', - builder: (ctx, state) => const HistoryPage(), - ), - GoRoute( - name: historyModal, - path: 'history/o/:id/modal', - builder: (ctx, state) => HistoryOrderModal( - int.tryParse(state.pathParameters['id'] ?? '0') ?? 0, - ), - ), - GoRoute( - name: chartNew, - path: 'chart/new', - builder: (ctx, state) => const ChartModal(), - ), - GoRoute( - name: chartModal, - path: 'chart/o/:id/modal', - builder: (ctx, state) { - final id = state.pathParameters['id']!; - final chart = Analysis.instance.getItem(id); - return ChartModal(chart: chart); - }, - ), - GoRoute( - name: chartReorder, - path: 'chart/reorder', - builder: (ctx, state) => const ChartReorder(), - ), - GoRoute( - name: cashierChanger, - path: 'cashier/changer', - builder: (ctx, state) => const ChangerModal(), - ), - GoRoute( - name: cashierSurplus, - path: 'cashier/surplus', - builder: (ctx, state) => const CashierSurplus(), - ), + /// Get the initial location of the app. + /// + /// if the user is new, redirect to menu page + static get initLocation => Cache.instance.get('tutorial.home.order') != true + ? homeMode.value == HomeMode.bottomNavigationBar + ? '$base/_' + : '$base/_/menu' // if going to anal, the tutorial will conflicts with analysis page's tutorial + : '$base/anal'; + + /// Base redirect function + /// + /// redirect to the analysis page if the path is not started with the base path + static String? _redirect(BuildContext ctx, GoRouterState state) { + return state.uri.path.startsWith('$base/') ? null : '$base/anal'; + } + + /// Get the desired route config based on the width + static RoutingConfig getDesiredRoute(double width) { + switch (Breakpoint.find(width: width)) { + case Breakpoint.compact: + case Breakpoint.medium: + homeMode.value = HomeMode.bottomNavigationBar; + return Routes._bottomNavConfig; + case Breakpoint.expanded: + case Breakpoint.large: + homeMode.value = HomeMode.drawer; + return Routes._drawerConfig; + case Breakpoint.extraLarge: + homeMode.value = HomeMode.rail; + return Routes._drawerConfig; + } + } + + // Stateful navigation based on: + // https://codewithandrea.com/articles/flutter-bottom-navigation-bar-nested-routes-gorouter/ + static final RoutingConfig _bottomNavConfig = RoutingConfig(routes: [ GoRoute( - name: transit, - path: 'transit', - builder: (ctx, state) => const TransitPage(), + path: base, + redirect: _redirect, routes: [ - GoRoute( - name: transitStation, - path: 's/:method/:type', - builder: (ctx, state) { - final method = _findEnum( - TransitMethod.values, - state.pathParameters['method'], - TransitMethod.plainText, - ); - final type = _findEnum( - TransitCatalog.values, - state.pathParameters['type'], - TransitCatalog.model, - ); - final range = _parseRange(state.uri.queryParameters['range']); - - return TransitStation( - method: method, - catalog: type, - range: range, - ); - }, + StatefulShellRoute.indexedStack( + builder: (context, state, shell) => HomePage(shell: shell, mode: homeMode), + // the order of this list should follow the order of the tabs + branches: [ + StatefulShellBranch(routes: [_analysisRoute]), + StatefulShellBranch(routes: [_stockRoute]), + StatefulShellBranch(routes: [_cashierRoute]), + StatefulShellBranch(routes: [ + GoRoute( + name: Routes.others, + path: '_', + builder: (ctx, state) => const MobileMoreView(), + routes: [ + if (!isProd) _debugRoute(inShell: false), + _menuRoute(inShell: false), + _quantitiesRoute(inShell: false), + _orderAttrsRoute(inShell: false), + _elfRoute(inShell: false), + _transitRoute(inShell: false), + _settingsRoute(inShell: false), + ], + ), + ]), + ], ), + ..._routes, ], - ), + ) + ]); + static final RoutingConfig _drawerConfig = RoutingConfig(routes: [ GoRoute( - name: featureRequest, - path: 'feature_request', - builder: (ctx, state) => const FeatureRequestPage(), - ), - GoRoute( - name: imageGallery, - path: 'image_gallery', - builder: (ctx, state) => const ImageGalleryPage(), - ), - GoRoute( - name: features, - path: 'features', - builder: (ctx, state) => FeaturesPage(focus: state.uri.queryParameters['f']), + path: base, + redirect: _redirect, routes: [ - GoRoute( - name: featuresChoices, - path: ':feature', - builder: (ctx, state) { - final f = state.pathParameters['feature']; - final feature = Feature.values.firstWhereOrNull((e) => e.name == f) ?? Feature.theme; - return ItemListScaffold(feature: feature); - }, + StatefulShellRoute.indexedStack( + builder: (context, state, shell) => HomePage(shell: shell, mode: homeMode), + branches: [ + StatefulShellBranch(routes: [_analysisRoute]), + StatefulShellBranch(routes: [_stockRoute]), + StatefulShellBranch(routes: [_cashierRoute]), + StatefulShellBranch(routes: [_orderAttrsRoute(inShell: true)]), + StatefulShellBranch(routes: [_menuRoute(inShell: true)]), + StatefulShellBranch(routes: [_quantitiesRoute(inShell: true)]), + StatefulShellBranch(routes: [_transitRoute(inShell: true)]), + StatefulShellBranch(routes: [_elfRoute(inShell: true)]), + StatefulShellBranch(routes: [_settingsRoute(inShell: true)]), + if (!isProd) StatefulShellBranch(routes: [_debugRoute(inShell: true)]), + StatefulShellBranch(routes: [ + // This is fallback route for `_` which is the mobile more view + GoRoute(name: '_anal', path: '_', pageBuilder: _analBuilder), + ]), + ], ), + ..._routes, ], ), - ]; + ]); - static final _menuRoute = GoRoute( - name: menu, - path: 'menu', - builder: (ctx, state) { - final id = state.uri.queryParameters['id']; - final mode = state.uri.queryParameters['mode']; - final catalog = id != null ? Menu.instance.getItem(id) : null; - return MenuPage( - catalog: catalog, - productOnly: mode == 'products', - ); - }, - routes: [ - GoRoute( - name: menuNew, - path: 'new', - builder: (ctx, state) { - final id = state.uri.queryParameters['id']; - final c = id == null ? null : Menu.instance.getItem(id); + // ==================== Routes in main navigation ==================== - if (c == null) { - return const CatalogModal(); - } - return ProductModal(catalog: c); - }, - ), - GoRoute( - name: menuReorder, - path: 'reorder', - builder: (ctx, state) => const CatalogReorder(), - ), - GoRoute( - name: menuCatalogModal, - path: 'c/:id/modal', - builder: (ctx, state) => CatalogModal( - catalog: Menu.instance.getItem(state.pathParameters['id'] ?? ''), + static Page _analBuilder(BuildContext ctx, GoRouterState state) => + const NoTransitionPage(child: AnalysisView()); + static final _analysisRoute = GoRoute( + name: anal, + path: 'anal', + pageBuilder: _analBuilder, + routes: [ + _createPrefixRoute(path: 'chart', prefix: 'anal', routes: [ + GoRoute( + name: chartCreate, + path: 'create', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: ChartModal()), ), - ), - GoRoute( - name: menuCatalogReorder, - path: 'c/:id/reorder', - redirect: _redirectIfMissed( - path: '/menu', - hasItem: (id) => Menu.instance.hasItem(id), + GoRoute( + name: chartReorder, + path: 'reorder', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: ChartReorder()), ), - builder: (ctx, state) => ProductReorder( - Menu.instance.getItem(state.pathParameters['id']!)!, + GoRoute( + path: 'a/:id', + parentNavigatorKey: rootNavigatorKey, + redirect: _redirectIfMissed(path: 'anal', hasItem: (id) => Analysis.instance.hasItem(id)), + routes: [ + GoRoute( + name: chartUpdate, + path: 'update', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final chart = Analysis.instance.getItem(state.pathParameters['id']!)!; + return MaterialDialogPage(child: ChartModal(chart: chart)); + }, + ), + ], ), - ), - GoRoute( - name: menuProductReorder, - path: 'p/:id/reorder', - redirect: _redirectIfMissed( - path: '/menu', - hasItem: (id) => Menu.instance.getProduct(id) != null, + ]), + ], + ); + static final _stockRoute = GoRoute( + name: stock, + path: 'stock', + pageBuilder: (ctx, state) => const NoTransitionPage(child: StockView()), + routes: [ + _createPrefixRoute(path: 'ingr', prefix: 'stock', routes: [ + GoRoute( + name: stockIngrCreate, + path: 'create', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: StockIngredientModal()), ), - builder: (ctx, state) => ProductIngredientReorder( - Menu.instance.getProduct(state.pathParameters['id']!)!, + GoRoute( + path: 'a/:id', + parentNavigatorKey: rootNavigatorKey, + redirect: _redirectIfMissed(path: 'stock', hasItem: (id) => Stock.instance.hasItem(id)), + routes: [ + GoRoute( + name: stockIngrUpdate, + path: 'update', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final ingr = Stock.instance.getItem(state.pathParameters['id']!)!; + return MaterialDialogPage(child: StockIngredientModal(ingredient: ingr)); + }, + ), + GoRoute( + name: stockIngrRestock, + path: 'restock', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final ingr = Stock.instance.getItem(state.pathParameters['id']!)!; + return MaterialDialogPage(child: StockIngredientRestockModal(ingredient: ingr)); + }, + ), + ], ), - ), + ]), GoRoute( - name: menuProduct, - path: 'p/:id', - redirect: _redirectIfMissed( - path: '/menu', - hasItem: (id) => Menu.instance.getProduct(id) != null, - ), - builder: (ctx, state) => ProductPage( - product: Menu.instance.getProduct(state.pathParameters['id']!)!, - ), + name: stockRepl, + path: 'repl', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: ReplenishmentPage()), routes: [ GoRoute( - name: menuProductModal, - path: 'modal', - builder: (ctx, state) { - // verified for parent - final p = Menu.instance.getProduct(state.pathParameters['id']!)!; - return ProductModal(product: p, catalog: p.catalog); - }, + name: stockReplCreate, + path: 'create', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: ReplenishmentModal()), ), GoRoute( - name: menuProductDetails, - path: 'details', - builder: (ctx, state) { - // verified for parent - final p = Menu.instance.getProduct(state.pathParameters['id']!)!; - final ing = p.getItem(state.uri.queryParameters['iid'] ?? ''); - final qid = state.uri.queryParameters['qid']; - if (ing == null || qid == null) { - return ProductIngredientModal(product: p, ingredient: ing); - } - - return ProductQuantityModal( - quantity: ing.getItem(qid), - ingredient: ing, - ); - }, + path: 'a/:id', + parentNavigatorKey: rootNavigatorKey, + redirect: _redirectIfMissed(path: 'stock/repl', hasItem: (id) => Replenisher.instance.hasItem(id)), + routes: [ + GoRoute( + name: stockReplUpdate, + path: 'update', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final repl = Replenisher.instance.getItem(state.pathParameters['id']!)!; + return MaterialDialogPage(child: ReplenishmentModal(replenishment: repl)); + }, + ), + GoRoute( + name: stockReplPreview, + path: 'preview', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final repl = Replenisher.instance.getItem(state.pathParameters['id']!)!; + return MaterialDialogPage(child: ReplenishmentPreviewPage(repl)); + }, + ), + ], ), ], ), ], ); - - static final _stockRoute = GoRoute( - path: 'stock', - redirect: (ctx, state) => state.path == '$base/stock' ? base : null, + static final _cashierRoute = GoRoute( + name: cashier, + path: 'cashier', + pageBuilder: (ctx, state) => const NoTransitionPage(child: CashierView()), routes: [ GoRoute( - name: ingredientNew, - path: 'new', - builder: (ctx, state) => const StockIngredientModal(), - ), - GoRoute( - name: ingredientModal, - path: 'i/:id/modal', - builder: (ctx, state) { - final id = state.pathParameters['id'] ?? ''; - return StockIngredientModal(ingredient: Stock.instance.getItem(id)); - }, + name: cashierChanger, + path: 'changer', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: ChangerModal()), ), GoRoute( - name: ingredientRestockModal, - path: 'i/:id/restock', - builder: (ctx, state) { - final id = state.pathParameters['id'] ?? ''; - return StockIngredientRestockModal(ingredient: Stock.instance.getItem(id)); - }, + name: cashierSurplus, + path: 'surplus', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: CashierSurplus()), ), - GoRoute( - name: quantity, - path: 'quantities', - builder: (ctx, state) => const QuantityPage(), + ], + ); + static GoRoute _orderAttrsRoute({required bool inShell}) => GoRoute( + name: orderAttr, + path: '${(inShell ? '_/' : '')}order_attr', + parentNavigatorKey: inShell ? null : rootNavigatorKey, + builder: (ctx, state) => const OrderAttributePage(), routes: [ GoRoute( - name: quantityNew, - path: 'new', - builder: (ctx, state) => const StockQuantityModal(), + name: orderAttrCreate, + path: 'create', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final id = state.uri.queryParameters['id']; + final oa = id == null ? null : OrderAttributes.instance.getItem(id); + + if (oa == null) { + return const MaterialDialogPage(child: OrderAttributeModal()); + } + return MaterialDialogPage(child: OrderAttributeOptionModal(oa)); + }, ), GoRoute( - name: quantityModal, - path: 'q/:id/modal', - builder: (ctx, state) { - final id = state.pathParameters['id'] ?? ''; - return StockQuantityModal(quantity: Quantities.instance.getItem(id)); + name: orderAttrReorder, + path: 'reorder', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: OrderAttributeReorder()), + ), + GoRoute( + path: 'a/:id', + parentNavigatorKey: rootNavigatorKey, + redirect: _redirectIfMissed(path: 'order_attr', hasItem: (id) => OrderAttributes.instance.hasItem(id)), + routes: [ + GoRoute( + name: orderAttrUpdate, + path: 'update', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final id = state.pathParameters['id']!; + final oid = state.uri.queryParameters['oid']; + final oa = OrderAttributes.instance.getItem(id)!; + + return MaterialDialogPage( + child: oid == null + // edit order attr + ? OrderAttributeModal(attribute: oa) + // edit order attr option + : OrderAttributeOptionModal(oa, option: oa.getItem(oid)), + ); + }, + ), + GoRoute( + name: orderAttrReorderOption, + path: 'reorder', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final oa = OrderAttributes.instance.getItem(state.pathParameters['id']!)!; + return MaterialDialogPage(child: OrderAttributeOptionReorder(attribute: oa)); + }, + ), + ], + ), + ], + ); + static GoRoute _menuRoute({required bool inShell}) => GoRoute( + name: menu, + path: '${(inShell ? '_/' : '')}menu', + parentNavigatorKey: inShell ? null : rootNavigatorKey, + builder: (ctx, state) { + final id = state.uri.queryParameters['id']; + final mode = state.uri.queryParameters['mode']; + final catalog = id != null ? Menu.instance.getItem(id) : null; + return MenuPage(catalog: catalog, productOnly: mode == 'products'); + }, + routes: [ + _createPrefixRoute(path: 'catalog', prefix: 'menu', routes: [ + GoRoute( + name: menuCatalogCreate, + path: 'create', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final id = state.uri.queryParameters['id']; + final c = id == null ? null : Menu.instance.getItem(id); + + if (c == null) { + return const MaterialDialogPage(child: CatalogModal()); + } + return MaterialDialogPage(child: ProductModal(catalog: c)); + }, + ), + GoRoute( + name: menuCatalogReorder, + path: 'reorder', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: CatalogReorder()), + ), + GoRoute( + path: 'a/:id', + parentNavigatorKey: rootNavigatorKey, + redirect: _redirectIfMissed(path: 'menu', hasItem: (id) => Menu.instance.hasItem(id)), + routes: [ + GoRoute( + name: menuCatalogUpdate, + path: 'update', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final catalog = Menu.instance.getItem(state.pathParameters['id'] ?? ''); + return MaterialDialogPage(child: CatalogModal(catalog: catalog)); + }, + ), + GoRoute( + name: menuProductReorder, + path: 'reorder', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final catalog = Menu.instance.getItem(state.pathParameters['id']!)!; + return MaterialDialogPage(child: ProductReorder(catalog)); + }, + ), + ], + ), + ]), + GoRoute( + name: menuProduct, + path: 'product/:id', + parentNavigatorKey: rootNavigatorKey, + redirect: _redirectIfMissed(path: 'menu', hasItem: (id) => Menu.instance.getProduct(id) != null), + pageBuilder: (ctx, state) { + final product = Menu.instance.getProduct(state.pathParameters['id']!)!; + return MaterialDialogPage(child: ProductPage(product: product)); }, + routes: [ + GoRoute( + name: menuProductUpdate, + path: 'update', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final product = Menu.instance.getProduct(state.pathParameters['id']!)!; + return MaterialDialogPage(child: ProductModal(product: product, catalog: product.catalog)); + }, + ), + GoRoute( + name: menuProductUpdateIngredient, + path: 'update_details', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + // verified for parent + final p = Menu.instance.getProduct(state.pathParameters['id']!)!; + final ingr = p.getItem(state.uri.queryParameters['iid'] ?? ''); + final qid = state.uri.queryParameters['qid']; + if (ingr == null || qid == null) { + return MaterialDialogPage(child: ProductIngredientModal(product: p, ingredient: ingr)); + } + + final qua = ingr.getItem(qid); + return MaterialDialogPage(child: ProductQuantityModal(quantity: qua, ingredient: ingr)); + }, + ), + GoRoute( + name: menuProductReorderIngredient, + path: 'reorder', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final ingr = Menu.instance.getProduct(state.pathParameters['id']!)!; + return MaterialDialogPage(child: ProductIngredientReorder(ingr)); + }, + ), + ], ), ], - ), - GoRoute( - name: replenishment, - path: 'repl', - builder: (ctx, state) => const ReplenishmentPage(), + ); + static GoRoute _quantitiesRoute({required bool inShell}) => GoRoute( + name: quantities, + path: '${(inShell ? '_/' : '')}quantities', + parentNavigatorKey: inShell ? null : rootNavigatorKey, + builder: (ctx, state) => const QuantitiesPage(), routes: [ GoRoute( - name: replenishmentNew, - path: 'new', - builder: (ctx, state) => const ReplenishmentModal(), + name: quantityCreate, + path: 'create', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) => const MaterialDialogPage(child: StockQuantityModal()), + ), + GoRoute( + path: 'a/:id', + parentNavigatorKey: rootNavigatorKey, + redirect: _redirectIfMissed(path: 'menu', hasItem: (id) => Quantities.instance.hasItem(id)), + routes: [ + GoRoute( + name: quantityUpdate, + path: 'update', + parentNavigatorKey: rootNavigatorKey, + pageBuilder: (ctx, state) { + final qua = Quantities.instance.getItem(state.pathParameters['id']!)!; + return MaterialDialogPage(child: StockQuantityModal(quantity: qua)); + }, + ), + ], ), + ], + ); + static GoRoute _transitRoute({required bool inShell}) => GoRoute( + name: transit, + path: '${(inShell ? '_/' : '')}transit', + parentNavigatorKey: inShell ? null : rootNavigatorKey, + builder: (ctx, state) => const TransitPage(), + routes: [ GoRoute( - name: replenishmentModal, - path: 'r/:id/modal', + name: transitStation, + path: ':method/:type', + parentNavigatorKey: rootNavigatorKey, builder: (ctx, state) { - final id = state.pathParameters['id'] ?? ''; - return ReplenishmentModal( - replenishment: Replenisher.instance.getItem(id), + final method = _findEnum( + TransitMethod.values, + state.pathParameters['method'], + TransitMethod.plainText, + ); + final type = _findEnum( + TransitCatalog.values, + state.pathParameters['type'], + TransitCatalog.model, + ); + final range = _parseRange(state.uri.queryParameters['range']); + + return TransitStation( + method: method, + catalog: type, + range: range, ); }, ), + ], + ); + static GoRoute _elfRoute({required bool inShell}) => GoRoute( + name: elf, + path: '${(inShell ? '_/' : '')}elf', + parentNavigatorKey: inShell ? null : rootNavigatorKey, + builder: (ctx, state) => const ElfPage(), + ); + static GoRoute _settingsRoute({required bool inShell}) => GoRoute( + name: settings, + path: '${(inShell ? '_/' : '')}settings', + parentNavigatorKey: inShell ? null : rootNavigatorKey, + builder: (ctx, state) => SettingsPage(focus: state.uri.queryParameters['f']), + routes: [ GoRoute( - name: replenishmentApply, - path: 'r/:id/apply', - redirect: (context, state) { - final has = Replenisher.instance.hasItem(state.pathParameters['id'] ?? ''); - return has ? null : '$base/stock/repl'; - }, + name: settingsFeature, + path: ':feature', + parentNavigatorKey: rootNavigatorKey, builder: (ctx, state) { - final id = state.pathParameters['id'] ?? ''; - return ReplenishmentApply(Replenisher.instance.getItem(id)!); + final f = state.pathParameters['feature']; + final feature = Feature.values.firstWhereOrNull((e) => e.name == f) ?? Feature.theme; + return ItemListScaffold(feature: feature); }, ), ], - ), - ], - ); - - static final _orderAttrRoute = GoRoute( - name: orderAttr, - path: 'oa', - builder: (ctx, state) => const OrderAttributePage(), - routes: [ - GoRoute( - name: orderAttrNew, - path: 'new', - builder: (ctx, state) { - final id = state.uri.queryParameters['id']; - final oa = id == null ? null : OrderAttributes.instance.getItem(id); + ); + static GoRoute _debugRoute({required bool inShell}) => GoRoute( + name: 'debug', + path: '${(inShell ? '_/' : '')}debug', + parentNavigatorKey: inShell ? null : rootNavigatorKey, + builder: (ctx, state) => const DebugPage(), + ); - if (oa == null) { - return const OrderAttributeModal(); - } - return OrderAttributeOptionModal(oa); - }, - ), - GoRoute( - name: orderAttrModal, - path: 'a/:id/modal', - builder: (ctx, state) { - final id = state.pathParameters['id']; - final oid = state.uri.queryParameters['oid']; - final oa = id == null ? null : OrderAttributes.instance.getItem(id); + // ==================== Other routes ==================== - if (oid == null || oa == null) { - // edit or new oa - return OrderAttributeModal(attribute: oa); - } - return OrderAttributeOptionModal(oa, option: oa.getItem(oid)); - }, - ), - GoRoute( - name: orderAttrOptionReorder, - path: 'a/:id/reorder', - redirect: _redirectIfMissed( - path: '/oa', - hasItem: (id) => OrderAttributes.instance.hasItem(id), + static final _routes = [ + GoRoute( + name: order, + path: 'order', + builder: (ctx, state) => const OrderPage(), + routes: [ + GoRoute( + name: orderCheckout, + path: 'details', + builder: (ctx, state) => const OrderCheckoutPage(), ), - builder: (ctx, state) { - return OrderAttributeOptionReorder( - attribute: OrderAttributes.instance.getItem( - state.pathParameters['id']!, - )!, - ); - }, - ), - GoRoute( - name: orderAttrReorder, - path: 'reorder', - builder: (ctx, state) => const OrderAttributeReorder(), - ), - ], - ); - - static const menu = '/menu'; - static const menuNew = '/menu/new'; - static const menuSearch = '/menu/search'; - static const menuReorder = '/menu/reorder'; - static const menuCatalogModal = '/menu/catalog/modal'; - static const menuCatalogReorder = '/menu/catalog/reorder'; - static const menuProductReorder = '/menu/product/reorder'; - static const menuProduct = '/menu/product'; - static const menuProductModal = '/menu/product/modal'; - static const menuProductDetails = '/menu/product/details'; + ], + ), + GoRoute( + name: history, + path: 'history', + builder: (ctx, state) => const HistoryPage(), + routes: [ + GoRoute( + name: historyOrder, + path: 'order/:id', + pageBuilder: (ctx, state) => MaterialDialogPage( + child: HistoryOrderModal(int.tryParse(state.pathParameters['id'] ?? '0') ?? 0), + ), + ) + ], + ), + GoRoute( + name: imageGallery, + path: 'imageGallery', + pageBuilder: (ctx, state) => const MaterialDialogPage(child: ImageGalleryPage()), + ), + ]; - static const history = '/history/order'; - static const historyModal = '/history/order/modal'; + // ==================== Route names ==================== - static const orderAttr = '/oa'; - static const orderAttrNew = '/oa/new'; - static const orderAttrModal = '/oa/modal'; - static const orderAttrReorder = '/oa/reorder'; - static const orderAttrOptionReorder = '/oa/option/reorder'; + static const others = 'others'; + static const menu = 'menu'; + static const menuCatalogCreate = 'menu.catalog.create'; + static const menuCatalogUpdate = 'menu.catalog.update'; + static const menuCatalogReorder = 'menu.catalog.reorder'; + static const menuProduct = 'menu.product'; + static const menuProductUpdate = 'menu.product.update'; + static const menuProductReorder = 'menu.product.reorder'; + static const menuProductUpdateIngredient = 'menu.product.update.ingredient'; + static const menuProductReorderIngredient = 'menu.product.reorder.ingredient'; + static const orderAttr = 'oa'; + static const orderAttrCreate = 'oa.create'; + static const orderAttrUpdate = 'oa.update'; + static const orderAttrReorder = 'oa.reorder'; + static const orderAttrReorderOption = 'oa.reorder.option'; + static const stock = 'stock'; + static const stockIngrCreate = 'stock.ingr.create'; + static const stockIngrUpdate = 'stock.ingr.update'; + static const stockIngrRestock = 'stock.ingr.restock'; + static const stockRepl = 'stock.repl'; + static const stockReplCreate = 'stock.repl.create'; + static const stockReplUpdate = 'stock.repl.update'; + static const stockReplPreview = 'stock.repl.preview'; + static const quantities = 'quantity'; + static const quantityCreate = 'quantity.create'; + static const quantityUpdate = 'quantity.update'; + static const cashier = 'cashier'; + static const cashierChanger = 'cashier.changer'; + static const cashierSurplus = 'cashier.surplus'; + static const order = 'order'; + static const orderCheckout = 'order.checkout'; + static const history = 'history'; + static const historyOrder = 'history.order'; + static const anal = 'anal'; + static const chartCreate = 'chart.create'; + static const chartUpdate = 'chart.update'; + static const chartReorder = 'chart.reorder'; + static const transit = 'transit'; + static const transitStation = 'transit.station'; + static const elf = 'elf'; + static const imageGallery = 'imageGallery'; + static const settings = 'settings'; + static const settingsFeature = 'settings.feature'; +} - static const ingredientNew = '/stock/new'; - static const ingredientModal = '/stock/ingredient/modal'; - static const ingredientRestockModal = '/stock/ingredient/restock/modal'; - static const quantity = '/stock/quantities'; - static const quantityNew = '/stock/quantity/new'; - static const quantityModal = '/stock/quantity/modal'; - static const replenishment = '/stock/repl'; - static const replenishmentNew = '/stock/repl/new'; - static const replenishmentModal = '/stock/repl/modal'; - static const replenishmentApply = '/stock/repl/apply'; +T _findEnum(Iterable values, String? path, T other) { + return values.firstWhere((e) => e.name == path, orElse: () => other); +} - static const cashierChanger = '/cashier/changer'; - static const cashierSurplus = '/cashier/surplus'; +DateTimeRange? _parseRange(String? val) { + try { + final ss = val?.split('-') ?? const []; + return DateTimeRange( + start: DateTime(int.parse(ss[0]), int.parse(ss[1]), int.parse(ss[2])), + end: DateTime(int.parse(ss[3]), int.parse(ss[4]), int.parse(ss[5])), + ); + } catch (e) { + return null; + } +} - static const order = '/order'; - static const orderDetails = '/order/details'; - static const chartNew = '/chart/order/new'; - static const chartModal = '/chart/order/modal'; - static const chartReorder = '/chart/reorder'; +String? Function(BuildContext, GoRouterState) _redirectIfMissed({ + required String path, + required bool Function(String id) hasItem, +}) { + return (ctx, state) { + final id = state.pathParameters['id']; + // namedLocation is not allowed. + return id == null || !hasItem(id) ? '${Routes.base}/$path' : null; + }; +} - static const transit = '/transit'; - static const transitStation = '/transit/station'; +GoRoute _createPrefixRoute({ + required String path, + required String prefix, + required List routes, +}) { + return GoRoute( + path: path, + redirect: (context, state) { + return state.uri.path == '${Routes.base}/$prefix/$path' ? '${Routes.base}/$prefix' : null; + }, + routes: routes, + ); +} - static const featureRequest = '/feature_request'; - static const imageGallery = '/image_gallery'; - static const features = '/features'; - static const featuresChoices = '/features/choices'; +enum HomeMode { + bottomNavigationBar, + drawer, + rail, } diff --git a/lib/settings/order_outlook_setting.dart b/lib/settings/order_outlook_setting.dart deleted file mode 100644 index 4297a537..00000000 --- a/lib/settings/order_outlook_setting.dart +++ /dev/null @@ -1,32 +0,0 @@ -import 'package:possystem/settings/setting.dart'; - -class OrderOutlookSetting extends Setting { - static final instance = OrderOutlookSetting._(); - - static const defaultValue = OrderOutlookTypes.slidingPanel; - - OrderOutlookSetting._() { - value = defaultValue; - } - - @override - String get key => 'feat.orderOutlook'; - - @override - void initialize() { - value = OrderOutlookTypes.values[service.get(key) ?? defaultValue.index]; - } - - @override - Future updateRemotely(OrderOutlookTypes data) { - return service.set(key, value.index); - } -} - -enum OrderOutlookTypes { - /// show order in sliding panel, recommended for mobile phone - slidingPanel, - - /// show order in single view, recommended for tablet - singleView, -} diff --git a/lib/settings/order_product_axis_count_setting.dart b/lib/settings/order_product_axis_count_setting.dart deleted file mode 100644 index adef95ec..00000000 --- a/lib/settings/order_product_axis_count_setting.dart +++ /dev/null @@ -1,24 +0,0 @@ -import 'package:possystem/settings/setting.dart'; - -class OrderProductAxisCountSetting extends Setting { - static final instance = OrderProductAxisCountSetting._(); - - static const defaultValue = 2; - - OrderProductAxisCountSetting._() { - value = defaultValue; - } - - @override - String get key => 'feat.orderProductAxisCount'; - - @override - void initialize() { - value = service.get(key) ?? defaultValue; - } - - @override - Future updateRemotely(int data) { - return service.set(key, data); - } -} diff --git a/lib/settings/settings_provider.dart b/lib/settings/settings_provider.dart index b407f6d4..eb2a74fa 100644 --- a/lib/settings/settings_provider.dart +++ b/lib/settings/settings_provider.dart @@ -5,8 +5,6 @@ import 'package:possystem/settings/collect_events_setting.dart'; import 'currency_setting.dart'; import 'language_setting.dart'; import 'order_awakening_setting.dart'; -import 'order_outlook_setting.dart'; -import 'order_product_axis_count_setting.dart'; import 'setting.dart'; import 'theme_setting.dart'; @@ -18,8 +16,6 @@ class SettingsProvider extends ChangeNotifier { ThemeSetting.instance, CurrencySetting.instance, OrderAwakeningSetting.instance, - OrderOutlookSetting.instance, - OrderProductAxisCountSetting.instance, CheckoutWarningSetting.instance, CollectEventsSetting.instance, ], growable: false); diff --git a/lib/translator.dart b/lib/translator.dart index c2d1ae1e..0f5c79ed 100644 --- a/lib/translator.dart +++ b/lib/translator.dart @@ -1,3 +1,14 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart'; +import 'package:flutter_gen/gen_l10n/app_localizations_en.dart'; +import 'package:intl/date_symbol_data_local.dart'; +import 'package:intl/intl.dart'; -late AppLocalizations S; +AppLocalizations S = setAppLocalizations(AppLocalizationsEn()); + +AppLocalizations setAppLocalizations(AppLocalizations localizations) { + S = localizations; + Intl.systemLocale = localizations.localeName; + Intl.defaultLocale = localizations.localeName; + initializeDateFormatting(localizations.localeName); + return localizations; +} diff --git a/lib/ui/analysis/analysis_view.dart b/lib/ui/analysis/analysis_view.dart index 2ea00c72..8c0b7319 100644 --- a/lib/ui/analysis/analysis_view.dart +++ b/lib/ui/analysis/analysis_view.dart @@ -1,10 +1,13 @@ import 'package:flutter/material.dart'; import 'package:possystem/components/bottom_sheet_actions.dart'; -import 'package:possystem/components/style/route_circular_button.dart'; +import 'package:possystem/components/style/route_buttons.dart'; import 'package:possystem/components/tutorial.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/helpers/util.dart'; import 'package:possystem/models/analysis/analysis.dart'; +import 'package:possystem/models/analysis/chart.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/analysis/widgets/chart_card_view.dart'; @@ -12,17 +15,13 @@ import 'package:possystem/ui/analysis/widgets/chart_range_page.dart'; import 'package:possystem/ui/analysis/widgets/goals_card_view.dart'; class AnalysisView extends StatefulWidget { - final int? tabIndex; - - const AnalysisView({super.key, this.tabIndex}); + const AnalysisView({super.key}); @override State createState() => _AnalysisViewState(); } class _AnalysisViewState extends State with AutomaticKeepAliveClientMixin { - late final TutorialInTab? tab; - /// Range of the data to show in charts, it can updated by the user late ValueNotifier range; @@ -30,105 +29,101 @@ class _AnalysisViewState extends State with AutomaticKeepAliveClie Widget build(BuildContext context) { super.build(context); - return TutorialWrapper( - tab: tab, - child: ListenableBuilder( - listenable: Analysis.instance, - builder: (context, child) { - final items = Analysis.instance.itemList; + return ListenableBuilder( + listenable: Analysis.instance, + builder: (context, child) { + return LayoutBuilder(builder: (context, constraints) { + final bp = Breakpoint.find(box: constraints); return CustomScrollView(slivers: [ child!, + SliverAppBar(primary: false, title: Text(S.analysisChartTitle), actions: const [ + _MoreButton(), + ]), _buildChartHeader(), - SliverPadding( - padding: const EdgeInsets.only(bottom: 76), - sliver: SliverList.builder( - itemCount: items.length, - itemBuilder: (context, index) { - return Center( - child: ChartCardView( - chart: items.elementAt(index), - range: range, - ), - ); - }, - ), - ), + _buildCharts(Analysis.instance.itemList, bp), ]); - }, - child: SliverList.list(children: [ - const SizedBox(height: 16), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Expanded( + }); + }, + child: SliverList.list(children: [ + GoalsCardView( + action: RouteIconButton( + key: const Key('anal.history'), + route: Routes.history, + icon: const Icon(Icons.calendar_month_outlined), + label: S.analysisHistoryBtn, + ), + ), + ]), + ); + } + + Widget _buildChartHeader() { + return SliverAppBar( + primary: false, + pinned: true, + leading: const Icon(Icons.calendar_today_outlined, size: 16), + centerTitle: false, + title: ListenableBuilder( + listenable: range, + builder: (context, child) => TextButton( + key: const Key('anal.chart_range'), + onPressed: _goToChartRange, + child: Text(range.value.format(S.localeName)), + ), + ), + actions: [ + IconButton( + onPressed: () => _updateRange(Duration(days: -interval)), + iconSize: 16, + icon: const Icon(Icons.arrow_back_ios_new_outlined), + ), + IconButton( + onPressed: () => _updateRange(Duration(days: interval)), + iconSize: 16, + icon: const Icon(Icons.arrow_forward_ios_outlined), + ), + ], + ); + } + + Widget _buildCharts(List items, Breakpoint bp) { + return SliverPadding( + padding: const EdgeInsets.only(bottom: kFABSpacing), + sliver: SliverGrid.builder( + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: bp.lookup(expanded: 2, large: 3, compact: 1), + ), + itemCount: items.length + 1, + itemBuilder: (context, index) { + if (index == items.length) { + return Align( + alignment: Alignment.topCenter, + child: SizedBox( + width: 200, + height: 200, child: Tutorial( id: 'anal.add_chart', title: S.analysisChartTutorialTitle, message: S.analysisChartTutorialContent, - child: RouteCircularButton( + monitorVisibility: true, + child: RouteElevatedIconButton( key: const Key('anal.add_chart'), - route: Routes.chartNew, - icon: KIcons.add, - text: S.analysisChartTitleCreate, + icon: const Icon(KIcons.add), + route: Routes.chartCreate, + label: S.analysisChartTitleCreate, ), ), ), - const Spacer(), - Expanded( - child: RouteCircularButton( - key: const Key('anal.history'), - icon: Icons.calendar_month_sharp, - route: Routes.history, - text: S.analysisHistoryBtn, - ), - ), - ], - ), - const GoalsCardView(), - ]), - ), - ); - } + ); + } - SliverAppBar _buildChartHeader() { - return SliverAppBar( - pinned: true, - title: Text(S.analysisChartTitle), - toolbarHeight: kToolbarHeight - 8, // hide shadow of action when pinned - bottom: AppBar( - primary: false, - centerTitle: false, - titleSpacing: 0, - leading: const Icon(Icons.calendar_today_sharp, size: 16), - title: ListenableBuilder( - listenable: range, - builder: (context, child) => TextButton( - key: const Key('anal.chart_range'), - onPressed: _goToChartRange, - child: Text( - range.value.format(S.localeName), + return Center( + child: ChartCardView( + chart: items.elementAt(index), + range: range, ), - ), - ), - actions: [ - IconButton( - onPressed: () => _updateRange(Duration(days: -interval)), - iconSize: 16, - icon: const Icon(Icons.arrow_back_ios_new_sharp), - ), - IconButton( - onPressed: () => _updateRange(Duration(days: interval)), - iconSize: 16, - icon: const Icon(Icons.arrow_forward_ios_sharp), - ), - IconButton( - onPressed: _showActions, - enableFeedback: true, - iconSize: 16, - tooltip: MaterialLocalizations.of(context).moreButtonTooltip, - icon: const Icon(Icons.settings_sharp), - ), - ], + ); + }, ), ); } @@ -140,7 +135,6 @@ class _AnalysisViewState extends State with AutomaticKeepAliveClie @override void initState() { - tab = widget.tabIndex == null ? null : TutorialInTab(index: widget.tabIndex!, context: context); range = ValueNotifier(Util.getDateRange( now: DateTime.now().subtract(const Duration(days: 7)), days: 7, @@ -150,13 +144,9 @@ class _AnalysisViewState extends State with AutomaticKeepAliveClie } void _goToChartRange() async { - final val = await Navigator.of(context).push( - MaterialPageRoute( - fullscreenDialog: true, - builder: (context) => ChartRangePage( - range: range.value, - ), - ), + final val = await showAdaptiveDialog( + context: context, + builder: (context) => ChartRangePage(range: range.value), ); if (val != null) { @@ -170,22 +160,33 @@ class _AnalysisViewState extends State with AutomaticKeepAliveClie days: interval, ); } +} - void _showActions() async { - await showCircularBottomSheet( - context, - actions: >[ - BottomSheetAction( - title: Text(S.analysisChartTitleReorder), - leading: const Icon(KIcons.reorder), - route: Routes.chartReorder, - ), - BottomSheetAction( - title: Text(S.analysisChartTitleCreate), - leading: const Icon(KIcons.add), - route: Routes.chartNew, - ), - ], +class _MoreButton extends StatelessWidget { + const _MoreButton(); + + @override + Widget build(BuildContext context) { + return IconButton( + key: const Key('anal.more'), + onPressed: () => showCircularBottomSheet( + context, + actions: >[ + BottomSheetAction( + title: Text(S.analysisChartTitleReorder), + leading: const Icon(KIcons.reorder), + route: Routes.chartReorder, + ), + BottomSheetAction( + title: Text(S.analysisChartTitleCreate), + leading: const Icon(KIcons.add), + route: Routes.chartCreate, + ), + ], + ), + enableFeedback: true, + tooltip: MaterialLocalizations.of(context).moreButtonTooltip, + icon: const Icon(Icons.settings_outlined), ); } } diff --git a/lib/ui/analysis/history_page.dart b/lib/ui/analysis/history_page.dart index b4d57ef4..841bdf81 100644 --- a/lib/ui/analysis/history_page.dart +++ b/lib/ui/analysis/history_page.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:possystem/components/style/pop_button.dart'; import 'package:possystem/components/tutorial.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/helpers/util.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; @@ -36,7 +37,7 @@ class _HistoryPageState extends State { spotlightBuilder: const SpotlightRectBuilder(borderRadius: 8.0), child: PopupMenuButton( key: const Key('history.export'), - icon: const Icon(Icons.upload_file_sharp), + icon: const Icon(Icons.upload_file_outlined), tooltip: S.analysisHistoryExportBtn, itemBuilder: (context) => TransitMethod.values .map((TransitMethod value) => PopupMenuItem( @@ -56,9 +57,7 @@ class _HistoryPageState extends State { ), ], ), - body: OrientationBuilder( - builder: (context, orientation) => orientation == Orientation.portrait ? _buildPortrait() : _buildLandscape(), - ), + body: MediaQuery.sizeOf(context).width <= Breakpoint.medium.max ? _buildSingleColumn() : _buildTwoColumns(), ), ); } @@ -75,42 +74,42 @@ class _HistoryPageState extends State { super.dispose(); } - Widget _buildCalendar({required bool isPortrait}) { - return Tutorial( - id: 'history.calendar', - title: S.analysisHistoryCalendarTutorialTitle, - message: S.analysisHistoryCalendarTutorialContent, - spotlightBuilder: const SpotlightRectBuilder(), - child: HistoryCalendarView( - isPortrait: isPortrait, - notifier: notifier, - ), - ); - } - - Widget _buildOrderList() { - return HistoryOrderList(notifier: notifier); - } - - Widget _buildLandscape() { + Widget _buildTwoColumns() { return Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Expanded(child: _buildCalendar(isPortrait: false)), + Expanded(child: _buildCalendar(shouldFillViewport: true)), Expanded(child: _buildOrderList()), ], ); } - Widget _buildPortrait() { + Widget _buildSingleColumn() { return Column(children: [ PhysicalModel( elevation: 5, color: Theme.of(context).colorScheme.surface, shadowColor: Colors.transparent, - child: _buildCalendar(isPortrait: true), + child: _buildCalendar(shouldFillViewport: false), ), Expanded(child: _buildOrderList()), ]); } + + Widget _buildCalendar({required bool shouldFillViewport}) { + return Tutorial( + id: 'history.calendar', + title: S.analysisHistoryCalendarTutorialTitle, + message: S.analysisHistoryCalendarTutorialContent, + spotlightBuilder: const SpotlightRectBuilder(), + child: HistoryCalendarView( + shouldFillViewport: shouldFillViewport, + notifier: notifier, + ), + ); + } + + Widget _buildOrderList() { + return HistoryOrderList(notifier: notifier); + } } diff --git a/lib/ui/analysis/widgets/chart_card_view.dart b/lib/ui/analysis/widgets/chart_card_view.dart index 11b22211..2700e730 100644 --- a/lib/ui/analysis/widgets/chart_card_view.dart +++ b/lib/ui/analysis/widgets/chart_card_view.dart @@ -42,10 +42,7 @@ class ChartCardView extends StatelessWidget { ), ), ), - MoreButton( - key: Key('chart.${chart.id}.more'), - onPressed: () => _showActions(context), - ), + _MoreButton(chart), ]), buildChart(context, metric), ]); @@ -77,23 +74,6 @@ class ChartCardView extends StatelessWidget { ); } } - - void _showActions(BuildContext context) async { - await BottomSheetActions.withDelete( - context, - deleteCallback: chart.remove, - deleteValue: 0, - warningContent: Text(S.dialogDeletionContent(chart.name, '')), - actions: >[ - BottomSheetAction( - title: Text(S.analysisChartCardTitleUpdate), - leading: const Icon(KIcons.modal), - route: Routes.chartModal, - routePathParameters: {'id': chart.id}, - ), - ], - ); - } } class _CartesianChart extends StatelessWidget { @@ -234,3 +214,35 @@ class _CircularChart extends StatelessWidget { ); } } + +// Separate the more button to correct showMenu position +class _MoreButton extends StatelessWidget { + final Chart chart; + + const _MoreButton(this.chart); + + @override + Widget build(BuildContext context) { + return MoreButton( + key: Key('chart.${chart.id}.more'), + onPressed: _showActions, + ); + } + + void _showActions(BuildContext context) async { + await BottomSheetActions.withDelete( + context, + deleteCallback: chart.remove, + deleteValue: 0, + warningContent: Text(S.dialogDeletionContent(chart.name, '')), + actions: >[ + BottomSheetAction( + title: Text(S.analysisChartCardTitleUpdate), + leading: const Icon(KIcons.modal), + route: Routes.chartUpdate, + routePathParameters: {'id': chart.id}, + ), + ], + ); + } +} diff --git a/lib/ui/analysis/widgets/chart_modal.dart b/lib/ui/analysis/widgets/chart_modal.dart index 919edade..6eab8aca 100644 --- a/lib/ui/analysis/widgets/chart_modal.dart +++ b/lib/ui/analysis/widgets/chart_modal.dart @@ -30,7 +30,7 @@ class _ChartModalState extends State with ItemModal { final targetItems = []; @override - String get title => widget.chart?.name ?? S.analysisChartTitleCreate; + String get title => widget.chart == null ? S.analysisChartTitleCreate : S.analysisChartTitleUpdate; @override List buildFormFields() { @@ -43,6 +43,7 @@ class _ChartModalState extends State with ItemModal { textCapitalization: TextCapitalization.words, decoration: InputDecoration( labelText: S.analysisChartModalNameLabel, + hintText: widget.chart?.name, filled: false, ), maxLength: 50, diff --git a/lib/ui/analysis/widgets/chart_range_page.dart b/lib/ui/analysis/widgets/chart_range_page.dart index cabb6a4c..2b18fbce 100644 --- a/lib/ui/analysis/widgets/chart_range_page.dart +++ b/lib/ui/analysis/widgets/chart_range_page.dart @@ -1,6 +1,10 @@ import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/components/style/date_range_picker.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/helpers/util.dart'; import 'package:possystem/translator.dart'; @@ -23,53 +27,114 @@ class _ChartRangePageState extends State with SingleTickerProvid @override Widget build(BuildContext context) { final local = MaterialLocalizations.of(context); - return Scaffold( - appBar: AppBar( - title: Text(MaterialLocalizations.of(context).unspecifiedDateRange), - leading: const CloseButton(), - actions: [ - TextButton( - onPressed: () => Navigator.of(context).pop(select), - child: Text(local.okButtonLabel), - ), - const SizedBox(width: 8), - ], - bottom: TabBar(controller: _controller, tabs: [ - for (final tab in _TabType.values) Tab(child: Text(S.analysisChartRangeTabName(tab.name), softWrap: true)), - ]), + final bp = Breakpoint.find(width: MediaQuery.sizeOf(context).width); + return ResponsiveDialog( + scrollable: false, + title: Row(children: [ + Text(MaterialLocalizations.of(context).unspecifiedDateRange), + bp <= Breakpoint.medium + ? const Spacer() + : Expanded( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: kHorizontalSpacing), + child: ListenableBuilder( + listenable: _controller, + builder: (context, child) { + return SegmentedButton( + selected: {_controller.index}, + onSelectionChanged: (value) => _controller.index = value.first, + segments: [ + for (final tab in _TabType.values) + ButtonSegment(value: tab.index, label: Text(S.analysisChartRangeTabName(tab.name))), + ], + ); + }, + ), + ), + ), + ]), + action: TextButton( + onPressed: () { + if (context.mounted && context.canPop()) { + context.pop(select); + } + }, + child: Text(local.okButtonLabel), ), - body: TabBarView(controller: _controller, children: [ - for (final tab in [_TabType.day, _TabType.week, _TabType.month]) - ListView( - children: [ - for (final e in ranges[tab]!.entries) - RadioListTile( - title: Text(e.key), - subtitle: Text(e.value.format(S.localeName)), - value: e.value, - groupValue: select, - onChanged: (value) => setState(() => select = value!), + content: _buildContent(bp), + ); + } + + Widget _buildContent(Breakpoint bp) { + if (bp <= Breakpoint.medium) { + return Column(mainAxisSize: MainAxisSize.min, children: [ + TabBar( + controller: _controller, + tabs: [ + for (final tab in _TabType.values) + Tab( + child: Text( + S.analysisChartRangeTabName(tab.name), + softWrap: true, ), - ], - ), - ListView( - children: [ - ListTile( - title: Text(select.format(S.localeName)), - onTap: () async { - final value = await showMyDateRangePicker(context, select); - - if (value != null) { - setState(() => select = value); - } - }, - ), + ), ], ), - ]), + Expanded( + child: TabBarView(controller: _controller, children: [ + for (final tab in [_TabType.day, _TabType.week, _TabType.month, _TabType.custom]) _buildTab(tab), + ]), + ), + ]); + } + + return SizedBox( + width: Breakpoint.compact.max, + child: Padding( + padding: const EdgeInsets.only(top: kTopSpacing, bottom: kDialogBottomSpacing), + child: ListenableBuilder( + listenable: _controller, + builder: (context, child) { + return _buildTab(_TabType.values[_controller.index]); + }, + ), + ), ); } + Widget _buildTab(_TabType tab) { + switch (tab) { + case _TabType.day: + case _TabType.week: + case _TabType.month: + return ListView( + children: [ + for (final e in ranges[tab]!.entries) + RadioListTile( + title: Text(e.key), + subtitle: Text(e.value.format(S.localeName)), + value: e.value, + groupValue: select, + onChanged: (value) => setState(() => select = value!), + ), + ], + ); + case _TabType.custom: + return ListView(children: [ + ListTile( + title: Text(select.format(S.localeName)), + onTap: () async { + final value = await showMyDateRangePicker(context, select); + + if (value != null) { + setState(() => select = value); + } + }, + ), + ]); + } + } + @override void initState() { select = widget.range; diff --git a/lib/ui/analysis/widgets/goals_card_view.dart b/lib/ui/analysis/widgets/goals_card_view.dart index 539d005d..197ac2eb 100644 --- a/lib/ui/analysis/widgets/goals_card_view.dart +++ b/lib/ui/analysis/widgets/goals_card_view.dart @@ -1,6 +1,9 @@ import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; +import 'package:possystem/components/style/info_popup.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/helpers/analysis/ema_calculator.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/helpers/util.dart'; import 'package:possystem/models/repository/seller.dart'; import 'package:possystem/services/cache.dart'; @@ -12,9 +15,12 @@ class GoalsCardView extends StatefulWidget { /// Help to calculate the EMA of the last 20 days. final EMACalculator calculator; + final Widget? action; + const GoalsCardView({ super.key, this.calculator = const EMACalculator(20), + this.action, }); @override @@ -32,6 +38,7 @@ class _GoalsCardViewState extends State { id: 'goals', title: S.analysisGoalsTitle, notifiers: [Seller.instance], + action: widget.action, builder: _builder, loader: _loader, ); @@ -50,53 +57,48 @@ class _GoalsCardViewState extends State { } Widget _builder(BuildContext context, OrderSummary metric) { - final style = Theme.of(context).textTheme.bodyLarge?.copyWith( - overflow: TextOverflow.ellipsis, - ); - final goals = [ - _GoalItem( - type: OrderMetricType.count, - current: metric.count, - goal: goal!.count, - style: style, - name: S.analysisGoalsCountTitle, - desc: S.analysisGoalsCountDescription, - ), - _GoalItem( - type: OrderMetricType.revenue, - current: metric.revenue, - goal: goal!.revenue, - style: style, - name: S.analysisGoalsRevenueTitle, - desc: S.analysisGoalsRevenueDescription, - ), - _GoalItem( - type: OrderMetricType.profit, - current: metric.profit, - goal: goal!.profit, - style: style, - name: S.analysisGoalsProfitTitle, - desc: S.analysisGoalsProfitDescription, - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text(S.analysisGoalsCostTitle, style: style), - Text(metric.cost.toCurrency(), style: style), - ], - ), - ]; - - return Row( - children: [ - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: goals, + final style = Theme.of(context).textTheme.bodyLarge?.copyWith(overflow: TextOverflow.ellipsis); + + return LayoutBuilder(builder: (context, constraint) { + final compact = constraint.maxWidth < Breakpoint.compact.max; + final align = goal!.profit == 0 ? MainAxisAlignment.start : MainAxisAlignment.spaceAround; + return Row(mainAxisAlignment: align, children: [ + Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + _GoalItem( + current: metric.count, + goal: goal!.count, + style: style, + name: S.analysisGoalsCountTitle, + desc: S.analysisGoalsCountDescription, + compact: compact, ), - ), + _GoalItem( + current: metric.revenue, + goal: goal!.revenue, + style: style, + name: S.analysisGoalsRevenueTitle, + desc: S.analysisGoalsRevenueDescription, + compact: compact, + ), + _GoalItem( + current: metric.profit, + goal: goal!.profit, + style: style, + name: S.analysisGoalsProfitTitle, + desc: S.analysisGoalsProfitDescription, + compact: compact, + ), + _GoalItem( + current: metric.cost, + goal: 0, + style: style, + name: S.analysisGoalsCostTitle, + compact: compact, + ), + ]), if (goal!.profit != 0) - Expanded( + ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 240), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 12.0), child: Stack(children: [ @@ -114,14 +116,15 @@ class _GoalsCardViewState extends State { child: Text( S.analysisGoalsAchievedRate(formatter.format(metric.profit / goal!.profit)), style: Theme.of(context).textTheme.titleMedium, + textAlign: TextAlign.center, ), ), ), ]), ), ), - ], - ); + ]); + }); } Future _loader() async { @@ -136,34 +139,34 @@ class _GoalsCardViewState extends State { OrderMetricType.profit, OrderMetricType.cost, ], - ignoreEmpty: true, - limit: widget.calculator.length + 1, + ignoreEmpty: true, // this will ignore today, so later we need to add it back. + limit: goal == null ? widget.calculator.length + 1 : 1, orderDirection: "desc", ); - // Remove the first data, which is the today's data. - final todayData = result.isEmpty ? OrderSummary(at: range.start) : result.removeAt(0); - - final reversed = result.reversed; - goal ??= OrderSummary( - at: DateTime(0), // this is dummy data, we don't need the date. - values: { - 'count': widget.calculator.calculate(reversed.map((e) => e.count)), - 'revenue': widget.calculator.calculate(reversed.map((e) => e.revenue)), - 'profit': widget.calculator.calculate(reversed.map((e) => e.profit)), - }, - ); + // Remove the first data, which is the latest data. + final todayData = result.firstOrNull?.at == range.end ? result.removeAt(0) : OrderSummary(at: range.start); + + if (goal == null) { + final reversed = result.take(20).toList().reversed; + goal = OrderSummary( + at: DateTime(0), // this is dummy data, we don't need the date. + values: { + 'count': widget.calculator.calculate(reversed.map((e) => e.count)), + 'revenue': widget.calculator.calculate(reversed.map((e) => e.revenue)), + 'profit': widget.calculator.calculate(reversed.map((e) => e.profit)), + }, + ); + } return todayData; } } class _GoalItem extends StatelessWidget { - final OrderMetricType type; - final String name; - final String desc; + final String? desc; final num current; @@ -171,38 +174,53 @@ class _GoalItem extends StatelessWidget { final TextStyle? style; + final bool compact; + const _GoalItem({ - required this.type, required this.name, - required this.desc, + this.desc, required this.current, required this.goal, this.style, + required this.compact, }); @override Widget build(BuildContext context) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text(name, style: style), - // TODO: tap to show the description - // InfoPopup(desc), - RichText( - text: TextSpan( - text: current.toCurrency(), - style: style, - children: [ - if (goal != 0) + final label = Row(children: [ + Text(name, style: style, overflow: TextOverflow.ellipsis), + if (desc != null) InfoPopup(desc!), + ]); + final value = RichText( + text: TextSpan( + text: current.toCurrency(), + style: style?.copyWith(fontSize: 24), + children: goal != 0 + ? [ TextSpan( text: '／${goal.toCurrency()}', - style: const TextStyle(color: Colors.grey), + style: const TextStyle(color: Colors.grey, fontSize: 24), ), - ], - ), - ), + ] + : null, + ), + ); + + if (compact) { + return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + label, + value, const SizedBox(height: 4), - ], + ]); + } + + return ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 320), + child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ + label, + const SizedBox(width: kInternalLargeSpacing), + Expanded(child: Align(alignment: Alignment.centerRight, child: value)), + ]), ); } } diff --git a/lib/ui/analysis/widgets/history_calendar_view.dart b/lib/ui/analysis/widgets/history_calendar_view.dart index 620faef9..7765a50a 100644 --- a/lib/ui/analysis/widgets/history_calendar_view.dart +++ b/lib/ui/analysis/widgets/history_calendar_view.dart @@ -14,12 +14,12 @@ int _hashMonth(DateTime e) => e.month + e.year * 100; class HistoryCalendarView extends StatefulWidget { final ValueNotifier notifier; - final bool isPortrait; + final bool shouldFillViewport; const HistoryCalendarView({ super.key, required this.notifier, - required this.isPortrait, + required this.shouldFillViewport, }); @override @@ -49,7 +49,7 @@ class _HistoryCalendarViewState extends State { lastDay: DateTime.now(), focusedDay: _focusedDay, calendarFormat: _calendarFormat, - shouldFillViewport: widget.isPortrait ? false : true, + shouldFillViewport: widget.shouldFillViewport, startingDayOfWeek: StartingDayOfWeek.monday, rangeSelectionMode: RangeSelectionMode.disabled, locale: LanguageSetting.instance.language.locale.toString(), diff --git a/lib/ui/analysis/widgets/history_order_list.dart b/lib/ui/analysis/widgets/history_order_list.dart index 801114c2..03edaef0 100644 --- a/lib/ui/analysis/widgets/history_order_list.dart +++ b/lib/ui/analysis/widgets/history_order_list.dart @@ -43,7 +43,7 @@ class HistoryOrderList extends StatelessWidget { ), subtitle: subtitle, onTap: () => context.pushNamed( - Routes.historyModal, + Routes.historyOrder, pathParameters: {'id': order.id?.toString() ?? ''}, ), ); diff --git a/lib/ui/analysis/widgets/history_order_modal.dart b/lib/ui/analysis/widgets/history_order_modal.dart index 1904e9b6..310af0ce 100644 --- a/lib/ui/analysis/widgets/history_order_modal.dart +++ b/lib/ui/analysis/widgets/history_order_modal.dart @@ -1,11 +1,12 @@ import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'package:possystem/components/bottom_sheet_actions.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/style/buttons.dart'; import 'package:possystem/components/style/hint_text.dart'; -import 'package:possystem/components/style/pop_button.dart'; import 'package:possystem/components/style/snackbar.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/helpers/util.dart'; import 'package:possystem/models/objects/order_object.dart'; import 'package:possystem/models/repository/seller.dart'; @@ -26,21 +27,14 @@ class _HistoryOrderModalState extends State { @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - leading: const PopButton(), - title: Text(S.analysisHistoryOrderTitle), - actions: [ - MoreButton( - key: const Key('order_modal.more'), - onPressed: _showActions, - ), - ], - ), - body: FutureBuilder( + return ResponsiveDialog( + title: Text(S.analysisHistoryOrderTitle), + scrollable: false, + content: FutureBuilder( future: Seller.instance.getOrder(widget.orderId), builder: Util.handleSnapshot((context, order) { if (order == null) { + createdAt = null; return Center(child: Text(S.analysisHistoryOrderNotFound)); } @@ -49,8 +43,16 @@ class _HistoryOrderModalState extends State { DateFormat.Hms(S.localeName).format(order.createdAt); return Column(children: [ Padding( - padding: const EdgeInsets.all(4.0), - child: HintText(createdAt!), + padding: const EdgeInsets.fromLTRB(kHorizontalSpacing, kTopSpacing, kHorizontalSpacing, kInternalSpacing), + child: Row( + children: [ + Expanded(child: Center(child: HintText(createdAt!))), + MoreButton( + key: const Key('order_modal.more'), + onPressed: _showActions, + ), + ], + ), ), Expanded( child: OrderObjectView(order: order), @@ -61,20 +63,20 @@ class _HistoryOrderModalState extends State { ); } - Future _showActions() async { - if (createdAt == null) return; - - await BottomSheetActions.withDelete<_Action>( - context, - deleteValue: _Action.delete, - popAfterDeleted: true, - deleteCallback: () => showSnackbarWhenFailed( - Seller.instance.delete(widget.orderId), + void _showActions(BuildContext context) async { + if (createdAt != null) { + await BottomSheetActions.withDelete<_Action>( context, - 'analysis_delete_error', - ), - warningContent: Text(S.analysisHistoryOrderDeleteDialog(createdAt!)), - ); + deleteValue: _Action.delete, + popAfterDeleted: true, + deleteCallback: () => showSnackbarWhenFailed( + Seller.instance.delete(widget.orderId), + context, + 'analysis_delete_error', + ), + warningContent: Text(S.analysisHistoryOrderDeleteDialog(createdAt!)), + ); + } } } diff --git a/lib/ui/analysis/widgets/reloadable_card.dart b/lib/ui/analysis/widgets/reloadable_card.dart index 292cc5c2..0da90294 100644 --- a/lib/ui/analysis/widgets/reloadable_card.dart +++ b/lib/ui/analysis/widgets/reloadable_card.dart @@ -2,6 +2,7 @@ import 'dart:async'; import 'package:flutter/material.dart'; import 'package:possystem/components/style/circular_loading.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/helpers/logger.dart'; import 'package:visibility_detector/visibility_detector.dart'; @@ -19,6 +20,8 @@ class ReloadableCard extends StatefulWidget { final bool wrappedByCard; + final Widget? action; + const ReloadableCard({ super.key, required this.id, @@ -27,6 +30,7 @@ class ReloadableCard extends StatefulWidget { this.title, this.notifiers, this.wrappedByCard = true, + this.action, }); @override @@ -49,15 +53,22 @@ class _ReloadableCardState extends State> with AutomaticKee @override Widget build(BuildContext context) { super.build(context); - return Stack(children: [ - ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 432), - child: SizedBox( - width: double.infinity, - child: buildWrapper(buildTarget()), + return Column(children: [ + if (widget.title != null) + Padding( + padding: const EdgeInsets.fromLTRB(16, 8, 0, 4), + child: buildTitle(), ), - ), - if (reloadable) buildReloading(), + Stack(children: [ + ConstrainedBox( + constraints: BoxConstraints(maxWidth: Breakpoint.medium.max), + child: SizedBox( + width: double.infinity, + child: buildWrapper(buildTarget()), + ), + ), + if (reloadable) buildReloading(), + ]), ]); } @@ -101,18 +112,12 @@ class _ReloadableCardState extends State> with AutomaticKee if (widget.wrappedByCard) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 12.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (widget.title != null) buildTitle(), - Card( - margin: const EdgeInsets.only(top: 8.0), - child: Padding( - padding: const EdgeInsets.all(16.0), - child: child, - ), - ), - ], + child: Card( + margin: const EdgeInsets.only(top: 8.0), + child: Padding( + padding: const EdgeInsets.all(16.0), + child: child, + ), ), ); } @@ -124,10 +129,14 @@ class _ReloadableCardState extends State> with AutomaticKee } Widget buildTitle() { - return Text( - widget.title!, - style: Theme.of(context).textTheme.headlineSmall, - ); + return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ + Text( + widget.title!, + style: Theme.of(context).textTheme.headlineMedium?.copyWith(fontSize: 24), + overflow: TextOverflow.ellipsis, + ), + if (widget.action != null) widget.action!, + ]); } Widget buildReloading() { @@ -164,7 +173,7 @@ class _ReloadableCardState extends State> with AutomaticKee } }); widget.notifiers?.forEach((e) { - e.addListener(changeListener); + e.addListener(handleUpdate); }); } @@ -172,7 +181,7 @@ class _ReloadableCardState extends State> with AutomaticKee void dispose() { super.dispose(); widget.notifiers?.forEach((e) { - e.removeListener(changeListener); + e.removeListener(handleUpdate); }); } @@ -192,12 +201,15 @@ class _ReloadableCardState extends State> with AutomaticKee final inline = await load(); setState(() { + // TODO: avoid run conflict with handleUpdate + reloadable = false; + lastBuiltTarget = null; data = inline; }); } } - void changeListener() { + void handleUpdate() { if (!reloadable) { setState(() { reloadable = true; diff --git a/lib/ui/cashier/cashier_view.dart b/lib/ui/cashier/cashier_view.dart index a973e373..78ab7c49 100644 --- a/lib/ui/cashier/cashier_view.dart +++ b/lib/ui/cashier/cashier_view.dart @@ -1,96 +1,99 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:possystem/components/dialog/confirm_dialog.dart'; -import 'package:possystem/components/style/route_circular_button.dart'; +import 'package:possystem/components/style/route_buttons.dart'; import 'package:possystem/components/style/snackbar.dart'; import 'package:possystem/components/tutorial.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/repository/cashier.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; -import 'widgets/unit_list_view.dart'; +import 'widgets/unit_list_tile.dart'; -class CashierView extends StatefulWidget { - final int? tabIndex; - - const CashierView({super.key, this.tabIndex}); - - @override - State createState() => _CashierViewState(); -} - -class _CashierViewState extends State with AutomaticKeepAliveClientMixin { - late final TutorialInTab? tab; +class CashierView extends StatelessWidget { + const CashierView({super.key}); @override Widget build(BuildContext context) { - super.build(context); + return Center( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: Breakpoint.medium.max), + child: ListenableBuilder( + listenable: Cashier.instance, + builder: (context, _) { + var i = 0; + return ListView(padding: const EdgeInsets.only(bottom: kFABSpacing, top: kTopSpacing), children: [ + _buildActions(context), + const SizedBox(height: kInternalSpacing), + for (final item in Cashier.instance.currentUnits) + UnitListTile( + item: item, + index: i++, + ), + ]); + }, + ), + ), + ); + } - return TutorialWrapper( - tab: tab, - child: ListView(padding: const EdgeInsets.only(bottom: 76, top: 16), children: [ - Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - Expanded( - child: Tutorial( - id: 'cashier.default', - index: 2, - title: S.cashierToDefaultTutorialTitle, - message: S.cashierToDefaultTutorialContent, - child: RouteCircularButton( - key: const Key('cashier.defaulter'), - onTap: handleSetDefault, - icon: Icons.upload_sharp, - text: S.cashierToDefaultTitle, - ), - ), + Widget _buildActions(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(right: kHorizontalSpacing), + child: Row(children: [ + const SizedBox(width: kInternalSpacing), + Tutorial( + id: 'cashier.default', + title: S.cashierToDefaultTutorialTitle, + message: S.cashierToDefaultTutorialContent, + preferVertical: true, + child: RouteIconButton( + key: const Key('cashier.defaulter'), + label: S.cashierToDefaultTitle, + icon: Icon(Cashier.instance.defaultNotSet ? Icons.star_border_outlined : Icons.star), + onPressed: () => _handleSetDefault(context), ), - Expanded( - child: Tutorial( - index: 1, + ), + const Spacer(), + Material( + elevation: 1.0, + borderRadius: const BorderRadius.all(Radius.circular(6.0)), + child: Row(children: [ + Tutorial( id: 'cashier.change', title: S.cashierChangerTutorialTitle, message: S.cashierChangerTutorialContent, - child: RouteCircularButton( + preferVertical: true, + child: RouteIconButton( key: const Key('cashier.changer'), route: Routes.cashierChanger, - icon: Icons.sync_alt_sharp, - text: S.cashierChangerTitle, + icon: const Icon(Icons.sync_alt_outlined), + label: S.cashierChangerTitle, popTrueShowSuccess: true, ), ), - ), - Expanded( - child: Tutorial( - index: 0, + const SizedBox(height: 28, child: VerticalDivider()), + Tutorial( id: 'cashier.surplus', title: S.cashierSurplusTutorialTitle, message: S.cashierSurplusTutorialContent, - child: RouteCircularButton( + preferVertical: true, + child: RouteIconButton( key: const Key('cashier.surplus'), - icon: Icons.coffee_sharp, - text: S.cashierSurplusTitle, - popTrueShowSuccess: true, - onTap: handleSurplus, + icon: const Icon(Icons.coffee_outlined), + label: S.cashierSurplusTitle, + onPressed: () => _handleSurplus(context), ), ), - ), - ]), - const UnitListView(), + ]), + ), ]), ); } - @override - bool get wantKeepAlive => true; - - @override - void initState() { - tab = widget.tabIndex == null ? null : TutorialInTab(index: widget.tabIndex!, context: context); - - super.initState(); - } - - void handleSetDefault() async { + void _handleSetDefault(BuildContext context) async { if (!Cashier.instance.defaultNotSet) { final result = await ConfirmDialog.show( context, @@ -105,19 +108,19 @@ class _CashierViewState extends State with AutomaticKeepAliveClient await Cashier.instance.setDefault(); - if (mounted) { + if (context.mounted) { showSnackBar(context, S.actSuccess); } } - void handleSurplus() async { + void _handleSurplus(BuildContext context) async { if (Cashier.instance.defaultNotSet) { return showSnackBar(context, S.cashierSurplusErrorEmptyDefault); } final result = await context.pushNamed(Routes.cashierSurplus); if (result == true) { - if (mounted) { + if (context.mounted) { showSnackBar(context, S.actSuccess); } } diff --git a/lib/ui/cashier/changer_modal.dart b/lib/ui/cashier/changer_modal.dart new file mode 100644 index 00000000..cfdaf4c9 --- /dev/null +++ b/lib/ui/cashier/changer_modal.dart @@ -0,0 +1,144 @@ +import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/helpers/breakpoint.dart'; +import 'package:possystem/translator.dart'; + +import 'widgets/changer_custom_view.dart'; +import 'widgets/changer_favorite_view.dart'; + +class ChangerModal extends StatefulWidget { + const ChangerModal({super.key}); + + @override + State createState() => _ChangerModalState(); +} + +class _ChangerModalState extends State with TickerProviderStateMixin { + late TabController controller; + final customState = GlobalKey(); + final favoriteState = GlobalKey(); + + @override + Widget build(BuildContext context) { + final bp = Breakpoint.find(width: MediaQuery.sizeOf(context).width); + return ResponsiveDialog( + scrollable: bp.max > Breakpoint.medium.max, + title: Row(children: [ + Text(S.cashierChangerTitle), + bp <= Breakpoint.medium + ? const Spacer() + : Expanded( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: kHorizontalSpacing), + child: ListenableBuilder( + listenable: controller, + builder: (context, child) { + return SegmentedButton( + selected: {controller.index}, + onSelectionChanged: (value) => controller.index = value.first, + segments: [ + ButtonSegment(value: 0, label: Text(S.cashierChangerFavoriteTab)), + ButtonSegment(value: 1, label: Text(S.cashierChangerCustomTab)), + ], + ); + }, + ), + ), + ), + ]), + action: TextButton( + key: const Key('changer.apply'), + onPressed: handleApply, + child: Text(S.cashierChangerButton), + ), + content: _buildContent(bp), + ); + } + + Widget _buildContent(Breakpoint bp) { + if (bp <= Breakpoint.medium) { + return Column(mainAxisSize: MainAxisSize.min, children: [ + TabBar( + controller: controller, + tabs: [ + Tab(key: const Key('changer.favorite'), text: S.cashierChangerFavoriteTab), + Tab(key: const Key('changer.custom'), text: S.cashierChangerCustomTab), + ], + ), + Expanded( + child: TabBarView(controller: controller, children: [ + SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.only(top: kTopSpacing), + child: ChangerFavoriteView( + key: favoriteState, + emptyAction: () => controller.animateTo(1), + ), + ), + ), + SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.only(top: kTopSpacing), + child: ChangerCustomView( + key: customState, + afterFavoriteAdded: () => controller.animateTo(0), + ), + ), + ), + ]), + ), + ]); + } + + return Padding( + padding: const EdgeInsets.only(top: kTopSpacing, bottom: kDialogBottomSpacing), + child: ListenableBuilder( + listenable: controller, + builder: (context, child) { + if (controller.index == 0) { + return ChangerFavoriteView( + key: favoriteState, + emptyAction: _moveToCustom, + ); + } + return ChangerCustomView( + key: customState, + afterFavoriteAdded: _moveToFavorite, + ); + }, + ), + ); + } + + @override + void dispose() { + controller.dispose(); + super.dispose(); + } + + void handleApply() async { + final isValid = controller.index == 1 + ? await customState.currentState?.handleApply() + : await favoriteState.currentState?.handleApply(); + + if (isValid == true && mounted && context.canPop()) { + context.pop(true); + } + } + + @override + void initState() { + controller = TabController(length: 2, vsync: this); + super.initState(); + } + + void _moveToCustom() { + controller.index = 1; + } + + void _moveToFavorite() { + controller.index = 0; + } +} diff --git a/lib/ui/cashier/changer_page.dart b/lib/ui/cashier/changer_page.dart deleted file mode 100644 index c54a86aa..00000000 --- a/lib/ui/cashier/changer_page.dart +++ /dev/null @@ -1,86 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:go_router/go_router.dart'; -import 'package:possystem/components/style/pop_button.dart'; -import 'package:possystem/translator.dart'; - -import 'widgets/changer_custom_view.dart'; -import 'widgets/changer_favorite_view.dart'; - -class ChangerModal extends StatefulWidget { - const ChangerModal({super.key}); - - @override - State createState() => _ChangerModalState(); -} - -class _ChangerModalState extends State with TickerProviderStateMixin { - late TabController controller; - final customState = GlobalKey(); - final favoriteState = GlobalKey(); - - @override - Widget build(BuildContext context) { - // tab widgets - final tabBar = TabBar( - controller: controller, - tabs: [ - Tab(key: const Key('changer.favorite'), text: S.cashierChangerFavoriteTab), - Tab(key: const Key('changer.custom'), text: S.cashierChangerCustomTab), - ], - ); - final tabBarView = TabBarView(controller: controller, children: [ - ChangerFavoriteView( - key: favoriteState, - emptyAction: () => controller.animateTo(1), - ), - ChangerCustomView( - key: customState, - afterFavoriteAdded: () => controller.animateTo(0), - ), - ]); - - return Scaffold( - resizeToAvoidBottomInset: false, - appBar: AppBar( - leading: const PopButton(), - title: Text(S.cashierChangerTitle), - actions: [ - TextButton( - key: const Key('changer.apply'), - onPressed: handleApply, - child: Text(S.cashierChangerButton), - ), - ], - ), - body: DefaultTabController( - length: tabBar.tabs.length, - child: Column(mainAxisSize: MainAxisSize.min, children: [ - tabBar, - Expanded(child: tabBarView), - ]), - ), - ); - } - - @override - void dispose() { - controller.dispose(); - super.dispose(); - } - - void handleApply() async { - final isValid = controller.index == 1 - ? await customState.currentState?.handleApply() - : await favoriteState.currentState?.handleApply(); - - if (isValid == true && mounted && context.canPop()) { - context.pop(true); - } - } - - @override - void initState() { - controller = TabController(length: 2, vsync: this); - super.initState(); - } -} diff --git a/lib/ui/cashier/surplus_page.dart b/lib/ui/cashier/surplus_page.dart index 10142f2e..dba8d334 100644 --- a/lib/ui/cashier/surplus_page.dart +++ b/lib/ui/cashier/surplus_page.dart @@ -1,8 +1,10 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/components/dialog/single_text_dialog.dart'; import 'package:possystem/components/style/hint_text.dart'; import 'package:possystem/components/style/info_popup.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/helpers/validator.dart'; import 'package:possystem/models/repository/cashier.dart'; import 'package:possystem/settings/currency_setting.dart'; @@ -33,49 +35,37 @@ class CashierSurplus extends StatelessWidget { ]), ]; - return Scaffold( - appBar: AppBar( - leading: const CloseButton(key: Key('pop')), - title: Text(S.cashierSurplusButton), - actions: [ - TextButton( - key: const Key('cashier_surplus.confirm'), - onPressed: () async { - await Cashier.instance.surplus(); - if (context.mounted && context.canPop()) { - context.pop(true); - } - }, - child: Text(MaterialLocalizations.of(context).okButtonLabel), - ), - ], + return ResponsiveDialog( + title: Text(S.cashierSurplusButton), + action: TextButton( + key: const Key('cashier_surplus.confirm'), + onPressed: () async { + await Cashier.instance.surplus(); + if (context.mounted && context.canPop()) { + context.pop(true); + } + }, + child: Text(MaterialLocalizations.of(context).okButtonLabel), ), - body: Column(children: [ - _DataWithLabel( - data: cashier.currentTotal.toCurrency(), - label: S.cashierSurplusCurrentTotalLabel, - helper: S.cashierSurplusCurrentTotalHelper, - ), - _DataWithLabel( - data: (cashier.currentTotal - cashier.defaultTotal).toCurrency(), - label: S.cashierSurplusDiffTotalLabel, - helper: S.cashierSurplusDiffTotalHelper, - ), - const Divider(), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0), - child: HintText(S.cashierSurplusTableHint, textAlign: TextAlign.center), - ), - Expanded( - child: Padding( - padding: const EdgeInsets.all(8.0), - child: SingleChildScrollView( - child: SingleChildScrollView( - scrollDirection: Axis.horizontal, - child: DataTable(columns: columns, rows: rows), - ), - ), + content: Column(children: [ + Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ + _DataWithLabel( + data: cashier.currentTotal.toCurrency(), + label: S.cashierSurplusCurrentTotalLabel, + helper: S.cashierSurplusCurrentTotalHelper, + ), + _DataWithLabel( + data: (cashier.currentTotal - cashier.defaultTotal).toCurrency(), + label: S.cashierSurplusDiffTotalLabel, + helper: S.cashierSurplusDiffTotalHelper, ), + ]), + const Divider(), + HintText(S.cashierSurplusTableHint, textAlign: TextAlign.center), + const SizedBox(height: kInternalSpacing), + SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: DataTable(columns: columns, rows: rows), ), ]), ); diff --git a/lib/ui/cashier/widgets/changer_custom_view.dart b/lib/ui/cashier/widgets/changer_custom_view.dart index 9c31338a..80f8c53c 100644 --- a/lib/ui/cashier/widgets/changer_custom_view.dart +++ b/lib/ui/cashier/widgets/changer_custom_view.dart @@ -37,7 +37,6 @@ class ChangerCustomViewState extends State { num? sourceUnit; String errorMessage = ''; - late FocusNode errorFocus; @override Widget build(BuildContext context) { @@ -66,16 +65,14 @@ class ChangerCustomViewState extends State { hint: Text(S.cashierChangerCustomUnitLabel), isDense: true, style: Theme.of(context).textTheme.bodyMedium, - validator: Validator.positiveNumber(S.cashierChangerCustomUnitLabel), onChanged: handleUnitChanged, items: _unitDropdownMenuItems(), - autovalidateMode: AutovalidateMode.onUserInteraction, ), ); final targetEntries = [ for (var entry in targets.asMap().entries) Padding( - padding: const EdgeInsets.only(top: kSpacing1), + padding: const EdgeInsets.only(top: kInternalSpacing), child: _wrapInRow( TextFormField( key: Key('changer.custom.target.${entry.key}.count'), @@ -93,7 +90,7 @@ class ChangerCustomViewState extends State { style: Theme.of(context).textTheme.bodyMedium, onChanged: (value) => setState(() => entry.value.unit = value), onSaved: (value) => entry.value.unit = value, - items: ChangerCustomViewState._unitDropdownMenuItems(), + items: _unitDropdownMenuItems(), ), entry.key == 0 ? null @@ -108,44 +105,33 @@ class ChangerCustomViewState extends State { ) ]; - return SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(kSpacing2), - child: Form( - key: formKey, - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - actions, - TextDivider(label: S.cashierChangerCustomDividerFrom), - sourceEntry, - TextDivider(label: S.cashierChangerCustomDividerTo), - Focus( - focusNode: errorFocus, - child: Builder(builder: (context) { - return Focus.of(context).hasFocus - ? Center( - child: Text( - errorMessage, - style: theme.textTheme.bodyMedium!.copyWith(color: theme.colorScheme.error), - ), - ) - : const SizedBox(); - }), + return Padding( + padding: const EdgeInsets.symmetric(horizontal: kHorizontalSpacing), + child: Form( + key: formKey, + child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ + actions, + if (errorMessage.isNotEmpty) + Center( + child: Text( + errorMessage, + style: theme.textTheme.bodyMedium!.copyWith(color: theme.colorScheme.error), ), - ...targetEntries, - // add bottom - const SizedBox(height: kSpacing1), - OutlinedButton.icon( - onPressed: () => setState(() { - targets.add(CashierChangeEntryObject()); - }), - icon: const Icon(KIcons.add), - label: Text(S.cashierChangerCustomUnitAddBtn), - ) - ], - ), - ), + ), + TextDivider(label: S.cashierChangerCustomDividerFrom), + sourceEntry, + TextDivider(label: S.cashierChangerCustomDividerTo), + ...targetEntries, + // add bottom + const SizedBox(height: kInternalSpacing), + OutlinedButton.icon( + onPressed: () => setState(() { + targets.add(CashierChangeEntryObject()); + }), + icon: const Icon(KIcons.add), + label: Text(S.cashierChangerCustomUnitAddBtn), + ) + ]), ), ); } @@ -155,14 +141,12 @@ class ChangerCustomViewState extends State { super.initState(); sourceCount = TextEditingController(text: '1'); targetController = TextEditingController(); - errorFocus = FocusNode(); } @override void dispose() { sourceCount.dispose(); targetController.dispose(); - errorFocus.dispose(); super.dispose(); } @@ -217,31 +201,31 @@ class ChangerCustomViewState extends State { } bool validate() { - final isValid = formKey.currentState!.validate(); + if (sourceUnit == null || sourceUnit! <= 0) { + _setError(S.invalidNumberPositive(S.cashierChangerCustomUnitLabel)); + return false; + } - if (isValid) { - formKey.currentState?.save(); + formKey.currentState?.save(); - final count = int.parse(sourceCount.text); - var total = count * sourceUnit!; + final count = int.parse(sourceCount.text); + var total = count * sourceUnit!; - for (var target in targets) { - total -= target.total; - } + for (var target in targets) { + total -= target.total; + } - if (total == 0) { - return true; - } + if (total == 0) { + return true; + } - var msg = S.cashierChangerErrorInvalidHead(count, sourceUnit!.toCurrency()); - for (var target in targets) { - if (!target.isEmpty) { - msg += '\n • ${S.cashierChangerErrorInvalidBody(target.count!, target.unit!.toCurrency())}'; - } + var msg = S.cashierChangerErrorInvalidHead(count, sourceUnit!.toCurrency()); + for (var target in targets) { + if (!target.isEmpty) { + msg += '\n • ${S.cashierChangerErrorInvalidBody(target.count!, target.unit!.toCurrency())}'; } - _setError(msg); } - + _setError(msg); return false; } @@ -273,20 +257,21 @@ class ChangerCustomViewState extends State { Widget _wrapInRow(Widget a, Widget b, [Widget? c]) { return Row(crossAxisAlignment: CrossAxisAlignment.end, children: [ Flexible(flex: 1, child: a), - const SizedBox(width: kSpacing1), + const SizedBox(width: kInternalSpacing), Flexible(flex: 1, child: b), if (c != null) c, ]); } void _setError(String msg) { - setState(() { - errorFocus.requestFocus(); - errorMessage = msg; - }); + if (mounted) { + setState(() { + errorMessage = msg; + }); + } } - static List> _unitDropdownMenuItems() { + List> _unitDropdownMenuItems() { return CurrencySetting.instance.unitList.map((unit) { return DropdownMenuItem(value: unit, child: Text(unit.toString())); }).toList(); diff --git a/lib/ui/cashier/widgets/changer_favorite_view.dart b/lib/ui/cashier/widgets/changer_favorite_view.dart index e797e392..0c37e78f 100644 --- a/lib/ui/cashier/widgets/changer_favorite_view.dart +++ b/lib/ui/cashier/widgets/changer_favorite_view.dart @@ -1,3 +1,4 @@ +import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/slidable_item_list.dart'; @@ -29,12 +30,6 @@ class ChangerFavoriteViewState extends State { String? errorMessage; - @override - void didChangeDependencies() { - context.watch(); - super.didChangeDependencies(); - } - @override Widget build(BuildContext context) { if (Cashier.instance.favoriteIsEmpty) { @@ -48,34 +43,32 @@ class ChangerFavoriteViewState extends State { items: Cashier.instance.favoriteItems().toList(), deleteValue: 0, handleDelete: (item) => handleDeletion(item.index), - tileBuilder: (context, item, index, showActions) => InkWell( - onLongPress: showActions, - child: RadioListTile( - key: Key('changer.favorite.$index'), - value: item, - title: Text(S.cashierChangerFavoriteItemFrom(item.source.count!, item.source.unit!.toCurrency())), - subtitle: MetaBlock.withString( - context, - item.targets.map((e) => S.cashierChangerFavoriteItemTo(e.count!, e.unit!.toCurrency())), - textOverflow: TextOverflow.visible, - ), - secondary: EntryMoreButton(onPressed: showActions), - groupValue: selected, - selected: selected == item, - onChanged: (item) => setState(() => selected = item), - ), + tileBuilder: (item, index, actorBuilder) => _Tile( + item, + index, + actorBuilder, + (item) => setState(() => selected = item), ), ); return Column(children: [ - Padding( - padding: const EdgeInsets.all(kSpacing1), - child: HintText(S.cashierChangerFavoriteHint), - ), - Expanded(child: SlidableItemList(delegate: delegate)), + const SizedBox(height: kTopSpacing), + HintText(S.cashierChangerFavoriteHint), + const SizedBox(height: kInternalSpacing), + for (final widget in delegate.items.mapIndexed( + (index, item) => delegate.build(item, index), + )) + widget, + const SizedBox(height: kFABSpacing), ]); } + @override + void didChangeDependencies() { + context.watch(); + super.didChangeDependencies(); + } + Future handleApply() async { if (selected == null) { showSnackBar(context, S.cashierChangerErrorNoSelection); @@ -97,3 +90,34 @@ class ChangerFavoriteViewState extends State { setState(() => selected = null); } } + +class _Tile extends StatelessWidget { + final FavoriteItem item; + final int index; + final ActorBuilder actorBuilder; + final void Function(FavoriteItem?) onChanged; + + const _Tile(this.item, this.index, this.actorBuilder, this.onChanged); + + @override + Widget build(BuildContext context) { + final actor = actorBuilder(context); + return InkWell( + onLongPress: actor, + child: RadioListTile( + key: Key('changer.favorite.$index'), + value: item, + title: Text(S.cashierChangerFavoriteItemFrom(item.source.count!, item.source.unit!.toCurrency())), + subtitle: MetaBlock.withString( + context, + item.targets.map((e) => S.cashierChangerFavoriteItemTo(e.count!, e.unit!.toCurrency())), + textOverflow: TextOverflow.visible, + ), + secondary: EntryMoreButton(onPressed: actor), + groupValue: ChangerFavoriteViewState.selected, + selected: ChangerFavoriteViewState.selected == item, + onChanged: onChanged, + ), + ); + } +} diff --git a/lib/ui/cashier/widgets/unit_list_view.dart b/lib/ui/cashier/widgets/unit_list_tile.dart similarity index 78% rename from lib/ui/cashier/widgets/unit_list_view.dart rename to lib/ui/cashier/widgets/unit_list_tile.dart index dfc6817e..7889d9e2 100644 --- a/lib/ui/cashier/widgets/unit_list_view.dart +++ b/lib/ui/cashier/widgets/unit_list_tile.dart @@ -6,22 +6,19 @@ import 'package:possystem/models/objects/cashier_object.dart'; import 'package:possystem/models/repository/cashier.dart'; import 'package:possystem/settings/currency_setting.dart'; import 'package:possystem/translator.dart'; -import 'package:provider/provider.dart'; -class UnitListView extends StatelessWidget { - const UnitListView({super.key}); +class UnitListTile extends StatelessWidget { + final CashierUnitObject item; + final int index; + + const UnitListTile({ + super.key, + required this.item, + required this.index, + }); @override Widget build(BuildContext context) { - final cashier = context.watch(); - int i = 0; - - return Column(children: [ - for (final item in cashier.currentUnits) _itemWidget(context, item, i++), - ]); - } - - Widget _itemWidget(BuildContext context, CashierUnitObject item, int index) { final max = Cashier.instance.defaultAt(index)?.count ?? 0; return ListTile( title: Text(S.cashierUnitLabel(item.unit.toCurrencyLong())), diff --git a/lib/ui/home/elf_page.dart b/lib/ui/home/elf_page.dart new file mode 100644 index 00000000..2d045798 --- /dev/null +++ b/lib/ui/home/elf_page.dart @@ -0,0 +1,44 @@ +import 'package:flutter/material.dart'; +import 'package:possystem/components/linkify.dart'; +import 'package:possystem/components/style/pop_button.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/routes.dart'; +import 'package:possystem/translator.dart'; + +class ElfPage extends StatelessWidget { + const ElfPage({super.key}); + + @override + Widget build(BuildContext context) { + final child = Center( + child: SingleChildScrollView( + child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ + Container( + decoration: const BoxDecoration( + // moon white + color: Color(0xFFF4F6F0), + shape: BoxShape.circle, + ), + child: Image.asset( + 'assets/feature_request_please.gif', + key: const Key('elf_page'), + ), + ), + const SizedBox(height: 14.0), + Linkify.fromString( + S.settingElfContent, + textAlign: TextAlign.center, + ), + const SizedBox(height: kFABSpacing), + ]), + ), + ); + + return Routes.homeMode.value == HomeMode.bottomNavigationBar + ? Scaffold( + appBar: AppBar(leading: const PopButton()), + body: child, + ) + : child; + } +} diff --git a/lib/ui/home/feature_request_page.dart b/lib/ui/home/feature_request_page.dart deleted file mode 100644 index 822cb8fe..00000000 --- a/lib/ui/home/feature_request_page.dart +++ /dev/null @@ -1,37 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:possystem/components/linkify.dart'; -import 'package:possystem/components/style/pop_button.dart'; -import 'package:possystem/translator.dart'; - -class FeatureRequestPage extends StatelessWidget { - const FeatureRequestPage({super.key}); - - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar(leading: const PopButton()), - body: Center( - child: SingleChildScrollView( - child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ - Container( - decoration: const BoxDecoration( - // moon white - color: Color(0xFFF4F6F0), - shape: BoxShape.circle, - ), - child: Image.asset( - 'assets/feature_request_please.gif', - key: const Key('feature_request_please'), - ), - ), - const SizedBox(height: 14.0), - Linkify.fromString( - S.settingElfContent, - textAlign: TextAlign.center, - ) - ]), - ), - ), - ); - } -} diff --git a/lib/ui/home/features_page.dart b/lib/ui/home/features_page.dart deleted file mode 100644 index 3e4c9791..00000000 --- a/lib/ui/home/features_page.dart +++ /dev/null @@ -1,252 +0,0 @@ -import 'package:collection/collection.dart'; -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; -import 'package:go_router/go_router.dart'; -import 'package:package_info_plus/package_info_plus.dart'; -import 'package:possystem/components/sign_in_button.dart'; -import 'package:possystem/components/style/outlined_text.dart'; -import 'package:possystem/components/style/pop_button.dart'; -import 'package:possystem/routes.dart'; -import 'package:possystem/services/auth.dart'; -import 'package:possystem/settings/checkout_warning.dart'; -import 'package:possystem/settings/collect_events_setting.dart'; -import 'package:possystem/settings/language_setting.dart'; -import 'package:possystem/settings/order_awakening_setting.dart'; -import 'package:possystem/settings/order_outlook_setting.dart'; -import 'package:possystem/settings/order_product_axis_count_setting.dart'; -import 'package:possystem/settings/theme_setting.dart'; -import 'package:possystem/translator.dart'; -import 'package:possystem/ui/home/widgets/feature_slider.dart'; -import 'package:possystem/ui/home/widgets/feature_switch.dart'; - -class FeaturesPage extends StatelessWidget { - final String? focus; - - const FeaturesPage({super.key, this.focus}); - - @override - Widget build(BuildContext context) { - const flavor = String.fromEnvironment('appFlavor'); - - void navigateTo(Feature feature) { - context.pushNamed(Routes.featuresChoices, pathParameters: {'feature': feature.name}); - } - - return Scaffold( - appBar: AppBar(leading: const PopButton()), - body: ListView(children: [ - const SizedBox(height: 8.0), - FutureBuilder( - future: PackageInfo.fromPlatform(), - builder: (context, snapshot) { - final info = snapshot.data; - return Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - if (info != null) Text(S.settingVersion(info.version)), - const SizedBox(width: 8.0), - OutlinedText((kDebugMode ? '_' : '') + flavor.toUpperCase()), - ], - ); - }, - ), - const SizedBox(height: 8.0), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 8.0), - child: SignInButton( - signedInWidgetBuilder: (user) => Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text(S.settingWelcome(user?.displayName ?? '')), - OutlinedButton( - key: const Key('feature.sign_out'), - onPressed: () async { - await Auth.instance.signOut(); - }, - child: Text(S.settingLogoutBtn), - ), - ], - ), - ), - ), - ListTile( - key: const Key('feature.theme'), - leading: const Icon(Icons.palette_outlined), - title: Text(S.settingThemeTitle), - subtitle: Text(S.settingThemeName(ThemeSetting.instance.value.name)), - trailing: const Icon(Icons.arrow_forward_ios_sharp), - onTap: () => navigateTo(Feature.theme), - ), - ListTile( - key: const Key('feature.language'), - leading: const Icon(Icons.language_outlined), - title: Text(S.settingLanguageTitle), - subtitle: Text(LanguageSetting.instance.language.title), - trailing: const Icon(Icons.arrow_forward_ios_sharp), - onTap: () => navigateTo(Feature.language), - ), - const Divider(), - ListTile( - key: const Key('feature.order_outlook'), - leading: const Icon(Icons.library_books_outlined), - title: Text(S.settingOrderOutlookTitle), - subtitle: Text(S.settingOrderOutlookName(OrderOutlookSetting.instance.value.name)), - trailing: const Icon(Icons.arrow_forward_ios_sharp), - onTap: () => navigateTo(Feature.orderOutlook), - ), - ListTile( - key: const Key('feature.checkout_warning'), - leading: const Icon(Icons.store_mall_directory_outlined), - title: Text(S.settingCheckoutWarningTitle), - subtitle: Text(S.settingCheckoutWarningName(CheckoutWarningSetting.instance.value.name)), - trailing: const Icon(Icons.arrow_forward_ios_sharp), - onTap: () => navigateTo(Feature.checkoutWarning), - ), - // TODO: After using RWD, this feature is not necessary - FeatureSlider( - sliderKey: const Key('feature.order_product_count'), - title: S.settingOrderProductCountTitle, - value: OrderProductAxisCountSetting.instance.value, - max: 5, - autofocus: focus == 'orderProductCount', - minLabel: S.settingOrderProductCountMinLabel, - hintText: S.settingOrderProductCountHint, - onChanged: (value) => OrderProductAxisCountSetting.instance.update(value), - ), - ListTile( - leading: const Icon(Icons.remove_red_eye_outlined), - title: Text(S.settingOrderAwakeningTitle), - subtitle: Text(S.settingOrderAwakeningDescription), - trailing: FeatureSwitch( - key: const Key('feature.order_awakening'), - autofocus: focus == 'orderAwakening', - value: OrderAwakeningSetting.instance.value, - onChanged: (value) => OrderAwakeningSetting.instance.update(value), - ), - ), - const Divider(), - ListTile( - leading: const Icon(Icons.report_outlined), - title: Text(S.settingReportTitle), - subtitle: Text(S.settingReportDescription), - trailing: FeatureSwitch( - key: const Key('feature.collect_events'), - autofocus: focus == 'collectEvents', - value: CollectEventsSetting.instance.value, - onChanged: (value) => CollectEventsSetting.instance.update(value), - ), - ), - ]), - ); - } -} - -class ItemListScaffold extends StatelessWidget { - final Feature feature; - - const ItemListScaffold({ - super.key, - required this.feature, - }); - - @override - Widget build(BuildContext context) { - final hintStyle = TextStyle(color: Theme.of(context).hintColor); - - final selected = feature.selected; - return Scaffold( - appBar: AppBar( - title: Text(feature.title), - leading: const PopButton(), - ), - body: ListView( - children: IterableZip([feature.itemTitles, feature.itemSubtitles]) - .mapIndexed((index, pair) => ListTile( - title: Text(pair[0]), - trailing: selected == index ? const Icon(Icons.check_sharp) : null, - subtitle: Text(pair[1], style: hintStyle), - onTap: () async { - if (selected != index) { - await feature.update(index); - } - }, - )) - .toList(), - ), - ); - } -} - -enum Feature { - theme(), - language(), - orderOutlook(), - checkoutWarning(); - - const Feature(); - - Iterable get itemTitles { - switch (this) { - case Feature.theme: - return ThemeMode.values.map((e) => S.settingThemeName(e.name)); - case Feature.language: - return Language.values.map((e) => e.title); - case Feature.orderOutlook: - return OrderOutlookTypes.values.map((e) => S.settingOrderOutlookName(e.name)); - case Feature.checkoutWarning: - return CheckoutWarningTypes.values.map((e) => S.settingCheckoutWarningName(e.name)); - } - } - - Iterable get itemSubtitles { - switch (this) { - case Feature.theme: - return ThemeMode.values.map((e) => ''); - case Feature.language: - return Language.values.map((e) => ''); - case Feature.orderOutlook: - return OrderOutlookTypes.values.map((e) => S.settingOrderOutlookTip(e.name)); - case Feature.checkoutWarning: - return CheckoutWarningTypes.values.map((e) => S.settingCheckoutWarningTip(e.name)); - } - } - - String get title { - switch (this) { - case Feature.theme: - return S.settingThemeTitle; - case Feature.language: - return S.settingLanguageTitle; - case Feature.orderOutlook: - return S.settingOrderOutlookTitle; - case Feature.checkoutWarning: - return S.settingCheckoutWarningTitle; - } - } - - int get selected { - switch (this) { - case Feature.theme: - return ThemeSetting.instance.value.index; - case Feature.language: - return LanguageSetting.instance.language.index; - case Feature.orderOutlook: - return OrderOutlookSetting.instance.value.index; - case Feature.checkoutWarning: - return CheckoutWarningSetting.instance.value.index; - } - } - - Future update(int index) { - switch (this) { - case Feature.theme: - return ThemeSetting.instance.update(ThemeMode.values[index]); - case Feature.language: - return LanguageSetting.instance.update(Language.values[index]); - case Feature.orderOutlook: - return OrderOutlookSetting.instance.update(OrderOutlookTypes.values[index]); - case Feature.checkoutWarning: - return CheckoutWarningSetting.instance.update(CheckoutWarningTypes.values[index]); - } - } -} diff --git a/lib/ui/home/home_page.dart b/lib/ui/home/home_page.dart index 98437811..42d34eaa 100644 --- a/lib/ui/home/home_page.dart +++ b/lib/ui/home/home_page.dart @@ -1,107 +1,422 @@ +import 'dart:math' show min; + import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; +import 'package:possystem/components/style/footer.dart'; +import 'package:possystem/components/tutorial.dart'; import 'package:possystem/constants/app_themes.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/routes.dart'; +import 'package:possystem/services/cache.dart'; import 'package:possystem/translator.dart'; -import 'package:possystem/ui/analysis/analysis_view.dart'; -import 'package:possystem/ui/cashier/cashier_view.dart'; -import 'package:possystem/ui/home/setting_view.dart'; -import 'package:possystem/ui/stock/stock_view.dart'; +import 'package:spotlight_ant/spotlight_ant.dart'; class HomePage extends StatelessWidget { - final HomeTab tab; + final StatefulNavigationShell shell; + + final ValueNotifier mode; - const HomePage({super.key, required this.tab}); + const HomePage({super.key, required this.shell, required this.mode}); @override Widget build(BuildContext context) { - // Using DefaultTabController so descendant widgets can access the controller. - // This allow building constant tab views, otherwise after push page, - // the home page will rebuild(cause by go_route) and cause the tutorial to show again. - // see https://github.com/flutter/flutter/issues/132049 - return DefaultTabController( - length: 4, - initialIndex: tab.index, - child: Scaffold( - floatingActionButtonLocation: FloatingActionButtonLocation.endFloat, - floatingActionButton: FloatingActionButton.extended( - key: const Key('home.order'), - onPressed: () => context.pushNamed(Routes.order), - icon: const Icon(Icons.store_sharp), - label: Text(S.orderBtn), - ), - body: NestedScrollView( - headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { - return [ - SliverAppBar( - pinned: true, - floating: true, - title: Text(S.appTitle), - centerTitle: true, - shadowColor: Theme.of(context).colorScheme.shadow, - flexibleSpace: Container( - decoration: BoxDecoration( - gradient: LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: Theme.of(context).gradientColors, - tileMode: TileMode.clamp, + return TutorialWrapper( + child: ListenableBuilder( + listenable: mode, + builder: (context, _) { + SpotlightShow.of(context).reset(); + switch (mode.value) { + case HomeMode.bottomNavigationBar: + return _WithTab(shell: shell); + case HomeMode.drawer: + return _WithDrawer(shell: shell); + case HomeMode.rail: + return _WithRail(shell: shell); + } + }, + ), + ); + } +} + +class _WithTab extends StatelessWidget { + final StatefulNavigationShell shell; + + const _WithTab({required this.shell}); + + @override + Widget build(BuildContext context) { + return Scaffold( + floatingActionButton: _FAB(), + body: NestedScrollView( + headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { + return [ + SliverAppBar( + floating: true, + title: Text(S.appTitle), + centerTitle: true, + flexibleSpace: const _FlexibleSpace(), + // disable shadow after scrolled + // scrolledUnderElevation: 0, + ), + ]; + }, + body: shell, + ), + bottomNavigationBar: NavigationBar( + selectedIndex: min(shell.currentIndex, 3), + onDestinationSelected: (index) { + SpotlightShow.of(context).reset(); + shell.goBranch( + index, + // A common pattern when using bottom navigation bars is to support + // navigating to the initial location when tapping the item that is + // already active. This example demonstrates how to support this behavior, + // using the initialLocation parameter of goBranch. + initialLocation: index == shell.currentIndex, + ); + }, + destinations: [ + for (final _Tab e in _bottomNavTabs) + NavigationDestination( + key: Key('home.${e.name}'), + icon: e.icon, + label: S.title(e.name), + selectedIcon: e.selectedIcon, + ), + ], + ), + ); + } +} + +class _WithDrawer extends StatefulWidget { + final StatefulNavigationShell shell; + + const _WithDrawer({required this.shell}); + + @override + State<_WithDrawer> createState() => _WithDrawerState(); +} + +class _WithDrawerState extends State<_WithDrawer> { + final scaffold = GlobalKey(); + + @override + Widget build(BuildContext context) { + final tab = _Tab.values.elementAtOrNull(widget.shell.currentIndex) ?? _Tab.analysis; + final needNested = tab == _Tab.analysis; + + // Which means body have [CustomScrollView] + if (needNested) { + return Scaffold( + key: scaffold, + floatingActionButton: _FAB(), + drawer: _buildDrawer(tab), + body: _Nested(title: S.title(tab.name), body: widget.shell), + ); + } + + return Scaffold( + key: scaffold, + appBar: AppBar( + title: Text(S.title(tab.name)), + flexibleSpace: const _FlexibleSpace(), + ), + floatingActionButton: _FAB(), + drawer: _buildDrawer(tab), + body: widget.shell, + ); + } + + Widget _buildDrawer(_Tab tab) { + return Drawer( + child: SafeArea( + child: ListView( + padding: EdgeInsets.zero, + children: [ + const SizedBox(height: 48), + for (final e in _drawerTabs) + Padding( + padding: const EdgeInsets.fromLTRB(16, 0, 12, 0), + child: e.wrap( + ListTile( + key: Key('home.${e.name}'), + leading: tab == e ? e.selectedIcon : e.icon, + title: Text(S.title(e.name)), + selected: tab == e, + visualDensity: VisualDensity.compact, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(8)), ), + onTap: () => _navTo(e.index), ), + scaffold.currentState?.closeDrawer, ), - // disable shadow after scrolled - scrolledUnderElevation: 0, - bottom: TabBar(tabs: [ - _Tab(key: const Key('home.analysis'), text: S.analysisTab), - _Tab(key: const Key('home.stock'), text: S.stockTab), - _Tab(key: const Key('home.cashier'), text: S.cashierTab), - _Tab(key: const Key('home.setting'), text: S.settingTab), - ]), ), - ]; - }, - body: const TabBarView( - children: [ - AnalysisView(tabIndex: 0), - StockView(tabIndex: 1), - CashierView(tabIndex: 2), - SettingView(tabIndex: 3), - ], - ), + const Footer(), + ], ), ), ); } + + @override + void initState() { + if (Cache.instance.get('tutorial.home.order') != true) { + WidgetsBinding.instance.addPostFrameCallback((_) { + scaffold.currentState?.openDrawer(); + }); + } + super.initState(); + } + + void _navTo(int index) { + scaffold.currentState?.closeDrawer(); + SpotlightShow.of(context).reset(); + widget.shell.goBranch(index, initialLocation: index == widget.shell.currentIndex); + } } -class _Tab extends StatelessWidget { - final String text; +class _WithRail extends StatefulWidget { + final StatefulNavigationShell shell; - const _Tab({ - super.key, - required this.text, - }); + const _WithRail({required this.shell}); + + @override + State<_WithRail> createState() => _WithRailState(); +} + +class _WithRailState extends State<_WithRail> { + late final ValueNotifier railExpanded; + late final ValueNotifier railSelected; + + @override + Widget build(BuildContext context) { + final tab = _Tab.values.elementAtOrNull(widget.shell.currentIndex) ?? _Tab.analysis; + final needNested = tab == _Tab.analysis; + + // Which means body have [CustomScrollView] + if (needNested) { + return Scaffold( + floatingActionButton: _FAB(), + body: _Nested(title: S.title(tab.name), body: _buildBody()), + ); + } + + return Scaffold( + appBar: AppBar( + title: Text(S.title(tab.name)), + flexibleSpace: const _FlexibleSpace(), + ), + floatingActionButton: _FAB(), + body: _buildBody(), + ); + } + + Widget _buildBody() { + return Row(children: [ + ListenableBuilder( + listenable: railExpanded, + builder: (context, child) => ListenableBuilder( + listenable: railSelected, + builder: (context, child) => _buildRail(), + ), + ), + const VerticalDivider(), + Expanded(child: widget.shell), + ]); + } + + Widget _buildRail() { + return NavigationRail( + extended: railExpanded.value, + onDestinationSelected: (int index) { + SpotlightShow.of(context).reset(); + widget.shell.goBranch(index, initialLocation: index == widget.shell.currentIndex); + setState(() => railSelected.value = index); + }, + leading: IconButton( + icon: Icon(railExpanded.value ? Icons.close : Icons.menu), + onPressed: () => railExpanded.value = !railExpanded.value, + ), + selectedIndex: min(railSelected.value, railExpanded.value ? 999 : 2), + destinations: [ + for (final e in _drawerTabs) + // Show all tabs if expanded, otherwise only show important tabs + if (railExpanded.value || e.important) + NavigationRailDestination( + icon: e.icon, + selectedIcon: e.selectedIcon, + label: e.wrap(Text(S.title(e.name))), + ), + ], + ); + } + + @override + void initState() { + railExpanded = ValueNotifier(Cache.instance.get('tutorial.home.order') != true); + railSelected = ValueNotifier(widget.shell.currentIndex); + super.initState(); + } +} + +class _Nested extends StatelessWidget { + final String title; + + final Widget body; + + const _Nested({required this.title, required this.body}); @override Widget build(BuildContext context) { - // fix the font size, avoid scaling - return MediaQuery.withNoTextScaling( - child: Tab( - iconMargin: const EdgeInsets.only(bottom: 6), - child: Text( - text, - style: const TextStyle(fontSize: 14), - softWrap: false, - overflow: TextOverflow.fade, + return NestedScrollView( + headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => [ + SliverAppBar( + pinned: true, + title: Text(title), + flexibleSpace: const _FlexibleSpace(), + ), + ], + body: body, + ); + } +} + +class _FAB extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Tutorial( + id: 'home.order', + index: 100, + spotlightBuilder: const SpotlightRectBuilder(borderRadius: 16.0), + title: S.orderTutorialTitle, + message: S.orderTutorialContent, + child: FloatingActionButton.extended( + key: const Key('home.order'), + heroTag: null, + onPressed: () => context.pushNamed(Routes.order), + icon: const Icon(Icons.store_outlined), + label: Text(S.orderBtn), + ), + ); + } +} + +class _FlexibleSpace extends StatelessWidget { + const _FlexibleSpace(); + + @override + Widget build(BuildContext context) { + return Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: Theme.of(context).gradientColors, + tileMode: TileMode.clamp, ), ), ); } } -enum HomeTab { - analysis, - stock, - cashier, - setting, +const _bottomNavTabs = [ + _Tab.analysis, + _Tab.stock, + _Tab.cashier, + _Tab.more, +]; + +const _drawerTabs = [ + _Tab.analysis, + _Tab.stock, + _Tab.cashier, + _Tab.orderAttributes, + _Tab.menu, + _Tab.stockQuantities, + _Tab.transit, + _Tab.elf, + _Tab.settings, + if (!isProd) _Tab.debug, +]; + +enum _Tab { + analysis( + icon: Icon(Icons.analytics_outlined), + selectedIcon: Icon(Icons.analytics), + important: true, + ), + stock( + icon: Icon(Icons.inventory_2_outlined), + selectedIcon: Icon(Icons.inventory_2), + important: true, + ), + cashier( + icon: Icon(Icons.monetization_on_outlined), + selectedIcon: Icon(Icons.monetization_on), + important: true, + ), + orderAttributes( + icon: Icon(Icons.assignment_ind_outlined), + selectedIcon: Icon(Icons.assignment_ind), + ), + menu( + icon: Icon(Icons.collections_outlined), + selectedIcon: Icon(Icons.collections), + ), + stockQuantities( + icon: Icon(Icons.exposure_outlined), + selectedIcon: Icon(Icons.exposure), + ), + transit( + icon: Icon(Icons.local_shipping_outlined), + selectedIcon: Icon(Icons.local_shipping), + ), + elf( + icon: Icon(Icons.lightbulb_outlined), + selectedIcon: Icon(Icons.lightbulb), + ), + settings( + icon: Icon(Icons.settings_outlined), + selectedIcon: Icon(Icons.settings), + ), + debug( + icon: Icon(Icons.bug_report_outlined), + selectedIcon: Icon(Icons.bug_report), + ), + + /// entrypoint for mobile screen + more( + icon: Icon(Icons.dehaze_outlined), + selectedIcon: Icon(Icons.dehaze), + ); + + final Icon icon; + final Icon selectedIcon; + final bool important; + + const _Tab({ + required this.icon, + required this.selectedIcon, + this.important = false, + }); + + Widget wrap(Widget child, [void Function()? action]) { + switch (this) { + case _Tab.menu: + return MenuTutorial( + child: child, + ); + case _Tab.orderAttributes: + // after finish this tutorial, we will close the drawer + return OrderAttrTutorial( + onDismissed: action, + child: child, + ); + default: + return child; + } + } } diff --git a/lib/ui/home/mobile_more_view.dart b/lib/ui/home/mobile_more_view.dart new file mode 100644 index 00000000..48bb9e6e --- /dev/null +++ b/lib/ui/home/mobile_more_view.dart @@ -0,0 +1,194 @@ +import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; +import 'package:possystem/components/style/footer.dart'; +import 'package:possystem/components/tutorial.dart'; +import 'package:possystem/constants/app_themes.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/models/repository/menu.dart'; +import 'package:possystem/models/repository/order_attributes.dart'; +import 'package:possystem/routes.dart'; +import 'package:possystem/translator.dart'; +import 'package:provider/provider.dart'; + +class MobileMoreView extends StatefulWidget { + const MobileMoreView({super.key}); + + @override + State createState() => _MobileMoreViewState(); +} + +class _MobileMoreViewState extends State with AutomaticKeepAliveClientMixin { + @override + Widget build(BuildContext context) { + super.build(context); + + return Scaffold( + body: ListView(padding: const EdgeInsets.only(bottom: 76), children: [ + const _HeaderInfoList(), + if (!isProd) + _buildRouteTile( + id: 'debug', + icon: Icons.bug_report_outlined, + route: 'debug', + title: 'Debug', + subtitle: 'For developer only', + ), + MenuTutorial( + child: _buildRouteTile( + id: 'menu', + icon: Icons.collections_outlined, + route: Routes.menu, + title: S.menuTitle, + subtitle: S.menuSubtitle, + ), + ), + _buildRouteTile( + id: 'transit', + icon: Icons.upload_file_outlined, + route: Routes.transit, + title: S.transitTitle, + subtitle: S.transitDescription, + ), + OrderAttrTutorial( + child: _buildRouteTile( + id: 'orderAttributes', + icon: Icons.assignment_ind_outlined, + route: Routes.orderAttr, + title: S.orderAttributeTitle, + subtitle: S.orderAttributeDescription, + ), + ), + _buildRouteTile( + id: 'stockQuantities', + icon: Icons.exposure_outlined, + route: Routes.quantities, + title: S.stockQuantityTitle, + subtitle: S.stockQuantityDescription, + ), + _buildRouteTile( + id: 'elf', + icon: Icons.lightbulb_outlined, + route: Routes.elf, + title: S.settingElfTitle, + subtitle: S.settingElfDescription, + ), + _buildRouteTile( + id: 'settings', + icon: Icons.settings_outlined, + route: Routes.settings, + title: S.settingFeatureTitle, + subtitle: S.settingFeatureDescription, + ), + const Footer(), + ]), + ); + } + + @override + bool get wantKeepAlive => true; + + Widget _buildRouteTile({ + required String id, + required IconData icon, + required String route, + required String title, + required String subtitle, + }) { + return ListTile( + key: Key('home.$id'), + leading: Icon(icon), + trailing: const Icon(Icons.navigate_next_outlined), + onTap: () => context.goNamed(route), + title: Text(title), + subtitle: Text(subtitle), + ); + } +} + +class _HeaderInfoList extends StatelessWidget { + const _HeaderInfoList(); + + @override + Widget build(BuildContext context) { + final menu = context.watch(); + final attrs = context.watch(); + + return SizedBox( + height: 152, + child: ListView( + padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0), + scrollDirection: Axis.horizontal, + shrinkWrap: true, + children: [ + _buildItem( + id: 'menu1', + context: context, + title: menu.items.fold(0, (v, e) => e.length + v), + subtitle: S.menuProductHeaderInfo, + route: Routes.menu, + query: {'mode': 'products'}, + ), + const SizedBox(width: 16), + _buildItem( + id: 'menu2', + context: context, + title: menu.length, + subtitle: S.menuCatalogHeaderInfo, + route: Routes.menu, + ), + const SizedBox(width: 16), + _buildItem( + id: 'order_attrs', + context: context, + title: attrs.length, + subtitle: S.orderAttributeHeaderInfo, + route: Routes.orderAttr, + ), + ], + ), + ); + } + + Widget _buildItem({ + required String id, + required BuildContext context, + required int title, + required String subtitle, + required String route, + Map query = const {}, + }) { + const borderRadius = BorderRadius.all(Radius.circular(20)); + final theme = Theme.of(context); + + return ElevatedButton( + key: Key('more_header.$id'), + style: const ButtonStyle( + fixedSize: WidgetStatePropertyAll(Size.square(128)), + padding: WidgetStatePropertyAll(EdgeInsets.zero), + // shadowColor: WidgetStatePropertyAll(Colors.transparent), + shape: WidgetStatePropertyAll(RoundedRectangleBorder( + borderRadius: borderRadius, + side: BorderSide(color: Colors.transparent), + )), + ), + onPressed: () => context.goNamed(route, queryParameters: query), + child: Ink( + width: 128, + height: 128, + decoration: BoxDecoration( + borderRadius: borderRadius, + gradient: LinearGradient( + begin: Alignment.bottomRight, + end: Alignment.topLeft, + colors: theme.gradientColors, + tileMode: TileMode.clamp, + ), + ), + child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ + Text(title.toString(), style: theme.textTheme.headlineMedium), + Flexible(child: Text(subtitle, textAlign: TextAlign.center)), + ]), + ), + ); + } +} diff --git a/lib/ui/home/setting_view.dart b/lib/ui/home/setting_view.dart deleted file mode 100644 index d9636a50..00000000 --- a/lib/ui/home/setting_view.dart +++ /dev/null @@ -1,298 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:go_router/go_router.dart'; -import 'package:possystem/components/linkify.dart'; -import 'package:possystem/components/meta_block.dart'; -import 'package:possystem/components/tutorial.dart'; -import 'package:possystem/constants/app_themes.dart'; -import 'package:possystem/constants/constant.dart'; -import 'package:possystem/debug/debug_page.dart'; -import 'package:possystem/helpers/setup_example.dart'; -import 'package:possystem/models/repository/menu.dart'; -import 'package:possystem/models/repository/order_attributes.dart'; -import 'package:possystem/routes.dart'; -import 'package:possystem/services/cache.dart'; -import 'package:possystem/translator.dart'; -import 'package:provider/provider.dart'; -import 'package:spotlight_ant/spotlight_ant.dart'; - -class SettingView extends StatefulWidget { - final int? tabIndex; - - const SettingView({super.key, this.tabIndex}); - - @override - State createState() => _SettingViewState(); -} - -class _SettingViewState extends State with AutomaticKeepAliveClientMixin { - late final TutorialInTab? tab; - final GlobalKey<_TutorialCheckboxListTileState> _tutorialOrderAttrs = GlobalKey(); - final GlobalKey<_TutorialCheckboxListTileState> _tutorialMenu = GlobalKey(); - - @override - Widget build(BuildContext context) { - super.build(context); - - var orderAttrIndex = OrderAttributes.instance.isEmpty ? (Menu.instance.isEmpty ? 1 : 0) : -1; - return TutorialWrapper( - tab: tab, - child: Scaffold( - floatingActionButton: (Cache.instance.get('tutorial.home.order') ?? false) - ? null - : Tutorial( - id: 'home.order', - index: orderAttrIndex + 1, - spotlightBuilder: const SpotlightRectBuilder(borderRadius: 16.0), - title: S.orderTutorialTitle, - message: S.orderTutorialContent, - child: FloatingActionButton.extended( - heroTag: 'order.tutorial', - onPressed: null, - icon: const Icon(Icons.store_sharp), - label: Text(S.orderBtn), - ), - ), - body: ListView(padding: const EdgeInsets.only(bottom: 76), children: [ - const _HeaderInfoList(), - if (!isProd) - ListTile( - key: const Key('setting.debug'), - leading: const Icon(Icons.bug_report_sharp), - title: const Text('Debug'), - subtitle: const Text('For developer only'), - onTap: () => Navigator.of(context).push( - MaterialPageRoute(builder: (_) => const DebugPage()), - ), - ), - Tutorial( - id: 'home.menu', - index: 0, - title: S.menuTutorialTitle, - message: S.menuTutorialContent, - below: _TutorialCheckboxListTile(key: _tutorialMenu, title: S.menuTutorialCreateExample), - spotlightBuilder: const SpotlightRectBuilder(), - disable: Menu.instance.isNotEmpty, - action: () async { - if (_tutorialMenu.currentState?.value == true) { - await setupExampleMenu(); - } - }, - child: _buildRouteTile( - id: 'menu', - icon: Icons.collections_sharp, - route: Routes.menu, - title: S.menuTitle, - subtitle: S.menuSubtitle, - ), - ), - _buildRouteTile( - id: 'transit', - icon: Icons.upload_file_sharp, - route: Routes.transit, - title: S.transitTitle, - subtitle: S.transitDescription, - ), - Tutorial( - id: 'home.order_attr', - index: orderAttrIndex, - title: S.orderAttributeTutorialTitle, - message: S.orderAttributeTutorialContent, - below: _TutorialCheckboxListTile(key: _tutorialOrderAttrs, title: S.orderAttributeTutorialCreateExample), - spotlightBuilder: const SpotlightRectBuilder(), - disable: OrderAttributes.instance.isNotEmpty, - action: () async { - if (_tutorialOrderAttrs.currentState?.value == true) { - await setupExampleOrderAttrs(); - } - }, - child: _buildRouteTile( - id: 'order_attrs', - icon: Icons.assignment_ind_sharp, - route: Routes.orderAttr, - title: S.orderAttributeTitle, - subtitle: S.orderAttributeDescription, - ), - ), - _buildRouteTile( - id: 'quantity', - icon: Icons.exposure_sharp, - route: Routes.quantity, - title: S.stockQuantityTitle, - subtitle: S.stockQuantityDescription, - ), - _buildRouteTile( - id: 'feature_request', - icon: Icons.lightbulb_sharp, - route: Routes.featureRequest, - title: S.settingElfTitle, - subtitle: S.settingElfDescription, - ), - _buildRouteTile( - id: 'setting', - icon: Icons.settings_sharp, - route: Routes.features, - title: S.settingFeatureTitle, - subtitle: S.settingFeatureDescription, - ), - Row(mainAxisAlignment: MainAxisAlignment.center, children: [ - TextButton( - onPressed: _bottomLinks[0].launch, - child: Text(_bottomLinks[0].text), - ), - const Text(MetaBlock.string), - TextButton( - onPressed: _bottomLinks[1].launch, - child: Text(_bottomLinks[1].text), - ), - ]) - ]), - ), - ); - } - - @override - void initState() { - tab = widget.tabIndex == null ? null : TutorialInTab(index: widget.tabIndex!, context: context); - - super.initState(); - } - - @override - bool get wantKeepAlive => true; - - Widget _buildRouteTile({ - required String id, - required IconData icon, - required String route, - required String title, - required String subtitle, - }) { - return ListTile( - key: Key('setting.$id'), - leading: Icon(icon), - trailing: const Icon(Icons.navigate_next_outlined), - onTap: () => context.pushNamed(route), - title: Text(title), - subtitle: Text(subtitle), - ); - } -} - -class _HeaderInfoList extends StatelessWidget { - const _HeaderInfoList(); - - @override - Widget build(BuildContext context) { - final menu = context.watch(); - final attrs = context.watch(); - - return SizedBox( - height: 152, - child: ListView( - padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0), - scrollDirection: Axis.horizontal, - shrinkWrap: true, - children: [ - _buildItem( - id: 'menu1', - context: context, - title: menu.items.fold(0, (v, e) => e.length + v), - subtitle: S.menuProductHeaderInfo, - route: Routes.menu, - query: {'mode': 'products'}, - ), - const SizedBox(width: 16), - _buildItem( - id: 'menu2', - context: context, - title: menu.length, - subtitle: S.menuCatalogHeaderInfo, - route: Routes.menu, - ), - const SizedBox(width: 16), - _buildItem( - id: 'order_attrs', - context: context, - title: attrs.length, - subtitle: S.orderAttributeHeaderInfo, - route: Routes.orderAttr, - ), - ], - ), - ); - } - - Widget _buildItem({ - required String id, - required BuildContext context, - required int title, - required String subtitle, - required String route, - Map query = const {}, - }) { - const borderRadius = BorderRadius.all(Radius.circular(20)); - final theme = Theme.of(context); - - return ElevatedButton( - key: Key('setting_header.$id'), - style: const ButtonStyle( - fixedSize: WidgetStatePropertyAll(Size.square(128)), - padding: WidgetStatePropertyAll(EdgeInsets.zero), - // shadowColor: WidgetStatePropertyAll(Colors.transparent), - shape: WidgetStatePropertyAll(RoundedRectangleBorder( - borderRadius: borderRadius, - side: BorderSide(color: Colors.transparent), - )), - ), - onPressed: () => context.pushNamed(route, queryParameters: query), - child: Ink( - width: 128, - height: 128, - decoration: BoxDecoration( - borderRadius: borderRadius, - gradient: LinearGradient( - begin: Alignment.bottomRight, - end: Alignment.topLeft, - colors: theme.gradientColors, - tileMode: TileMode.clamp, - ), - ), - child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ - Text(title.toString(), style: theme.textTheme.headlineMedium), - Flexible(child: Text(subtitle, textAlign: TextAlign.center)), - ]), - ), - ); - } -} - -class _TutorialCheckboxListTile extends StatefulWidget { - final String title; - - const _TutorialCheckboxListTile({super.key, required this.title}); - - @override - State<_TutorialCheckboxListTile> createState() => _TutorialCheckboxListTileState(); -} - -class _TutorialCheckboxListTileState extends State<_TutorialCheckboxListTile> { - bool value = true; - - @override - Widget build(BuildContext context) { - return Padding( - padding: const EdgeInsets.only(top: 8.0), - child: CheckboxListTile( - value: value, - onChanged: (v) => setState(() => value = v!), - tileColor: Theme.of(context).primaryColor, - title: Text(widget.title, style: const TextStyle(color: Colors.white)), - ), - ); - } -} - -const _bottomLinks = [ - LinkifyData('Privacy Policy', 'https://evan361425.github.io/flutter-pos-system/PRIVACY_POLICY/'), - LinkifyData('License', 'https://evan361425.github.io/flutter-pos-system/LICENSE/'), -]; diff --git a/lib/ui/home/settings_page.dart b/lib/ui/home/settings_page.dart new file mode 100644 index 00000000..7f847453 --- /dev/null +++ b/lib/ui/home/settings_page.dart @@ -0,0 +1,228 @@ +import 'package:collection/collection.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; +import 'package:package_info_plus/package_info_plus.dart'; +import 'package:possystem/components/sign_in_button.dart'; +import 'package:possystem/components/style/outlined_text.dart'; +import 'package:possystem/components/style/pop_button.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/routes.dart'; +import 'package:possystem/services/auth.dart'; +import 'package:possystem/settings/checkout_warning.dart'; +import 'package:possystem/settings/collect_events_setting.dart'; +import 'package:possystem/settings/language_setting.dart'; +import 'package:possystem/settings/order_awakening_setting.dart'; +import 'package:possystem/settings/theme_setting.dart'; +import 'package:possystem/translator.dart'; +import 'package:possystem/ui/home/widgets/feature_switch.dart'; + +class SettingsPage extends StatelessWidget { + final String? focus; + + const SettingsPage({ + super.key, + this.focus, + }); + + @override + Widget build(BuildContext context) { + const flavor = String.fromEnvironment('appFlavor'); + + void navigateTo(Feature feature) { + context.pushNamed(Routes.settingsFeature, pathParameters: {'feature': feature.name}); + } + + final body = ListView(children: [ + const SizedBox(height: 8.0), + FutureBuilder( + future: PackageInfo.fromPlatform(), + builder: (context, snapshot) { + final info = snapshot.data; + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + if (info != null) Text(S.settingVersion(info.version)), + const SizedBox(width: 8.0), + OutlinedText((kDebugMode ? '_' : '') + flavor.toUpperCase()), + ], + ); + }, + ), + const SizedBox(height: 8.0), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 8.0), + child: SignInButton( + signedInWidgetBuilder: (user) => Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text(S.settingWelcome(user?.displayName ?? '')), + OutlinedButton( + key: const Key('feature.sign_out'), + onPressed: () async { + await Auth.instance.signOut(); + }, + child: Text(S.settingLogoutBtn), + ), + ], + ), + ), + ), + ListTile( + key: const Key('feature.theme'), + leading: const Icon(Icons.palette_outlined), + title: Text(S.settingThemeTitle), + subtitle: Text(S.settingThemeName(ThemeSetting.instance.value.name)), + trailing: const Icon(Icons.navigate_next_outlined), + onTap: () => navigateTo(Feature.theme), + ), + ListTile( + key: const Key('feature.language'), + leading: const Icon(Icons.language_outlined), + title: Text(S.settingLanguageTitle), + subtitle: Text(LanguageSetting.instance.language.title), + trailing: const Icon(Icons.navigate_next_outlined), + onTap: () => navigateTo(Feature.language), + ), + const Divider(), + ListTile( + key: const Key('feature.checkout_warning'), + leading: const Icon(Icons.store_mall_directory_outlined), + title: Text(S.settingCheckoutWarningTitle), + subtitle: Text(S.settingCheckoutWarningName(CheckoutWarningSetting.instance.value.name)), + trailing: const Icon(Icons.navigate_next_outlined), + onTap: () => navigateTo(Feature.checkoutWarning), + ), + ListTile( + leading: const Icon(Icons.remove_red_eye_outlined), + title: Text(S.settingOrderAwakeningTitle), + subtitle: Text(S.settingOrderAwakeningDescription), + trailing: FeatureSwitch( + key: const Key('feature.order_awakening'), + autofocus: focus == 'orderAwakening', + value: OrderAwakeningSetting.instance.value, + onChanged: (value) => OrderAwakeningSetting.instance.update(value), + ), + ), + const Divider(), + ListTile( + leading: const Icon(Icons.report_outlined), + title: Text(S.settingReportTitle), + subtitle: Text(S.settingReportDescription), + trailing: FeatureSwitch( + key: const Key('feature.collect_events'), + autofocus: focus == 'collectEvents', + value: CollectEventsSetting.instance.value, + onChanged: (value) => CollectEventsSetting.instance.update(value), + ), + ), + const SizedBox(height: kFABSpacing), + ]); + + return Routes.homeMode.value == HomeMode.bottomNavigationBar + ? Scaffold( + appBar: AppBar(leading: const PopButton()), + body: body, + ) + : body; + } +} + +class ItemListScaffold extends StatelessWidget { + final Feature feature; + + const ItemListScaffold({ + super.key, + required this.feature, + }); + + @override + Widget build(BuildContext context) { + final hintStyle = TextStyle(color: Theme.of(context).hintColor); + + final selected = feature.selected; + return Scaffold( + appBar: AppBar( + title: Text(feature.title), + leading: const PopButton(), + ), + body: ListView( + children: IterableZip([feature.itemTitles, feature.itemSubtitles]) + .mapIndexed((index, pair) => ListTile( + title: Text(pair[0]), + trailing: selected == index ? const Icon(Icons.check_outlined) : null, + subtitle: Text(pair[1], style: hintStyle), + onTap: () async { + if (selected != index) { + await feature.update(index); + } + }, + )) + .toList(), + ), + ); + } +} + +enum Feature { + theme(), + language(), + checkoutWarning(); + + const Feature(); + + Iterable get itemTitles { + switch (this) { + case Feature.theme: + return ThemeMode.values.map((e) => S.settingThemeName(e.name)); + case Feature.language: + return Language.values.map((e) => e.title); + case Feature.checkoutWarning: + return CheckoutWarningTypes.values.map((e) => S.settingCheckoutWarningName(e.name)); + } + } + + Iterable get itemSubtitles { + switch (this) { + case Feature.theme: + return ThemeMode.values.map((e) => ''); + case Feature.language: + return Language.values.map((e) => ''); + case Feature.checkoutWarning: + return CheckoutWarningTypes.values.map((e) => S.settingCheckoutWarningTip(e.name)); + } + } + + String get title { + switch (this) { + case Feature.theme: + return S.settingThemeTitle; + case Feature.language: + return S.settingLanguageTitle; + case Feature.checkoutWarning: + return S.settingCheckoutWarningTitle; + } + } + + int get selected { + switch (this) { + case Feature.theme: + return ThemeSetting.instance.value.index; + case Feature.language: + return LanguageSetting.instance.language.index; + case Feature.checkoutWarning: + return CheckoutWarningSetting.instance.value.index; + } + } + + Future update(int index) { + switch (this) { + case Feature.theme: + return ThemeSetting.instance.update(ThemeMode.values[index]); + case Feature.language: + return LanguageSetting.instance.update(Language.values[index]); + case Feature.checkoutWarning: + return CheckoutWarningSetting.instance.update(CheckoutWarningTypes.values[index]); + } + } +} diff --git a/lib/ui/image_gallery_page.dart b/lib/ui/image_gallery_page.dart index 7bae4986..8ef0a269 100644 --- a/lib/ui/image_gallery_page.dart +++ b/lib/ui/image_gallery_page.dart @@ -5,7 +5,9 @@ import 'package:go_router/go_router.dart'; import 'package:possystem/components/dialog/delete_dialog.dart'; import 'package:possystem/components/style/empty_body.dart'; import 'package:possystem/components/style/snackbar.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/helpers/logger.dart'; import 'package:possystem/models/xfile.dart'; import 'package:possystem/services/image_dumper.dart'; @@ -21,7 +23,7 @@ class ImageGalleryPage extends StatefulWidget { class ImageGalleryPageState extends State { List? images; - bool isSelecting = false; + bool selecting = false; final Set selectedImages = {}; @@ -29,96 +31,115 @@ class ImageGalleryPageState extends State { @override Widget build(BuildContext context) { - return PopScope( - canPop: !isSelecting, - onPopInvoked: onPopInvoked, - child: SafeArea( - child: isSelecting ? buildSelectingScaffold() : buildScaffold(), - ), - ); - } - - @override - void initState() { - super.initState(); - prepareImages(); - } - - Widget buildSelectingScaffold() { - return Scaffold( - appBar: AppBar( - leading: CloseButton( - key: const Key('image_gallery.cancel'), - onPressed: () => onPopInvoked(false), - ), - actions: [ - TextButton( - key: const Key('image_gallery.delete'), - onPressed: () { - DeleteDialog.show( - context, - warningContent: Text(S.imageGallerySelectionDeleteConfirm(selectedImages.length)), - finishMessage: false, - deleteCallback: deleteImages, - ); - }, - child: Text(S.imageGalleryActionDelete), - ), - ], - title: Text(S.imageGallerySelectionTitle), + final bp = Breakpoint.find(width: MediaQuery.sizeOf(context).width); + final fullScreen = bp <= Breakpoint.medium; + + final PreferredSizeWidget? appBar = selecting + ? AppBar( + title: Text(S.imageGallerySelectionTitle), + primary: false, + leading: IconButton( + key: const Key('image_gallery.cancel'), + onPressed: () => onPopInvoked(false), + icon: const Icon(Icons.cancel), + ), + actions: [ + TextButton( + key: const Key('image_gallery.delete'), + onPressed: () { + DeleteDialog.show( + context, + warningContent: Text(S.imageGallerySelectionDeleteConfirm(selectedImages.length)), + finishMessage: false, + deleteCallback: deleteImages, + ); + }, + child: Text(S.imageGalleryActionDelete), + ), + ], + ) + : fullScreen + ? AppBar( + title: Text(S.imageGalleryTitle), + primary: false, + leading: const CloseButton(key: Key('image_gallery.close')), + ) + : null; + + final body = Scaffold( + primary: false, + appBar: appBar, + body: Padding( + padding: fullScreen ? const EdgeInsets.symmetric(horizontal: kHorizontalSpacing) : EdgeInsets.zero, + child: _buildBody(bp), ), - body: buildBody(), ); - } - Widget buildScaffold() { - return Scaffold( - appBar: AppBar( - leading: const BackButton(), - title: Text(S.imageGalleryTitle), - ), - floatingActionButton: FloatingActionButton( - key: const Key('image_gallery.add'), - onPressed: createImage, - tooltip: S.imageGalleryActionCreate, - child: const Icon(KIcons.add), - ), - body: buildBody(), + return PopScope( + canPop: !selecting, + onPopInvoked: onPopInvoked, + child: fullScreen + ? Dialog.fullscreen(child: body) + : AlertDialog( + contentPadding: const EdgeInsets.fromLTRB(24, 16, 24, 0), + scrollable: false, + title: appBar == null ? Text(S.imageGalleryTitle) : null, + content: Center(child: SizedBox(width: 800, child: body)), + ), ); } - Widget buildBody() { + Widget _buildBody(Breakpoint bp) { if (images == null) { - return const Center(child: CircularProgressIndicator()); + return const SingleChildScrollView( + child: Center(child: CircularProgressIndicator()), + ); } if (images!.isEmpty) { - return Center( - child: EmptyBody( - onPressed: createImage, - content: S.imageGalleryEmpty, + return SingleChildScrollView( + child: Center( + child: EmptyBody( + onPressed: createImage, + content: S.imageGalleryEmpty, + ), ), ); } - const crossAxisCount = 3; + final spacing = bp.lookup(compact: 4.0, expanded: 12.0); return GridView.builder( - primary: true, - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: crossAxisCount, - crossAxisSpacing: 4, - mainAxisSpacing: 4, + primary: false, + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: bp.lookup(compact: 3, expanded: 4), + crossAxisSpacing: spacing, + mainAxisSpacing: spacing, ), - itemCount: images!.length + crossAxisCount, + // add 1 for add button, add crossAxisCount for spacing + itemCount: images!.length + (selecting ? 0 : 1) + 3, semanticChildCount: images!.length, itemBuilder: (context, index) { + if (!selecting && index == images!.length) { + return Padding( + padding: const EdgeInsets.all(16.0), + child: ElevatedButton( + key: const Key('image_gallery.add'), + onPressed: createImage, + child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ + const Icon(KIcons.add), + Text(S.imageGalleryActionCreate, textAlign: TextAlign.center), + ]), + ), + ); + } + if (index >= images!.length) { // Floating action button offset - return const SizedBox(height: 72.0); + return const SizedBox(height: kFABSpacing); } - final image = XFile(images![index]); - final inkwell = isSelecting + final image = XFile(images![index]); + final inkwell = selecting ? Material( color: Colors.black.withAlpha(100), child: Checkbox( @@ -136,19 +157,17 @@ class ImageGalleryPageState extends State { child: const SizedBox.expand(), ); - return Container( - width: double.infinity, - constraints: const BoxConstraints(maxHeight: 512, maxWidth: 512), - decoration: const BoxDecoration(border: Border()), - child: Ink.image( - padding: EdgeInsets.zero, - image: FileImage(image.file), - fit: BoxFit.cover, - child: Material( - key: Key('image_gallery.$index'), - type: MaterialType.transparency, - child: inkwell, + return Ink.image( + image: FileImage(image.file), + fit: BoxFit.cover, + child: Material( + key: Key('image_gallery.$index'), + type: MaterialType.transparency, + shape: RoundedRectangleBorder( + side: BorderSide(color: Colors.grey.shade400), + borderRadius: BorderRadius.circular(4), ), + child: inkwell, ), ); }, @@ -156,7 +175,13 @@ class ImageGalleryPageState extends State { ); } - void prepareImages() async { + @override + void initState() { + super.initState(); + _prepareImages(); + } + + void _prepareImages() async { if (context.mounted) { final dir = await XFile.getRootPath(); baseDir = XFile(XFile.fs.path.join(dir, 'menu_image')).dir; @@ -219,7 +244,7 @@ class ImageGalleryPageState extends State { } Log.out(e.toString(), 'delete_image_error'); } finally { - prepareImages(); + _prepareImages(); } } @@ -232,7 +257,7 @@ class ImageGalleryPageState extends State { void cancelSelecting({reloadImages = false}) { setState(() { if (reloadImages) images = null; - isSelecting = false; + selecting = false; }); } @@ -240,7 +265,7 @@ class ImageGalleryPageState extends State { setState(() { selectedImages.clear(); selectedImages.add(index); - isSelecting = true; + selecting = true; }); } } diff --git a/lib/ui/menu/menu_page.dart b/lib/ui/menu/menu_page.dart index 5a91743a..32b074e9 100644 --- a/lib/ui/menu/menu_page.dart +++ b/lib/ui/menu/menu_page.dart @@ -3,8 +3,9 @@ import 'package:go_router/go_router.dart'; import 'package:possystem/components/search_bar_wrapper.dart'; import 'package:possystem/components/style/empty_body.dart'; import 'package:possystem/components/style/pop_button.dart'; -import 'package:possystem/components/tutorial.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/menu/catalog.dart'; import 'package:possystem/models/menu/product.dart'; import 'package:possystem/models/repository/menu.dart'; @@ -33,57 +34,30 @@ class MenuPage extends StatefulWidget { class _MenuPageState extends State { late Catalog? selected; late final PageController controller; + late bool singleView; @override Widget build(BuildContext context) { - return PopScope( - canPop: selected == null, - onPopInvoked: _onPopInvoked, - child: TutorialWrapper( + context.watch(); + + final width = MediaQuery.sizeOf(context).width; + singleView = Breakpoint.find(width: width) <= Breakpoint.medium; + // if we are in two-view mode, we should always show the second view + if (!singleView) { + selected ??= Menu.instance.itemList.firstOrNull; + } + + if (singleView) { + return PopScope( + key: const Key('menu_page'), + canPop: selected == null, + onPopInvoked: _onPopInvoked, child: Scaffold( appBar: AppBar( title: Text(selected?.name ?? S.menuTitle), - leading: PopButton( - onPressed: () { - if (_onPopInvoked(selected == null)) { - if (context.mounted && context.canPop()) { - context.pop(); - } - } - }, - ), - actions: [ - if (!widget.productOnly) - IconButton( - tooltip: selected == null ? S.menuCatalogTitleReorder : S.menuProductTitleReorder, - onPressed: () { - selected == null - ? context.pushNamed(Routes.menuReorder) - : context.pushNamed( - Routes.menuCatalogReorder, - pathParameters: {'id': selected!.id}, - ); - }, - icon: const Icon(KIcons.reorder), - ), - SearchBarWrapper( - key: const Key('menu.search'), - hintText: S.menuSearchHint, - initData: Menu.instance.searchProducts(), - search: (text) async => Menu.instance.searchProducts(text: text), - itemBuilder: _searchItemBuilder, - emptyBuilder: _searchEmptyBuilder, - ), - ], + leading: PopButton(onPressed: _handlePop), + actions: const [_SearchAction()], ), - floatingActionButton: widget.productOnly - ? null - : FloatingActionButton( - key: const Key('menu.add'), - onPressed: _handleCreate, - tooltip: selected == null ? S.menuCatalogTitleCreate : S.menuProductTitleCreate, - child: const Icon(KIcons.add), - ), body: PageView( controller: controller, // disable scrolling, only control by program @@ -94,14 +68,15 @@ class _MenuPageState extends State { ], ), ), - ), - ); - } + ); + } - @override - void didChangeDependencies() { - context.watch(); - super.didChangeDependencies(); + // no need to use Scaffold here, because this will be wrapped by HomePage + return Row(key: const Key('menu_page'), children: [ + Expanded(child: firstView), + const VerticalDivider(), + Expanded(child: secondView), + ]); } @override @@ -125,32 +100,56 @@ class _MenuPageState extends State { return Center( child: EmptyBody( content: S.menuCatalogEmptyBody, - onPressed: _handleCreate, + onPressed: _handleCatalogCreate, ), ); } - if (widget.productOnly) { + if (widget.productOnly && singleView) { return const MenuProductList(catalog: null); } return MenuCatalogList( Menu.instance.itemList, // put it here to handle reload + leading: singleView + ? null + : const Padding( + padding: EdgeInsets.only(left: kHorizontalSpacing), + child: _SearchAction(withTextFiled: true), + ), onSelected: _handleSelected, + tailing: ElevatedButton.icon( + key: const Key('menu.add_catalog'), + onPressed: _handleCatalogCreate, + label: Text(S.menuCatalogTitleCreate), + icon: const Icon(KIcons.add), + ), ); } Widget get secondView { - if (selected?.isNotEmpty == true) { - return MenuProductList(catalog: selected); + if (selected == null) { + return Center(child: Text(S.menuProductNotSelected)); + } + + if (selected!.isEmpty) { + // empty or not exist + return Center( + child: EmptyBody( + key: const Key('catalog.empty'), + content: S.menuProductEmptyBody, + onPressed: _handleProductCreate, + ), + ); } - // empty or not exist - return Center( - child: EmptyBody( - key: const Key('catalog.empty'), - content: S.menuProductEmptyBody, - onPressed: _handleCreate, + return MenuProductList( + catalog: selected, + tailing: ElevatedButton.icon( + key: const Key('menu.add_product'), + onPressed: _handleProductCreate, + label: Text(S.menuProductTitleCreate), + icon: const Icon(KIcons.add), ), ); } @@ -159,55 +158,89 @@ class _MenuPageState extends State { setState(() { selected = catalog; }); - _goTo(1); + _pageSlideTo(1); } - Widget _searchItemBuilder(BuildContext context, Product item) { - return ListTile( - key: Key('search.${item.id}'), - title: Text(item.name), - onTap: () { - item.searched(); - context.pushNamed(Routes.menuProduct, pathParameters: { - 'id': item.id, - }); - }, - ); - } + Future _handleCatalogCreate() async { + // only catalog modal will return ID + final catalog = await context.pushNamed(Routes.menuCatalogCreate); - Widget _searchEmptyBuilder(BuildContext context, String text) { - return ListTile( - title: Text(S.menuSearchNotFound), - leading: const Icon(KIcons.warn), - ); + if (catalog is Catalog) { + _handleSelected(catalog); + } } - void _handleCreate() async { - // only catalog modal will return ID - final catalog = await context.pushNamed( - Routes.menuNew, + Future _handleProductCreate() async { + final id = await context.pushNamed( + Routes.menuCatalogCreate, queryParameters: {'id': selected?.id}, ); + if (id is String && mounted) { + context.pushNamed(Routes.menuProduct, pathParameters: {'id': id}); + } + } - if (catalog is Catalog) { - _handleSelected(catalog); + void _handlePop() { + if (_onPopInvoked(selected == null)) { + PopButton.safePop(context, path: '${Routes.base}/_'); } } bool _onPopInvoked(bool didPop) { if (!didPop) { - _goTo(0).then((_) => setState(() => selected = null)); + _pageSlideTo(0).then((_) => setState(() => selected = null)); return false; } return true; } - Future _goTo(int index) { - return controller.animateToPage( - index, - duration: const Duration(milliseconds: 300), - curve: Curves.ease, + Future _pageSlideTo(int index) async { + if (singleView) { + return controller.animateToPage( + index, + duration: const Duration(milliseconds: 300), + curve: Curves.ease, + ); + } + } +} + +class _SearchAction extends StatelessWidget { + final bool withTextFiled; + + const _SearchAction({this.withTextFiled = false}); + + @override + Widget build(BuildContext context) { + return SearchBarWrapper( + key: const Key('menu.search'), + hintText: S.menuSearchHint, + text: withTextFiled ? '' : null, + initData: Menu.instance.searchProducts(), + search: (text) async => Menu.instance.searchProducts(text: text), + itemBuilder: _searchItemBuilder, + emptyBuilder: _searchEmptyBuilder, + ); + } + + Widget _searchItemBuilder(BuildContext context, Product item) { + return ListTile( + key: Key('search.${item.id}'), + title: Text(item.name), + onTap: () { + item.searched(); + context.pushNamed(Routes.menuProduct, pathParameters: { + 'id': item.id, + }); + }, + ); + } + + Widget _searchEmptyBuilder(BuildContext context, String text) { + return ListTile( + title: Text(S.menuSearchNotFound), + leading: const Icon(KIcons.warn), ); } } diff --git a/lib/ui/menu/product_page.dart b/lib/ui/menu/product_page.dart index 02e3ffd3..e9bf3b17 100644 --- a/lib/ui/menu/product_page.dart +++ b/lib/ui/menu/product_page.dart @@ -6,7 +6,11 @@ import 'package:possystem/components/slivers/sliver_image_app_bar.dart'; import 'package:possystem/components/style/buttons.dart'; import 'package:possystem/components/style/empty_body.dart'; import 'package:possystem/components/style/hint_text.dart'; +import 'package:possystem/components/style/image_holder.dart'; +import 'package:possystem/components/style/route_buttons.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/menu/product.dart'; import 'package:possystem/models/repository/quantities.dart'; import 'package:possystem/models/repository/stock.dart'; @@ -31,68 +35,140 @@ class ProductPage extends StatefulWidget { class _ProductPageState extends State { @override Widget build(BuildContext context) { - return Scaffold( - floatingActionButton: FloatingActionButton( - key: const Key('product.add'), - onPressed: _handleCreateIng, - tooltip: S.menuIngredientTitleCreate, - child: const Icon(KIcons.add), + final size = MediaQuery.sizeOf(context); + final asPage = size.width <= Breakpoint.medium.max; + + return asPage ? _buildPage() : _buildDialog(); + } + + Widget _buildPage() { + // get the ordered items + final items = widget.product.itemList; + return Dialog.fullscreen( + child: Scaffold( + body: CustomScrollView(slivers: [ + SliverImageAppBar( + model: widget.product, + actions: [_buildActionButton()], + ), + SliverToBoxAdapter( + child: Padding( + padding: const EdgeInsets.fromLTRB(kHorizontalSpacing, kTopSpacing, kHorizontalSpacing, kInternalSpacing), + child: _buildMetadata(), + ), + ), + SliverToBoxAdapter(child: _buildIngredientTitle()), + if (items.isNotEmpty) + SliverPadding( + padding: const EdgeInsets.only(bottom: kFABSpacing), + sliver: SliverList( + delegate: SliverChildBuilderDelegate( + (_, int index) { + if (index == items.length) { + return ElevatedButton.icon( + key: const Key('product.add'), + icon: const Icon(KIcons.add), + label: Text(S.menuProductTitleCreate), + onPressed: _handleCreateIng, + ); + } + return ProductIngredientView(items[index]); + }, + childCount: items.length + 1, + ), + ), + ), + ]), + ), + ); + } + + Widget _buildDialog() { + final metadataTile = Row(children: [ + ImageHolder( + size: 140, + image: widget.product.image, + onImageError: () => widget.product.saveImage(null), + ), + const SizedBox(width: kInternalLargeSpacing), + Expanded( + child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + Text(widget.product.name, style: Theme.of(context).textTheme.titleMedium), + const SizedBox(height: kInternalSpacing), + _buildMetadata(), + ]), ), - body: CustomScrollView(slivers: [ - SliverImageAppBar( - model: widget.product, - actions: [ - MoreButton( - key: const Key('item_more_action'), - onPressed: _showActions, + _buildActionButton(), + ]); + + final dialog = AlertDialog( + contentPadding: const EdgeInsets.fromLTRB(24, 32, 24, 0), + scrollable: true, + content: ConstrainedBox( + constraints: BoxConstraints(minWidth: Breakpoint.compact.max), + child: Column(children: [ + metadataTile, + _buildIngredientTitle(), + if (widget.product.isNotEmpty) + for (final item in widget.product.itemList) ProductIngredientView(item), + if (widget.product.isNotEmpty) + ElevatedButton.icon( + key: const Key('product.add'), + icon: const Icon(KIcons.add), + label: Text(S.menuProductTitleCreate), + onPressed: _handleCreateIng, ), - ], + const SizedBox(height: kFABSpacing), + ]), + ), + ); + + return ScaffoldMessenger( + child: Stack(children: [ + dialog, + const IgnorePointer( + child: Scaffold(primary: false, backgroundColor: Colors.transparent), ), - metadata, - ...ingredientView, ]), ); } - Widget get metadata { - return SliverToBoxAdapter( - child: Padding( - padding: const EdgeInsets.all(16.0), - child: MetaBlock.withString(context, [ - S.menuProductMetaTitle, - S.menuProductMetaPrice(widget.product.price), - S.menuProductMetaCost(widget.product.cost), - ])!, - ), - ); + Widget _buildMetadata() { + return MetaBlock.withString(context, [ + S.menuProductMetaTitle, + S.menuProductMetaPrice(widget.product.price), + S.menuProductMetaCost(widget.product.cost), + ])!; } - Iterable get ingredientView { + Widget _buildIngredientTitle() { if (widget.product.isEmpty) { - return [ - SliverToBoxAdapter( - child: EmptyBody( - content: S.menuIngredientEmptyBody, - onPressed: _handleCreateIng, - ), - ) - ]; + return EmptyBody( + content: S.menuIngredientEmptyBody, + onPressed: _handleCreateIng, + ); } - // get the ordered items - final items = widget.product.itemList; - return [ - SliverToBoxAdapter( - child: Center(child: HintText(S.totalCount(items.length))), + return Row(children: [ + Expanded( + child: Center(child: HintText(S.totalCount(widget.product.length))), ), - SliverList( - delegate: SliverChildBuilderDelegate( - // Floating action button offset - (_, int index) => index == items.length ? const SizedBox(height: 72.0) : ProductIngredientView(items[index]), - childCount: items.length + 1, - ), + RouteIconButton( + key: const Key('product.reorder'), + label: S.menuIngredientTitleReorder, + icon: const Icon(KIcons.reorder), + route: Routes.menuProductReorderIngredient, + pathParameters: {'id': widget.product.id}, + hideLabel: true, ), - ]; + ]); + } + + Widget _buildActionButton() { + return MoreButton( + key: const Key('product.more'), + onPressed: _showActions, + ); } @override @@ -116,7 +192,7 @@ class _ProductPageState extends State { super.dispose(); } - void _showActions() async { + void _showActions(BuildContext context) async { final result = await BottomSheetActions.withDelete<_Action>( context, deleteCallback: widget.product.remove, @@ -127,7 +203,7 @@ class _ProductPageState extends State { BottomSheetAction( title: Text(S.menuProductTitleUpdate), leading: const Icon(KIcons.modal), - route: Routes.menuProductModal, + route: Routes.menuProductUpdate, routePathParameters: {'id': widget.product.id}, ), BottomSheetAction( @@ -136,16 +212,15 @@ class _ProductPageState extends State { returnValue: _Action.changeImage, ), BottomSheetAction( - title: Text(S.menuProductTitleUpdateImage), + title: Text(S.menuIngredientTitleReorder), leading: const Icon(KIcons.reorder), - returnValue: _Action.reorder, - route: Routes.menuProductReorder, + route: Routes.menuProductReorderIngredient, routePathParameters: {'id': widget.product.id}, ), ], ); - if (result == _Action.changeImage && mounted) { + if (result == _Action.changeImage && context.mounted) { await widget.product.pickImage(context); } } @@ -158,7 +233,7 @@ class _ProductPageState extends State { void _handleCreateIng() { context.pushNamed( - Routes.menuProductDetails, + Routes.menuProductUpdateIngredient, pathParameters: {'id': widget.product.id}, ); } @@ -167,5 +242,4 @@ class _ProductPageState extends State { enum _Action { delete, changeImage, - reorder, } diff --git a/lib/ui/menu/widgets/catalog_modal.dart b/lib/ui/menu/widgets/catalog_modal.dart index 5d092d49..856002d0 100644 --- a/lib/ui/menu/widgets/catalog_modal.dart +++ b/lib/ui/menu/widgets/catalog_modal.dart @@ -26,7 +26,7 @@ class _CatalogModalState extends State with ItemModal widget.catalog?.name ?? S.menuCatalogTitleCreate; + String get title => widget.isNew ? S.menuCatalogTitleCreate : S.menuCatalogTitleUpdate; @override List buildFormFields() { @@ -43,7 +43,7 @@ class _CatalogModalState extends State with ItemModal catalogs; + /// Search bar in wide screen + final Widget? leading; + final Widget tailing; final void Function(Catalog) onSelected; const MenuCatalogList( this.catalogs, { super.key, required this.onSelected, + this.leading, + required this.tailing, }); @override Widget build(BuildContext context) { return SlidableItemList( + leading: leading, + tailing: tailing, + action: RouteIconButton( + label: S.menuCatalogTitleReorder, + icon: const Icon(KIcons.reorder), + route: Routes.menuCatalogReorder, + hideLabel: true, + ), delegate: SlidableItemDelegate( items: catalogs, deleteValue: _Action.delete, - tileBuilder: _tileBuilder, + tileBuilder: (catalog, _, actorBuilder) => _Tile(catalog, actorBuilder, onSelected), warningContentBuilder: _warningContentBuilder, actionBuilder: (Catalog catalog) => >[ BottomSheetAction( title: Text(S.menuCatalogTitleUpdate), leading: const Icon(KIcons.modal), routePathParameters: {'id': catalog.id}, - route: Routes.menuCatalogModal, + route: Routes.menuCatalogUpdate, ), BottomSheetAction( title: Text(S.menuProductTitleReorder), leading: const Icon(KIcons.reorder), - route: Routes.menuCatalogReorder, + route: Routes.menuProductReorder, routePathParameters: {'id': catalog.id}, ), ], @@ -46,31 +60,37 @@ class MenuCatalogList extends StatelessWidget { ); } - Widget _tileBuilder( - BuildContext context, - Catalog catalog, - int index, - VoidCallback showActions, - ) { + Widget _warningContentBuilder(BuildContext context, Catalog catalog) { + final more = S.menuCatalogDialogDeletionContent(catalog.length); + return Text(S.dialogDeletionContent(catalog.name, '$more\n\n')); + } +} + +class _Tile extends StatelessWidget { + final Catalog catalog; + final ActorBuilder actorBuilder; + final void Function(Catalog) onSelected; + + const _Tile(this.catalog, this.actorBuilder, this.onSelected); + + @override + Widget build(BuildContext context) { + final actor = actorBuilder(context); + return ListTile( key: Key('catalog.${catalog.id}'), leading: catalog.avator, title: Text(catalog.name), - trailing: EntryMoreButton(onPressed: showActions), + trailing: EntryMoreButton(onPressed: actor), subtitle: MetaBlock.withString( context, catalog.itemList.map((product) => product.name), emptyText: S.menuCatalogEmptyProducts, ), - onLongPress: showActions, + onLongPress: actor, onTap: () => onSelected(catalog), ); } - - Widget _warningContentBuilder(BuildContext context, Catalog catalog) { - final more = S.menuCatalogDialogDeletionContent(catalog.length); - return Text(S.dialogDeletionContent(catalog.name, '$more\n\n')); - } } enum _Action { diff --git a/lib/ui/menu/widgets/menu_product_list.dart b/lib/ui/menu/widgets/menu_product_list.dart index 4c62027d..3f35b3b5 100644 --- a/lib/ui/menu/widgets/menu_product_list.dart +++ b/lib/ui/menu/widgets/menu_product_list.dart @@ -4,6 +4,7 @@ import 'package:possystem/components/bottom_sheet_actions.dart'; import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/slidable_item_list.dart'; import 'package:possystem/components/style/buttons.dart'; +import 'package:possystem/components/style/route_buttons.dart'; import 'package:possystem/constants/icons.dart'; import 'package:possystem/models/menu/catalog.dart'; import 'package:possystem/models/menu/product.dart'; @@ -14,19 +15,30 @@ import 'package:possystem/translator.dart'; class MenuProductList extends StatelessWidget { final Catalog? catalog; + final Widget? tailing; + const MenuProductList({ super.key, required this.catalog, + this.tailing, }); @override Widget build(BuildContext context) { return SlidableItemList( + tailing: tailing, + action: RouteIconButton( + label: S.menuProductTitleReorder, + icon: const Icon(KIcons.reorder), + route: Routes.menuProductReorder, + pathParameters: {'id': catalog?.id ?? ''}, + hideLabel: true, + ), delegate: SlidableItemDelegate( items: catalog?.itemList ?? Menu.instance.products.toList(), deleteValue: 0, actionBuilder: _actionBuilder, - tileBuilder: _tileBuilder, + tileBuilder: (product, _, actorBuilder) => _Tile(product, actorBuilder), warningContentBuilder: _warningContentBuilder, handleDelete: (item) => item.remove(), ), @@ -38,37 +50,47 @@ class MenuProductList extends StatelessWidget { BottomSheetAction( title: Text(S.menuProductTitleUpdate), leading: const Icon(KIcons.modal), - route: Routes.menuProductModal, + route: Routes.menuProductUpdate, + routePathParameters: {'id': product.id}, + ), + BottomSheetAction( + title: Text(S.menuIngredientTitleReorder), + leading: const Icon(KIcons.reorder), + route: Routes.menuProductReorderIngredient, routePathParameters: {'id': product.id}, ), ]; } - Widget _tileBuilder( - BuildContext context, - Product product, - int index, - VoidCallback showActions, - ) { + Widget _warningContentBuilder(BuildContext context, Product product) { + return Text(S.dialogDeletionContent(product.name, '')); + } +} + +class _Tile extends StatelessWidget { + final Product product; + final ActorBuilder actorBuilder; + + const _Tile(this.product, this.actorBuilder); + + @override + Widget build(BuildContext context) { + final actor = actorBuilder(context); return ListTile( key: Key('product.${product.id}'), - leading: product.useDefaultImage ? product.avator : Hero(tag: product, child: product.avator), + leading: product.avator, title: Text(product.name), - trailing: EntryMoreButton(onPressed: showActions), + trailing: EntryMoreButton(onPressed: actor), subtitle: MetaBlock.withString( context, product.items.map((e) => e.name), emptyText: S.menuProductEmptyIngredients, ), - onLongPress: showActions, + onLongPress: actor, onTap: () => context.pushNamed( Routes.menuProduct, pathParameters: {'id': product.id}, ), ); } - - Widget _warningContentBuilder(BuildContext context, Product product) { - return Text(S.dialogDeletionContent(product.name, '')); - } } diff --git a/lib/ui/menu/widgets/product_ingredient_modal.dart b/lib/ui/menu/widgets/product_ingredient_modal.dart index 2b722e7d..838167d9 100644 --- a/lib/ui/menu/widgets/product_ingredient_modal.dart +++ b/lib/ui/menu/widgets/product_ingredient_modal.dart @@ -37,7 +37,7 @@ class _ProductIngredientModalState extends State with It String ingredientName = ''; @override - String get title => widget.ingredient?.name ?? S.menuIngredientTitleCreate; + String get title => widget.isNew ? S.menuIngredientTitleCreate : S.menuIngredientTitleUpdate; @override List buildFormFields() { @@ -48,7 +48,7 @@ class _ProductIngredientModalState extends State with It key: const Key('product_ingredient.search'), text: ingredientName, labelText: S.menuIngredientSearchLabel, - hintText: S.menuIngredientSearchHint, + hintText: widget.ingredient?.name ?? S.menuIngredientSearchHint, validator: Validator.textLimit(S.menuIngredientSearchLabel, 30), formValidator: _validateIngredient, initData: Stock.instance.itemList, @@ -173,7 +173,7 @@ class _ProductIngredientModalState extends State with It // pop off search page Navigator.of(context).pop(); context.pushNamed( - Routes.ingredientModal, + Routes.stockIngrUpdate, pathParameters: {'id': ingredient.id}, ); }, diff --git a/lib/ui/menu/widgets/product_ingredient_view.dart b/lib/ui/menu/widgets/product_ingredient_view.dart index 5fe0c5fe..a628385c 100644 --- a/lib/ui/menu/widgets/product_ingredient_view.dart +++ b/lib/ui/menu/widgets/product_ingredient_view.dart @@ -3,7 +3,9 @@ import 'package:go_router/go_router.dart'; import 'package:possystem/components/bottom_sheet_actions.dart'; import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/style/buttons.dart'; +import 'package:possystem/components/style/route_buttons.dart'; import 'package:possystem/components/style/slide_to_delete.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; import 'package:possystem/models/menu/product_ingredient.dart'; import 'package:possystem/models/menu/product_quantity.dart'; @@ -28,20 +30,24 @@ class ProductIngredientView extends StatelessWidget { subtitle: Text(S.menuIngredientMetaAmount(ingredient.amount)), expandedCrossAxisAlignment: CrossAxisAlignment.stretch, children: [ - ListTile( - key: Key('$key.add'), - leading: const CircleAvatar(child: Icon(KIcons.add)), - title: Text(S.menuQuantityTitleCreate), - onTap: () => context.pushNamed( - Routes.menuProductDetails, - pathParameters: {'id': ingredient.product.id}, - queryParameters: {'iid': ingredient.id, 'qid': ''}, + Row(children: [ + const SizedBox(width: kHorizontalSpacing), + Expanded( + child: RouteElevatedIconButton( + key: Key('$key.add'), + icon: const Icon(KIcons.add), + label: S.menuQuantityTitleCreate, + route: Routes.menuProductUpdateIngredient, + pathParameters: {'id': ingredient.product.id}, + queryParameters: {'iid': ingredient.id, 'qid': ''}, + ), ), - trailing: EntryMoreButton( + EntryMoreButton( key: Key('$key.more'), - onPressed: () => showActions(context), + onPressed: showActions, ), - ), + const SizedBox(width: kHorizontalSpacing), + ]), for (final item in ingredient.items) _QuantityTile(item), ], ); @@ -55,7 +61,7 @@ class ProductIngredientView extends StatelessWidget { BottomSheetAction( title: Text(S.menuIngredientTitleUpdate), leading: const Icon(KIcons.modal), - route: Routes.menuProductDetails, + route: Routes.menuProductUpdateIngredient, routePathParameters: {'id': ingredient.product.id}, routeQueryParameters: {'iid': ingredient.id}, ), @@ -92,7 +98,7 @@ class _QuantityTile extends StatelessWidget { deleteCallback: _remove, ), onTap: () => context.pushNamed( - Routes.menuProductDetails, + Routes.menuProductUpdateIngredient, pathParameters: {'id': quantity.ingredient.product.id}, queryParameters: { 'iid': quantity.ingredient.id, diff --git a/lib/ui/menu/widgets/product_modal.dart b/lib/ui/menu/widgets/product_modal.dart index f1efb6ff..28024b61 100644 --- a/lib/ui/menu/widgets/product_modal.dart +++ b/lib/ui/menu/widgets/product_modal.dart @@ -7,7 +7,6 @@ import 'package:possystem/models/menu/catalog.dart'; import 'package:possystem/models/menu/product.dart'; import 'package:possystem/models/objects/menu_object.dart'; import 'package:possystem/models/repository/menu.dart'; -import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; class ProductModal extends StatefulWidget { @@ -36,7 +35,7 @@ class _ProductModalState extends State with ItemModal widget.product?.name ?? S.menuProductTitleCreate; + String get title => widget.isNew ? S.menuProductTitleCreate : S.menuProductTitleUpdate; @override List buildFormFields() { @@ -53,7 +52,7 @@ class _ProductModalState extends State with ItemModal with ItemModal with ItemMo String quantityId = ''; @override - String get title => widget.quantity?.name ?? S.menuQuantityTitleCreate; + String get title => widget.isNew ? S.menuQuantityTitleCreate : S.menuQuantityTitleUpdate; @override List buildFormFields() { @@ -52,7 +52,7 @@ class _ProductQuantityModalState extends State with ItemMo key: const Key('product_quantity.search'), text: quantityName, labelText: S.menuQuantitySearchLabel, - hintText: S.menuQuantitySearchHint, + hintText: widget.quantity?.name ?? S.menuQuantitySearchHint, validator: Validator.textLimit(S.menuQuantitySearchLabel, 30), formValidator: _validateQuantity, initData: Quantities.instance.itemList, @@ -82,7 +82,7 @@ class _ProductQuantityModalState extends State with ItemMo textInputAction: TextInputAction.next, focusNode: _priceFocusNode, decoration: InputDecoration( - prefixIcon: const Icon(Icons.loyalty_sharp), + prefixIcon: const Icon(Icons.loyalty_outlined), labelText: S.menuQuantityAdditionalPriceLabel, helperText: S.menuQuantityAdditionalPriceHelper, helperMaxLines: 10, @@ -101,7 +101,7 @@ class _ProductQuantityModalState extends State with ItemMo focusNode: _costFocusNode, onFieldSubmitted: handleFieldSubmit, decoration: InputDecoration( - prefixIcon: const Icon(Icons.attach_money_sharp), + prefixIcon: const Icon(Icons.attach_money_outlined), labelText: S.menuQuantityAdditionalCostLabel, helperText: S.menuQuantityAdditionalCostHelper, helperMaxLines: 10, @@ -219,7 +219,7 @@ class _ProductQuantityModalState extends State with ItemMo // pop off search page Navigator.of(context).pop(); context.pushNamed( - Routes.quantityModal, + Routes.quantityUpdate, pathParameters: {'id': quantity.id}, ); }, diff --git a/lib/ui/order/cart/cart_actions.dart b/lib/ui/order/cart/cart_actions.dart index 6e2d09d4..2fde22c0 100644 --- a/lib/ui/order/cart/cart_actions.dart +++ b/lib/ui/order/cart/cart_actions.dart @@ -97,25 +97,25 @@ class CartActions extends StatelessWidget { actions: >[ BottomSheetAction( key: const Key('cart.action.discount'), - leading: const Icon(Icons.loyalty_sharp), + leading: const Icon(Icons.loyalty_outlined), title: Text(S.orderCartActionDiscount), returnValue: CartActionTypes.discount, ), BottomSheetAction( key: const Key('cart.action.price'), - leading: const Icon(Icons.attach_money_sharp), + leading: const Icon(Icons.attach_money_outlined), title: Text(S.orderCartActionChangePrice), returnValue: CartActionTypes.price, ), BottomSheetAction( key: const Key('cart.action.count'), - leading: const Icon(Icons.exposure_sharp), + leading: const Icon(Icons.exposure_outlined), title: Text(S.orderCartActionChangeCount), returnValue: CartActionTypes.count, ), BottomSheetAction( key: const Key('cart.action.free'), - leading: const Icon(Icons.free_breakfast_sharp), + leading: const Icon(Icons.free_breakfast_outlined), title: Text(S.orderCartActionFree), returnValue: CartActionTypes.free, ), diff --git a/lib/ui/order/cart/cart_snapshot.dart b/lib/ui/order/cart/cart_snapshot.dart index ad84d2ce..1cccd5fe 100644 --- a/lib/ui/order/cart/cart_snapshot.dart +++ b/lib/ui/order/cart/cart_snapshot.dart @@ -33,7 +33,9 @@ class CartSnapshot extends StatelessWidget { return GestureDetector( onTap: () { cart.toggleAll(false, except: product); - controller.jumpTo(controller.snapSizes[1]); + if (controller.isAttached) { + controller.jumpTo(controller.snapSizes[1]); + } }, child: OutlinedText( product.name, diff --git a/lib/ui/order/checkout/checkout_attribute_view.dart b/lib/ui/order/checkout/checkout_attribute_view.dart index 4362375c..ae3e097d 100644 --- a/lib/ui/order/checkout/checkout_attribute_view.dart +++ b/lib/ui/order/checkout/checkout_attribute_view.dart @@ -15,11 +15,11 @@ class CheckoutAttributeView extends StatelessWidget { @override Widget build(BuildContext context) { - return ListView( - padding: const EdgeInsets.fromLTRB(16, 8, 16, 428), - children: [ + return SingleChildScrollView( + padding: const EdgeInsets.fromLTRB(kHorizontalSpacing, kTopSpacing, kHorizontalSpacing, kFABSpacing), + child: Column(children: [ for (final item in OrderAttributes.instance.notEmptyItems) _CheckoutAttributeGroup(item, price), - ], + ]), ); } } @@ -45,10 +45,10 @@ class _CheckoutAttributeGroupState extends State<_CheckoutAttributeGroup> { widget.attribute.name, style: Theme.of(context).textTheme.headlineSmall, ), - const SizedBox(height: kSpacing0), + const SizedBox(height: kInternalSpacing), Padding( - padding: const EdgeInsets.fromLTRB(10.0, 14.0, 10.0, 14.0), - child: Wrap(spacing: kSpacing0, children: [ + padding: const EdgeInsets.symmetric(horizontal: kHorizontalSpacing), + child: Wrap(spacing: kInternalSpacing, children: [ for (final option in widget.attribute.itemList) ChoiceChip( key: Key('order.attr.${widget.attribute.id}.${option.id}'), @@ -61,6 +61,7 @@ class _CheckoutAttributeGroupState extends State<_CheckoutAttributeGroup> { ) ]), ), + const SizedBox(height: kInternalLargeSpacing), ]); } diff --git a/lib/ui/order/checkout/checkout_cashier_calculator.dart b/lib/ui/order/checkout/checkout_cashier_calculator.dart index 2d87155c..5c20ff99 100644 --- a/lib/ui/order/checkout/checkout_cashier_calculator.dart +++ b/lib/ui/order/checkout/checkout_cashier_calculator.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/settings/currency_setting.dart'; import 'package:possystem/translator.dart'; @@ -59,76 +60,79 @@ class _CheckoutCashierCalculatorState extends State { Expanded( child: Center( child: SingleChildScrollView( - child: Row(mainAxisSize: MainAxisSize.min, children: [ - Column(mainAxisSize: MainAxisSize.min, children: [ - _CalculatorPostfixAction(action: _execPostfix, text: '1'), - _CalculatorPostfixAction(action: _execPostfix, text: '4'), - _CalculatorPostfixAction(action: _execPostfix, text: '7'), - _CalculatorPostfixAction(action: _execPostfix, text: '00'), + child: Padding( + padding: const EdgeInsets.only(bottom: kFABSpacing), + child: Row(mainAxisSize: MainAxisSize.min, children: [ + Column(mainAxisSize: MainAxisSize.min, children: [ + _CalculatorPostfixAction(action: _execPostfix, text: '1'), + _CalculatorPostfixAction(action: _execPostfix, text: '4'), + _CalculatorPostfixAction(action: _execPostfix, text: '7'), + _CalculatorPostfixAction(action: _execPostfix, text: '00'), + ]), + Column(mainAxisSize: MainAxisSize.min, children: [ + _CalculatorPostfixAction(action: _execPostfix, text: '2'), + _CalculatorPostfixAction(action: _execPostfix, text: '5'), + _CalculatorPostfixAction(action: _execPostfix, text: '8'), + _CalculatorPostfixAction(action: _execPostfix, text: '0'), + ]), + Column(mainAxisSize: MainAxisSize.min, children: [ + _CalculatorPostfixAction(action: _execPostfix, text: '3'), + _CalculatorPostfixAction(action: _execPostfix, text: '6'), + _CalculatorPostfixAction(action: _execPostfix, text: '9'), + _CalculatorAction( + key: const Key('cashier.calculator.dot'), + action: _execDot, + child: const Text('.'), + ), + ]), + Column(mainAxisSize: MainAxisSize.min, children: [ + _CalculatorAction( + key: const Key('cashier.calculator.plus'), + action: () => _addOperator('+'), + color: theme.colorScheme.secondary, + child: const Icon(Icons.add_outlined, size: 24), + ), + _CalculatorAction( + key: const Key('cashier.calculator.minus'), + action: () => _addOperator('-'), + color: theme.colorScheme.secondary, + child: const Icon(Icons.remove_outlined, size: 24), + ), + _CalculatorAction( + key: const Key('cashier.calculator.times'), + action: () => _addOperator('x'), + color: theme.colorScheme.secondary, + child: const Icon(Icons.clear_outlined, size: 24), + ), + _CalculatorAction( + key: const Key('cashier.calculator.ceil'), + action: _execCeil, + color: theme.colorScheme.secondary, + child: const Icon(Icons.merge_type_rounded, size: 24), + ), + ]), + Column(mainAxisSize: MainAxisSize.min, children: [ + _CalculatorAction( + key: const Key('cashier.calculator.back'), + action: _execBack, + color: theme.colorScheme.error, + child: const Icon(Icons.arrow_back_rounded, size: 24), + ), + _CalculatorAction( + key: const Key('cashier.calculator.clear'), + action: _execClear, + color: theme.colorScheme.error, + child: const Icon(Icons.refresh_outlined, size: 24), + ), + _CalculatorAction( + key: const Key('cashier.calculator.submit'), + action: _execSubmit, + height: 124, + child: isOperating ? const Text('=') : const Icon(Icons.check_outlined, size: 24), + ), + ]), ]), - Column(mainAxisSize: MainAxisSize.min, children: [ - _CalculatorPostfixAction(action: _execPostfix, text: '2'), - _CalculatorPostfixAction(action: _execPostfix, text: '5'), - _CalculatorPostfixAction(action: _execPostfix, text: '8'), - _CalculatorPostfixAction(action: _execPostfix, text: '0'), - ]), - Column(mainAxisSize: MainAxisSize.min, children: [ - _CalculatorPostfixAction(action: _execPostfix, text: '3'), - _CalculatorPostfixAction(action: _execPostfix, text: '6'), - _CalculatorPostfixAction(action: _execPostfix, text: '9'), - _CalculatorAction( - key: const Key('cashier.calculator.dot'), - action: _execDot, - child: const Text('.'), - ), - ]), - Column(mainAxisSize: MainAxisSize.min, children: [ - _CalculatorAction( - key: const Key('cashier.calculator.plus'), - action: () => _addOperator('+'), - color: theme.colorScheme.secondary, - child: const Icon(Icons.add_sharp, size: 24), - ), - _CalculatorAction( - key: const Key('cashier.calculator.minus'), - action: () => _addOperator('-'), - color: theme.colorScheme.secondary, - child: const Icon(Icons.remove_sharp, size: 24), - ), - _CalculatorAction( - key: const Key('cashier.calculator.times'), - action: () => _addOperator('x'), - color: theme.colorScheme.secondary, - child: const Icon(Icons.clear_sharp, size: 24), - ), - _CalculatorAction( - key: const Key('cashier.calculator.ceil'), - action: _execCeil, - color: theme.colorScheme.secondary, - child: const Icon(Icons.merge_type_rounded, size: 24), - ), - ]), - Column(mainAxisSize: MainAxisSize.min, children: [ - _CalculatorAction( - key: const Key('cashier.calculator.back'), - action: _execBack, - color: theme.colorScheme.error, - child: const Icon(Icons.arrow_back_rounded, size: 24), - ), - _CalculatorAction( - key: const Key('cashier.calculator.clear'), - action: _execClear, - color: theme.colorScheme.error, - child: const Icon(Icons.refresh_sharp, size: 24), - ), - _CalculatorAction( - key: const Key('cashier.calculator.submit'), - action: _execSubmit, - height: 124, - child: isOperating ? const Text('=') : const Icon(Icons.check_sharp, size: 24), - ), - ]), - ]), + ), ), ), ), diff --git a/lib/ui/order/checkout/checkout_cashier_snapshot.dart b/lib/ui/order/checkout/checkout_cashier_snapshot.dart index 8fa4dfa0..d3d022d9 100644 --- a/lib/ui/order/checkout/checkout_cashier_snapshot.dart +++ b/lib/ui/order/checkout/checkout_cashier_snapshot.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/settings/currency_setting.dart'; import 'package:possystem/translator.dart'; @@ -7,10 +8,13 @@ class CheckoutCashierSnapshot extends StatefulWidget { final ValueNotifier paid; + final bool showChange; + const CheckoutCashierSnapshot({ super.key, required this.price, required this.paid, + this.showChange = true, }); @override @@ -24,37 +28,36 @@ class _CheckoutCashierSnapshotState extends State { @override Widget build(BuildContext context) { + final chips = ListView( + padding: EdgeInsets.zero, + scrollDirection: Axis.horizontal, + children: [ + for (final option in paidOptionWithCustom) + Padding( + padding: const EdgeInsets.symmetric(horizontal: 4.0), + child: ChoiceChip( + key: Key('cashier.snapshot.$option'), + selected: widget.paid.value == option, + onSelected: (selected) { + if (selected) { + _changePaid(option); + } + }, + label: Text(option.toCurrency()), + ), + ), + ], + ); + + if (!widget.showChange) { + return chips; + } + return Row(children: [ - Expanded( - child: ListView( - padding: EdgeInsets.zero, - scrollDirection: Axis.horizontal, - children: [ - for (final option in paidOptionWithCustom) - Padding( - padding: const EdgeInsets.symmetric(horizontal: 4.0), - child: ChoiceChip( - key: Key('cashier.snapshot.$option'), - selected: widget.paid.value == option, - onSelected: (selected) { - if (selected) { - _changePaid(option); - } - }, - label: Text(option.toCurrency()), - ), - ), - ], - ), - ), + Expanded(child: chips), Padding( - padding: const EdgeInsets.fromLTRB(16.0, 0, 8.0, 0), - child: SizedBox( - height: double.infinity, - child: Center( - child: Text(S.orderCheckoutCashierSnapshotLabelChange(change.toCurrency())), - ), - ), + padding: const EdgeInsets.fromLTRB(kInternalLargeSpacing, 0, kHorizontalSpacing, 0), + child: Text(S.orderCheckoutCashierSnapshotLabelChange(change.toCurrency())), ), ]); } diff --git a/lib/ui/order/checkout/stashed_order_list_view.dart b/lib/ui/order/checkout/stashed_order_list_view.dart index 11e80e68..359d284a 100644 --- a/lib/ui/order/checkout/stashed_order_list_view.dart +++ b/lib/ui/order/checkout/stashed_order_list_view.dart @@ -73,7 +73,7 @@ class StashedOrderListView extends StatelessWidget { key: Key('stashed_order.${order.id}'), title: Text(title), subtitle: MetaBlock.withString(context, products, emptyText: S.orderCheckoutStashNoProducts), - trailing: MoreButton(onPressed: () => _showActions(context, order)), + trailing: MoreButton(onPressed: (context) => _showActions(context, order)), onTap: () => _act(_Action.checkout, context, order), onLongPress: () => _showActions(context, order), ), @@ -86,12 +86,12 @@ class StashedOrderListView extends StatelessWidget { actions: [ BottomSheetAction( title: Text(S.orderCheckoutStashActionCheckout), - leading: const Icon(Icons.price_check_sharp), + leading: const Icon(Icons.price_check_outlined), returnValue: _Action.checkout, ), BottomSheetAction( title: Text(S.orderCheckoutStashActionRestore), - leading: const Icon(Icons.file_upload), + leading: const Icon(Icons.file_upload_outlined), returnValue: _Action.restore, ), ], diff --git a/lib/ui/order/order_checkout_page.dart b/lib/ui/order/order_checkout_page.dart index 865ca6ff..1a890de7 100644 --- a/lib/ui/order/order_checkout_page.dart +++ b/lib/ui/order/order_checkout_page.dart @@ -4,6 +4,8 @@ import 'package:possystem/components/scrollable_draggable_sheet.dart'; import 'package:possystem/components/style/hint_text.dart'; import 'package:possystem/components/style/pop_button.dart'; import 'package:possystem/components/style/snackbar.dart'; +import 'package:possystem/constants/constant.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/repository/cart.dart'; import 'package:possystem/models/repository/order_attributes.dart'; import 'package:possystem/translator.dart'; @@ -14,68 +16,114 @@ import 'package:possystem/ui/order/widgets/order_object_view.dart'; import 'checkout/checkout_attribute_view.dart'; -class OrderDetailsPage extends StatefulWidget { - const OrderDetailsPage({super.key}); +class OrderCheckoutPage extends StatefulWidget { + const OrderCheckoutPage({super.key}); @override - State createState() => _OrderDetailsPageState(); + State createState() => _OrderCheckoutPageState(); } -class _OrderDetailsPageState extends State with SingleTickerProviderStateMixin { - static const double snapshotHeight = 64.0; - static const double calculatorHeight = 408.0; - +class _OrderCheckoutPageState extends State { late final ValueNotifier paid; late final ValueNotifier price; - late final TabController _controller; - ScrollableDraggableController? draggableController; + final ValueNotifier viewIndex = ValueNotifier(0); + + final bool hasAttr = OrderAttributes.instance.hasNotEmptyItems; + + @override + Widget build(BuildContext context) { + return LayoutBuilder(builder: (context, constraint) { + return Breakpoint.find(width: constraint.maxWidth) <= Breakpoint.medium + ? _Mobile( + paid: paid, + price: price, + viewIndex: viewIndex, + hasAttr: hasAttr, + ) + : _Desktop( + paid: paid, + price: price, + viewIndex: viewIndex, + hasAttr: hasAttr, + ); + }); + } - late final bool hasAttr; + @override + void initState() { + super.initState(); - late final List tabs; + price = ValueNotifier(Cart.instance.price); + paid = ValueNotifier(price.value); + price.addListener(() => paid.value = price.value); + } + + @override + void dispose() { + price.dispose(); + paid.dispose(); + super.dispose(); + } +} + +class _Mobile extends StatefulWidget { + final ValueNotifier paid; + + final ValueNotifier price; + + final ValueNotifier viewIndex; + + final bool hasAttr; + + const _Mobile({ + required this.paid, + required this.price, + required this.viewIndex, + required this.hasAttr, + }); + + @override + State<_Mobile> createState() => _MobileState(); +} + +class _MobileState extends State<_Mobile> with SingleTickerProviderStateMixin { + static const double snapshotHeight = 64.0; + static const double calculatorHeight = 408.0; + + late final TabController _controller; + + ScrollableDraggableController? draggableController; @override Widget build(BuildContext context) { - final theme = Theme.of(context); return Scaffold( appBar: AppBar( leading: const PopButton(), actions: Cart.instance.isEmpty - ? const [] - : [ - TextButton( - key: const Key('order.details.stash'), - style: ButtonStyle( - foregroundColor: WidgetStatePropertyAll( - theme.textTheme.bodyMedium!.color, - ), - ), - onPressed: _stash, - child: Text(S.orderCheckoutActionStash), - ), - TextButton( - key: const Key('order.details.confirm'), - onPressed: _checkout, - child: Text(S.orderCheckoutActionConfirm), - ), + ? null + : [ + const _StashButton(), + _ConfirmButton(price: widget.price, paid: widget.paid), ], - // disable shadow after scrolled - scrolledUnderElevation: 0, bottom: TabBar( controller: _controller, - tabs: tabs, + tabs: [ + if (widget.hasAttr) Tab(key: const Key('order.details.attr'), text: S.orderCheckoutAttributeTab), + Tab(key: const Key('order.details.order'), text: S.orderCheckoutCashierTab), + Tab(key: const Key('order.details.stashed'), text: S.orderCheckoutStashTab), + ], ), ), - body: buildBody(context), + body: _buildBody(), ); } - Widget buildBody(BuildContext context) { + Widget _buildBody() { if (Cart.instance.isEmpty) { return TabBarView(controller: _controller, children: [ - if (hasAttr) CheckoutAttributeView(price: price), + if (widget.hasAttr) CheckoutAttributeView(price: widget.price), Center(child: HintText(S.orderCheckoutEmptyCart)), const StashedOrderListView(), ]); @@ -86,9 +134,9 @@ class _OrderDetailsPageState extends State with SingleTickerPr child: GestureDetector( onTap: () => draggableController?.reset(), child: TabBarView(controller: _controller, children: [ - if (hasAttr) CheckoutAttributeView(price: price), + if (widget.hasAttr) CheckoutAttributeView(price: widget.price), ValueListenableBuilder( - valueListenable: paid, + valueListenable: widget.paid, builder: (context, value, child) => OrderObjectView( order: Cart.instance.toObject(paid: value), ), @@ -109,7 +157,7 @@ class _OrderDetailsPageState extends State with SingleTickerPr height: snapshotHeight, baseline: -2 * snapshotHeight, valueScalar: -1, - child: CheckoutCashierSnapshot(price: price, paid: paid), + child: CheckoutCashierSnapshot(price: widget.price, paid: widget.paid), ), Expanded( child: SingleChildScrollView( @@ -117,9 +165,13 @@ class _OrderDetailsPageState extends State with SingleTickerPr child: SizedBox( height: calculatorHeight, child: CheckoutCashierCalculator( - onSubmit: _checkout, - price: price, - paid: paid, + onSubmit: () => _ConfirmButton.confirm( + context, + price: widget.price.value, + paid: widget.paid.value, + ), + price: widget.price, + paid: widget.paid, ), ), ), @@ -131,49 +183,180 @@ class _OrderDetailsPageState extends State with SingleTickerPr ]); } - Future _stash() async { - final ok = await Cart.instance.stash(); - if (mounted && ok && context.canPop()) { - context.pop(CheckoutStatus.stash); - } - } - @override void initState() { super.initState(); - price = ValueNotifier(Cart.instance.price); - paid = ValueNotifier(price.value); - price.addListener(() => paid.value = price.value); - - hasAttr = OrderAttributes.instance.hasNotEmptyItems; - _controller = TabController( - initialIndex: 0, - length: hasAttr ? 3 : 2, + initialIndex: widget.viewIndex.value, + length: widget.hasAttr ? 3 : 2, vsync: this, ); - - tabs = [ - if (hasAttr) Tab(key: const Key('order.details.attr'), text: S.orderCheckoutAttributeTab), - Tab(key: const Key('order.details.order'), text: S.orderCheckoutCashierTab), - Tab(key: const Key('order.details.stashed'), text: S.orderCheckoutStashTab), - ]; + _controller.addListener(() { + widget.viewIndex.value = _controller.index; + }); } @override void dispose() { _controller.dispose(); - price.dispose(); - paid.dispose(); super.dispose(); } +} + +class _Desktop extends StatelessWidget { + final ValueNotifier paid; + + final ValueNotifier price; + + final ValueNotifier viewIndex; + + final bool hasAttr; + + const _Desktop({ + required this.paid, + required this.price, + required this.viewIndex, + required this.hasAttr, + }); - void _checkout() async { - final status = await Cart.instance.checkout(price.value, paid.value); + @override + Widget build(BuildContext context) { + Widget? child; + if (!Cart.instance.isEmpty) { + child = SizedBox( + width: 360, + child: Column( + children: [ + Padding( + padding: const EdgeInsets.fromLTRB( + kHorizontalSpacing, + kTopSpacing, + kHorizontalSpacing, + kInternalSpacing, + ), + child: SizedBox( + height: 36, + child: CheckoutCashierSnapshot(price: price, paid: paid, showChange: false), + ), + ), + Expanded( + child: CheckoutCashierCalculator( + onSubmit: () => _ConfirmButton.confirm( + context, + price: price.value, + paid: paid.value, + ), + price: price, + paid: paid, + ), + ), + ], + ), + ); + } + + return Scaffold( + appBar: AppBar( + leading: const PopButton(), + actions: Cart.instance.isEmpty + ? null + : [ + const _StashButton(), + _ConfirmButton(price: price, paid: paid), + ], + ), + body: ListenableBuilder( + listenable: viewIndex, + builder: (context, calculator) { + return Row( + children: [ + Expanded( + child: Center( + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 800), + child: Column(children: [ + _buildSwitcher(), + Expanded(child: _buildBody(context)), + ]), + ), + ), + ), + const VerticalDivider(width: 1), + if (calculator != null) calculator, + ], + ); + }, + child: child, + ), + ); + } + + Widget _buildBody(BuildContext context) { + final idx = viewIndex.value - (hasAttr ? 1 : 0); + switch (idx) { + case -1: // has attribute and viewIndex is 0 + return CheckoutAttributeView(price: price); + case 0: + if (Cart.instance.isEmpty) { + return Center(child: HintText(S.orderCheckoutEmptyCart)); + } + return ValueListenableBuilder( + valueListenable: paid, + builder: (context, value, child) => OrderObjectView( + order: Cart.instance.toObject(paid: value), + ), + ); + default: + return const StashedOrderListView(); + } + } + + Widget _buildSwitcher() { + int idx = 0; + return SegmentedButton( + selected: {viewIndex.value}, + onSelectionChanged: (value) => viewIndex.value = value.first, + segments: [ + if (hasAttr) ButtonSegment(value: idx++, label: Text(S.orderCheckoutAttributeTab)), + ButtonSegment(value: idx++, label: Text(S.orderCheckoutCashierTab)), + ButtonSegment(value: idx++, label: Text(S.orderCheckoutStashTab)), + ], + ); + } +} + +class _StashButton extends StatelessWidget { + const _StashButton(); + + @override + Widget build(BuildContext context) { + return IconButton( + key: const Key('order.details.stash'), + onPressed: () async { + final ok = await Cart.instance.stash(); + if (context.mounted && ok && context.canPop()) { + context.pop(CheckoutStatus.stash); + } + }, + tooltip: S.orderCheckoutActionStash, + icon: const Icon(Icons.archive_outlined), + ); + } +} + +class _ConfirmButton extends StatelessWidget { + final ValueNotifier paid; + + final ValueNotifier price; + + const _ConfirmButton({required this.price, required this.paid}); + + static void confirm(BuildContext context, {required num price, required num paid}) async { + final status = await Cart.instance.checkout(price, paid); // send success message - if (mounted) { + if (context.mounted) { if (status == CheckoutStatus.paidNotEnough) { showSnackBar(context, S.orderCheckoutSnackbarPaidFailed); } else if (context.canPop()) { @@ -181,4 +364,14 @@ class _OrderDetailsPageState extends State with SingleTickerPr } } } + + @override + Widget build(BuildContext context) { + return IconButton( + key: const Key('order.details.confirm'), + onPressed: () => confirm(context, price: price.value, paid: paid.value), + tooltip: S.orderCheckoutActionConfirm, + icon: const Icon(Icons.check_outlined), + ); + } } diff --git a/lib/ui/order/order_page.dart b/lib/ui/order/order_page.dart index c2157a99..7aec024b 100644 --- a/lib/ui/order/order_page.dart +++ b/lib/ui/order/order_page.dart @@ -1,15 +1,17 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; +import 'package:possystem/components/bottom_sheet_actions.dart'; import 'package:possystem/components/linkify.dart'; +import 'package:possystem/components/style/buttons.dart'; import 'package:possystem/components/style/pop_button.dart'; import 'package:possystem/components/style/snackbar.dart'; import 'package:possystem/components/tutorial.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/repository/cart.dart'; import 'package:possystem/models/repository/menu.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/settings/checkout_warning.dart'; import 'package:possystem/settings/order_awakening_setting.dart'; -import 'package:possystem/settings/order_outlook_setting.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/order/cart/cart_metadata_view.dart'; import 'package:possystem/ui/order/cart/cart_product_list.dart'; @@ -18,7 +20,6 @@ import 'package:wakelock/wakelock.dart'; import 'cart/cart_product_state_selector.dart'; import 'widgets/draggable_sheet_view.dart'; -import 'widgets/order_actions.dart'; import 'widgets/order_catalog_list_view.dart'; import 'widgets/order_product_list_view.dart'; import 'widgets/orientated_view.dart'; @@ -32,8 +33,15 @@ class OrderPage extends StatefulWidget { class _OrderPageState extends State { late final PageController _pageController; + + /// Change the catalog index and pass to [OrderProductListView] and [OrderCatalogListView] late final ValueNotifier _catalogIndexNotifier; - final _Notifier resetNotifier = _Notifier(); + + /// Used to update the view of [OrderProductListView] + late final ValueNotifier _productViewNotifier; + + /// Reset panel to initial state, used by [DraggableSheetView] + final _Notifier _resetNotifier = _Notifier(); @override Widget build(BuildContext context) { @@ -42,18 +50,45 @@ class _OrderPageState extends State { final orderCatalogListView = OrderCatalogListView( catalogs: catalogs, indexNotifier: _catalogIndexNotifier, + viewNotifier: _productViewNotifier, onSelected: (index) => _pageController.jumpToPage(index), ); - final orderProductListView = PageView.builder( - controller: _pageController, - onPageChanged: (index) => _catalogIndexNotifier.value = index, - itemCount: catalogs.length, - itemBuilder: (context, index) { - return OrderProductListView(products: catalogs[index].itemList); - }, + final orderProductListView = ListenableBuilder( + listenable: _productViewNotifier, + builder: (context, _) => PageView.builder( + controller: _pageController, + onPageChanged: (index) => _catalogIndexNotifier.value = index, + itemCount: catalogs.length, + itemBuilder: (context, index) => OrderProductListView( + products: catalogs[index].itemList, + view: _productViewNotifier.value, + ), + ), ); - final outlook = OrderOutlookSetting.instance.value; + final body = Breakpoint.find(width: MediaQuery.sizeOf(context).width) <= Breakpoint.medium + ? DraggableSheetView( + row1: orderCatalogListView, + row2: orderProductListView, + row3_1: const CartProductSelector(), + row3_2Builder: (scroll, scrollable) => Expanded( + child: CartProductList( + scrollController: scroll, + scrollable: scrollable, + ), + ), + row3_3: const CartMetadataView(), + row4: const CartProductStateSelector(), + resetNotifier: _resetNotifier, + ) + : OrientatedView( + row1: orderCatalogListView, + row2: orderProductListView, + row3_1: const CartProductSelector(), + row3_2: const Expanded(child: CartProductList()), + row3_3: const CartMetadataView(), + row4: const CartProductStateSelector(), + ); return TutorialWrapper( child: Scaffold( @@ -62,7 +97,7 @@ class _OrderPageState extends State { appBar: AppBar( leading: const PopButton(), actions: [ - const OrderActions(key: Key('order.more')), + MoreButton(key: const Key('order.more'), onPressed: _showActions), TextButton( key: const Key('order.checkout'), onPressed: () => _handleCheckout(), @@ -70,29 +105,7 @@ class _OrderPageState extends State { ), ], ), - body: outlook == OrderOutlookTypes.slidingPanel - ? DraggableSheetView( - row1: orderCatalogListView, - row2: orderProductListView, - row3_1: const CartProductSelector(), - row3_2Builder: (scroll, scrollable) => Expanded( - child: CartProductList( - scrollController: scroll, - scrollable: scrollable, - ), - ), - row3_3: const CartMetadataView(), - row4: const CartProductStateSelector(), - resetNotifier: resetNotifier, - ) - : OrientatedView( - row1: orderCatalogListView, - row2: orderProductListView, - row3_1: const CartProductSelector(), - row3_2: const Expanded(child: CartProductList()), - row3_3: const CartMetadataView(), - row4: const CartProductStateSelector(), - ), + body: body, ), ); } @@ -102,6 +115,8 @@ class _OrderPageState extends State { Wakelock.disable(); _pageController.dispose(); _catalogIndexNotifier.dispose(); + _productViewNotifier.dispose(); + _resetNotifier.dispose(); super.dispose(); } @@ -115,16 +130,56 @@ class _OrderPageState extends State { _pageController = PageController(); _catalogIndexNotifier = ValueNotifier(0); + _productViewNotifier = ValueNotifier(ProductListView.grid); super.initState(); } void _handleCheckout() async { - final status = await context.pushNamed(Routes.orderDetails); + final status = await context.pushNamed(Routes.orderCheckout); if (status != null && mounted) { handleCheckoutStatus(context, status); - resetNotifier.notify(); + _resetNotifier.notify(); } } + + void _showActions(BuildContext context) async { + final result = await showCircularBottomSheet<_Action>( + context, + actions: [ + BottomSheetAction( + key: const Key('order.action.exchange'), + title: Text(S.orderActionExchange), + leading: const Icon(Icons.change_circle_outlined), + returnValue: const _Action(route: Routes.cashierChanger), + ), + BottomSheetAction( + key: const Key('order.action.stash'), + title: Text(S.orderActionStash), + leading: const Icon(Icons.archive_outlined), + returnValue: _Action(action: _handleStash), + ), + BottomSheetAction( + key: const Key('order.action.history'), + title: Text(S.orderActionReview), + leading: const Icon(Icons.history_outlined), + returnValue: const _Action(route: Routes.history), + ), + ], + ); + + if (context.mounted && result != null) { + final success = await result.exec(context); + + if (success == true && context.mounted) { + showSnackBar(context, S.actSuccess); + } + } + } + + Future _handleStash() { + DraggableScrollableActuator.reset(context); + return Cart.instance.stash(); + } } void handleCheckoutStatus(BuildContext context, CheckoutStatus status) { @@ -143,7 +198,7 @@ void handleCheckoutStatus(BuildContext context, CheckoutStatus status) { showMoreInfoSnackBar( context, S.orderSnackbarCashierUsingSmallMoney, - Linkify.fromString(S.orderSnackbarCashierUsingSmallMoneyHelper(Routes.getRoute('features/checkoutWarning'))), + Linkify.fromString(S.orderSnackbarCashierUsingSmallMoneyHelper(Routes.getRoute('settings/checkoutWarning'))), ); break; default: @@ -159,3 +214,24 @@ class _Notifier extends ChangeNotifier { notifyListeners(); } } + +class _Action { + final Future Function()? action; + + final String? route; + + const _Action({this.action, this.route}); + + Future exec(BuildContext context) { + return route == null ? action!() : context.pushNamed(route!); + } +} + +enum ProductListView { + grid(Icon(Icons.grid_view_outlined)), + list(Icon(Icons.view_list_outlined)); + + final Icon icon; + + const ProductListView(this.icon); +} diff --git a/lib/ui/order/widgets/draggable_sheet_view.dart b/lib/ui/order/widgets/draggable_sheet_view.dart index 90b7863c..9f7aac5a 100644 --- a/lib/ui/order/widgets/draggable_sheet_view.dart +++ b/lib/ui/order/widgets/draggable_sheet_view.dart @@ -1,11 +1,7 @@ import 'package:flutter/material.dart'; import 'package:possystem/components/scrollable_draggable_sheet.dart'; -import 'package:possystem/components/tutorial.dart'; import 'package:possystem/models/repository/cart.dart'; -import 'package:possystem/routes.dart'; -import 'package:possystem/translator.dart'; import 'package:possystem/ui/order/cart/cart_snapshot.dart'; -import 'package:spotlight_ant/spotlight_ant.dart'; class DraggableSheetView extends StatefulWidget { final Widget row1; @@ -88,14 +84,7 @@ class _DraggableSheetViewState extends State { baselineSize: controller.snapSizes[1], child: widget.row3_1, ), - Tutorial( - id: 'order.sliding_collapsed', - padding: const EdgeInsets.fromLTRB(-4, snapshotHeight + DraggableIndicator.height, -4, 0), - title: S.orderCartSnapshotTutorialTitle, - message: S.orderCartSnapshotTutorialContent(Routes.getRoute('features/orderOutlook')), - spotlightBuilder: const SpotlightRectBuilder(borderRadius: 16), - child: widget.row3_2Builder(scroll, scrollable), - ), + widget.row3_2Builder(scroll, scrollable), FixedHeightClipper( controller: controller, height: buttonHeight, @@ -126,21 +115,27 @@ class _DraggableSheetViewState extends State { 1.0, ]); - Cart.instance.addListener(showStateSelectorIfStartOrder); - widget.resetNotifier?.addListener(() => controller.reset()); + Cart.instance.addListener(_showStateSelectorIfStartOrder); + widget.resetNotifier?.addListener(_reset); } @override void dispose() { - Cart.instance.removeListener(showStateSelectorIfStartOrder); - widget.resetNotifier?.dispose(); + Cart.instance.removeListener(_showStateSelectorIfStartOrder); + widget.resetNotifier?.removeListener(_reset); super.dispose(); } - void showStateSelectorIfStartOrder() { + void _showStateSelectorIfStartOrder() { // first order - if (Cart.instance.products.length == 1 && controller.snapIndex.value == 0) { + if (controller.isAttached && Cart.instance.products.length == 1 && controller.snapIndex.value == 0) { controller.jumpTo(controller.snapSizes[1]); } } + + void _reset() { + if (controller.isAttached) { + controller.reset(); + } + } } diff --git a/lib/ui/order/widgets/order_actions.dart b/lib/ui/order/widgets/order_actions.dart deleted file mode 100644 index 48d34c06..00000000 --- a/lib/ui/order/widgets/order_actions.dart +++ /dev/null @@ -1,68 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:go_router/go_router.dart'; -import 'package:possystem/components/bottom_sheet_actions.dart'; -import 'package:possystem/components/style/buttons.dart'; -import 'package:possystem/components/style/snackbar.dart'; -import 'package:possystem/models/repository/cart.dart'; -import 'package:possystem/routes.dart'; -import 'package:possystem/translator.dart'; - -class OrderActions extends StatelessWidget { - const OrderActions({super.key}); - - @override - Widget build(BuildContext context) { - return MoreButton( - onPressed: () async { - final result = await showCircularBottomSheet( - context, - actions: [ - BottomSheetAction( - key: const Key('order.action.exchange'), - title: Text(S.orderActionExchange), - leading: const Icon(Icons.change_circle_sharp), - returnValue: const OrderAction(route: Routes.cashierChanger), - ), - BottomSheetAction( - key: const Key('order.action.stash'), - title: Text(S.orderActionStash), - leading: const Icon(Icons.file_download_sharp), - returnValue: OrderAction(action: () => _stash(context)), - ), - BottomSheetAction( - key: const Key('order.action.history'), - title: Text(S.orderActionReview), - leading: const Icon(Icons.history_sharp), - returnValue: const OrderAction(route: Routes.history), - ), - ], - ); - - if (context.mounted && result != null) { - final success = await result.exec(context); - - if (success == true && context.mounted) { - showSnackBar(context, S.actSuccess); - } - } - }, - ); - } - - Future _stash(BuildContext context) { - DraggableScrollableActuator.reset(context); - return Cart.instance.stash(); - } -} - -class OrderAction { - final Future Function()? action; - - final String? route; - - const OrderAction({this.action, this.route}); - - Future exec(BuildContext context) { - return route == null ? action!() : context.pushNamed(route!); - } -} diff --git a/lib/ui/order/widgets/order_catalog_list_view.dart b/lib/ui/order/widgets/order_catalog_list_view.dart index 838b1665..5b4bf7b9 100644 --- a/lib/ui/order/widgets/order_catalog_list_view.dart +++ b/lib/ui/order/widgets/order_catalog_list_view.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:possystem/components/style/single_row_warp.dart'; import 'package:possystem/models/menu/catalog.dart'; import 'package:possystem/translator.dart'; +import 'package:possystem/ui/order/order_page.dart'; class OrderCatalogListView extends StatefulWidget { final List catalogs; @@ -10,11 +11,14 @@ class OrderCatalogListView extends StatefulWidget { final ValueNotifier indexNotifier; + final ValueNotifier viewNotifier; + const OrderCatalogListView({ super.key, required this.catalogs, required this.indexNotifier, required this.onSelected, + required this.viewNotifier, }); @override @@ -22,6 +26,8 @@ class OrderCatalogListView extends StatefulWidget { } class _OrderCatalogListViewState extends State { + final FocusNode _f = FocusNode(debugLabel: 'OrderCatalogListView'); + final MenuController controller = MenuController(); late String selectedId; @override @@ -36,16 +42,45 @@ class _OrderCatalogListViewState extends State { } var index = 0; - return SingleRowWrap(children: [ - for (final catalog in widget.catalogs) _buildChoiceChip(catalog, index++), - ]); + return Material( + elevation: 1.0, + child: Padding( + padding: const EdgeInsets.fromLTRB(4, 0, 4, 4), + child: Row( + children: [ + const SizedBox(width: 4), + Expanded( + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Wrap(spacing: 6, children: [ + for (final catalog in widget.catalogs) _buildChoiceChip(catalog, index++), + const SizedBox(), + ]), + ), + ), + _ProductListView( + controller: controller, + focusNode: _f, + viewNotifier: widget.viewNotifier, + ), + const SizedBox(width: 4), + ], + ), + ), + ); + } + + @override + void dispose() { + _f.dispose(); + super.dispose(); } ChoiceChip _buildChoiceChip(Catalog catalog, int index) { return ChoiceChip( // TODO: should dynamic add this when it is select, // wait to support the API. - // avatar: catalog.avator, + avatar: selectedId == catalog.id ? null : catalog.avator, key: Key('order.catalog.${catalog.id}'), onSelected: (isSelected) { if (isSelected) { @@ -73,3 +108,56 @@ class _OrderCatalogListViewState extends State { selectedId = widget.catalogs.isEmpty ? '' : widget.catalogs.first.id; } } + +class _ProductListView extends StatelessWidget { + const _ProductListView({ + required this.controller, + required this.focusNode, + required this.viewNotifier, + }); + + final MenuController controller; + final FocusNode focusNode; + final ValueNotifier viewNotifier; + + @override + Widget build(BuildContext context) { + return DecoratedBox( + decoration: const ShapeDecoration( + shape: RoundedRectangleBorder( + side: BorderSide(width: 1), + borderRadius: BorderRadius.horizontal(right: Radius.circular(8)), + ), + ), + child: MenuAnchor( + controller: controller, + childFocusNode: focusNode, + menuChildren: ProductListView.values.map((e) { + return MenuItemButton( + leadingIcon: e.icon, + onPressed: () => viewNotifier.value = e, + child: Text(S.orderProductListViewHelper(e.name)), + ); + }).toList(), + child: ListenableBuilder( + listenable: viewNotifier, + builder: (context, child) { + return IconButton( + focusNode: focusNode, + padding: EdgeInsets.zero, + visualDensity: VisualDensity.compact, + onPressed: () { + if (controller.isOpen) { + controller.close(); + } else { + controller.open(); + } + }, + icon: viewNotifier.value.icon, + ); + }, + ), + ), + ); + } +} diff --git a/lib/ui/order/widgets/order_product_list_view.dart b/lib/ui/order/widgets/order_product_list_view.dart index 275cb0c0..2caebe7d 100644 --- a/lib/ui/order/widgets/order_product_list_view.dart +++ b/lib/ui/order/widgets/order_product_list_view.dart @@ -1,65 +1,84 @@ import 'package:flutter/material.dart'; +import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/style/image_holder.dart'; -import 'package:possystem/components/tutorial.dart'; import 'package:possystem/constants/constant.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/menu/product.dart'; import 'package:possystem/models/repository/cart.dart'; -import 'package:possystem/routes.dart'; -import 'package:possystem/settings/order_product_axis_count_setting.dart'; -import 'package:possystem/translator.dart'; -import 'package:spotlight_ant/spotlight_ant.dart'; +import 'package:possystem/ui/order/order_page.dart'; class OrderProductListView extends StatelessWidget { final List products; + final ProductListView view; + const OrderProductListView({ super.key, required this.products, + required this.view, }); @override Widget build(BuildContext context) { - final count = OrderProductAxisCountSetting.instance.value; - int index = 0; - return Padding( - padding: const EdgeInsets.all(kSpacing1), - child: count == 0 - ? Wrap(children: [ - for (final product in products) - Padding( - padding: const EdgeInsets.only(right: 8.0), - child: OutlinedButton( - key: Key('order.product.${product.id}'), - onPressed: () => _onSelected(product), - child: Text(product.name), - ), - ), - ]) - : GridView.count( - crossAxisCount: count, - mainAxisSpacing: 12.0, - crossAxisSpacing: 8.0, - children: [ - for (final product in products) - Tutorial( - id: 'order.menu_product', - title: S.orderProductListTutorialTitle, - message: S.orderProductListTutorialContent(Routes.getRoute('features?f=orderProductCount')), - spotlightBuilder: const SpotlightRectBuilder(borderRadius: 16), - disable: index++ != 0, - child: ImageHolder( - key: Key('order.product.${product.id}'), - image: product.image, - title: product.name, - onPressed: () => _onSelected(product), - ), - ) - ], - ), + padding: const EdgeInsets.only(top: kTopSpacing, bottom: kFABSpacing), + child: _buildView(context), + ); + } + + Widget _buildView(BuildContext context) { + if (view == ProductListView.list) { + return _buildListView(context); + } + + return LayoutBuilder( + builder: (context, constraints) { + // each width should between 200 and 320 + return _buildGridView(Breakpoint.find(box: constraints).lookup( + compact: 2, + medium: 3, + expanded: 4, + large: 5, + )); + }, ); } + Widget _buildGridView(int crossAxisCount) { + return Center( + child: GridView.count( + crossAxisCount: crossAxisCount, + mainAxisSpacing: 12.0, + crossAxisSpacing: 8.0, + children: [ + for (final product in products) + ImageHolder( + key: Key('order.product.${product.id}'), + image: product.image, + title: product.name, + onPressed: () => _onSelected(product), + ) + ], + ), + ); + } + + Widget _buildListView(BuildContext context) { + return ListView(children: [ + for (final product in products) + ListTile( + key: Key('order.product.${product.id}'), + title: Text(product.name), + subtitle: MetaBlock.withString( + context, + product.itemList.map((e) => e.name).toList(), + emptyText: '無設定成分', + ), + onTap: () => _onSelected(product), + ), + ]); + } + void _onSelected(Product product) { Cart.instance.add(product); } diff --git a/lib/ui/order/widgets/orientated_view.dart b/lib/ui/order/widgets/orientated_view.dart index d4ffd990..4257ff55 100644 --- a/lib/ui/order/widgets/orientated_view.dart +++ b/lib/ui/order/widgets/orientated_view.dart @@ -23,46 +23,19 @@ class OrientatedView extends StatelessWidget { @override Widget build(BuildContext context) { - return OrientationBuilder( - builder: (BuildContext context, Orientation orientation) { - return orientation == Orientation.portrait ? _portrait(context) : _landscape(context); - }, - ); - } - - Widget _portrait(BuildContext context) { - return Column( - key: const Key('order.orientation.portrait'), - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - ColoredBox( - color: Theme.of(context).colorScheme.surface, - child: row1, - ), - Expanded(child: row2), - Expanded(flex: 3, child: wrapRow3(context)), - row4, - ], - ); - } - - Widget _landscape(BuildContext context) { return Row( - key: const Key('order.orientation.landscape'), - crossAxisAlignment: CrossAxisAlignment.stretch, + // crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Flexible( - child: ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 300.0), - child: Column( - children: [ - Expanded(child: wrapRow3(context)), - row4, - ], - ), + ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 400.0), + child: Column( + children: [ + Expanded(child: wrapRow3(context)), + row4, + ], ), ), - Flexible( + Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ diff --git a/lib/ui/order_attr/order_attribute_page.dart b/lib/ui/order_attr/order_attribute_page.dart index fa663a85..a3bb2bd0 100644 --- a/lib/ui/order_attr/order_attribute_page.dart +++ b/lib/ui/order_attr/order_attribute_page.dart @@ -1,50 +1,73 @@ import 'package:flutter/material.dart'; -import 'package:go_router/go_router.dart'; import 'package:possystem/components/style/empty_body.dart'; +import 'package:possystem/components/style/hint_text.dart'; import 'package:possystem/components/style/pop_button.dart'; +import 'package:possystem/components/style/route_buttons.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/repository/order_attributes.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; -import 'package:provider/provider.dart'; - -import 'widgets/order_attribute_list.dart'; +import 'package:possystem/ui/order_attr/widgets/order_attribute_tile.dart'; class OrderAttributePage extends StatelessWidget { const OrderAttributePage({super.key}); @override Widget build(BuildContext context) { - final attrs = context.watch(); + final body = ListenableBuilder( + key: const Key('order_attributes_page'), + listenable: OrderAttributes.instance, + builder: (context, child) => Center(child: _buildBody()), + ); + + if (Routes.homeMode.value == HomeMode.bottomNavigationBar) { + return Scaffold( + appBar: AppBar( + title: Text(S.orderAttributeTitle), + leading: const PopButton(), + ), + body: body, + ); + } - handleCreate() => context.pushNamed(Routes.orderAttrNew); + return body; + } + + Widget _buildBody() { + if (OrderAttributes.instance.isEmpty) { + return EmptyBody( + content: S.orderAttributeEmptyBody, + routeName: Routes.orderAttrCreate, + ); + } - return Scaffold( - appBar: AppBar( - title: Text(S.orderAttributeTitle), - leading: const PopButton(), - actions: [ - IconButton( + return ConstrainedBox( + constraints: BoxConstraints(maxWidth: Breakpoint.medium.max), + child: ListView(padding: const EdgeInsets.only(bottom: kFABSpacing, top: kTopSpacing), children: [ + Row(children: [ + Expanded( + child: Center(child: HintText(S.totalCount(OrderAttributes.instance.length))), + ), + RouteIconButton( key: const Key('order_attributes.reorder'), - tooltip: S.orderAttributeTitleReorder, - onPressed: () => context.pushNamed(Routes.orderAttrReorder), + label: S.orderAttributeTitleReorder, + route: Routes.orderAttrReorder, icon: const Icon(KIcons.reorder), + hideLabel: true, ), - ], - ), - floatingActionButton: FloatingActionButton( - onPressed: handleCreate, - tooltip: S.orderAttributeTitleCreate, - child: const Icon(KIcons.add), - ), - body: attrs.isEmpty - ? Center( - child: EmptyBody( - onPressed: handleCreate, - content: S.orderAttributeEmptyBody, - ), - ) - : OrderAttributeList(attrs.itemList), + const SizedBox(width: kHorizontalSpacing), + ]), + const SizedBox(height: kInternalSpacing), + for (final attribute in OrderAttributes.instance.itemList) OrderAttributeTile(attr: attribute), + RouteElevatedIconButton( + key: const Key('order_attributes.add'), + icon: const Icon(KIcons.add), + label: S.orderAttributeTitleCreate, + route: Routes.orderAttrCreate, + ), + ]), ); } } diff --git a/lib/ui/order_attr/widgets/order_attribute_modal.dart b/lib/ui/order_attr/widgets/order_attribute_modal.dart index ffd7d069..31147085 100644 --- a/lib/ui/order_attr/widgets/order_attribute_modal.dart +++ b/lib/ui/order_attr/widgets/order_attribute_modal.dart @@ -26,7 +26,7 @@ class _OrderAttributeModalState extends State with ItemModa final modeSelector = GlobalKey>(); @override - String get title => widget.attribute?.name ?? S.orderAttributeTitleCreate; + String get title => widget.isNew ? S.orderAttributeTitleCreate : S.orderAttributeTitleUpdate; @override List buildFormFields() { @@ -38,7 +38,7 @@ class _OrderAttributeModalState extends State with ItemModa textCapitalization: TextCapitalization.words, decoration: InputDecoration( labelText: S.orderAttributeNameLabel, - hintText: S.orderAttributeNameHint, + hintText: widget.attribute?.name ?? S.orderAttributeNameHint, filled: false, ), onFieldSubmitted: handleFieldSubmit, diff --git a/lib/ui/order_attr/widgets/order_attribute_option_modal.dart b/lib/ui/order_attr/widgets/order_attribute_option_modal.dart index ff4dc816..273eb9e9 100644 --- a/lib/ui/order_attr/widgets/order_attribute_option_modal.dart +++ b/lib/ui/order_attr/widgets/order_attribute_option_modal.dart @@ -35,7 +35,7 @@ class _OrderAttributeModalState extends State with It late bool isDefault; @override - String get title => widget.option?.name ?? S.orderAttributeOptionTitleCreateWith(widget.attribute.name); + String get title => widget.isNew ? S.orderAttributeOptionTitleCreate : S.orderAttributeOptionTitleUpdate; @override List buildFormFields() { @@ -56,6 +56,7 @@ class _OrderAttributeModalState extends State with It ); return [ + HintText(S.orderAttributeOptionMetaOptionOf(widget.attribute.name)), p(TextFormField( key: const Key('order_attribute_option.name'), controller: _nameController, @@ -64,7 +65,9 @@ class _OrderAttributeModalState extends State with It focusNode: _nameFocusNode, decoration: InputDecoration( labelText: S.orderAttributeOptionNameLabel, + hintText: widget.option?.name, helperText: S.orderAttributeOptionNameHelper, + helperMaxLines: 3, filled: false, ), maxLength: 30, @@ -87,7 +90,6 @@ class _OrderAttributeModalState extends State with It onChanged: _toggledDefault, title: Text(S.orderAttributeOptionToDefaultLabel), ), - const SizedBox(height: 12.0), p(widget.attribute.shouldHaveModeValue ? TextFormField( key: const Key('order_attribute_option.modeValue'), @@ -98,6 +100,7 @@ class _OrderAttributeModalState extends State with It decoration: InputDecoration( labelText: label, helperText: helper, + helperMaxLines: 3, hintText: hint, filled: false, ), diff --git a/lib/ui/order_attr/widgets/order_attribute_list.dart b/lib/ui/order_attr/widgets/order_attribute_tile.dart similarity index 55% rename from lib/ui/order_attr/widgets/order_attribute_list.dart rename to lib/ui/order_attr/widgets/order_attribute_tile.dart index 8e4a0433..7fa40d88 100644 --- a/lib/ui/order_attr/widgets/order_attribute_list.dart +++ b/lib/ui/order_attr/widgets/order_attribute_tile.dart @@ -4,105 +4,100 @@ import 'package:possystem/components/bottom_sheet_actions.dart'; import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/models/order_attribute_value_widget.dart'; import 'package:possystem/components/style/buttons.dart'; -import 'package:possystem/components/style/hint_text.dart'; import 'package:possystem/components/style/outlined_text.dart'; import 'package:possystem/components/style/slide_to_delete.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; import 'package:possystem/models/order/order_attribute.dart'; import 'package:possystem/models/order/order_attribute_option.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; -import 'package:provider/provider.dart'; -class OrderAttributeList extends StatelessWidget { - final List attributes; +class OrderAttributeTile extends StatelessWidget { + final OrderAttribute attr; - const OrderAttributeList(this.attributes, {super.key}); + const OrderAttributeTile({super.key, required this.attr}); @override Widget build(BuildContext context) { - return ListView(children: [ - const SizedBox(height: 8.0), - Center(child: HintText(S.totalCount(attributes.length))), - const SizedBox(height: 8.0), - for (final attribute in attributes) - ChangeNotifierProvider.value( - value: attribute, - child: const _OrderAttributeCard(), - ), - // Floating action button offset - const SizedBox(height: 72.0), - ]); + return ListenableBuilder( + listenable: attr, + builder: (context, child) => _buildTile(context), + ); } -} - -class _OrderAttributeCard extends StatelessWidget { - const _OrderAttributeCard(); - @override - Widget build(BuildContext context) { - final attr = context.watch(); - final mode = S.orderAttributeModeName(attr.mode.name); + Widget _buildTile(BuildContext context) { final key = 'order_attributes.${attr.id}'; final theme = Theme.of(context); + final subtitle = RichText( + overflow: TextOverflow.ellipsis, + text: TextSpan( + children: [ + TextSpan(text: S.orderAttributeMetaMode(S.orderAttributeModeName(attr.mode.name))), + MetaBlock.span(), + attr.defaultOption?.name != null + ? TextSpan(text: S.orderAttributeMetaDefault(attr.defaultOption!.name)) + : TextSpan(text: S.orderAttributeMetaDefault(''), children: [ + TextSpan( + text: S.orderAttributeMetaNoDefault, + style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor), + ), + ]), + ], + // disable parent text style + style: theme.textTheme.bodyMedium, + ), + ); return ExpansionTile( key: Key(key), title: Text(attr.name), - subtitle: RichText( - overflow: TextOverflow.ellipsis, - text: TextSpan( - children: [ - TextSpan(text: S.orderAttributeMetaMode(mode)), - MetaBlock.span(), - attr.defaultOption?.name != null - ? TextSpan(text: S.orderAttributeMetaDefault(attr.defaultOption!.name)) - : TextSpan(text: S.orderAttributeMetaDefault(''), children: [ - TextSpan( - text: S.orderAttributeMetaNoDefault, - style: theme.textTheme.bodySmall?.copyWith(color: theme.hintColor), - ), - ]), - ], - // disable parent text style - style: theme.textTheme.bodyMedium, - ), - ), + subtitle: subtitle, expandedCrossAxisAlignment: CrossAxisAlignment.stretch, children: [ - ListTile( - key: Key('$key.add'), - leading: const CircleAvatar(child: Icon(KIcons.add)), - title: Text(S.orderAttributeOptionTitleCreate), - onTap: () => context.pushNamed( - Routes.orderAttrNew, - queryParameters: {'id': attr.id}, - ), - trailing: EntryMoreButton( - key: Key('$key.more'), - onPressed: () => showActions(context, attr), - ), - ), + _buildActions(context), + const SizedBox(height: kInternalLargeSpacing), for (final item in attr.itemList) _OptionTile(item), ], ); } - void showActions(BuildContext context, OrderAttribute attr) { - BottomSheetActions.withDelete( + Widget _buildActions(BuildContext context) { + return Row(children: [ + Expanded( + child: ElevatedButton.icon( + key: Key('order_attributes.${attr.id}.add'), + onPressed: () => context.pushNamed( + Routes.orderAttrCreate, + queryParameters: {'id': attr.id}, + ), + label: Text(S.orderAttributeOptionTitleCreate), + icon: const Icon(KIcons.add), + ), + ), + const SizedBox(width: kInternalSpacing), + EntryMoreButton( + key: Key('order_attributes.${attr.id}.more'), + onPressed: _showActions, + ), + ]); + } + + void _showActions(BuildContext context) async { + await BottomSheetActions.withDelete( context, deleteValue: 0, actions: >[ BottomSheetAction( title: Text(S.orderAttributeTitleUpdate), leading: const Icon(KIcons.modal), - route: Routes.orderAttrModal, + route: Routes.orderAttrUpdate, routePathParameters: {'id': attr.id}, ), BottomSheetAction( title: Text(S.orderAttributeOptionTitleReorder), leading: const Icon(KIcons.reorder), - route: Routes.orderAttrOptionReorder, + route: Routes.orderAttrReorderOption, routePathParameters: {'id': attr.id}, ), ], @@ -135,7 +130,7 @@ class _OptionTile extends StatelessWidget { deleteCallback: _remove, ), onTap: () => context.pushNamed( - Routes.orderAttrModal, + Routes.orderAttrUpdate, pathParameters: {'id': option.attribute.id}, queryParameters: {'oid': option.id}, ), diff --git a/lib/ui/stock/quantities_page.dart b/lib/ui/stock/quantities_page.dart new file mode 100644 index 00000000..b3eb978c --- /dev/null +++ b/lib/ui/stock/quantities_page.dart @@ -0,0 +1,52 @@ +import 'package:flutter/material.dart'; +import 'package:possystem/components/style/empty_body.dart'; +import 'package:possystem/components/style/pop_button.dart'; +import 'package:possystem/components/style/route_buttons.dart'; +import 'package:possystem/constants/icons.dart'; +import 'package:possystem/models/repository/quantities.dart'; +import 'package:possystem/routes.dart'; +import 'package:possystem/translator.dart'; + +import 'widgets/stock_quantity_list.dart'; + +class QuantitiesPage extends StatelessWidget { + const QuantitiesPage({super.key}); + + @override + Widget build(BuildContext context) { + final body = ListenableBuilder( + key: const Key('quantities_page'), + listenable: Quantities.instance, + builder: (context, child) => _buildBody(context), + ); + + return Routes.homeMode.value == HomeMode.bottomNavigationBar + ? Scaffold( + appBar: AppBar( + title: Text(S.stockQuantityTitle), + leading: const PopButton(), + ), + body: body, + ) + : body; + } + + Widget _buildBody(BuildContext context) { + if (Quantities.instance.isEmpty) { + return EmptyBody( + content: S.stockQuantityEmptyBody, + routeName: Routes.quantityCreate, + ); + } + + return StockQuantityList( + quantities: Quantities.instance.itemList, + tailing: RouteElevatedIconButton( + key: const Key('quantity.add'), + route: Routes.quantityCreate, + label: S.stockQuantityTitleCreate, + icon: const Icon(KIcons.add), + ), + ); + } +} diff --git a/lib/ui/stock/quantity_page.dart b/lib/ui/stock/quantity_page.dart deleted file mode 100644 index 9c47b596..00000000 --- a/lib/ui/stock/quantity_page.dart +++ /dev/null @@ -1,45 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:go_router/go_router.dart'; -import 'package:possystem/components/style/empty_body.dart'; -import 'package:possystem/components/style/pop_button.dart'; -import 'package:possystem/constants/icons.dart'; -import 'package:possystem/models/repository/quantities.dart'; -import 'package:possystem/routes.dart'; -import 'package:possystem/translator.dart'; -import 'package:provider/provider.dart'; - -import 'widgets/stock_quantity_list.dart'; - -class QuantityPage extends StatelessWidget { - const QuantityPage({super.key}); - - @override - Widget build(BuildContext context) { - final quantities = context.watch(); - - handleCreate() => context.pushNamed(Routes.quantityNew); - - final body = quantities.isEmpty - ? Center( - child: EmptyBody( - content: S.stockQuantityEmptyBody, - onPressed: handleCreate, - ), - ) - : StockQuantityList(quantities: quantities.itemList); - - return Scaffold( - appBar: AppBar( - title: Text(S.stockQuantityTitle), - leading: const PopButton(), - ), - floatingActionButton: FloatingActionButton( - key: const Key('quantity.add'), - onPressed: handleCreate, - tooltip: S.stockQuantityTitleCreate, - child: const Icon(KIcons.add), - ), - body: body, - ); - } -} diff --git a/lib/ui/stock/replenishment_page.dart b/lib/ui/stock/replenishment_page.dart index 825ffbf0..9519efdf 100644 --- a/lib/ui/stock/replenishment_page.dart +++ b/lib/ui/stock/replenishment_page.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:possystem/components/bottom_sheet_actions.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/components/slidable_item_list.dart'; import 'package:possystem/components/style/buttons.dart'; import 'package:possystem/components/style/empty_body.dart'; @@ -16,55 +17,45 @@ class ReplenishmentPage extends StatelessWidget { @override Widget build(BuildContext context) { - void goToCreate() => context.pushNamed(Routes.replenishmentNew); - - return Scaffold( - appBar: AppBar( - title: Text(S.stockReplenishmentTitleList), - leading: const PopButton(), - ), - floatingActionButton: FloatingActionButton( - key: const Key('replenisher.add'), - onPressed: goToCreate, - tooltip: S.stockReplenishmentTitleCreate, - child: const Icon(KIcons.add), - ), - body: ListenableBuilder( + return ResponsiveDialog( + title: Text(S.stockReplenishmentTitleList), + scrollable: false, + content: ListenableBuilder( listenable: Replenisher.instance, - builder: (_, __) { + builder: (context, title) { + handleCreate() => context.pushNamed(Routes.stockReplCreate); if (Replenisher.instance.isEmpty) { return Center( child: EmptyBody( - onPressed: goToCreate, + onPressed: handleCreate, content: S.stockReplenishmentEmptyBody, ), ); } - return buildList(context); + return buildList( + (Replenishment a, ReplenishActions b) => handleActions(context, a, b), + ElevatedButton.icon( + key: const Key('replenisher.add'), + onPressed: handleCreate, + label: Text(S.stockReplenishmentTitleCreate), + icon: const Icon(KIcons.add), + ), + ); }, ), ); } - Widget buildList(BuildContext context) { - void handler(Replenishment item, _Actions action) async { - if (action == _Actions.apply) { - final confirmed = await context.pushNamed( - Routes.replenishmentApply, - pathParameters: {'id': item.id}, - ); - - if (confirmed == true && context.mounted && context.canPop()) { - context.pop(true); - } - } - } - - return SlidableItemList( + Widget buildList( + void Function(Replenishment a, ReplenishActions b) actionHandler, + Widget trailing, + ) { + return SlidableItemList( + tailing: trailing, delegate: SlidableItemDelegate( handleDelete: (item) => item.remove(), - deleteValue: _Actions.delete, + deleteValue: ReplenishActions.delete, warningContentBuilder: (_, item) { return Text(S.dialogDeletionContent(item.name, '')); }, @@ -73,33 +64,65 @@ class ReplenishmentPage extends StatelessWidget { BottomSheetAction( title: Text(S.stockReplenishmentTitleUpdate), leading: const Icon(KIcons.edit), - route: Routes.replenishmentModal, + route: Routes.stockReplUpdate, routePathParameters: {'id': item.id}, ), BottomSheetAction( - key: const Key('apply'), - title: Text(S.stockReplenishmentApplyButton), - leading: const Icon(Icons.check_circle_outline_sharp), - returnValue: _Actions.apply, + title: Text(S.stockReplenishmentApplyPreview), + leading: const Icon(Icons.check_outlined), + returnValue: ReplenishActions.preview, ), ], - handleAction: handler, - tileBuilder: (context, item, index, showActions) { - return ListTile( - key: Key('replenisher.${item.id}'), - title: Text(item.name), - subtitle: Text(S.stockReplenishmentMetaAffect(item.data.length)), - onTap: () => handler(item, _Actions.apply), - onLongPress: showActions, - trailing: EntryMoreButton(onPressed: showActions), - ); - }, + handleAction: actionHandler, + tileBuilder: (item, index, actorBuilder) => _Tile( + item: item, + actorBuilder: actorBuilder, + onTap: () => actionHandler(item, ReplenishActions.preview), + ), ), ); } + + void handleActions(BuildContext context, Replenishment item, ReplenishActions action) async { + if (action == ReplenishActions.preview) { + final confirmed = await context.pushNamed( + Routes.stockReplPreview, + pathParameters: {'id': item.id}, + ); + + if (confirmed == true && context.mounted) { + PopButton.safePop(context, value: true); + } + } + } +} + +class _Tile extends StatelessWidget { + final Replenishment item; + final ActorBuilder actorBuilder; + final VoidCallback onTap; + + const _Tile({ + required this.item, + required this.actorBuilder, + required this.onTap, + }); + + @override + Widget build(BuildContext context) { + final actor = actorBuilder(context); + return ListTile( + key: Key('replenisher.${item.id}'), + title: Text(item.name), + subtitle: Text(S.stockReplenishmentMetaAffect(item.data.length)), + onTap: onTap, + onLongPress: actor, + trailing: EntryMoreButton(onPressed: actor), + ); + } } -enum _Actions { +enum ReplenishActions { delete, - apply, + preview, } diff --git a/lib/ui/stock/stock_view.dart b/lib/ui/stock/stock_view.dart index a8703206..6af1631d 100644 --- a/lib/ui/stock/stock_view.dart +++ b/lib/ui/stock/stock_view.dart @@ -1,94 +1,104 @@ import 'package:flutter/material.dart'; +import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/style/empty_body.dart'; -import 'package:possystem/components/style/route_circular_button.dart'; +import 'package:possystem/components/style/hint_text.dart'; +import 'package:possystem/components/style/route_buttons.dart'; import 'package:possystem/components/tutorial.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/repository/stock.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; -import 'package:possystem/ui/stock/widgets/stock_ingredient_list.dart'; +import 'package:possystem/ui/stock/widgets/stock_ingredient_list_tile.dart'; +import 'package:provider/provider.dart'; class StockView extends StatefulWidget { - final int? tabIndex; - - const StockView({super.key, this.tabIndex}); + const StockView({super.key}); @override State createState() => _StockViewState(); } class _StockViewState extends State with AutomaticKeepAliveClientMixin { - late final TutorialInTab? tab; - @override Widget build(BuildContext context) { super.build(context); - // after pop from AddPage, this page will rebuild by TabView - // so we don't need to watch Stock.instance - if (Stock.instance.isEmpty) { + // when stock is not empty, we use [ListenableBuilder] to listen to the + // stock changes. + if (context.select((Stock stock) => stock.isEmpty)) { return Center( child: EmptyBody( content: S.stockIngredientEmptyBody, - routeName: Routes.ingredientNew, + routeName: Routes.stockIngrCreate, ), ); } - return TutorialWrapper( - tab: tab, - child: ListView(padding: const EdgeInsets.only(bottom: 76, top: 16), children: [ - Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - Expanded( - child: Tutorial( - id: 'stock.replenishment', - index: 1, - title: S.stockReplenishmentTutorialTitle, - message: S.stockReplenishmentTutorialContent, - child: RouteCircularButton( - key: const Key('stock.replenisher'), - icon: Icons.shopping_basket_sharp, - route: Routes.replenishment, - popTrueShowSuccess: true, - text: S.stockReplenishmentButton, - ), - ), - ), - const Spacer(), - Expanded( - child: Tutorial( - id: 'stock.add', - index: 0, - disable: Stock.instance.isNotEmpty, - title: S.stockIngredientTutorialTitle, - message: S.stockIngredientTutorialContent, - child: RouteCircularButton( - key: const Key('stock.add'), - route: Routes.ingredientNew, - icon: KIcons.add, - text: S.stockIngredientTitleCreate, - ), - ), - ), - ]), - const SizedBox(height: 4.0), - ListenableBuilder( + return Center( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: Breakpoint.medium.max), + child: ListenableBuilder( listenable: Stock.instance, builder: (context, child) { - return StockIngredientList(ingredients: Stock.instance.itemList); + return ListView(padding: const EdgeInsets.only(bottom: kFABSpacing, top: kTopSpacing), children: [ + Row(children: [ + Expanded(child: Center(child: _buildMeta())), + _buildActions(), + const SizedBox(width: kHorizontalSpacing), + ]), + const SizedBox(height: kInternalSpacing), + for (final item in Stock.instance.itemList) StockIngredientListTile(item: item), + RouteElevatedIconButton( + key: const Key('stock.add'), + icon: const Icon(KIcons.add), + label: S.stockIngredientTitleCreate, + route: Routes.stockIngrCreate, + ), + ]); }, ), - ]), + ), ); } @override bool get wantKeepAlive => true; - @override - void initState() { - tab = widget.tabIndex == null ? null : TutorialInTab(index: widget.tabIndex!, context: context); + Widget _buildMeta() { + DateTime? latest; + for (var ingredient in Stock.instance.items) { + if (latest == null) { + latest = ingredient.updatedAt; + } else if (ingredient.updatedAt?.isAfter(latest) == true) { + latest = ingredient.updatedAt; + } + } + + return HintText([ + latest == null ? S.stockReplenishmentNever : S.stockUpdatedAt(latest), + S.totalCount(Stock.instance.length), + ].join(MetaBlock.string)); + } - super.initState(); + Widget _buildActions() { + return Material( + elevation: 1.0, + borderRadius: const BorderRadius.all(Radius.circular(6.0)), + child: Tutorial( + id: 'stock.replenishment', + title: S.stockReplenishmentTutorialTitle, + message: S.stockReplenishmentTutorialContent, + preferVertical: true, + child: RouteIconButton( + key: const Key('stock.replenisher'), + icon: const Icon(Icons.shopping_basket_outlined), + route: Routes.stockRepl, + popTrueShowSuccess: true, + label: S.stockReplenishmentButton, + ), + ), + ); } } diff --git a/lib/ui/stock/widgets/replenishment_apply.dart b/lib/ui/stock/widgets/replenishment_apply.dart index 3adc45e4..d7a3b961 100644 --- a/lib/ui/stock/widgets/replenishment_apply.dart +++ b/lib/ui/stock/widgets/replenishment_apply.dart @@ -1,48 +1,42 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/components/style/card_info_text.dart'; import 'package:possystem/models/stock/replenishment.dart'; import 'package:possystem/translator.dart'; -class ReplenishmentApply extends StatelessWidget { +class ReplenishmentPreviewPage extends StatelessWidget { final Replenishment item; - const ReplenishmentApply(this.item, {super.key}); + const ReplenishmentPreviewPage(this.item, {super.key}); @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text(item.name), - actions: [ - TextButton( - key: const Key('repl.apply'), - onPressed: () async { - await item.apply(); - if (context.mounted && context.canPop()) { - context.pop(true); - } - }, - child: Text(S.stockReplenishmentApplyConfirmButton), - ), - ], + return ResponsiveDialog( + title: Text(item.name), + action: TextButton( + key: const Key('repl.apply'), + onPressed: () async { + await item.apply(); + if (context.mounted && context.canPop()) { + context.pop(true); + } + }, + child: Text(S.stockReplenishmentApplyConfirmButton), ), - body: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8.0), - child: ListView(children: [ - CardInfoText(child: Text(S.stockReplenishmentApplyConfirmHint)), - DataTable(columns: [ - DataColumn(label: Text(S.stockReplenishmentApplyConfirmColumn('name'))), - DataColumn(numeric: true, label: Text(S.stockReplenishmentApplyConfirmColumn('amount'))) - ], rows: [ - for (final entry in item.ingredientData.entries) - DataRow(cells: [ - DataCell(Text(entry.key.name)), - DataCell(Text(entry.value.toString())), - ]), - ]), + content: Column(children: [ + CardInfoText(child: Text(S.stockReplenishmentApplyConfirmHint)), + DataTable(columns: [ + DataColumn(label: Text(S.stockReplenishmentApplyConfirmColumn('name'))), + DataColumn(numeric: true, label: Text(S.stockReplenishmentApplyConfirmColumn('amount'))) + ], rows: [ + for (final entry in item.ingredientData.entries) + DataRow(cells: [ + DataCell(Text(entry.key.name)), + DataCell(Text(entry.value.toString())), + ]), ]), - ), + ]), ); } } diff --git a/lib/ui/stock/widgets/replenishment_modal.dart b/lib/ui/stock/widgets/replenishment_modal.dart index 813daf89..b45a13fc 100644 --- a/lib/ui/stock/widgets/replenishment_modal.dart +++ b/lib/ui/stock/widgets/replenishment_modal.dart @@ -30,7 +30,7 @@ class _ReplenishmentModalState extends State with ItemModal< late FocusNode _nameFocusNode; @override - String get title => widget.replenishment?.name ?? S.stockReplenishmentTitleCreate; + String get title => widget.isNew ? S.stockReplenishmentTitleCreate : S.stockReplenishmentTitleUpdate; @override List buildFormFields() { @@ -45,7 +45,7 @@ class _ReplenishmentModalState extends State with ItemModal< focusNode: _nameFocusNode, decoration: InputDecoration( labelText: S.stockReplenishmentNameLabel, - hintText: S.stockReplenishmentNameHint, + hintText: widget.replenishment?.name ?? S.stockReplenishmentNameHint, filled: false, ), style: textTheme.titleLarge, diff --git a/lib/ui/stock/widgets/stock_ingredient_list.dart b/lib/ui/stock/widgets/stock_ingredient_list_tile.dart similarity index 79% rename from lib/ui/stock/widgets/stock_ingredient_list.dart rename to lib/ui/stock/widgets/stock_ingredient_list_tile.dart index e5b17bf0..1fe46eba 100644 --- a/lib/ui/stock/widgets/stock_ingredient_list.dart +++ b/lib/ui/stock/widgets/stock_ingredient_list_tile.dart @@ -2,9 +2,7 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:possystem/components/bottom_sheet_actions.dart'; import 'package:possystem/components/dialog/slider_text_dialog.dart'; -import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/style/empty_body.dart'; -import 'package:possystem/components/style/hint_text.dart'; import 'package:possystem/components/style/percentile_bar.dart'; import 'package:possystem/constants/icons.dart'; import 'package:possystem/helpers/validator.dart'; @@ -17,58 +15,24 @@ import 'package:possystem/routes.dart'; import 'package:possystem/services/cache.dart'; import 'package:possystem/translator.dart'; -class StockIngredientList extends StatelessWidget { - final List ingredients; +class StockIngredientListTile extends StatelessWidget { + final Ingredient item; - const StockIngredientList({super.key, required this.ingredients}); - - @override - Widget build(BuildContext context) { - final updatedAt = latestUpdatedAt(); - - return Column( - children: [ - Center( - child: HintText([ - updatedAt == null ? S.stockReplenishmentNever : S.stockUpdatedAt(updatedAt), - S.totalCount(ingredients.length), - ].join(MetaBlock.string)), - ), - const SizedBox(height: 2.0), - for (final item in ingredients) _IngredientTile(item), - ], - ); - } - - DateTime? latestUpdatedAt() { - DateTime? latest; - for (var ingredient in ingredients) { - if (latest == null) { - latest = ingredient.updatedAt; - } else if (ingredient.updatedAt?.isAfter(latest) == true) { - latest = ingredient.updatedAt; - } - } - - return latest; - } -} - -class _IngredientTile extends StatelessWidget { - final Ingredient ingredient; - - const _IngredientTile(this.ingredient); + const StockIngredientListTile({ + super.key, + required this.item, + }); @override Widget build(BuildContext context) { return ListTile( - key: Key('stock.${ingredient.id}'), - title: Text(ingredient.name), - subtitle: PercentileBar(ingredient.currentAmount, ingredient.maxAmount), + key: Key('stock.${item.id}'), + title: Text(item.name), + subtitle: PercentileBar(item.currentAmount, item.maxAmount), onLongPress: () => showActions(context), onTap: () => editAmount(context), trailing: IconButton( - key: Key('stock.${ingredient.id}.edit'), + key: Key('stock.${item.id}.edit'), tooltip: S.stockIngredientTitleUpdate, onPressed: () => editIngredient(context), icon: const Icon(KIcons.edit), @@ -78,19 +42,19 @@ class _IngredientTile extends StatelessWidget { void editIngredient(BuildContext context) { context.pushNamed( - Routes.ingredientModal, - pathParameters: {'id': ingredient.id}, + Routes.stockIngrUpdate, + pathParameters: {'id': item.id}, ); } void showActions(BuildContext context) async { - final count = Menu.instance.getIngredients(ingredient.id).length; + final count = Menu.instance.getIngredients(item.id).length; final more = S.stockIngredientDialogDeletionContent(count); final result = await BottomSheetActions.withDelete<_Actions>( context, deleteValue: _Actions.delete, - warningContent: Text(S.dialogDeletionContent(ingredient.name, '$more\n\n')), + warningContent: Text(S.dialogDeletionContent(item.name, '$more\n\n')), deleteCallback: delete, actions: [ BottomSheetAction( @@ -102,8 +66,8 @@ class _IngredientTile extends StatelessWidget { key: const Key('btn.edit'), title: Text(S.stockIngredientTitleUpdate), leading: const Icon(KIcons.edit), - route: Routes.ingredientModal, - routePathParameters: {'id': ingredient.id}, + route: Routes.stockIngrUpdate, + routePathParameters: {'id': item.id}, ), ], ); @@ -114,8 +78,8 @@ class _IngredientTile extends StatelessWidget { } Future delete() async { - await ingredient.remove(); - return Menu.instance.removeIngredients(ingredient.id); + await item.remove(); + return Menu.instance.removeIngredients(item.id); } Future editAmount(BuildContext context) async { @@ -124,11 +88,11 @@ class _IngredientTile extends StatelessWidget { builder: (BuildContext context) { final currentValue = ValueNotifier(null); return SliderTextDialog( - title: Text(ingredient.name), - value: ingredient.currentAmount.toDouble(), - max: ingredient.maxAmount, + title: Text(item.name), + value: item.currentAmount.toDouble(), + max: item.maxAmount, builder: (child, onSubmit) => _RestockDialog( - ingredient: ingredient, + ingredient: item, quantityTab: child, onSubmit: onSubmit, currentValue: currentValue, @@ -145,7 +109,7 @@ class _IngredientTile extends StatelessWidget { ); if (result != null) { - await ingredient.setAmount(num.tryParse(result) ?? 0); + await item.setAmount(num.tryParse(result) ?? 0); } } } @@ -188,7 +152,7 @@ class _RestockDialogState extends State<_RestockDialog> { label: Text(replenishBy == ReplenishBy.quantity ? S.stockIngredientRestockDialogPriceBtn : S.stockIngredientRestockDialogQuantityBtn), - icon: const Icon(Icons.currency_exchange_sharp), + icon: const Icon(Icons.currency_exchange_outlined), ), ], ); @@ -203,7 +167,7 @@ class _RestockDialogState extends State<_RestockDialog> { return Center( child: EmptyBody( content: S.stockIngredientRestockDialogPriceEmptyBody, - routeName: Routes.ingredientRestockModal, + routeName: Routes.stockIngrRestock, pathParameters: {'id': widget.ingredient.id}, ), ); @@ -239,7 +203,7 @@ class _RestockDialogState extends State<_RestockDialog> { subtitle: Text(S.stockIngredientRestockDialogSubtitle), trailing: IconButton( icon: const Icon(KIcons.edit), - onPressed: () => context.pushNamed(Routes.ingredientRestockModal, pathParameters: { + onPressed: () => context.pushNamed(Routes.stockIngrRestock, pathParameters: { 'id': widget.ingredient.id, }), ), diff --git a/lib/ui/stock/widgets/stock_ingredient_modal.dart b/lib/ui/stock/widgets/stock_ingredient_modal.dart index 7f4c3d95..5fd3f8fa 100644 --- a/lib/ui/stock/widgets/stock_ingredient_modal.dart +++ b/lib/ui/stock/widgets/stock_ingredient_modal.dart @@ -3,8 +3,6 @@ import 'package:go_router/go_router.dart'; import 'package:possystem/components/scaffold/item_modal.dart'; import 'package:possystem/components/style/text_divider.dart'; import 'package:possystem/helpers/validator.dart'; -import 'package:possystem/models/menu/product.dart'; -import 'package:possystem/models/menu/product_ingredient.dart'; import 'package:possystem/models/objects/stock_object.dart'; import 'package:possystem/models/repository/menu.dart'; import 'package:possystem/models/repository/stock.dart'; @@ -32,42 +30,7 @@ class _StockIngredientModalState extends State with ItemMo final _totalAmountFocusNode = FocusNode(); @override - String get title => widget.ingredient?.name ?? S.stockIngredientTitleCreate; - - @override - Widget buildForm() { - final ingredients = - widget.isNew ? const [] : Menu.instance.getIngredients(widget.ingredient!.id); - // +2: 1 for form, 2 for text-divider - final length = widget.isNew ? 1 : ingredients.length + 2; - - return ListView.builder( - itemCount: length, - itemBuilder: (context, index) { - switch (index) { - case 0: - return Form( - key: formKey, - child: Column( - children: buildFormFields(), - ), - ); - case 1: - return TextDivider( - label: S.stockIngredientProductsCount(length - 2), - ); - default: - final product = ingredients[index - 2].product; - return ListTile( - key: Key('stock.ingredient.${product.id}'), - title: Text( - '${product.catalog.name} - ${product.name}', - ), - onTap: () => handleProductTap(product), - ); - } - }); - } + String get title => widget.isNew ? S.stockIngredientTitleCreate : S.stockIngredientTitleUpdate; @override List buildFormFields() => [ @@ -79,7 +42,7 @@ class _StockIngredientModalState extends State with ItemMo textCapitalization: TextCapitalization.words, decoration: InputDecoration( labelText: S.stockIngredientNameLabel, - hintText: S.stockIngredientNameHint, + hintText: widget.ingredient?.name ?? S.stockIngredientNameHint, filled: false, ), maxLength: 30, @@ -128,8 +91,25 @@ class _StockIngredientModalState extends State with ItemMo focusNode: _totalAmountFocusNode, ), )), + if (!widget.isNew) ..._buildProducts(), ]; + Iterable _buildProducts() sync* { + final pi = Menu.instance.getIngredients(widget.ingredient!.id); + yield TextDivider(label: S.stockIngredientProductsCount(pi.length)); + for (final ingredient in pi) { + final product = ingredient.product; + yield ListTile( + key: Key('stock.ingredient.${product.id}'), + title: Text('${product.catalog.name} - ${product.name}'), + onTap: () => context.pushNamed( + Routes.menuProductUpdate, + pathParameters: {'id': product.id}, + ), + ); + } + } + @override void initState() { super.initState(); @@ -172,13 +152,6 @@ class _StockIngredientModalState extends State with ItemMo } } - void handleProductTap(Product product) { - context.pushNamed( - Routes.menuProductModal, - pathParameters: {'id': product.id}, - ); - } - IngredientObject parseObject() { final amount = num.tryParse(amountController.text) ?? 0; return IngredientObject( diff --git a/lib/ui/stock/widgets/stock_ingredient_restock_modal.dart b/lib/ui/stock/widgets/stock_ingredient_restock_modal.dart index c2272cb0..d84a1645 100644 --- a/lib/ui/stock/widgets/stock_ingredient_restock_modal.dart +++ b/lib/ui/stock/widgets/stock_ingredient_restock_modal.dart @@ -9,9 +9,9 @@ import 'package:possystem/models/stock/ingredient.dart'; import 'package:possystem/translator.dart'; class StockIngredientRestockModal extends StatefulWidget { - final Ingredient? ingredient; + final Ingredient ingredient; - const StockIngredientRestockModal({super.key, this.ingredient}); + const StockIngredientRestockModal({super.key, required this.ingredient}); @override State createState() => _ModalState(); @@ -24,7 +24,7 @@ class _ModalState extends State with ItemModal widget.ingredient?.name ?? ''; + String get title => widget.ingredient.name; @override List buildFormFields() => [ @@ -70,8 +70,8 @@ class _ModalState extends State with ItemModal with ItemModal updateItem() async { final object = parseObject(); - await widget.ingredient?.update(object); + await widget.ingredient.update(object); if (mounted && context.canPop()) { context.pop(); diff --git a/lib/ui/stock/widgets/stock_quantity_list.dart b/lib/ui/stock/widgets/stock_quantity_list.dart index bc971fa5..f1802fc5 100644 --- a/lib/ui/stock/widgets/stock_quantity_list.dart +++ b/lib/ui/stock/widgets/stock_quantity_list.dart @@ -12,15 +12,22 @@ import 'package:possystem/translator.dart'; class StockQuantityList extends StatelessWidget { final List quantities; - const StockQuantityList({super.key, required this.quantities}); + final Widget tailing; + + const StockQuantityList({ + super.key, + required this.quantities, + required this.tailing, + }); @override Widget build(BuildContext context) { return SlidableItemList( + tailing: tailing, delegate: SlidableItemDelegate( items: quantities, deleteValue: 0, - tileBuilder: _tileBuilder, + tileBuilder: (item, _, actorBuilder) => _Tile(item, actorBuilder), warningContentBuilder: _warningContentBuilder, handleDelete: _handleDelete, actionBuilder: (quantity) => [ @@ -28,7 +35,7 @@ class StockQuantityList extends StatelessWidget { key: const Key('btn.edit'), title: Text(S.menuQuantityTitleUpdate), leading: const Icon(KIcons.edit), - route: Routes.quantityModal, + route: Routes.quantityUpdate, routePathParameters: {'id': quantity.id}, ), ], @@ -41,25 +48,6 @@ class StockQuantityList extends StatelessWidget { return Menu.instance.removeQuantities(quantity.id); } - Widget _tileBuilder( - BuildContext context, - Quantity quantity, - int index, - VoidCallback showActions, - ) { - return ListTile( - key: Key('quantities.${quantity.id}'), - title: Text(quantity.name), - subtitle: Text(S.stockQuantityMetaProportion(quantity.defaultProportion)), - trailing: EntryMoreButton(onPressed: showActions), - onLongPress: showActions, - onTap: () => context.pushNamed( - Routes.quantityModal, - pathParameters: {'id': quantity.id}, - ), - ); - } - Widget _warningContentBuilder(BuildContext context, Quantity quantity) { final count = Menu.instance.getQuantities(quantity.id).length; final more = S.stockQuantityDialogDeletionContent(count); @@ -67,3 +55,26 @@ class StockQuantityList extends StatelessWidget { return Text(S.dialogDeletionContent(quantity.name, '$more\n\n')); } } + +class _Tile extends StatelessWidget { + final Quantity item; + final ActorBuilder actorBuilder; + + const _Tile(this.item, this.actorBuilder); + + @override + Widget build(BuildContext context) { + final actor = actorBuilder(context); + return ListTile( + key: Key('quantities.${item.id}'), + title: Text(item.name), + subtitle: Text(S.stockQuantityMetaProportion(item.defaultProportion)), + trailing: EntryMoreButton(onPressed: actor), + onLongPress: actor, + onTap: () => context.pushNamed( + Routes.quantityUpdate, + pathParameters: {'id': item.id}, + ), + ); + } +} diff --git a/lib/ui/stock/widgets/stock_quantity_modal.dart b/lib/ui/stock/widgets/stock_quantity_modal.dart index f6940752..602d6458 100644 --- a/lib/ui/stock/widgets/stock_quantity_modal.dart +++ b/lib/ui/stock/widgets/stock_quantity_modal.dart @@ -25,7 +25,7 @@ class _StockQuantityModalState extends State with ItemModal< late FocusNode _proportionFocusNode; @override - String get title => widget.quantity?.name ?? S.stockQuantityTitleCreate; + String get title => widget.isNew ? S.stockQuantityTitleCreate : S.stockQuantityTitleUpdate; @override List buildFormFields() { @@ -37,7 +37,7 @@ class _StockQuantityModalState extends State with ItemModal< textInputAction: TextInputAction.next, decoration: InputDecoration( labelText: S.stockQuantityNameLabel, - hintText: S.stockQuantityNameHint, + hintText: widget.quantity?.name ?? S.stockQuantityNameHint, filled: false, ), maxLength: 30, diff --git a/lib/ui/transit/google_sheet/export_basic_view.dart b/lib/ui/transit/google_sheet/export_basic_view.dart index af9f5b63..7623e025 100644 --- a/lib/ui/transit/google_sheet/export_basic_view.dart +++ b/lib/ui/transit/google_sheet/export_basic_view.dart @@ -107,13 +107,12 @@ class _ExportBasicViewState extends State { void previewData(SheetType type) { const formatter = GoogleSheetFormatter(); final able = Formatter.nameToFormattable(type.name); - Navigator.of(context).push( - MaterialPageRoute( - builder: (_) => SheetPreviewPage( - source: SheetPreviewerDataTableSource(formatter.getRows(able)), - header: formatter.getHeader(able), - title: S.transitModelName(able.name), - ), + showAdaptiveDialog( + context: context, + builder: (_) => SheetPreviewPage( + source: SheetPreviewerDataTableSource(formatter.getRows(able)), + header: formatter.getHeader(able), + title: S.transitModelName(able.name), ), ); } diff --git a/lib/ui/transit/google_sheet/export_order_view.dart b/lib/ui/transit/google_sheet/export_order_view.dart index 4615757a..d60a271f 100644 --- a/lib/ui/transit/google_sheet/export_order_view.dart +++ b/lib/ui/transit/google_sheet/export_order_view.dart @@ -3,6 +3,7 @@ import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/sign_in_button.dart'; import 'package:possystem/components/style/snackbar.dart'; import 'package:possystem/components/style/snackbar_actions.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/constants/icons.dart'; import 'package:possystem/helpers/exporter/google_sheet_exporter.dart'; import 'package:possystem/helpers/logger.dart'; @@ -44,57 +45,55 @@ class _ExportOrderViewState extends State { @override Widget build(BuildContext context) { - return Column( - children: [ - Padding( - padding: const EdgeInsets.all(16.0), - child: SignInButton( - signedInWidget: SpreadsheetSelector( - key: selector, - notifier: widget.statusNotifier, - exporter: widget.exporter, - cacheKey: _cacheKey, - existLabel: S.transitGSSpreadsheetExportExistLabel, - existHint: S.transitGSSpreadsheetExportExistHint, - emptyLabel: S.transitGSSpreadsheetExportEmptyLabel, - emptyHint: S.transitGSSpreadsheetExportEmptyHint(S.transitGSSpreadsheetOrderDefaultName), - fallbackCacheKey: 'exporter_google_sheet', - defaultName: S.transitGSSpreadsheetOrderDefaultName, - requiredSheetTitles: requiredSheetTitles, - onPrepared: exportData, + return TransitOrderList( + notifier: widget.rangeNotifier, + formatOrder: (order) => OrderTable(order: order), + memoryPredictor: memoryPredictor, + warning: S.transitGSOrderMetaMemoryWarning, + leading: Column( + children: [ + Padding( + padding: const EdgeInsets.fromLTRB(kHorizontalSpacing, kTopSpacing, kHorizontalSpacing, kInternalSpacing), + child: SignInButton( + signedInWidget: SpreadsheetSelector( + key: selector, + notifier: widget.statusNotifier, + exporter: widget.exporter, + cacheKey: _cacheKey, + existLabel: S.transitGSSpreadsheetExportExistLabel, + existHint: S.transitGSSpreadsheetExportExistHint, + emptyLabel: S.transitGSSpreadsheetExportEmptyLabel, + emptyHint: S.transitGSSpreadsheetExportEmptyHint(S.transitGSSpreadsheetOrderDefaultName), + fallbackCacheKey: 'exporter_google_sheet', + defaultName: S.transitGSSpreadsheetOrderDefaultName, + requiredSheetTitles: requiredSheetTitles, + onPrepared: exportData, + ), ), ), - ), - TransitOrderRange(notifier: widget.rangeNotifier), - ListTile( - key: const Key('edit_sheets'), - title: Text(S.transitGSOrderSettingTitle), - subtitle: MetaBlock.withString( - context, - [ - S.transitGSOrderMetaOverwrite(properties.isOverwrite.toString()), - S.transitGSOrderMetaTitlePrefix(properties.withPrefix.toString()), - // This message may break the two lines limit, so put it at the end. - properties.requiredSheets.map((e) => e.name).join('、'), - ], - maxLines: 2, - ), - isThreeLine: true, - trailing: const SizedBox( - height: double.infinity, - child: Icon(KIcons.edit), - ), - onTap: editSheets, - ), - Expanded( - child: TransitOrderList( - notifier: widget.rangeNotifier, - formatOrder: (order) => OrderTable(order: order), - memoryPredictor: memoryPredictor, - warning: S.transitGSOrderMetaMemoryWarning, + TransitOrderRange(notifier: widget.rangeNotifier), + ListTile( + key: const Key('edit_sheets'), + title: Text(S.transitGSOrderSettingTitle), + subtitle: MetaBlock.withString( + context, + [ + S.transitGSOrderMetaOverwrite(properties.isOverwrite.toString()), + S.transitGSOrderMetaTitlePrefix(properties.withPrefix.toString()), + // This message may break the two lines limit, so put it at the end. + properties.requiredSheets.map((e) => e.name).join('、'), + ], + maxLines: 2, + ), + isThreeLine: true, + trailing: const SizedBox( + height: double.infinity, + child: Icon(KIcons.edit), + ), + onTap: editSheets, ), - ), - ], + ], + ), ); } @@ -160,16 +159,15 @@ class _ExportOrderViewState extends State { } void editSheets() async { - final other = await Navigator.of(context).push( - MaterialPageRoute( - builder: (_) => OrderSettingPage( - properties: properties, - sheets: selector.currentState?.spreadsheet?.sheets, - ), + final other = await showAdaptiveDialog( + context: context, + builder: (context) => OrderSettingPage( + properties: properties, + sheets: selector.currentState?.spreadsheet?.sheets, ), ); - if (other != null) { + if (other != null && mounted) { setState(() { properties = other; }); diff --git a/lib/ui/transit/google_sheet/import_basic_view.dart b/lib/ui/transit/google_sheet/import_basic_view.dart index ecd90f59..1a6c158e 100644 --- a/lib/ui/transit/google_sheet/import_basic_view.dart +++ b/lib/ui/transit/google_sheet/import_basic_view.dart @@ -69,7 +69,7 @@ class _ImportBasicViewState extends State { key: const Key('gs_export.import_all'), title: Text(S.transitGSSpreadsheetImportAllBtn), subtitle: Text(S.transitGSSpreadsheetImportAllHint), - trailing: const Icon(Icons.download_for_offline_sharp), + trailing: const Icon(Icons.download_for_offline_outlined), onTap: () async { final confirmed = await ConfirmDialog.show( context, @@ -261,19 +261,15 @@ class _ImportBasicViewState extends State { List> source, ) async { const formatter = GoogleSheetFormatter(); - final result = await Navigator.of(context).push( - MaterialPageRoute( - fullscreenDialog: true, - builder: (context) => SheetPreviewPage( - source: SheetPreviewerDataTableSource(source), - header: formatter.getHeader(able), - title: S.transitModelName(able.name), - actions: [ - TextButton( - onPressed: () => Navigator.of(context).pop(true), - child: Text(S.transitImportPreviewBtn), - ), - ], + final result = await showAdaptiveDialog( + context: context, + builder: (context) => SheetPreviewPage( + source: SheetPreviewerDataTableSource(source), + header: formatter.getHeader(able), + title: S.transitModelName(able.name), + action: TextButton( + onPressed: () => Navigator.of(context).pop(true), + child: Text(S.transitImportPreviewBtn), ), ), ); diff --git a/lib/ui/transit/google_sheet/sheet_namer.dart b/lib/ui/transit/google_sheet/sheet_namer.dart index c392a493..b4166796 100644 --- a/lib/ui/transit/google_sheet/sheet_namer.dart +++ b/lib/ui/transit/google_sheet/sheet_namer.dart @@ -65,8 +65,9 @@ class SheetNamerState extends State { ); } - void showActions() async { - final result = await showCircularBottomSheet(context, actions: [ + void showActions([BuildContext? ctx]) async { + ctx ??= context; + final result = await showCircularBottomSheet(ctx, actions: [ BottomSheetAction( key: const Key('btn.edit'), title: Text(S.transitGSSheetNameUpdate), diff --git a/lib/ui/transit/google_sheet/sheet_preview_page.dart b/lib/ui/transit/google_sheet/sheet_preview_page.dart index aa518c12..29dfd6cf 100644 --- a/lib/ui/transit/google_sheet/sheet_preview_page.dart +++ b/lib/ui/transit/google_sheet/sheet_preview_page.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/components/style/info_popup.dart'; -import 'package:possystem/components/style/pop_button.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/helpers/exporter/google_sheet_exporter.dart'; class SheetPreviewPage extends StatelessWidget { @@ -10,42 +11,44 @@ class SheetPreviewPage extends StatelessWidget { final List header; - final List? actions; + final Widget? action; const SheetPreviewPage({ super.key, required this.source, required this.title, required this.header, - this.actions, + this.action, }); @override Widget build(BuildContext context) { const style = TextStyle(fontWeight: FontWeight.bold); - return Scaffold( - appBar: AppBar( - title: Text(title), - leading: const PopButton(), - actions: actions, - ), - body: SingleChildScrollView( - child: PaginatedDataTable( - columns: [ - for (final cell in header) - DataColumn( - label: cell.note == null - ? Text(cell.toString(), style: style) - : Row(children: [ - Text(cell.toString(), style: style), - const SizedBox(width: 4), - InfoPopup(cell.note!), - ]), - ), - ], - source: source, - showCheckboxColumn: false, - ), + return ResponsiveDialog( + title: Text(title), + action: action, + fixedSizeOnDialog: const Size(800, 0), + scrollable: false, + content: SingleChildScrollView( + child: Column(children: [ + PaginatedDataTable( + columns: [ + for (final cell in header) + DataColumn( + label: cell.note == null + ? Text(cell.toString(), style: style) + : Row(children: [ + Text(cell.toString(), style: style), + const SizedBox(width: 4), + InfoPopup(cell.note!), + ]), + ), + ], + source: source, + showCheckboxColumn: false, + ), + const SizedBox(height: kFABSpacing), + ]), ), ); } diff --git a/lib/ui/transit/google_sheet/spreadsheet_selector.dart b/lib/ui/transit/google_sheet/spreadsheet_selector.dart index ab077750..26aad5d9 100644 --- a/lib/ui/transit/google_sheet/spreadsheet_selector.dart +++ b/lib/ui/transit/google_sheet/spreadsheet_selector.dart @@ -121,7 +121,7 @@ class SpreadsheetSelectorState extends State { spreadsheet = widget.defaultSpreadsheet; } - Future showActions() async { + void showActions(BuildContext context) async { final selected = await showCircularBottomSheet<_ActionTypes>( context, actions: >[ diff --git a/lib/ui/transit/plain_text/export_order_view.dart b/lib/ui/transit/plain_text/export_order_view.dart index c99dfeb6..01e337a7 100644 --- a/lib/ui/transit/plain_text/export_order_view.dart +++ b/lib/ui/transit/plain_text/export_order_view.dart @@ -18,37 +18,35 @@ class ExportOrderView extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( - children: [ - const SizedBox(height: 16.0), - Card( - key: const Key('export_btn'), - margin: const EdgeInsets.symmetric(horizontal: 16.0), - child: ListTile( - title: Text(S.transitPTCopyBtn), - subtitle: Text(S.transitPTCopyWarning), - trailing: const Icon(Icons.copy_outlined), - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(8.0)), + return TransitOrderList( + notifier: notifier, + formatOrder: (order) => Text(formatOrder(order)), + memoryPredictor: memoryPredictor, + leading: Column( + children: [ + const SizedBox(height: 16.0), + Card( + key: const Key('export_btn'), + margin: const EdgeInsets.symmetric(horizontal: 16.0), + child: ListTile( + title: Text(S.transitPTCopyBtn), + subtitle: Text(S.transitPTCopyWarning), + trailing: const Icon(Icons.copy_outlined), + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(8.0)), + ), + onTap: () { + showSnackbarWhenFailed( + export(), + context, + 'pt_export_failed', + ).then((value) => showSnackBar(context, S.transitPTCopySuccess)); + }, ), - onTap: () { - showSnackbarWhenFailed( - export(), - context, - 'pt_export_failed', - ).then((value) => showSnackBar(context, S.transitPTCopySuccess)); - }, ), - ), - TransitOrderRange(notifier: notifier), - Expanded( - child: TransitOrderList( - notifier: notifier, - formatOrder: (order) => Text(formatOrder(order)), - memoryPredictor: memoryPredictor, - ), - ), - ], + TransitOrderRange(notifier: notifier), + ], + ), ); } diff --git a/lib/ui/transit/previews/preview_page.dart b/lib/ui/transit/previews/preview_page.dart index b5209c45..a2c02e6e 100644 --- a/lib/ui/transit/previews/preview_page.dart +++ b/lib/ui/transit/previews/preview_page.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:possystem/components/dialog/responsive_dialog.dart'; import 'package:possystem/components/style/hint_text.dart'; import 'package:possystem/helpers/formatter/formatter.dart'; import 'package:possystem/models/model.dart'; @@ -23,56 +24,47 @@ abstract class PreviewPage extends StatelessWidget { Formattable able, List items, ) { - return Navigator.of(context).push( - MaterialPageRoute( - fullscreenDialog: true, - builder: (context) { - switch (able) { - case Formattable.menu: - return ProductPreviewPage(items: items); - case Formattable.orderAttr: - return OrderAttributePreviewPage(items: items); - case Formattable.quantities: - return QuantityPreviewPage(items: items); - case Formattable.stock: - return IngredientPreviewPage(items: items); - case Formattable.replenisher: - return ReplenishmentPreviewPage(items: items); - } - }, - ), + return showAdaptiveDialog( + context: context, + builder: (context) { + switch (able) { + case Formattable.menu: + return ProductPreviewPage(items: items); + case Formattable.orderAttr: + return OrderAttributePreviewPage(items: items); + case Formattable.quantities: + return QuantityPreviewPage(items: items); + case Formattable.stock: + return IngredientPreviewPage(items: items); + case Formattable.replenisher: + return ReplenishmentPreviewPage(items: items); + } + }, ); } @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text(S.transitImportPreviewTitle), - leading: const CloseButton(), - actions: [ - TextButton( - onPressed: () { - Navigator.of(context).pop(items.isNotEmpty); - }, - child: Text(MaterialLocalizations.of(context).saveButtonLabel), - ), - ], - ), - body: SingleChildScrollView( - child: Column(children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: getHeader(context), - ), - const Divider(), - Padding( - padding: const EdgeInsets.all(8.0), - child: Center(child: HintText(S.totalCount(items.length))), - ), - ...getDetails(context, items), - ]), + return ResponsiveDialog( + title: Text(S.transitImportPreviewTitle), + action: TextButton( + onPressed: () { + Navigator.of(context).pop(items.isNotEmpty); + }, + child: Text(MaterialLocalizations.of(context).saveButtonLabel), ), + content: Column(children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: getHeader(context), + ), + const Divider(), + Padding( + padding: const EdgeInsets.all(8.0), + child: Center(child: HintText(S.totalCount(items.length))), + ), + ...getDetails(context, items), + ]), ); } diff --git a/lib/ui/transit/transit_order_list.dart b/lib/ui/transit/transit_order_list.dart index 49dd78f9..3d342762 100644 --- a/lib/ui/transit/transit_order_list.dart +++ b/lib/ui/transit/transit_order_list.dart @@ -5,6 +5,9 @@ import 'package:intl/intl.dart'; import 'package:possystem/components/linkify.dart'; import 'package:possystem/components/meta_block.dart'; import 'package:possystem/components/models/order_loader.dart'; +import 'package:possystem/components/style/hint_text.dart'; +import 'package:possystem/components/style/pop_button.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/models/objects/order_object.dart'; import 'package:possystem/models/repository/seller.dart'; import 'package:possystem/settings/currency_setting.dart'; @@ -19,19 +22,28 @@ class TransitOrderList extends StatelessWidget { final String? warning; + final Widget leading; + const TransitOrderList({ super.key, required this.notifier, required this.formatOrder, required this.memoryPredictor, + required this.leading, this.warning, }); @override Widget build(BuildContext context) { return OrderLoader( + leading: leading, ranger: notifier, countingAll: true, + emptyChild: Column(children: [ + leading, + const SizedBox(height: kInternalSpacing), + HintText(S.orderLoaderEmpty), + ]), trailingBuilder: _buildMemoryInfo, builder: _buildOrder, ); @@ -46,7 +58,7 @@ class TransitOrderList extends StatelessWidget { : size < 1000000 // 1MB ? 1 : 2; - showMemoryInfo() => showDialog( + showMemoryInfo() => showAdaptiveDialog( context: context, builder: (context) { return _buildWarningDialog(context, size, level); @@ -124,45 +136,51 @@ class TransitOrderList extends StatelessWidget { Widget _buildWarningDialog(BuildContext context, int size, int level) { const style = TextStyle(fontWeight: FontWeight.bold); - return SimpleDialog(children: [ - Column(children: [ - Text(S.transitOrderCapacityTitle(getMemoryWithUnit(size))), - const SizedBox(height: 8.0), - Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Icon( - Icons.check_outlined, - weight: level == 0 ? 24.0 : null, - ), - Icon( - Icons.warning_amber_outlined, - weight: level == 0 ? 24.0 : null, - ), - Icon( - Icons.dangerous_outlined, - weight: level == 0 ? 24.0 : null, - ), - ], - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - Text('<500KB', style: level == 0 ? style : null), - Text('<1MB', style: level == 1 ? style : null), - Text('≥1MB', style: level == 2 ? style : null), - ], - ), - const Divider(), - Padding( - padding: const EdgeInsets.all(8.0), - child: Linkify.fromString([ - S.transitOrderCapacityContent, - if (warning != null) '\n$warning', - ].join()), - ) - ]), - ]); + return AlertDialog( + actions: [ + PopButton(title: MaterialLocalizations.of(context).okButtonLabel), + ], + content: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 600), + child: Column(children: [ + Text(S.transitOrderCapacityTitle(getMemoryWithUnit(size))), + const SizedBox(height: 8.0), + Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Icon( + Icons.check_outlined, + weight: level == 0 ? 24.0 : null, + ), + Icon( + Icons.warning_amber_outlined, + weight: level == 0 ? 24.0 : null, + ), + Icon( + Icons.dangerous_outlined, + weight: level == 0 ? 24.0 : null, + ), + ], + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + Text('<500KB', style: level == 0 ? style : null), + Text('<1MB', style: level == 1 ? style : null), + Text('≥1MB', style: level == 2 ? style : null), + ], + ), + const Divider(), + Padding( + padding: const EdgeInsets.all(8.0), + child: Linkify.fromString([ + S.transitOrderCapacityContent, + if (warning != null) '\n$warning', + ].join('')), + ) + ]), + ), + ); } static String getMemoryWithUnit(int size) { diff --git a/lib/ui/transit/transit_order_range.dart b/lib/ui/transit/transit_order_range.dart index 252e0a3d..9b5a9023 100644 --- a/lib/ui/transit/transit_order_range.dart +++ b/lib/ui/transit/transit_order_range.dart @@ -23,7 +23,7 @@ class _TransitOrderRangeState extends State { title: Text(S.transitOrderMetaRange(range.format(S.localeName))), subtitle: Text(S.transitOrderMetaRangeDays(range.duration.inDays)), onTap: pickRange, - trailing: const Icon(Icons.date_range_sharp), + trailing: const Icon(Icons.date_range_outlined), ); } diff --git a/lib/ui/transit/transit_page.dart b/lib/ui/transit/transit_page.dart index f1e76d21..83feea6b 100644 --- a/lib/ui/transit/transit_page.dart +++ b/lib/ui/transit/transit_page.dart @@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart'; import 'package:possystem/components/choice_chip_with_help.dart'; import 'package:possystem/components/style/pop_button.dart'; import 'package:possystem/components/style/text_divider.dart'; +import 'package:possystem/constants/constant.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; @@ -21,7 +22,7 @@ class _TransitPageState extends State { @override Widget build(BuildContext context) { - final body = ListView(children: [ + final list = ListView(children: [ ChoiceChipWithHelp( key: selector, values: TransitCatalog.values, @@ -53,23 +54,28 @@ class _TransitPageState extends State { subtitle: Text(S.transitPTDescription), onTap: () => _goToStation(context, TransitMethod.plainText), ), + const SizedBox(height: kFABSpacing), ]); - - return Scaffold( - appBar: AppBar( - title: Text(S.transitTitle), - leading: const PopButton(), - ), - body: GestureDetector( - onHorizontalDragEnd: (details) { - selector.currentState?.updateSelectedIndex( - details.velocity.pixelsPerSecond.dx, - ); - }, - // fill the screen to allow drag from white space - child: SizedBox(height: double.infinity, child: body), - ), + // allow scroll as TabView + final body = GestureDetector( + onHorizontalDragEnd: (details) { + selector.currentState?.updateSelectedIndex( + details.velocity.pixelsPerSecond.dx, + ); + }, + // fill the screen to allow drag from white space + child: SizedBox(height: double.infinity, child: list), ); + + return Routes.homeMode.value == HomeMode.bottomNavigationBar + ? Scaffold( + appBar: AppBar( + title: Text(S.transitTitle), + leading: const PopButton(), + ), + body: body, + ) + : body; } void _goToStation(BuildContext context, TransitMethod method) { diff --git a/pubspec.lock b/pubspec.lock index 0dbdac85..94d96291 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -512,11 +512,12 @@ packages: go_router: dependency: "direct main" description: - name: go_router - sha256: aa073287b8f43553678e6fa9e8bb9c83212ff76e09542129a8099bbc8db4df65 - url: "https://pub.dev" - source: hosted - version: "14.1.2" + path: "packages/go_router" + ref: main + resolved-ref: "296274099d38f243fbc94b228bf3a8411cef034c" + url: "https://github.com/evan361425/flutter-packages" + source: git + version: "14.2.4" google_identity_services_web: dependency: transitive description: @@ -1118,10 +1119,10 @@ packages: dependency: "direct main" description: name: spotlight_ant - sha256: "30c1fb6dbb2356dc92e61da332bd5cf7bf63e4b74c1414c618caab34127ed96a" + sha256: "8e9266780dff9785c4a31b53ac62c4f132b8231ae361592afbe1d97ca726d854" url: "https://pub.dev" source: hosted - version: "1.1.1" + version: "1.4.1" sprintf: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index ec4529d1..920c7411 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -15,7 +15,11 @@ dependencies: sdk: flutter # core helper - go_router: ^14.1.2 + go_router: + git: + url: https://github.com/evan361425/flutter-packages + path: packages/go_router + ref: main provider: ^6.1.2 intl: ^0.19.0 collection: ^1.18.0 @@ -39,7 +43,7 @@ dependencies: # components table_calendar: ^3.1.1 # 24, 02-09 syncfusion_flutter_charts: ^25.2.4 - spotlight_ant: ^1.1.1 + spotlight_ant: ^1.4.1 # image image: ^4.1.7 # 24, 01-10 diff --git a/test/my_app_test.dart b/test/app_test.dart similarity index 93% rename from test/my_app_test.dart rename to test/app_test.dart index b5e06895..6af04566 100644 --- a/test/my_app_test.dart +++ b/test/app_test.dart @@ -1,9 +1,9 @@ import 'package:firebase_core/firebase_core.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:mockito/mockito.dart'; +import 'package:possystem/app.dart'; import 'package:possystem/models/repository/menu.dart'; import 'package:possystem/models/repository/order_attributes.dart'; -import 'package:possystem/my_app.dart'; import 'package:possystem/settings/settings_provider.dart'; import 'package:provider/provider.dart'; @@ -24,7 +24,7 @@ void main() { ChangeNotifierProvider.value(value: Menu()), ChangeNotifierProvider.value(value: OrderAttributes()), ], - builder: (_, __) => const MyApp(), + builder: (_, __) => const App(), ); await tester.pumpWidget(app); diff --git a/test/components/bottom_sheet_actions_test.dart b/test/components/bottom_sheet_actions_test.dart index 1d58d8b6..79c10b15 100644 --- a/test/components/bottom_sheet_actions_test.dart +++ b/test/components/bottom_sheet_actions_test.dart @@ -11,10 +11,10 @@ void main() { await tester.tap(find.text('hi')); await tester.pumpAndSettle(); - await tester.tap(find.byIcon(Icons.cancel_sharp)); + await tester.tap(find.byIcon(Icons.cancel_outlined)); await tester.pumpAndSettle(); - expect(find.byIcon(Icons.cancel_sharp), findsNothing); + expect(find.byIcon(Icons.cancel_outlined), findsNothing); }); setUpAll(() { diff --git a/test/components/slidable_item_list_test.dart b/test/components/slidable_item_list_test.dart index 8bd2cf40..177550cc 100644 --- a/test/components/slidable_item_list_test.dart +++ b/test/components/slidable_item_list_test.dart @@ -15,7 +15,7 @@ void main() { delegate: SlidableItemDelegate( items: const ['1', '2'], deleteValue: 0, - tileBuilder: (_, item, int index, __) => Text(item), + tileBuilder: (item, int index, __) => Text(item), warningContentBuilder: (_, __) => const Text('hi'), handleDelete: (_) async => deletionFired = true, ), @@ -40,13 +40,16 @@ void main() { delegate: SlidableItemDelegate( items: const ['1'], deleteValue: 0, - tileBuilder: (_, item, int index, actionShower) { - return ListTile(title: Text(item), onTap: actionShower); + tileBuilder: (item, int index, actorBuilder) { + return Builder(builder: (context) { + return ListTile(title: Text(item), onTap: actorBuilder(context)); + }); }, handleDelete: (_) async {}, actionBuilder: (item) => [ const BottomSheetAction( title: Text('Hi'), + leading: Icon(Icons.ac_unit), returnValue: 1, ), ], diff --git a/test/components/tutorial_test.dart b/test/components/tutorial_test.dart index 44a503ec..aed03afe 100644 --- a/test/components/tutorial_test.dart +++ b/test/components/tutorial_test.dart @@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:mockito/mockito.dart'; import 'package:possystem/components/tutorial.dart'; -import 'package:spotlight_ant/spotlight_ant.dart'; import '../mocks/mock_cache.dart'; @@ -35,45 +34,6 @@ void main() { await tester.tapAt(const Offset(100, 100)); verify(cache.set('tutorial.1', true)); }); - - testWidgets('should show in tab view', (tester) async { - when(cache.get(any)).thenReturn(null); - when(cache.set(any, true)).thenAnswer((_) => Future.value(true)); - final show = GlobalKey(); - - await tester.pumpWidget(MaterialApp( - home: TutorialWrapper(key: show, child: const _Scaffold()), - )); - await tester.pumpAndSettle(); - - // show spotlight - await tester.pump(const Duration(milliseconds: 5)); - verify(cache.get('tutorial.1')); - - await tester.tapAt(const Offset(100, 100)); - await tester.pump(const Duration(milliseconds: 5)); - verify(cache.set('tutorial.1', true)); - - // go to tab 2 - await tester.tap(find.byKey(const Key('t2'))); - await tester.pump(const Duration(milliseconds: 100)); - verify(cache.get('tutorial.2')); - - // show spotlight - await tester.pump(const Duration(milliseconds: 5)); - await tester.pump(const Duration(milliseconds: 5)); - await tester.pump(const Duration(milliseconds: 5)); - await tester.tapAt(const Offset(100, 100)); - await tester.pump(const Duration(milliseconds: 5)); - verify(cache.set('tutorial.2', true)); - - // go back to tab 1 - await tester.tap(find.byKey(const Key('t1'))); - await tester.pump(const Duration(milliseconds: 100)); - - // should not fire again - expect(show.currentState, isNull); - }); }); setUpAll(() { @@ -81,60 +41,3 @@ void main() { initializeCache(); }); } - -class _Scaffold extends StatefulWidget { - const _Scaffold(); - - @override - State<_Scaffold> createState() => _ScaffoldState(); -} - -class _ScaffoldState extends State<_Scaffold> with TickerProviderStateMixin { - late final TabController controller; - - @override - Widget build(BuildContext context) { - return Scaffold( - bottomNavigationBar: TabBar( - controller: controller, - tabs: const [ - Tab(key: Key('t1'), text: 't1'), - Tab(key: Key('t2'), text: 't2'), - ], - ), - body: TabBarView( - controller: controller, - children: [ - TutorialWrapper( - tab: TutorialInTab(controller: controller, index: 0), - child: const Tutorial( - id: '1', - title: 'title1', - message: 'message1', - child: Text('1'), - ), - ), - TutorialWrapper( - tab: TutorialInTab(controller: controller, index: 1), - child: const Tutorial( - id: '2', - title: 'title2', - message: 'message2', - child: Text('2'), - ), - ), - ], - ), - ); - } - - @override - void initState() { - controller = TabController( - animationDuration: Duration.zero, - length: 2, - vsync: this, - ); - super.initState(); - } -} diff --git a/test/image_gallery_page_test.dart b/test/image_gallery_page_test.dart index 1df8d305..457d1e3d 100644 --- a/test/image_gallery_page_test.dart +++ b/test/image_gallery_page_test.dart @@ -6,16 +6,16 @@ import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/image_gallery_page.dart'; +import 'test_helpers/breakpoint_mocker.dart'; import 'test_helpers/file_mocker.dart'; import 'test_helpers/translator.dart'; void main() { Widget createApp(void Function(String?) cb) { return MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, builder: (ctx, state) { return Scaffold(body: Builder(builder: (context) { return TextButton( @@ -27,7 +27,8 @@ void main() { ); })); }, - ) + ), + ...Routes.getDesiredRoute(0).routes, ]), ); } @@ -37,156 +38,165 @@ void main() { return createImage(name, parent: 'menu_image'); } - testWidgets('create', (tester) async { - String? imagePath; - await tester.pumpWidget(createApp((v) => imagePath = v)); - - await tester.tap(find.text('go')); - await tester.pumpAndSettle(); - - // cancel pick - mockImagePick(tester, canceled: true); - await tester.tap(find.byKey(const Key('empty_body'))); - await tester.pumpAndSettle(); - - expect(imagePath, isNull); - - // cancel crop - mockImagePick(tester); - mockImageCropper(canceled: true); - await tester.tap(find.byKey(const Key('image_gallery.add'))); - await tester.pumpAndSettle(); - - // select successfully - mockImagePick(tester); - mockImageCropper(); - await tester.tap(find.byKey(const Key('image_gallery.add'))); - await tester.pumpAndSettle(); - - final pattern = RegExp('menu_image/g[0-9]{8}T[0-9]{12}'); - expect(pattern.hasMatch(imagePath!), isTrue); - expect(XFile('$imagePath-avator').file.existsSync(), isTrue); - }); - - testWidgets('pop back', (tester) async { - String? result; - await createImageAt('0'); - - await tester.pumpWidget(createApp((v) => result = v)); - - await tester.tap(find.text('go')); - await tester.pumpAndSettle(); - - await tester.longPress(find.byKey(const Key('image_gallery.0'))); - await tester.pumpAndSettle(); - expect(find.text(S.imageGallerySelectionTitle), findsOneWidget); - - // disable selecting - await tester.tap(find.byKey(const Key('image_gallery.cancel'))); - await tester.pumpAndSettle(); - expect(find.text(S.imageGallerySelectionTitle), findsNothing); - expect(find.text('go'), findsNothing); - - // leave - await tester.tap(find.byIcon(Icons.arrow_back)); - await tester.pumpAndSettle(); - expect(find.text('go'), findsOneWidget); - expect(result, isNull); - }); - - testWidgets('select image', (tester) async { - String? result; - final newImage = await createImageAt('0'); - - await tester.pumpWidget(createApp((v) => result = v)); - - await tester.tap(find.text('go')); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('image_gallery.0'))); - await tester.pumpAndSettle(); - - expect(find.text('go'), findsOneWidget); - expect(result, equals(newImage)); - }); - - testWidgets('delete selected', (tester) async { - final gallery = GlobalKey(); - await createImageAt('g20230102030405111'); - await createImageAt('g20230102030405222'); - await createImageAt('g20230102030405222-avator'); - await createImageAt('g20230102030405333'); - - await tester.pumpWidget(MaterialApp( - home: ImageGalleryPage(key: gallery), - )); - await tester.pumpAndSettle(); - - final selected = gallery.currentState!.selectedImages; - - await tester.longPress(find.byKey(const Key('image_gallery.0'))); - await tester.pumpAndSettle(); - - // check selected first - expect(find.byKey(const Key('image_gallery.delete')), findsOneWidget); - expect(selected.length, equals(1)); - expect(selected.first, equals(0)); - - // select second - await tester.tap(find.byKey(const Key('image_gallery.1'))); - await tester.pumpAndSettle(); - expect(selected.length, equals(2)); - expect(selected.contains(0), isTrue); - expect(selected.contains(1), isTrue); - - // unselect second - await tester.tap(find.byKey(const Key('image_gallery.1'))); - await tester.pumpAndSettle(); - expect(selected.contains(1), isFalse); - - // cancel by btn - await tester.tap(find.byKey(const Key('image_gallery.cancel'))); - await tester.pumpAndSettle(); - expect(find.byKey(const Key('image_gallery.delete')), findsNothing); - - // check select second - await tester.longPress(find.byKey(const Key('image_gallery.1'))); - await tester.pumpAndSettle(); - expect(selected.length, equals(1)); - expect(selected.first, equals(1)); - - // delete selected - await tester.tap(find.byKey(const Key('image_gallery.delete'))); - await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('delete_dialog.confirm'))); - await tester.pumpAndSettle(); - - // remain others - expect(find.byKey(const Key('image_gallery.0')), findsOneWidget); - expect(find.byKey(const Key('image_gallery.1')), findsOneWidget); - expect(find.byKey(const Key('image_gallery.2')), findsNothing); - - expect( - gallery.currentState!.images, - equals([ - 'menu_image/g20230102030405333', - 'menu_image/g20230102030405111', - ]), - ); - - // empty avatar is fine - await tester.longPress(find.byKey(const Key('image_gallery.1'))); - await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('image_gallery.delete'))); - await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('delete_dialog.confirm'))); - await tester.pumpAndSettle(); - - expect( - gallery.currentState!.images, - equals(['menu_image/g20230102030405333']), - ); - }); + for (final device in [Device.desktop, Device.mobile]) { + group(device.name, () { + testWidgets('create', (tester) async { + deviceAs(device, tester); + String? imagePath; + await tester.pumpWidget(createApp((v) => imagePath = v)); + + await tester.tap(find.text('go')); + await tester.pumpAndSettle(); + + // cancel pick + mockImagePick(tester, canceled: true); + await tester.tap(find.byKey(const Key('empty_body'))); + await tester.pumpAndSettle(); + + expect(imagePath, isNull); + + // cancel crop + mockImagePick(tester); + mockImageCropper(canceled: true); + await tester.tap(find.byKey(const Key('empty_body'))); + await tester.pumpAndSettle(); + + // select successfully + mockImagePick(tester); + mockImageCropper(); + await tester.tap(find.byKey(const Key('empty_body'))); + await tester.pumpAndSettle(); + + final pattern = RegExp('menu_image/g[0-9]{8}T[0-9]{12}'); + expect(pattern.hasMatch(imagePath!), isTrue); + expect(XFile('$imagePath-avator').file.existsSync(), isTrue); + }); + + testWidgets('pop back', (tester) async { + deviceAs(device, tester); + String? result; + await createImageAt('0'); + + await tester.pumpWidget(createApp((v) => result = v)); + + await tester.tap(find.text('go')); + await tester.pumpAndSettle(); + + await tester.longPress(find.byKey(const Key('image_gallery.0'))); + await tester.pumpAndSettle(); + expect(find.text(S.imageGallerySelectionTitle), findsOneWidget); + + // disable selecting + await tester.tap(find.byKey(const Key('image_gallery.cancel'))); + await tester.pumpAndSettle(); + expect(find.text(S.imageGallerySelectionTitle), findsNothing); + + // leave + await (device == Device.mobile + ? tester.tap(find.byKey(const Key('image_gallery.close'))) + : tester.tapAt(Offset.zero)); + await tester.pumpAndSettle(); + expect(find.text('go'), findsOneWidget); + expect(result, isNull); + }); + + testWidgets('select image', (tester) async { + deviceAs(device, tester); + String? result; + final newImage = await createImageAt('0'); + + await tester.pumpWidget(createApp((v) => result = v)); + + await tester.tap(find.text('go')); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('image_gallery.0'))); + await tester.pumpAndSettle(); + + expect(find.text('go'), findsOneWidget); + expect(result, equals(newImage)); + }); + + testWidgets('delete selected', (tester) async { + deviceAs(device, tester); + final gallery = GlobalKey(); + await createImageAt('g20230102030405111'); + await createImageAt('g20230102030405222'); + await createImageAt('g20230102030405222-avator'); + await createImageAt('g20230102030405333'); + + await tester.pumpWidget(MaterialApp( + home: ScaffoldMessenger(child: ImageGalleryPage(key: gallery)), + )); + await tester.pumpAndSettle(); + + final selected = gallery.currentState!.selectedImages; + + await tester.longPress(find.byKey(const Key('image_gallery.0'))); + await tester.pumpAndSettle(); + + // check selected first + expect(find.byKey(const Key('image_gallery.delete')), findsOneWidget); + expect(selected.length, equals(1)); + expect(selected.first, equals(0)); + + // select second + await tester.tap(find.byKey(const Key('image_gallery.1'))); + await tester.pumpAndSettle(); + expect(selected.length, equals(2)); + expect(selected.contains(0), isTrue); + expect(selected.contains(1), isTrue); + + // unselect second + await tester.tap(find.byKey(const Key('image_gallery.1'))); + await tester.pumpAndSettle(); + expect(selected.contains(1), isFalse); + + // cancel by btn + await tester.tap(find.byKey(const Key('image_gallery.cancel'))); + await tester.pumpAndSettle(); + expect(find.byKey(const Key('image_gallery.delete')), findsNothing); + + // check select second + await tester.longPress(find.byKey(const Key('image_gallery.1'))); + await tester.pumpAndSettle(); + expect(selected.length, equals(1)); + expect(selected.first, equals(1)); + + // delete selected + await tester.tap(find.byKey(const Key('image_gallery.delete'))); + await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('delete_dialog.confirm'))); + await tester.pumpAndSettle(); + + // remain others + expect(find.byKey(const Key('image_gallery.0')), findsOneWidget); + expect(find.byKey(const Key('image_gallery.1')), findsOneWidget); + expect(find.byKey(const Key('image_gallery.2')), findsNothing); + + expect( + gallery.currentState!.images, + equals([ + 'menu_image/g20230102030405333', + 'menu_image/g20230102030405111', + ]), + ); + + // empty avatar is fine + await tester.longPress(find.byKey(const Key('image_gallery.1'))); + await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('image_gallery.delete'))); + await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('delete_dialog.confirm'))); + await tester.pumpAndSettle(); + + expect( + gallery.currentState!.images, + equals(['menu_image/g20230102030405333']), + ); + }); + }); + } setUpAll(() { initializeTranslator(); diff --git a/test/test_helpers/breakpoint_mocker.dart b/test/test_helpers/breakpoint_mocker.dart new file mode 100644 index 00000000..cfd08da6 --- /dev/null +++ b/test/test_helpers/breakpoint_mocker.dart @@ -0,0 +1,24 @@ +import 'package:flutter/widgets.dart'; +import 'package:flutter_test/flutter_test.dart'; + +void deviceAs(Device device, WidgetTester tester) { + tester.view.physicalSize = Size(device.width, device.height); + + // resets the screen to its original size after the test end + addTearDown(tester.view.resetPhysicalSize); +} + +enum Device { + compact(500, 1200), + mobile(800, 1500), + landscape(1024, 768), + desktop(1800, 900); + + final double width; + final double height; + + const Device(double width, double height) + // devicePixelRatio = 3.0 + : width = width * 3.0, + height = height * 3.0; +} diff --git a/test/ui/analysis/analysis_view_test.dart b/test/ui/analysis/analysis_view_test.dart index a6f53009..0f7efb37 100644 --- a/test/ui/analysis/analysis_view_test.dart +++ b/test/ui/analysis/analysis_view_test.dart @@ -15,6 +15,7 @@ import 'package:visibility_detector/visibility_detector.dart'; import '../../mocks/mock_cache.dart'; import '../../mocks/mock_database.dart'; import '../../mocks/mock_storage.dart'; +import '../../test_helpers/breakpoint_mocker.dart'; import '../../test_helpers/translator.dart'; void main() { @@ -28,17 +29,15 @@ void main() { return ChangeNotifierProvider.value( value: Seller.instance, builder: (_, __) => MaterialApp.router( - routerConfig: GoRouter( - routes: [ - GoRoute( - path: '/', - builder: (_, __) { - return const Scaffold(body: AnalysisView()); - }, - routes: Routes.routes, - ), - ], - ), + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (_, __) { + return const Scaffold(body: AnalysisView()); + }, + ), + ...Routes.getDesiredRoute(0).routes, + ]), ), ); } @@ -78,6 +77,8 @@ void main() { } testWidgets('navigate to history', (tester) async { + deviceAs(Device.compact, tester); + mockGetChart(); mockGetOrder(); Analysis(); @@ -107,6 +108,9 @@ void main() { await tester.pumpWidget(buildApp()); + await tester.dragFrom(const Offset(500, 500), const Offset(0, -500)); + await tester.dragFrom(const Offset(500, 500), const Offset(0, -500)); + await tester.pumpAndSettle(); await tester.tap(find.byKey(const Key('anal.add_chart'))); await tester.pumpAndSettle(); @@ -135,7 +139,10 @@ void main() { expect(chart.index, 0); // reorder - await tester.tap(find.byIcon(Icons.settings_sharp)); + await tester.dragFrom(const Offset(500, 0), const Offset(0, 500)); + await tester.dragFrom(const Offset(500, 0), const Offset(0, 500)); + await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('anal.more'))); await tester.pumpAndSettle(); await tester.tap(find.byIcon(KIcons.reorder)); await tester.pumpAndSettle(); @@ -149,7 +156,7 @@ void main() { ); expect(find.text(range.format('en')), findsOneWidget); - await tester.tap(find.byIcon(Icons.arrow_back_ios_new_sharp)); + await tester.tap(find.byIcon(Icons.arrow_back_ios_new_outlined)); await tester.pump(const Duration(milliseconds: 50)); range = Util.getDateRange( @@ -158,7 +165,7 @@ void main() { ); expect(find.text(range.format('en')), findsOneWidget); - await tester.tap(find.byIcon(Icons.arrow_forward_ios_sharp)); + await tester.tap(find.byIcon(Icons.arrow_forward_ios_outlined)); await tester.pump(const Duration(milliseconds: 50)); range = Util.getDateRange( @@ -169,7 +176,7 @@ void main() { // select date range await tester.tap(find.byKey(const Key('anal.chart_range'))); - await tester.pumpAndSettle(); + await tester.pump(); await tester.tap(find.text('OK')); await tester.pump(const Duration(milliseconds: 50)); expect(find.text(range.format('en')), findsAtLeastNWidgets(1)); diff --git a/test/ui/analysis/history_page_test.dart b/test/ui/analysis/history_page_test.dart index 221d0f91..4b508351 100644 --- a/test/ui/analysis/history_page_test.dart +++ b/test/ui/analysis/history_page_test.dart @@ -10,6 +10,7 @@ import 'package:provider/provider.dart'; import '../../mocks/mock_cache.dart'; import '../../mocks/mock_database.dart'; +import '../../test_helpers/breakpoint_mocker.dart'; import '../../test_helpers/order_setter.dart'; import '../../test_helpers/translator.dart'; @@ -30,17 +31,15 @@ void main() { themeMode: themeMode, theme: ThemeData(), darkTheme: ThemeData.dark(), - routerConfig: GoRouter( - routes: [ - GoRoute( - path: '/', - builder: (_, __) { - return const HistoryPage(); - }, - routes: Routes.routes, - ), - ], - ), + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (_, __) { + return const HistoryPage(); + }, + ), + ...Routes.getDesiredRoute(0).routes, + ]), ), ); } @@ -58,7 +57,7 @@ void main() { )).thenAnswer((_) => Future.value(count)); } - testWidgets('select date and show order list in portrait', (tester) async { + testWidgets('select date and show order list in mobile', (tester) async { final now = DateTime.now(); final nowD = DateTime(now.year, now.month, now.day); final nowS = (nowD.millisecondsSinceEpoch - @@ -74,11 +73,7 @@ void main() { {'day': nowS - 1, 'count': 50}, ]); - // setup portrait env - tester.view.physicalSize = const Size(1000, 2000); - - // resets the screen to its original size after the test end - addTearDown(tester.view.resetPhysicalSize); + deviceAs(Device.mobile, tester); await tester.pumpWidget(buildApp()); await tester.pumpAndSettle(); @@ -119,11 +114,7 @@ void main() { {'day': nowS - now.day - 7, 'count': 60}, ]); - // setup landscape env - tester.view.physicalSize = const Size(2000, 1000); - - // resets the screen to its original size after the test end - addTearDown(tester.view.resetPhysicalSize); + deviceAs(Device.landscape, tester); await tester.pumpWidget(buildApp(themeMode: ThemeMode.dark)); await tester.pumpAndSettle(); diff --git a/test/ui/analysis/widgets/chart_card_view_test.dart b/test/ui/analysis/widgets/chart_card_view_test.dart index e2304024..bb749953 100644 --- a/test/ui/analysis/widgets/chart_card_view_test.dart +++ b/test/ui/analysis/widgets/chart_card_view_test.dart @@ -33,14 +33,14 @@ void main() { range: range ?? ValueNotifier(Util.getDateRange()), ); return MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, builder: (ctx, state) { return Scaffold(body: view); }, ), + ...Routes.getDesiredRoute(0).routes, ]), ); } diff --git a/test/ui/analysis/widgets/chart_range_page_test.dart b/test/ui/analysis/widgets/chart_range_page_test.dart index 0f0dab5c..cdbd7942 100644 --- a/test/ui/analysis/widgets/chart_range_page_test.dart +++ b/test/ui/analysis/widgets/chart_range_page_test.dart @@ -1,75 +1,95 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; +import 'package:go_router/go_router.dart'; import 'package:possystem/helpers/util.dart'; +import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/analysis/widgets/chart_range_page.dart'; +import '../../../test_helpers/breakpoint_mocker.dart'; import '../../../test_helpers/translator.dart'; void main() { group('Chart Range Page', () { - testWidgets('renders correctly', (WidgetTester tester) async { - final now = DateTime.now(); - final today = DateTime(now.year, now.month, now.day); - final tomorrow = today.add(const Duration(days: 1)); - final range = DateTimeRange( - start: today.subtract(const Duration(days: 7)), - end: today, - ); + for (final device in [Device.mobile, Device.desktop]) { + group(device.name, () { + testWidgets('renders correctly', (WidgetTester tester) async { + deviceAs(device, tester); + final now = DateTime.now(); + final today = DateTime(now.year, now.month, now.day); + final tomorrow = today.add(const Duration(days: 1)); + final range = DateTimeRange( + start: today.subtract(const Duration(days: 7)), + end: today, + ); - DateTimeRange? selected; - await tester.pumpWidget( - MaterialApp(home: Scaffold( - body: Builder(builder: (context) { - return TextButton( - child: const Text('go'), - onPressed: () async { - selected = await Navigator.of(context).push( - MaterialPageRoute( - builder: (context) => ChartRangePage(range: range), + DateTimeRange? selected; + await tester.pumpWidget( + MaterialApp.router( + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (context, state) => Scaffold( + body: Builder(builder: (context) { + return TextButton( + child: const Text('go'), + onPressed: () async { + selected = await Navigator.of(context).push( + MaterialPageRoute( + builder: (context) => ChartRangePage(range: range), + ), + ); + }, + ); + }), ), - ); - }, - ); - }), - )), - ); - await tester.tap(find.text('go')); - await tester.pumpAndSettle(); + ), + ]), + ), + ); + await tester.tap(find.text('go')); + await tester.pumpAndSettle(); - expect(find.text(S.analysisChartRangeLast7Days), findsOneWidget); - expect(find.text(range.format('en')), findsAtLeastNWidgets(1)); - expect(find.text(S.analysisChartRangeThisWeek), findsOneWidget); - expect(find.text(S.analysisChartRangeLastWeek), findsOneWidget); + expect(find.text(S.analysisChartRangeLast7Days), findsOneWidget); + expect(find.text(range.format('en')), findsAtLeastNWidgets(1)); + expect(find.text(S.analysisChartRangeThisWeek), findsOneWidget); + expect(find.text(S.analysisChartRangeLastWeek), findsOneWidget); - await tester.tap(find.text(S.analysisChartRangeTabName('day'))); - await tester.pumpAndSettle(); + await tester.tap(find.text(S.analysisChartRangeTabName('day'))); + await tester.pumpAndSettle(); - expect(find.text(S.analysisChartRangeYesterday), findsOneWidget); - await tester.tap(find.text(S.analysisChartRangeToday)); - await tester.pumpAndSettle(); + expect(find.text(S.analysisChartRangeYesterday), findsOneWidget); + await tester.tap(find.text(S.analysisChartRangeToday)); + await tester.pumpAndSettle(); - await tester.tap(find.text(S.analysisChartRangeTabName('month'))); - await tester.pumpAndSettle(); + await tester.tap(find.text(S.analysisChartRangeTabName('month'))); + await tester.pumpAndSettle(); - expect(find.text(S.analysisChartRangeLast30Days), findsOneWidget); - expect(find.text(S.analysisChartRangeThisMonth), findsOneWidget); - expect(find.text(S.analysisChartRangeLastMonth), findsOneWidget); + expect(find.text(S.analysisChartRangeLast30Days), findsOneWidget); + expect(find.text(S.analysisChartRangeThisMonth), findsOneWidget); + expect(find.text(S.analysisChartRangeLastMonth), findsOneWidget); - await tester.tap(find.text(S.analysisChartRangeTabName('custom'))); - await tester.pumpAndSettle(); + // only test in mobile, because desktop's select range is still unknown + if (device == Device.mobile) { + await tester.tap(find.text(S.analysisChartRangeTabName('custom'))); + await tester.pumpAndSettle(); - await tester.tap( - find.text(DateTimeRange(start: today, end: tomorrow).format('en')), - ); - await tester.pumpAndSettle(); - await tester.tap(find.text('OK'), warnIfMissed: false); - await tester.pumpAndSettle(); - await tester.tap(find.text('OK')); - await tester.pumpAndSettle(); + await tester.tap( + find.text(DateTimeRange(start: today, end: tomorrow).format('en')), + ); + // No idea why we have to tap twice. I've tried to pumpAndSettle + // several times, but it still doesn't work + await tester.pumpAndSettle(); + await tester.tap(find.text('OK'), warnIfMissed: false); + await tester.pumpAndSettle(); + await tester.tap(find.text('OK')); + await tester.pumpAndSettle(); - expect(selected, DateTimeRange(start: today, end: tomorrow)); - }); + expect(selected, DateTimeRange(start: today, end: tomorrow)); + } + }); + }); + } }); setUpAll(() { diff --git a/test/ui/analysis/widgets/goals_card_view_test.dart b/test/ui/analysis/widgets/goals_card_view_test.dart index 933e8368..97b5a1ce 100644 --- a/test/ui/analysis/widgets/goals_card_view_test.dart +++ b/test/ui/analysis/widgets/goals_card_view_test.dart @@ -33,7 +33,7 @@ void main() { when(mockQuery(fortyDaysAgo, tomorrow)).thenAnswer((_) async => [ for (var i = 20; i >= 0; i--) { - 'day': i, + 'day': 21 + i, 'count': i, 'revenue': i * 1.1, 'profit': i * 1.2, @@ -64,9 +64,9 @@ void main() { // notify the seller to update the view when(mockQuery(today, tomorrow)).thenAnswer((_) => Future.value([ { - 'day': 0, + 'day': 1, 'count': 2, - 'price': 2.1, + 'profit': 2.1, 'revenue': 2.2, 'cost': 2.3, } diff --git a/test/ui/analysis/widgets/history_order_list_test.dart b/test/ui/analysis/widgets/history_order_list_test.dart index d0bd9ec0..91af77b3 100644 --- a/test/ui/analysis/widgets/history_order_list_test.dart +++ b/test/ui/analysis/widgets/history_order_list_test.dart @@ -29,19 +29,17 @@ void main() { argThat(predicate((String e) => e.startsWith('tutorial.'))), )).thenReturn(true); return MaterialApp.router( - routerConfig: GoRouter( - routes: [ - GoRoute( - path: '/', - builder: (_, __) { - return Material( - child: HistoryOrderList(notifier: notifier), - ); - }, - routes: Routes.routes, - ), - ], - ), + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (_, __) { + return Material( + child: HistoryOrderList(notifier: notifier), + ); + }, + ), + ...Routes.getDesiredRoute(0).routes, + ]), ); } diff --git a/test/ui/cashier/cashier_view_test.dart b/test/ui/cashier/cashier_view_test.dart index f42eb83e..a98007c2 100644 --- a/test/ui/cashier/cashier_view_test.dart +++ b/test/ui/cashier/cashier_view_test.dart @@ -26,12 +26,12 @@ void main() { return ChangeNotifierProvider.value( value: Cashier.instance, builder: (_, __) => MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', builder: (_, __) => const Scaffold(body: CashierView()), - routes: Routes.routes, ), + ...Routes.getDesiredRoute(0).routes, ]), ), ); diff --git a/test/ui/cashier/changer_modal_test.dart b/test/ui/cashier/changer_modal_test.dart new file mode 100644 index 00000000..339eefa8 --- /dev/null +++ b/test/ui/cashier/changer_modal_test.dart @@ -0,0 +1,218 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:go_router/go_router.dart'; +import 'package:mockito/mockito.dart'; +import 'package:possystem/constants/icons.dart'; +import 'package:possystem/models/repository/cashier.dart'; +import 'package:possystem/routes.dart'; +import 'package:possystem/settings/currency_setting.dart'; +import 'package:possystem/translator.dart'; +import 'package:possystem/ui/cashier/changer_modal.dart'; +import 'package:provider/provider.dart'; + +import '../../mocks/mock_cache.dart'; +import '../../mocks/mock_storage.dart'; +import '../../test_helpers/breakpoint_mocker.dart'; +import '../../test_helpers/translator.dart'; + +void main() { + group('Changer Modal', () { + num getUnitValue(Finder finder) { + final w = finder.evaluate().single.widget as DropdownButtonFormField; + return w.initialValue; + } + + int? getCountValue(Finder finder) { + final w = finder.evaluate().single.widget as TextFormField; + return int.tryParse(w.initialValue ?? ''); + } + + Finder findByK(String key) { + return find.byKey(Key('changer.custom.$key')); + } + + Widget buildApp({withRoutes = false}) { + // setup currency and cashier relation + when(cache.get(any)).thenReturn(null); + when(storage.get(any, any)).thenAnswer((_) => Future.value({})); + + CurrencySetting.instance.initialize(); + Cashier.instance.setCurrent(null); + + return MultiProvider( + providers: [ + ChangeNotifierProvider.value(value: Cashier.instance), + ], + builder: (_, __) => withRoutes + ? MaterialApp.router( + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (context, __) { + return TextButton( + onPressed: () => context.pushNamed(Routes.cashierChanger), + child: const Text('go to changer'), + ); + }, + ), + ...Routes.getDesiredRoute(0).routes, + ]), + ) + : const MaterialApp(home: ChangerModal()), + ); + } + + for (final device in [Device.mobile, Device.desktop]) { + group(device.name, () { + testWidgets('add favorite and failed if not enough', (tester) async { + deviceAs(device, tester); + await tester.pumpWidget(buildApp(withRoutes: true)); + await tester.pumpAndSettle(); + await tester.tap(find.text('go to changer')); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('empty_body'))); + await tester.pumpAndSettle(); + + // no select + await tester.tap(findByK('add_favorite')); + await tester.pumpAndSettle(); + expect(find.text(S.invalidNumberPositive(S.cashierChangerCustomUnitLabel)), findsOneWidget); + + // select 10 + await tester.tap(findByK('source.unit')); + await tester.pumpAndSettle(); + await tester.tap(find.text('10').last); + await tester.pumpAndSettle(); + + expect(getUnitValue(findByK('target.0.unit')), equals(5)); + expect(getCountValue(findByK('target.0.count')), equals(2)); + + await tester.tap(findByK('add_favorite')); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('changer.apply'))); + await tester.pumpAndSettle(); + + expect(find.text(S.cashierChangerErrorNoSelection), findsOneWidget); + + await tester.tap(find.byKey(const Key('changer.favorite.0'))); + await tester.tap(find.byKey(const Key('changer.apply'))); + await tester.pumpAndSettle(); + + expect(find.text(S.cashierChangerErrorNotEnough('10')), findsOneWidget); + }); + + testWidgets('delete favorite item', (tester) async { + deviceAs(device, tester); + await Cashier.instance.setFavorite(>[ + { + 'source': {'unit': 5, 'count': 1}, + 'targets': [ + {'unit': 1, 'count': 5}, + ], + }, + ]); + + await tester.pumpWidget(buildApp()); + + expect(find.byKey(const Key('changer.favorite.0')), findsOneWidget); + + await tester.tap(find.byIcon(Icons.more_vert_outlined)); + await tester.pumpAndSettle(); + await tester.tap(find.byIcon(KIcons.delete)); + await tester.pumpAndSettle(); + + expect(find.byKey(const Key('changer.favorite.0')), findsNothing); + }); + + testWidgets('apply custom', (tester) async { + deviceAs(device, tester); + await tester.pumpWidget(buildApp(withRoutes: true)); + when(storage.set(any, any)).thenAnswer((_) => Future.value()); + await tester.pumpAndSettle(); + await tester.tap(find.text('go to changer')); + await tester.pumpAndSettle(); + + setCountUnit(String key, {String? unit, String? count}) async { + if (count != null) { + await tester.enterText(findByK('$key.count'), count); + await tester.pumpAndSettle(); + } + if (unit != null) { + await tester.tap(findByK('$key.unit')); + await tester.pumpAndSettle(); + await tester.tap(find.text(unit).last); + await tester.pumpAndSettle(); + } + } + + await tester.tap(find.text(S.cashierChangerCustomTab)); + await tester.pumpAndSettle(); + // change count should also fired target reset + await setCountUnit('source', unit: '10'); + await tester.enterText(findByK('source.count'), '4'); + await tester.pumpAndSettle(); + + expect(getUnitValue(findByK('target.0.unit')), equals(5)); + expect(getCountValue(findByK('target.0.count')), equals(8)); + + // add 4 targets, total targets: 5 + await tester.tap(find.byIcon(KIcons.add)); + await tester.tap(find.byIcon(KIcons.add)); + await tester.tap(find.byIcon(KIcons.add)); + await tester.tap(find.byIcon(KIcons.add)); + await tester.pumpAndSettle(); + // remove 1 target, total targets: 4 + await tester.tap(find.byIcon(Icons.remove_circle_outlined).first); + await tester.pumpAndSettle(); + + expect(findByK('target.4.unit'), findsNothing); + + await setCountUnit('target.1', unit: '5', count: '1'); + await setCountUnit('target.2', unit: '1', count: '5'); + + // 5*10 is not able to change 10*5 + 1*5 + 5*1 + await tester.tap(find.byKey(const Key('changer.apply'))); + await tester.pumpAndSettle(); + + expect( + find.text('${S.cashierChangerErrorInvalidHead(4, '10')}\n' + ' • ${S.cashierChangerErrorInvalidBody(8, '5')}\n' + ' • ${S.cashierChangerErrorInvalidBody(1, '5')}\n' + ' • ${S.cashierChangerErrorInvalidBody(5, '1')}'), + findsOneWidget, + ); + + // apply correctly now! + await setCountUnit('target.0', count: '6'); + await tester.tap(find.byKey(const Key('changer.apply'))); + await tester.pumpAndSettle(); + + // should setup current data + expect(find.text(S.cashierChangerErrorNotEnough('10')), findsOneWidget); + + await Cashier.instance.setUnitCount(10, 10); + + await tester.tap(find.byKey(const Key('changer.apply'))); + await tester.pumpAndSettle(); + + expect(find.byKey(const Key('changer.apply')), findsNothing); + expect(Cashier.instance.at(2).count, equals(6)); + expect(Cashier.instance.at(1).count, equals(7)); + expect(Cashier.instance.at(0).count, equals(5)); + }); + }); + } + + setUp(() { + Cashier(); + }); + + setUpAll(() { + initializeStorage(); + initializeCache(); + initializeTranslator(); + }); + }); +} diff --git a/test/ui/cashier/changer_page_test.dart b/test/ui/cashier/changer_page_test.dart deleted file mode 100644 index 9ce9e5c5..00000000 --- a/test/ui/cashier/changer_page_test.dart +++ /dev/null @@ -1,203 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_test/flutter_test.dart'; -import 'package:go_router/go_router.dart'; -import 'package:mockito/mockito.dart'; -import 'package:possystem/constants/icons.dart'; -import 'package:possystem/models/repository/cashier.dart'; -import 'package:possystem/routes.dart'; -import 'package:possystem/settings/currency_setting.dart'; -import 'package:possystem/translator.dart'; -import 'package:possystem/ui/cashier/changer_page.dart'; -import 'package:provider/provider.dart'; - -import '../../mocks/mock_cache.dart'; -import '../../mocks/mock_storage.dart'; -import '../../test_helpers/translator.dart'; - -void main() { - group('Changer Page', () { - num getUnitValue(Finder finder) { - final w = finder.evaluate().single.widget as DropdownButtonFormField; - return w.initialValue; - } - - int? getCountValue(Finder finder) { - final w = finder.evaluate().single.widget as TextFormField; - return int.tryParse(w.initialValue ?? ''); - } - - Finder findByK(String key) { - return find.byKey(Key('changer.custom.$key')); - } - - Widget buildApp({withRoutes = false}) { - // setup currency and cashier relation - when(cache.get(any)).thenReturn(null); - when(storage.get(any, any)).thenAnswer((_) => Future.value({})); - - CurrencySetting.instance.initialize(); - Cashier.instance.setCurrent(null); - - return MultiProvider( - providers: [ - ChangeNotifierProvider.value(value: Cashier.instance), - ], - builder: (_, __) => withRoutes - ? MaterialApp.router( - routerConfig: GoRouter(routes: [ - GoRoute( - path: '/', - builder: (context, __) { - return TextButton( - onPressed: () => context.pushNamed(Routes.cashierChanger), - child: const Text('go to changer'), - ); - }, - routes: Routes.routes, - ), - ]), - ) - : const MaterialApp(home: ChangerModal()), - ); - } - - testWidgets('add favorite and failed if not enough', (tester) async { - await tester.pumpWidget(buildApp(withRoutes: true)); - await tester.pumpAndSettle(); - await tester.tap(find.text('go to changer')); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('empty_body'))); - await tester.pumpAndSettle(); - await tester.tap(findByK('source.unit')); - await tester.pumpAndSettle(); - await tester.tap(find.text('10').last); - await tester.pumpAndSettle(); - - expect(getUnitValue(findByK('target.0.unit')), equals(5)); - expect(getCountValue(findByK('target.0.count')), equals(2)); - - await tester.tap(findByK('add_favorite')); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('changer.apply'))); - await tester.pumpAndSettle(); - - expect(find.text(S.cashierChangerErrorNoSelection), findsOneWidget); - - await tester.tap(find.byKey(const Key('changer.favorite.0'))); - await tester.tap(find.byKey(const Key('changer.apply'))); - await tester.pumpAndSettle(); - - expect(find.text('go to changer'), findsNothing); - }); - - testWidgets('delete favorite item', (tester) async { - await Cashier.instance.setFavorite(>[ - { - 'source': {'unit': 5, 'count': 1}, - 'targets': [ - {'unit': 1, 'count': 5}, - ], - }, - ]); - - await tester.pumpWidget(buildApp()); - - expect(find.byKey(const Key('changer.favorite.0')), findsOneWidget); - - await tester.tap(find.byIcon(Icons.more_vert_sharp)); - await tester.pumpAndSettle(); - await tester.tap(find.byIcon(KIcons.delete)); - await tester.pumpAndSettle(); - - expect(find.byKey(const Key('changer.favorite.0')), findsNothing); - }); - - testWidgets('apply custom', (tester) async { - await tester.pumpWidget(buildApp(withRoutes: true)); - when(storage.set(any, any)).thenAnswer((_) => Future.value()); - await tester.pumpAndSettle(); - await tester.tap(find.text('go to changer')); - await tester.pumpAndSettle(); - - setCountUnit(String key, {String? unit, String? count}) async { - if (count != null) { - await tester.enterText(findByK('$key.count'), count); - await tester.pumpAndSettle(); - } - if (unit != null) { - await tester.tap(findByK('$key.unit')); - await tester.pumpAndSettle(); - await tester.tap(find.text(unit).last); - await tester.pumpAndSettle(); - } - } - - await tester.tap(find.byKey(const Key('changer.custom'))); - await tester.pumpAndSettle(); - // change count should also fired target reset - await setCountUnit('source', unit: '10'); - await tester.enterText(findByK('source.count'), '4'); - await tester.pumpAndSettle(); - - expect(getUnitValue(findByK('target.0.unit')), equals(5)); - expect(getCountValue(findByK('target.0.count')), equals(8)); - - // add 4 targets, total targets: 5 - await tester.tap(find.byIcon(KIcons.add)); - await tester.tap(find.byIcon(KIcons.add)); - await tester.tap(find.byIcon(KIcons.add)); - await tester.tap(find.byIcon(KIcons.add)); - await tester.pumpAndSettle(); - // remove 1 target, total targets: 4 - await tester.tap(find.byIcon(Icons.remove_circle_sharp).first); - await tester.pumpAndSettle(); - - expect(findByK('target.4.unit'), findsNothing); - - await setCountUnit('target.1', unit: '5', count: '1'); - await setCountUnit('target.2', unit: '1', count: '5'); - - // 5*10 is not able to change 10*5 + 1*5 + 5*1 - await tester.tap(find.byKey(const Key('changer.apply'))); - await tester.pumpAndSettle(); - - expect( - find.text('${S.cashierChangerErrorInvalidHead(4, '10')}\n' - ' • ${S.cashierChangerErrorInvalidBody(8, '5')}\n' - ' • ${S.cashierChangerErrorInvalidBody(1, '5')}\n' - ' • ${S.cashierChangerErrorInvalidBody(5, '1')}'), - findsOneWidget, - ); - - // apply correctly now! - await setCountUnit('target.0', count: '6'); - await tester.tap(find.byKey(const Key('changer.apply'))); - await tester.pumpAndSettle(); - - // should setup current data - expect(find.text('go to changer'), findsNothing); - - await Cashier.instance.setUnitCount(10, 10); - - await tester.tap(find.byKey(const Key('changer.apply'))); - await tester.pumpAndSettle(); - - expect(find.text('go to changer'), findsOneWidget); - expect(Cashier.instance.at(2).count, equals(6)); - expect(Cashier.instance.at(1).count, equals(7)); - expect(Cashier.instance.at(0).count, equals(5)); - }); - - setUp(() { - Cashier(); - }); - - setUpAll(() { - initializeStorage(); - initializeCache(); - initializeTranslator(); - }); - }); -} diff --git a/test/ui/home/features_page_test.dart b/test/ui/home/features_page_test.dart index 866f3dad..a2e23ce0 100644 --- a/test/ui/home/features_page_test.dart +++ b/test/ui/home/features_page_test.dart @@ -23,13 +23,17 @@ void main() { value: SettingsProvider.instance..initialize(), builder: (_, __) => MaterialApp.router( locale: LanguageSetting.instance.language.locale, - routerConfig: GoRouter(initialLocation: Routes.features, routes: [ - GoRoute( - path: '/', - builder: (ctx, state) => const Text('Home'), - routes: Routes.routes, - ), - ]), + routerConfig: GoRouter( + initialLocation: '${Routes.base}/_/settings', + navigatorKey: Routes.rootNavigatorKey, + routes: [ + GoRoute( + path: '/', + builder: (ctx, state) => const Text('Home'), + ), + ...Routes.getDesiredRoute(0).routes, + ], + ), ), ); } @@ -108,23 +112,6 @@ void main() { verify(cache.set(any, 'zh_TW')); }); - testWidgets('select order_outlook', (tester) async { - await tester.pumpWidget(buildApp()); - - expect(find.text(S.settingOrderOutlookName('slidingPanel')), findsOneWidget); - - await tester.tap(find.byKey(const Key('feature.order_outlook'))); - await tester.pumpAndSettle(); - - await tester.tap(find.text(S.settingOrderOutlookName('singleView'))); - await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('pop'))); - await tester.pumpAndSettle(); - - expect(find.text(S.settingOrderOutlookName('singleView')), findsOneWidget); - verify(cache.set(any, 1)); - }); - testWidgets('select checkout_warning', (tester) async { await tester.pumpWidget(buildApp()); @@ -142,23 +129,6 @@ void main() { verify(cache.set(any, 1)); }); - testWidgets('slide order product count', (tester) async { - await tester.pumpWidget(buildApp()); - - final finder = find.byKey(const Key('feature.order_product_count')); - await tester.scrollUntilVisible(finder, 200); - - await tester.drag(finder, const Offset(-500, 0)); - await tester.pumpAndSettle(); - - verify(cache.set(any, 0)); - - await tester.drag(finder, const Offset(1500, 0)); - await tester.pumpAndSettle(); - - verify(cache.set(any, 5)); - }); - testWidgets('switch awake_ordering', (tester) async { await tester.pumpWidget(buildApp()); diff --git a/test/ui/home/home_page_test.dart b/test/ui/home/home_page_test.dart index c387726f..3cd693e3 100644 --- a/test/ui/home/home_page_test.dart +++ b/test/ui/home/home_page_test.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:go_router/go_router.dart'; import 'package:mockito/mockito.dart'; +import 'package:possystem/app.dart'; import 'package:possystem/components/tutorial.dart'; import 'package:possystem/constants/app_themes.dart'; import 'package:possystem/models/analysis/analysis.dart'; @@ -13,115 +14,128 @@ import 'package:possystem/models/repository/quantities.dart'; import 'package:possystem/models/repository/seller.dart'; import 'package:possystem/models/repository/stock.dart'; import 'package:possystem/models/stock/ingredient.dart'; -import 'package:possystem/my_app.dart'; import 'package:possystem/routes.dart'; import 'package:possystem/settings/currency_setting.dart'; import 'package:possystem/settings/settings_provider.dart'; import 'package:possystem/translator.dart'; -import 'package:possystem/ui/home/home_page.dart'; import 'package:provider/provider.dart'; import '../../mocks/mock_auth.dart'; import '../../mocks/mock_cache.dart'; import '../../mocks/mock_database.dart'; import '../../mocks/mock_storage.dart'; +import '../../test_helpers/breakpoint_mocker.dart'; import '../../test_helpers/translator.dart'; void main() { group('Home Page', () { - testWidgets('should navigate correctly', (tester) async { - when(auth.authStateChanges()).thenAnswer((_) => Stream.value(null)); - when(cache.get(any)).thenReturn(null); - // disable tutorial - when(cache.get( - argThat(predicate((key) => key.startsWith('tutorial.'))), - )).thenReturn(true); - when(database.query( - any, - columns: anyNamed('columns'), - groupBy: anyNamed('groupBy'), - orderBy: anyNamed('orderBy'), - where: anyNamed('where'), - whereArgs: anyNamed('whereArgs'), - escapeTable: anyNamed('escapeTable'), - limit: anyNamed('limit'), - )).thenAnswer((_) => Future.value([])); - final stock = Stock()..replaceItems({'i1': Ingredient(id: 'i1')}); - - await tester.pumpWidget(MultiProvider( - providers: [ - ChangeNotifierProvider.value(value: SettingsProvider.instance), - ChangeNotifierProvider.value(value: Seller.instance), - ChangeNotifierProvider.value(value: Menu()), - ChangeNotifierProvider.value(value: stock), - ChangeNotifierProvider.value(value: Quantities()), - ChangeNotifierProvider.value(value: OrderAttributes()), - ChangeNotifierProvider.value(value: Analysis()), - ChangeNotifierProvider.value(value: Cart()), - ChangeNotifierProvider.value(value: Cashier()), - ], - child: MaterialApp.router( - routerConfig: GoRouter(observers: [ - MyApp.routeObserver - ], routes: [ - GoRoute( - path: '/', - routes: Routes.routes, - builder: (_, __) => const HomePage(tab: HomeTab.setting), - ) - ]), - theme: AppThemes.lightTheme, - darkTheme: AppThemes.darkTheme, - ), - )); - - Future navAndCheck(String key, String check) async { - await tester.tap(find.byKey(Key(key)), warnIfMissed: false); - await tester.pumpAndSettle(); - - expect(find.byKey(Key(check)), findsOneWidget); - } - - Future navAndPop(String key, String check) async { - await navAndCheck(key, check); - - await tester.tap(find.byKey(const Key('pop'))); - await tester.pumpAndSettle(); - } - - Future dragDown() async { - await tester.dragFrom(const Offset(400, 400), const Offset(0, -200)); - await tester.pumpAndSettle(); - } - - await navAndPop('setting_header.menu1', 'menu.search'); - await navAndPop('setting_header.menu2', 'menu.search'); - await navAndPop('setting_header.order_attrs', 'order_attributes.reorder'); - - // rest - await navAndPop('setting.debug', 'debug.list'); - await navAndPop('setting.menu', 'menu.search'); - await navAndPop('setting.transit', 'transit.google_sheet'); - await navAndPop('setting.quantity', 'quantity.add'); - await navAndPop('setting.order_attrs', 'order_attributes.reorder'); - await dragDown(); - await navAndPop('setting.feature_request', 'feature_request_please'); - await dragDown(); - await navAndPop('setting.setting', 'feature.theme'); - await navAndPop('home.order', 'order.more'); - await navAndCheck('home.stock', 'stock.replenisher'); - await navAndCheck('home.cashier', 'cashier.changer'); - await navAndCheck('home.analysis', 'anal.history'); - }); + for (final device in [Device.desktop, Device.landscape, Device.mobile]) { + group(device.name, () { + testWidgets('should navigate correctly', (tester) async { + deviceAs(device, tester); + // disable tutorial + when(cache.get( + argThat(predicate((key) => key.startsWith('tutorial.'))), + )).thenReturn(true); + + await tester.pumpWidget(MultiProvider( + providers: [ + ChangeNotifierProvider.value(value: SettingsProvider.instance), + ChangeNotifierProvider.value(value: Seller.instance), + ChangeNotifierProvider.value(value: Menu()), + ChangeNotifierProvider.value(value: Stock()..replaceItems({'i1': Ingredient(id: 'i1')})), + ChangeNotifierProvider.value(value: Quantities()), + ChangeNotifierProvider.value(value: OrderAttributes()), + ChangeNotifierProvider.value(value: Analysis()), + ChangeNotifierProvider.value(value: Cart()), + ChangeNotifierProvider.value(value: Cashier()), + ], + child: MaterialApp.router( + routerConfig: GoRouter( + navigatorKey: Routes.rootNavigatorKey, + observers: [App.routeObserver], + initialLocation: device == Device.mobile ? '${Routes.base}/_' : '${Routes.base}/_/menu', + routes: Routes.getDesiredRoute(device.width / tester.view.devicePixelRatio).routes, + ), + theme: AppThemes.lightTheme, + darkTheme: AppThemes.darkTheme, + ), + )); + + Future navAndCheck( + String key, + String check, { + bool drag = false, + bool pop = true, + bool openMenu = true, + Device? only, + IconData? icon, + }) async { + if (only != null && device != only) { + return; + } + + if (device == Device.landscape && openMenu) { + await tester.tap(find.byIcon(Icons.menu)); + await tester.pumpAndSettle(); + } + + if (drag) { + await tester.dragFrom(const Offset(400, 400), const Offset(0, -200)); + await tester.pumpAndSettle(); + } + + if (device == Device.desktop && icon != null) { + await tester.tap(find.byIcon(icon)); + } else { + await tester.tap(find.byKey(Key(key))); + } + await tester.pumpAndSettle(); + + expect(find.byKey(Key(check)), findsOneWidget); + + if (device == Device.mobile && pop) { + await tester.tap(find.byKey(const Key('pop'))); + await tester.pumpAndSettle(); + } + } + + if (device == Device.desktop) { + await tester.tap(find.byIcon(Icons.menu)); + await tester.pumpAndSettle(); + } + + await navAndCheck('more_header.menu1', 'menu_page', only: Device.mobile); + await navAndCheck('more_header.menu2', 'menu_page', only: Device.mobile); + await navAndCheck('more_header.order_attrs', 'order_attributes_page', only: Device.mobile); + await navAndCheck('home.debug', 'debug.list', icon: Icons.bug_report_outlined); + await navAndCheck('home.menu', 'menu_page', icon: Icons.collections_outlined); + await navAndCheck('home.transit', 'transit.google_sheet', icon: Icons.local_shipping_outlined); + await navAndCheck('home.stockQuantities', 'quantities_page', drag: true, icon: Icons.exposure_outlined); + await navAndCheck('home.orderAttributes', 'order_attributes_page', icon: Icons.assignment_ind_outlined); + await navAndCheck('home.elf', 'elf_page', icon: Icons.lightbulb_outlined); + await navAndCheck('home.settings', 'feature.theme', drag: true, icon: Icons.settings_outlined); + + if (device == Device.desktop) { + await tester.tap(find.byIcon(Icons.close)); + await tester.pumpAndSettle(); + } + + await navAndCheck('home.stock', 'stock.replenisher', pop: false, icon: Icons.inventory_2_outlined); + await navAndCheck('home.cashier', 'cashier.changer', pop: false, icon: Icons.monetization_on_outlined); + await navAndCheck('home.analysis', 'anal.history', pop: false, icon: Icons.analytics_outlined); + + await navAndCheck('home.order', 'order.more', openMenu: false); + }); + }); + } group('example menu', () { setUp(() { - reset(cache); - when(cache.get(any)).thenReturn(null); when(cache.set(any, any)).thenAnswer((_) => Future.value(true)); }); - Widget buildApp() { + Widget buildApp(WidgetTester tester, {Device device = Device.mobile}) { return MultiProvider( providers: [ ChangeNotifierProvider.value(value: SettingsProvider.instance), @@ -129,17 +143,15 @@ void main() { ChangeNotifierProvider.value(value: Stock()), ChangeNotifierProvider.value(value: Quantities()), ChangeNotifierProvider.value(value: OrderAttributes()), + ChangeNotifierProvider.value(value: Analysis()), ], child: MaterialApp.router( - routerConfig: GoRouter(observers: [ - MyApp.routeObserver - ], routes: [ - GoRoute( - path: '/', - routes: Routes.routes, - builder: (_, __) => const HomePage(tab: HomeTab.setting), - ) - ]), + routerConfig: GoRouter( + navigatorKey: Routes.rootNavigatorKey, + observers: [App.routeObserver], + initialLocation: device == Device.mobile ? '${Routes.base}/_' : '${Routes.base}/_/menu', + routes: Routes.getDesiredRoute(device.width / tester.view.devicePixelRatio).routes, + ), theme: AppThemes.lightTheme, darkTheme: AppThemes.darkTheme, ), @@ -147,7 +159,9 @@ void main() { } Future startTutorial(WidgetTester tester) async { - await tester.pumpAndSettle(); + await tester.pump(const Duration(milliseconds: 100)); + await tester.pump(const Duration(milliseconds: 100)); + await tester.pump(const Duration(milliseconds: 100)); await tester.pump(const Duration(milliseconds: 5)); } @@ -157,27 +171,33 @@ void main() { await tester.pump(const Duration(milliseconds: 5)); } - testWidgets('Setup', (tester) async { - await tester.pumpWidget(buildApp()); - expect(Menu.instance.isEmpty, isTrue); - expect(OrderAttributes.instance.isEmpty, isTrue); - - await startTutorial(tester); - await goNext(tester); - - expect(find.text(S.orderAttributeTutorialContent), findsOneWidget); - expect(Menu.instance.isNotEmpty, isTrue); - verify(cache.set('tutorial.home.menu', true)); - - await goNext(tester); - - expect(find.text(S.orderTutorialTitle), findsOneWidget); - expect(OrderAttributes.instance.isNotEmpty, isTrue); - verify(cache.set('tutorial.home.order_attr', true)); - }); + for (final device in [Device.desktop, Device.landscape, Device.mobile]) { + group(device.name, () { + testWidgets('Setup', (tester) async { + deviceAs(device, tester); + await tester.pumpWidget(buildApp(tester, device: device)); + expect(Menu.instance.isEmpty, isTrue); + expect(OrderAttributes.instance.isEmpty, isTrue); + + await startTutorial(tester); + expect(find.text(S.menuTutorialTitle), findsOneWidget); + + await goNext(tester); + expect(find.text(S.orderAttributeTutorialTitle), findsOneWidget); + expect(Menu.instance.isNotEmpty, isTrue); + verify(cache.set('tutorial.home.menu', true)); + + await goNext(tester); + + expect(find.text(S.orderTutorialTitle), findsOneWidget); + expect(OrderAttributes.instance.isNotEmpty, isTrue); + verify(cache.set('tutorial.home.order_attr', true)); + }); + }); + } testWidgets('Disable example menu', (tester) async { - await tester.pumpWidget(buildApp()); + await tester.pumpWidget(buildApp(tester)); await startTutorial(tester); await tester.tap(find.text(S.menuTutorialCreateExample)); @@ -190,10 +210,17 @@ void main() { }); setUp(() { + reset(auth); + reset(cache); + reset(database); + // setup currency - when(cache.get('currency')).thenReturn(null); + when(cache.get(any)).thenReturn(null); CurrencySetting.instance.initialize(); + // setup auth + when(auth.authStateChanges()).thenAnswer((_) => Stream.value(null)); + // setup seller when(database.query( any, @@ -203,6 +230,16 @@ void main() { )).thenAnswer((_) => Future.value([ {'totalPrice': 20, 'count': 10}, ])); + when(database.query( + any, + columns: anyNamed('columns'), + groupBy: anyNamed('groupBy'), + orderBy: anyNamed('orderBy'), + where: anyNamed('where'), + whereArgs: anyNamed('whereArgs'), + escapeTable: anyNamed('escapeTable'), + limit: anyNamed('limit'), + )).thenAnswer((_) => Future.value([])); }); setUpAll(() { diff --git a/test/ui/menu/catalog_view_test.dart b/test/ui/menu/catalog_view_test.dart index cbec4073..745fca25 100644 --- a/test/ui/menu/catalog_view_test.dart +++ b/test/ui/menu/catalog_view_test.dart @@ -13,12 +13,13 @@ import 'package:possystem/routes.dart'; import 'package:possystem/ui/menu/menu_page.dart'; import 'package:provider/provider.dart'; -import '../../test_helpers/file_mocker.dart'; import '../../mocks/mock_storage.dart'; +import '../../test_helpers/file_mocker.dart'; import '../../test_helpers/translator.dart'; void main() { Widget buildApp({String? popImage}) { + final baseRoute = Routes.getDesiredRoute(0).routes[0] as GoRoute; return MultiProvider( providers: [ ChangeNotifierProvider.value(value: Stock()), @@ -26,9 +27,10 @@ void main() { ChangeNotifierProvider.value(value: Menu.instance) ], child: MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', + builder: (_, __) => const MenuPage(), routes: [ GoRoute( name: Routes.imageGallery, @@ -38,10 +40,13 @@ void main() { child: const Text('tap me'), ), ), - ...Routes.routes.where((e) => e.name != Routes.imageGallery), ], - builder: (_, __) => const MenuPage(), - ) + ), + GoRoute( + path: baseRoute.path, + redirect: baseRoute.redirect, + routes: baseRoute.routes.where((e) => e is! GoRoute || e.name != Routes.imageGallery).toList(), + ), ]), ), ); @@ -73,7 +78,7 @@ void main() { await tester.pumpAndSettle(); // navigate to product screen - expect(find.byKey(const Key('product.add')), findsOneWidget); + expect(find.byKey(const Key('menu.add_product')), findsOneWidget); final product = catalog.items.first; expect(product.name, equals('name')); @@ -101,7 +106,7 @@ void main() { await tester.tap(find.byKey(const Key('product.p-1'))); await tester.pumpAndSettle(); - expect(find.byKey(const Key('product.add')), findsOneWidget); + expect(find.byKey(const Key('menu.add_product')), findsOneWidget); }); testWidgets('Edit product', (WidgetTester tester) async { @@ -122,7 +127,7 @@ void main() { await tester.longPress(find.byKey(const Key('product.p-1'))); await tester.pumpAndSettle(); - await tester.tap(find.byIcon(Icons.text_fields_sharp)); + await tester.tap(find.byIcon(KIcons.modal)); await tester.pumpAndSettle(); // save failed @@ -179,7 +184,7 @@ void main() { await tester.tap(find.byIcon(KIcons.reorder)); await tester.pumpAndSettle(); - await tester.drag(find.byIcon(Icons.reorder_sharp).first, const Offset(0, 150)); + await tester.drag(find.byIcon(Icons.reorder_outlined).first, const Offset(0, 150)); await tester.tap(find.byKey(const Key('reorder.save'))); await tester.pumpAndSettle(); diff --git a/test/ui/menu/menu_page_test.dart b/test/ui/menu/menu_page_test.dart index bc68c1dc..8a8ae4ca 100644 --- a/test/ui/menu/menu_page_test.dart +++ b/test/ui/menu/menu_page_test.dart @@ -2,12 +2,15 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:go_router/go_router.dart'; import 'package:mockito/mockito.dart'; +import 'package:possystem/constants/app_themes.dart'; import 'package:possystem/constants/icons.dart'; +import 'package:possystem/helpers/breakpoint.dart'; import 'package:possystem/models/menu/catalog.dart'; import 'package:possystem/models/menu/product.dart'; import 'package:possystem/models/menu/product_ingredient.dart'; import 'package:possystem/models/menu/product_quantity.dart'; import 'package:possystem/models/repository/menu.dart'; +import 'package:possystem/models/repository/order_attributes.dart'; import 'package:possystem/models/repository/quantities.dart'; import 'package:possystem/models/repository/stock.dart'; import 'package:possystem/models/stock/ingredient.dart'; @@ -19,18 +22,24 @@ import 'package:provider/provider.dart'; import '../../mocks/mock_cache.dart'; import '../../mocks/mock_storage.dart'; +import '../../test_helpers/breakpoint_mocker.dart'; import '../../test_helpers/file_mocker.dart'; import '../../test_helpers/translator.dart'; void main() { group('Menu Page', () { Widget buildApp([String? popImage]) { + final baseRoute = Routes.getDesiredRoute(0).routes[0] as GoRoute; return MaterialApp.router( darkTheme: ThemeData.dark(), themeMode: ThemeMode.dark, - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', + builder: (context, __) { + final singleView = Breakpoint.find(width: MediaQuery.sizeOf(context).width) <= Breakpoint.medium; + return singleView ? const MenuPage() : const Scaffold(body: MenuPage()); + }, routes: [ GoRoute( name: Routes.imageGallery, @@ -40,55 +49,185 @@ void main() { child: const Text('tap me'), ), ), - ...Routes.routes.where((e) => e.name != Routes.imageGallery), ], - builder: (_, __) => const MenuPage(), - ) + ), + GoRoute( + path: baseRoute.path, + redirect: baseRoute.redirect, + routes: baseRoute.routes.where((e) => e is! GoRoute || e.name != Routes.imageGallery).toList(), + ), ]), ); } - testWidgets('Add catalog with image', (WidgetTester tester) async { - await tester.pumpWidget(MultiProvider( - providers: [ - ChangeNotifierProvider.value(value: Menu()), - ChangeNotifierProvider.value(value: Stock()), - ], - child: buildApp('test-image'), - )); - - await tester.tap(find.byKey(const Key('empty_body'))); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('image_holder.edit'))); - await tester.pumpAndSettle(); - await tester.tap(find.text('tap me')); - await tester.pumpAndSettle(); - - await tester.enterText(find.byKey(const Key('catalog.name')), 'name'); - await tester.testTextInput.receiveAction(TextInputAction.done); - await tester.pumpAndSettle(); - await tester.pumpAndSettle(); - - // catalog view - expect(find.byKey(const Key('catalog.empty')), findsOneWidget); - - final catalog = Menu.instance.items.first; - expect(catalog.name, equals('name')); - expect(catalog.index, equals(1)); - - verify(storage.add( - any, - any, - argThat(predicate((data) => - data is Map && - data['name'] == 'name' && - data['index'] == 1 && - data['createdAt'] > 0 && - data['imagePath'] == 'test-image' && - (data['products'] as Map).isEmpty)), - )); - }); + for (final device in [Device.desktop, Device.mobile]) { + group(device.name, () { + testWidgets('Add catalog with image', (WidgetTester tester) async { + deviceAs(device, tester); + await tester.pumpWidget(MultiProvider( + providers: [ + ChangeNotifierProvider.value(value: Menu()), + ChangeNotifierProvider.value(value: Stock()), + ], + child: buildApp('test-image'), + )); + + await tester.tap(find.byKey(const Key('empty_body'))); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('image_holder.edit'))); + await tester.pumpAndSettle(); + await tester.tap(find.text('tap me')); + await tester.pumpAndSettle(); + + await tester.enterText(find.byKey(const Key('catalog.name')), 'name'); + await tester.testTextInput.receiveAction(TextInputAction.done); + await tester.pumpAndSettle(); + await tester.pumpAndSettle(); + + // catalog view + expect(find.byKey(const Key('catalog.empty')), findsOneWidget); + + final catalog = Menu.instance.items.first; + expect(catalog.name, equals('name')); + expect(catalog.index, equals(1)); + + verify(storage.add( + any, + any, + argThat(predicate((data) => + data is Map && + data['name'] == 'name' && + data['index'] == 1 && + data['createdAt'] > 0 && + data['imagePath'] == 'test-image' && + (data['products'] as Map).isEmpty)), + )); + }); + + testWidgets('Edit catalog', (WidgetTester tester) async { + deviceAs(device, tester); + final newImage = await createImage('test-image'); + final catalog1 = Catalog(id: 'c-1', name: 'c-1', imagePath: 'wrong-path'); + final catalog2 = Catalog(id: 'c-2', name: 'c-2'); + Menu().replaceItems({'c-1': catalog1, 'c-2': catalog2}); + + await tester.pumpWidget(MultiProvider( + providers: [ + ChangeNotifierProvider.value(value: Menu.instance), + ], + child: buildApp(newImage), + )); + + await tester.longPress(find.byKey(const Key('catalog.c-1'))); + await tester.pumpAndSettle(); + await tester.tap(find.byIcon(Icons.text_fields_outlined)); + await tester.pumpAndSettle(); + + // edit image + await tester.tap(find.byKey(const Key('image_holder.edit'))); + await tester.pumpAndSettle(); + await tester.tap(find.text('tap me')); + await tester.pumpAndSettle(); + + // save failed + await tester.enterText(find.byKey(const Key('catalog.name')), 'c-2'); + await tester.tap(find.byKey(const Key('modal.save'))); + await tester.pumpAndSettle(); + + await tester.enterText(find.byKey(const Key('catalog.name')), 'new-name'); + await tester.testTextInput.receiveAction(TextInputAction.done); + await tester.pumpAndSettle(); + await tester.pumpAndSettle(); + + // reset catalog name + final w = find.byKey(const Key('catalog.c-1')).evaluate().first.widget; + expect(((w as ListTile).title as Text).data, equals('new-name')); + expect(catalog1.imagePath, equals(newImage)); + + verify(storage.set( + any, + argThat(equals({ + 'c-1.name': 'new-name', + 'c-1.imagePath': newImage, + })), + )); + }); + + testWidgets('Reorder catalog', (WidgetTester tester) async { + deviceAs(device, tester); + final catalog1 = Catalog(name: 'c-1', id: 'c-1', index: 1); + final catalog2 = Catalog(name: 'c-2', id: 'c-2', index: 2); + final catalog3 = Catalog(name: 'c-3', id: 'c-3', index: 3); + Menu().replaceItems({'c-1': catalog1, 'c-2': catalog2, 'c-3': catalog3}); + + await tester.pumpWidget(MultiProvider(providers: [ + ChangeNotifierProvider.value(value: Menu.instance), + ], child: buildApp())); + + await tester.tap(find.byIcon(KIcons.reorder)); + await tester.pumpAndSettle(); + + await tester.drag(find.byIcon(Icons.reorder_outlined).first, const Offset(0, 150)); + + await tester.tap(find.byKey(const Key('reorder.save'))); + await tester.pumpAndSettle(); + + final y1 = tester.getCenter(find.byKey(const Key('catalog.c-1'))).dy; + final y2 = tester.getCenter(find.byKey(const Key('catalog.c-2'))).dy; + final itemList = Menu.instance.itemList; + expect(y1, greaterThan(y2)); + expect(itemList[0].id, equals('c-2')); + expect(itemList[1].id, equals('c-1')); + expect(itemList[2].id, equals('c-3')); + + verify(storage.set( + any, + argThat(equals({'c-1.index': 2, 'c-2.index': 1})), + )); + }); + + testWidgets('Delete catalog', (WidgetTester tester) async { + deviceAs(device, tester); + final productImage = await createImage('product'); + final catalogImage = await createImage('catalog'); + final catalog1 = Catalog(id: 'c-1'); + final catalog2 = Catalog(id: 'c-2', imagePath: catalogImage, products: { + 'p-1': Product(id: 'p-1', imagePath: productImage), + }); + Menu().replaceItems({'c-1': catalog1, 'c-2': catalog2}); + await createImage('product-avator'); + await createImage('catalog-avator'); + + await tester.pumpWidget(MultiProvider(providers: [ + ChangeNotifierProvider.value(value: Menu.instance), + ], child: buildApp())); + + await tester.longPress(find.byKey(const Key('catalog.c-1'))); + await tester.pumpAndSettle(); + await tester.tap(find.byIcon(KIcons.delete)); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('delete_dialog.confirm'))); + await tester.pumpAndSettle(); + + expect(find.byKey(const Key('catalog.c-1')), findsNothing); + verify(storage.set(any, argThat(equals({catalog1.prefix: null})))); + + await tester.longPress(find.byKey(const Key('catalog.c-2'))); + await (device == Device.mobile ? tester.pumpAndSettle() : tester.pump(const Duration(milliseconds: 500))); + await tester.tap(find.byIcon(KIcons.delete)); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('delete_dialog.confirm'))); + await tester.pumpAndSettle(); + + expect(find.byKey(const Key('catalog.c-2')), findsNothing); + expect(Menu.instance.isEmpty, isTrue); + verify(storage.set(any, argThat(equals({catalog2.prefix: null})))); + }); + }); + } testWidgets('Navigate to catalog', (WidgetTester tester) async { Menu().replaceItems({'c-1': Catalog(id: 'c-1', name: 'c-1')}); @@ -104,125 +243,6 @@ void main() { expect(find.byKey(const Key('catalog.empty')), findsOneWidget); }); - testWidgets('Edit catalog', (WidgetTester tester) async { - final newImage = await createImage('test-image'); - final catalog1 = Catalog(id: 'c-1', name: 'c-1', imagePath: 'wrong-path'); - final catalog2 = Catalog(id: 'c-2', name: 'c-2'); - Menu().replaceItems({'c-1': catalog1, 'c-2': catalog2}); - - await tester.pumpWidget(MultiProvider( - providers: [ - ChangeNotifierProvider.value(value: Menu.instance), - ], - child: buildApp(newImage), - )); - - await tester.longPress(find.byKey(const Key('catalog.c-1'))); - await tester.pumpAndSettle(); - await tester.tap(find.byIcon(Icons.text_fields_sharp)); - await tester.pumpAndSettle(); - - // edit image - await tester.tap(find.byKey(const Key('image_holder.edit'))); - await tester.pumpAndSettle(); - await tester.tap(find.text('tap me')); - await tester.pumpAndSettle(); - - // save failed - await tester.enterText(find.byKey(const Key('catalog.name')), 'c-2'); - await tester.tap(find.byKey(const Key('modal.save'))); - await tester.pumpAndSettle(); - - await tester.enterText(find.byKey(const Key('catalog.name')), 'new-name'); - await tester.testTextInput.receiveAction(TextInputAction.done); - await tester.pumpAndSettle(); - await tester.pumpAndSettle(); - - // reset catalog name - final w = find.byKey(const Key('catalog.c-1')).evaluate().first.widget; - expect(((w as ListTile).title as Text).data, equals('new-name')); - expect(catalog1.imagePath, equals(newImage)); - - verify(storage.set( - any, - argThat(equals({ - 'c-1.name': 'new-name', - 'c-1.imagePath': newImage, - })), - )); - }); - - testWidgets('Reorder catalog', (WidgetTester tester) async { - final catalog1 = Catalog(name: 'c-1', id: 'c-1', index: 1); - final catalog2 = Catalog(name: 'c-2', id: 'c-2', index: 2); - final catalog3 = Catalog(name: 'c-3', id: 'c-3', index: 3); - Menu().replaceItems({'c-1': catalog1, 'c-2': catalog2, 'c-3': catalog3}); - - await tester.pumpWidget(MultiProvider(providers: [ - ChangeNotifierProvider.value(value: Menu.instance), - ], child: buildApp())); - - await tester.tap(find.byIcon(KIcons.reorder)); - await tester.pumpAndSettle(); - - await tester.drag(find.byIcon(Icons.reorder_sharp).first, const Offset(0, 150)); - - await tester.tap(find.byKey(const Key('reorder.save'))); - await tester.pumpAndSettle(); - - final y1 = tester.getCenter(find.byKey(const Key('catalog.c-1'))).dy; - final y2 = tester.getCenter(find.byKey(const Key('catalog.c-2'))).dy; - final itemList = Menu.instance.itemList; - expect(y1, greaterThan(y2)); - expect(itemList[0].id, equals('c-2')); - expect(itemList[1].id, equals('c-1')); - expect(itemList[2].id, equals('c-3')); - - verify(storage.set( - any, - argThat(equals({'c-1.index': 2, 'c-2.index': 1})), - )); - }); - - testWidgets('Delete catalog', (WidgetTester tester) async { - final productImage = await createImage('product'); - final catalogImage = await createImage('catalog'); - final catalog1 = Catalog(id: 'c-1'); - final catalog2 = Catalog(id: 'c-2', imagePath: catalogImage, products: { - 'p-1': Product(id: 'p-1', imagePath: productImage), - }); - Menu().replaceItems({'c-1': catalog1, 'c-2': catalog2}); - await createImage('product-avator'); - await createImage('catalog-avator'); - - await tester.pumpWidget(MultiProvider(providers: [ - ChangeNotifierProvider.value(value: Menu.instance), - ], child: buildApp())); - - await tester.longPress(find.byKey(const Key('catalog.c-1'))); - await tester.pumpAndSettle(); - await tester.tap(find.byIcon(KIcons.delete)); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('delete_dialog.confirm'))); - await tester.pumpAndSettle(); - - expect(find.byKey(const Key('catalog.c-1')), findsNothing); - verify(storage.set(any, argThat(equals({catalog1.prefix: null})))); - - await tester.longPress(find.byKey(const Key('catalog.c-2'))); - await tester.pumpAndSettle(); - await tester.tap(find.byIcon(KIcons.delete)); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('delete_dialog.confirm'))); - await tester.pumpAndSettle(); - - expect(find.byKey(const Key('catalog.c-2')), findsNothing); - expect(Menu.instance.isEmpty, isTrue); - verify(storage.set(any, argThat(equals({catalog2.prefix: null})))); - }); - testWidgets('Search product', (WidgetTester tester) async { final now = DateTime.now(); final product = Product(id: 'p-1', name: 'p-1', searchedAt: now, ingredients: { @@ -302,27 +322,28 @@ void main() { testWidgets('Pop back to catalog list', (WidgetTester tester) async { Menu().replaceItems({'c-1': Catalog(id: 'c-1', name: 'c-1')}); + OrderAttributes(); await tester.pumpWidget(MultiProvider( providers: [ ChangeNotifierProvider.value(value: Menu.instance), + ChangeNotifierProvider.value(value: OrderAttributes.instance), ], child: MaterialApp.router( - routerConfig: GoRouter( - routes: [ - GoRoute( - path: '/', - routes: Routes.routes, - builder: (context, __) => TextButton( - onPressed: () => context.goNamed( - Routes.menu, - queryParameters: {'id': 'c-1'}, - ), - child: const Text('go'), + theme: AppThemes.lightTheme, + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (context, __) => TextButton( + onPressed: () => context.goNamed( + Routes.menu, + queryParameters: {'id': 'c-1'}, ), + child: const Text('go'), ), - ], - ), + ), + ...Routes.getDesiredRoute(0).routes, + ]), ), )); await tester.pumpAndSettle(); diff --git a/test/ui/menu/product_page_test.dart b/test/ui/menu/product_page_test.dart index f6334cbe..8574cdbc 100644 --- a/test/ui/menu/product_page_test.dart +++ b/test/ui/menu/product_page_test.dart @@ -19,11 +19,13 @@ import 'package:possystem/ui/menu/product_page.dart'; import 'package:provider/provider.dart'; import '../../mocks/mock_storage.dart'; +import '../../test_helpers/breakpoint_mocker.dart'; import '../../test_helpers/file_mocker.dart'; import '../../test_helpers/translator.dart'; void main() { Widget buildApp(Product product, {String? popImage, WidgetBuilder? home}) { + final baseRoute = Routes.getDesiredRoute(0).routes[0] as GoRoute; return MultiProvider( providers: [ ChangeNotifierProvider.value(value: Stock.instance), @@ -32,9 +34,10 @@ void main() { child: MaterialApp.router( darkTheme: ThemeData.dark(), themeMode: ThemeMode.dark, - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', + builder: (context, __) => home?.call(context) ?? ProductPage(product: product), routes: [ GoRoute( name: Routes.imageGallery, @@ -44,95 +47,104 @@ void main() { child: const Text('tap me'), ), ), - ...Routes.routes.where((e) => e.name != Routes.imageGallery), ], - builder: (context, __) => home?.call(context) ?? ProductPage(product: product), - ) + ), + GoRoute( + path: baseRoute.path, + redirect: baseRoute.redirect, + routes: baseRoute.routes.where((e) => e is! GoRoute || e.name != Routes.imageGallery).toList(), + ), ]), ), ); } group('Product Page', () { - testWidgets('Reorder Ingredients', (WidgetTester tester) async { - Stock().replaceItems({ - 'p-1': Ingredient(id: 'p-1', name: 'p-1'), - 'p-2': Ingredient(id: 'p-2', name: 'p-2'), - 'p-3': Ingredient(id: 'p-3', name: 'p-3'), - }); - Quantities(); - final p1 = ProductIngredient(id: 'p-1', name: 'p-1', index: 1, ingredient: Stock.instance.getItem('p-1')); - final p2 = ProductIngredient(id: 'p-2', name: 'p-2', index: 2, ingredient: Stock.instance.getItem('p-2')); - final p = Product(id: 'p', name: 'p', ingredients: { - 'p-1': p1, - 'p-2': p2, - 'p-3': ProductIngredient(id: 'p-3', name: 'p-3', index: 3, ingredient: Stock.instance.getItem('p-3')), - }); - final catalog = Catalog(id: 'c', products: {'p': p..prepareItem()})..prepareItem(); - Menu().replaceItems({'c': catalog}); - - await tester.pumpWidget(buildApp(p)); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('item_more_action'))); - await tester.pumpAndSettle(); - await tester.tap(find.byIcon(KIcons.reorder)); - await tester.pumpAndSettle(); - - await tester.drag(find.byIcon(Icons.reorder_sharp).first, const Offset(0, 150)); - - await tester.tap(find.byKey(const Key('reorder.save'))); - await tester.pumpAndSettle(); - - final y1 = tester.getCenter(find.byKey(const Key('product_ingredient.p-1'))).dy; - final y2 = tester.getCenter(find.byKey(const Key('product_ingredient.p-2'))).dy; - final itemList = p.itemList; - expect(y1, greaterThan(y2)); - expect(itemList[0].id, equals('p-2')); - expect(itemList[1].id, equals('p-1')); - expect(itemList[2].id, equals('p-3')); - - verify(storage.set( - any, - argThat(equals({'${p1.prefix}.index': 2, '${p2.prefix}.index': 1})), - )); - }); - - testWidgets('Update image', (WidgetTester tester) async { - final newImage = await createImage('test-image'); - final product = Product(id: 'p-1', imagePath: 'wrong-path'); - final catalog = Catalog(id: 'c-1', name: 'c-1', products: { - 'p-1': product, - }) - ..prepareItem(); - Menu().replaceItems({'c': catalog}); - Stock(); - Quantities(); - - await tester.pumpWidget(buildApp(product, popImage: newImage)); + for (final device in [Device.desktop, Device.mobile]) { + group(device.name, () { + testWidgets('Edit image', (WidgetTester tester) async { + deviceAs(device, tester); + final newImage = await createImage('test-image'); + final product = Product(id: 'p-1', imagePath: 'wrong-path'); + final catalog = Catalog(id: 'c-1', name: 'c-1', products: { + 'p-1': product, + }) + ..prepareItem(); + Menu().replaceItems({'c': catalog}); + Stock(); + Quantities(); + + await tester.pumpWidget(buildApp(product, popImage: newImage)); + + await tester.tap(find.byKey(const Key('product.more'))); + await tester.pumpAndSettle(); + await tester.tap(find.byIcon(Icons.image_outlined)); + await tester.pumpAndSettle(); + await tester.tap(find.text('tap me')); + await tester.pumpAndSettle(); + + // wait to failed loading image + await tester.pump(const Duration(milliseconds: 500)); + final captured = verify(storage.set(any, captureAny)).captured; + expect(captured.length, equals(2)); + expect( + captured[0], + predicate((data) => data is Map && data['c-1.products.p-1.imagePath'] == null), + ); + expect( + captured[1], + predicate((data) => data is Map && data['c-1.products.p-1.imagePath'] == newImage), + ); - await tester.tap(find.byKey(const Key('item_more_action'))); - await tester.pumpAndSettle(); - await tester.tap(find.byIcon(Icons.image_sharp)); - await tester.pumpAndSettle(); - await tester.tap(find.text('tap me')); - await tester.pumpAndSettle(); + expect(product.imagePath, equals(newImage)); + }); - // wait to failed loading image - await tester.pump(const Duration(milliseconds: 500)); - final captured = verify(storage.set(any, captureAny)).captured; - expect(captured.length, equals(2)); - expect( - captured[0], - predicate((data) => data is Map && data['c-1.products.p-1.imagePath'] == null), - ); - expect( - captured[1], - predicate((data) => data is Map && data['c-1.products.p-1.imagePath'] == newImage), - ); - - expect(product.imagePath, equals(newImage)); - }); + testWidgets('Reorder Ingredients', (WidgetTester tester) async { + deviceAs(device, tester); + Stock().replaceItems({ + 'p-1': Ingredient(id: 'p-1', name: 'p-1'), + 'p-2': Ingredient(id: 'p-2', name: 'p-2'), + 'p-3': Ingredient(id: 'p-3', name: 'p-3'), + }); + Quantities(); + final p1 = ProductIngredient(id: 'p-1', name: 'p-1', index: 1, ingredient: Stock.instance.getItem('p-1')); + final p2 = ProductIngredient(id: 'p-2', name: 'p-2', index: 2, ingredient: Stock.instance.getItem('p-2')); + final p = Product(id: 'p', name: 'p', ingredients: { + 'p-1': p1, + 'p-2': p2, + 'p-3': ProductIngredient(id: 'p-3', name: 'p-3', index: 3, ingredient: Stock.instance.getItem('p-3')), + }); + final catalog = Catalog(id: 'c', products: {'p': p..prepareItem()})..prepareItem(); + Menu().replaceItems({'c': catalog}); + + await tester.pumpWidget(buildApp(p)); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('product.more'))); + await tester.pumpAndSettle(); + await tester.tap(find.byIcon(KIcons.reorder).last); + await tester.pumpAndSettle(); + + await tester.drag(find.byIcon(Icons.reorder_outlined).first, const Offset(0, 150)); + + await tester.tap(find.byKey(const Key('reorder.save'))); + await tester.pumpAndSettle(); + + final y1 = tester.getCenter(find.byKey(const Key('product_ingredient.p-1'))).dy; + final y2 = tester.getCenter(find.byKey(const Key('product_ingredient.p-2'))).dy; + final itemList = p.itemList; + expect(y1, greaterThan(y2)); + expect(itemList[0].id, equals('p-2')); + expect(itemList[1].id, equals('p-1')); + expect(itemList[2].id, equals('p-3')); + + verify(storage.set( + any, + argThat(equals({'${p1.prefix}.index': 2, '${p2.prefix}.index': 1})), + )); + }); + }); + } testWidgets('Delete product', (WidgetTester tester) async { final imagePath = await createImage('old'); @@ -271,17 +283,17 @@ void main() { await tester.pumpAndSettle(); // go into modal and edit ingredient2 name - await tester.tap(find.byIcon(Icons.open_in_new_sharp)); + await tester.tap(find.byIcon(Icons.open_in_new_outlined)); await tester.pumpAndSettle(); await tester.enterText(find.byKey(const Key('stock.ingredient.name')), 'i-2-n'); await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('modal.save'))); + await tester.tap(find.byKey(const Key('modal.save')).last); await tester.pumpAndSettle(); // select new name await tester.tap(find.byKey(const Key('product_ingredient.search'))); await tester.pumpAndSettle(); - await tester.tap(find.text('i-2-n')); + await tester.tap(find.text('i-2-n').last); await tester.pumpAndSettle(); // enter amount @@ -333,6 +345,7 @@ void main() { testWidgets('Delete', (WidgetTester tester) async { prepareData(); + Quantities(); final product = Menu.instance.items.first.items.first; final ingredient = product.items.first; @@ -450,17 +463,17 @@ void main() { await tester.pumpAndSettle(); // go into modal and edit quantity2 name - await tester.tap(find.byIcon(Icons.open_in_new_sharp)); + await tester.tap(find.byIcon(Icons.open_in_new_outlined)); await tester.pumpAndSettle(); await tester.enterText(find.byKey(const Key('quantity.name')), 'q-2-n'); await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('modal.save'))); + await tester.tap(find.byKey(const Key('modal.save')).last); await tester.pumpAndSettle(); // select new name await tester.tap(find.byKey(const Key('product_quantity.search'))); await tester.pumpAndSettle(); - await tester.tap(find.text('q-2-n')); + await tester.tap(find.text('q-2-n').last); await tester.pumpAndSettle(); // edit properties diff --git a/test/ui/order/order_actions_test.dart b/test/ui/order/order_actions_test.dart index e6f1ba22..fe7c1d91 100644 --- a/test/ui/order/order_actions_test.dart +++ b/test/ui/order/order_actions_test.dart @@ -109,12 +109,12 @@ void main() { return ChangeNotifierProvider.value( value: Cart.instance, child: MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', builder: (_, __) => const OrderPage(), - routes: Routes.routes, ), + ...Routes.getDesiredRoute(0).routes, ]), ), ); diff --git a/test/ui/order/order_checkout_page_test.dart b/test/ui/order/order_checkout_page_test.dart index 0dc5497f..f8b67e45 100644 --- a/test/ui/order/order_checkout_page_test.dart +++ b/test/ui/order/order_checkout_page_test.dart @@ -30,6 +30,7 @@ import 'package:provider/provider.dart'; import '../../mocks/mock_cache.dart'; import '../../mocks/mock_database.dart'; import '../../mocks/mock_storage.dart'; +import '../../test_helpers/breakpoint_mocker.dart'; import '../../test_helpers/order_setter.dart'; import '../../test_helpers/translator.dart'; @@ -175,285 +176,317 @@ void main() { return find.byKey(Key('cashier.calculator.$key')); } - Widget buildApp([GlobalKey? messenger]) { + Widget buildApp() { return ChangeNotifierProvider.value( value: Cart.instance, child: MaterialApp.router( - scaffoldMessengerKey: messenger, - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', builder: (_, __) => const OrderPage(), - routes: Routes.routes, ), + ...Routes.getDesiredRoute(0).routes, ]), ), ); } - testWidgets('Order without any product', (tester) async { - Cart.instance = Cart(); + for (final device in [Device.mobile, Device.desktop]) { + group(device.name, () { + testWidgets('Order without any product', (tester) async { + deviceAs(device, tester); + Cart.instance = Cart(); + // deviceAs(device, tester); - await tester.pumpWidget(buildApp()); + await tester.pumpWidget(buildApp()); - await tester.tap(find.byKey(const Key('order.checkout'))); - await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('order.checkout'))); + await tester.pumpAndSettle(); - expect(find.byKey(const Key('order.details.confirm')), findsNothing); - }); + expect(find.byKey(const Key('order.details.confirm')), findsNothing); + }); - testWidgets('Order without attributes', (tester) async { - CurrencySetting.instance.isInt = false; - final scaffoldMessenger = GlobalKey(); - await tester.pumpWidget(buildApp(scaffoldMessenger)); + testWidgets('Order without attributes', (tester) async { + deviceAs(device, tester); + CurrencySetting.instance.isInt = false; + await tester.pumpWidget(buildApp()); - await tester.tap(find.byKey(const Key('order.checkout'))); - await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('order.checkout'))); + await tester.pumpAndSettle(); - expect(find.text('p-1'), findsOneWidget); + expect(find.text('p-1'), findsOneWidget); - expect(Cart.instance.price, equals(28)); - expect(find.byKey(const Key('cashier.snapshot.28')), findsOneWidget); - expect(find.byKey(const Key('cashier.snapshot.50')), findsOneWidget); - expect(find.byKey(const Key('cashier.snapshot.100')), findsOneWidget); - expect(find.byKey(const Key('cashier.snapshot.500')), findsOneWidget); - expect(find.byKey(const Key('cashier.snapshot.1000')), findsOneWidget); + expect(Cart.instance.price, equals(28)); + expect(find.byKey(const Key('cashier.snapshot.28')), findsOneWidget); + expect(find.byKey(const Key('cashier.snapshot.50')), findsOneWidget); + expect(find.byKey(const Key('cashier.snapshot.100')), findsOneWidget); + expect(find.byKey(const Key('cashier.snapshot.500')), findsOneWidget); + expect(find.byKey(const Key('cashier.snapshot.1000'), skipOffstage: false), findsOneWidget); - await tester.tap(find.byKey(const Key('cashier.snapshot.30'))); - await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('cashier.snapshot.30'))); + await tester.pumpAndSettle(); - expect(find.text(S.orderCheckoutCashierSnapshotLabelChange('2')), findsOneWidget); - await tester.drag( - find.byKey(const Key('order.details.ds')), - const Offset(0, -408), - ); - await tester.pumpAndSettle(); + // only mobile has this change text and allow to drag + if (device == Device.mobile) { + expect(find.text(S.orderCheckoutCashierSnapshotLabelChange('2')), findsOneWidget); + await tester.drag( + find.byKey(const Key('order.details.ds')), + const Offset(0, -408), + ); + await tester.pumpAndSettle(); + } - verifyText(String key, String expectValue) { - expect(tester.widget(fCKey(key)).data, equals(expectValue)); - } + verifyText(String key, String expectValue) { + expect(tester.widget(fCKey(key)).data, equals(expectValue)); + } - verifyText('paid', '30'); - verifyText('change', '2'); + verifyText('paid', '30'); + verifyText('change', '2'); - await tester.tap(fCKey('clear')); - await tester.tap(fCKey('dot')); - await tester.tap(fCKey('1')); - await tester.tap(fCKey('2')); - await tester.pumpAndSettle(); + await tester.tap(fCKey('clear')); + await tester.tap(fCKey('dot')); + await tester.tap(fCKey('1')); + await tester.tap(fCKey('2')); + await tester.pumpAndSettle(); - verifyText('paid', '0.12'); - expect(fCKey('change.error'), findsOneWidget); - await tester.tap(fCKey('submit')); - await tester.pumpAndSettle(); + verifyText('paid', '0.12'); + expect(fCKey('change.error'), findsOneWidget); + await tester.tap(fCKey('submit')); + await tester.pumpAndSettle(); - expect(find.text(S.orderCheckoutSnackbarPaidFailed), findsWidgets); - scaffoldMessenger.currentState?.removeCurrentSnackBar(); - await tester.pumpAndSettle(); + expect(find.text(S.orderCheckoutSnackbarPaidFailed), findsWidgets); - await tester.tap(fCKey('clear')); - await tester.pumpAndSettle(); + await tester.tap(fCKey('clear')); + await tester.pumpAndSettle(); - expect(tester.widget(fCKey('paid.hint')).data, equals('28')); - expect(tester.widget(fCKey('change.hint')).data, equals('0')); + expect(tester.widget(fCKey('paid.hint')).data, equals('28')); + expect(tester.widget(fCKey('change.hint')).data, equals('0')); - await tester.tap(fCKey('9')); - await tester.tap(fCKey('0')); - await tester.pumpAndSettle(); + await tester.tap(fCKey('9')); + await tester.tap(fCKey('0')); + await tester.pumpAndSettle(); - verifyText('paid', '90'); - verifyText('change', '62'); + verifyText('paid', '90'); + verifyText('change', '62'); - // tap outside to close draggable - await tester.tapAt(const Offset(400, 161)); - await tester.pumpAndSettle(); + // tap outside to close draggable + if (device == Device.mobile) { + await tester.tapAt(const Offset(400, 161)); + await tester.pumpAndSettle(); - expect(find.byKey(const Key('cashier.snapshot.90')), findsOneWidget); - expect(find.text(S.orderCheckoutCashierSnapshotLabelChange('62')), findsOneWidget); - - await Cashier.instance.setCurrentByUnit(1, 5); - - final now = DateTime.now(); - Cart.timer = () => now; - final checker = OrderSetter.setPushed(OrderObject( - id: 1, - paid: 90, - price: 28, - cost: 5, - productsPrice: 28, - productsCount: 2, - createdAt: now, - products: const [ - OrderProductObject( + expect(find.text(S.orderCheckoutCashierSnapshotLabelChange('62')), findsOneWidget); + } + + expect(find.byKey(const Key('cashier.snapshot.90')), findsOneWidget); + + await Cashier.instance.setCurrentByUnit(1, 5); + + final now = DateTime.now(); + Cart.timer = () => now; + final checker = OrderSetter.setPushed(OrderObject( id: 1, - productName: "p-1", - catalogName: "c-1", - count: 1, - singleCost: 5, - singlePrice: 17, - originalPrice: 17, - isDiscount: false, - ingredients: [ - OrderIngredientObject( - ingredientName: 'i-1', - quantityName: 'q-1', - additionalPrice: 10, - additionalCost: 5, - amount: 5, + paid: 90, + price: 28, + cost: 5, + productsPrice: 28, + productsCount: 2, + createdAt: now, + products: const [ + OrderProductObject( + id: 1, + productName: "p-1", + catalogName: "c-1", + count: 1, + singleCost: 5, + singlePrice: 17, + originalPrice: 17, + isDiscount: false, + ingredients: [ + OrderIngredientObject( + ingredientName: 'i-1', + quantityName: 'q-1', + additionalPrice: 10, + additionalCost: 5, + amount: 5, + ), + OrderIngredientObject( + ingredientName: 'i-2', + quantityName: null, + additionalPrice: 0, + additionalCost: 0, + amount: 3, + ), + ], ), - OrderIngredientObject( - ingredientName: 'i-2', - quantityName: null, - additionalPrice: 0, - additionalCost: 0, - amount: 3, + OrderProductObject( + id: 1, + productName: "p-2", + catalogName: "c-2", + count: 1, + singleCost: 0, + singlePrice: 11, + originalPrice: 11, + isDiscount: false, ), ], - ), - OrderProductObject( - id: 1, - productName: "p-2", - catalogName: "c-2", - count: 1, - singleCost: 0, - singlePrice: 11, - originalPrice: 11, - isDiscount: false, - ), - ], - )); - await tester.tap(find.byKey(const Key('order.details.confirm'))); - await tester.pumpAndSettle(); - expect(find.text(S.actSuccess), findsOneWidget); - - expect(Cart.instance.isEmpty, isTrue); - // navigator popped - expect(find.byKey(const Key('order.details.ds')), findsNothing); - - checker(); - - verify(storage.set(Stores.cashier, argThat(predicate((data) { - // 95 - 62 - return data is Map && data['.current'][2]['count'] == 3 && data['.current'][0]['count'] == 3; - })))); - verify(storage.set(Stores.stock, argThat(predicate((data) { - return data is Map && - data['i-1.currentAmount'] == 95 && - !data.containsKey('i-1.updatedAt') && - data['i-2.currentAmount'] == 97 && - !data.containsKey('i-2.updatedAt'); - })))); - }); - - testWidgets('Order with attributes', (tester) async { - prepareOrderAttributes(); - - await tester.pumpWidget(buildApp()); - - await tester.tap(find.byKey(const Key('order.checkout'))); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('order.attr.oa-1.oao-1'))); - await tester.tap(find.byKey(const Key('order.attr.oa-2.oao-3'))); - - await tester.tap(find.byKey(const Key('order.details.order'))); - await tester.pumpAndSettle(); - - final now = DateTime.now(); - Cart.timer = () => now; - final checker = OrderSetter.setPushed(OrderObject( - id: 1, - paid: 38, - price: 38, - cost: 5, - productsPrice: 28, - productsCount: 2, - createdAt: now, - products: const [ - OrderProductObject( + )); + await tester.tap(find.byKey(const Key('order.details.confirm'))); + await tester.pumpAndSettle(); + expect(find.text(S.actSuccess), findsOneWidget); + + expect(Cart.instance.isEmpty, isTrue); + // navigator popped + expect(find.byKey(const Key('order.details.ds')), findsNothing); + + checker(); + + verify(storage.set(Stores.cashier, argThat(predicate((data) { + // 95 - 62 + return data is Map && data['.current'][2]['count'] == 3 && data['.current'][0]['count'] == 3; + })))); + verify(storage.set(Stores.stock, argThat(predicate((data) { + return data is Map && + data['i-1.currentAmount'] == 95 && + !data.containsKey('i-1.updatedAt') && + data['i-2.currentAmount'] == 97 && + !data.containsKey('i-2.updatedAt'); + })))); + + if (device == Device.desktop) { + // FIXME: I've no idea why this error happened + expect('${tester.binding.takeException()}', 'A RenderFlex overflowed by 299 pixels on the right.'); + } + }); + + testWidgets('Order with attributes', (tester) async { + deviceAs(device, tester); + prepareOrderAttributes(); + + await tester.pumpWidget(buildApp()); + + await tester.tap(find.byKey(const Key('order.checkout'))); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('order.attr.oa-1.oao-1'))); + await tester.tap(find.byKey(const Key('order.attr.oa-2.oao-3'))); + + await tester.tap(find.text(S.orderCheckoutCashierTab)); + await tester.pumpAndSettle(); + + final now = DateTime.now(); + Cart.timer = () => now; + final checker = OrderSetter.setPushed(OrderObject( id: 1, - productName: "p-1", - catalogName: "c-1", - count: 1, - singleCost: 5, - singlePrice: 17, - originalPrice: 17, - isDiscount: false, - ingredients: [ - OrderIngredientObject( - ingredientName: "i-1", - quantityName: "q-1", - additionalPrice: 10, - additionalCost: 5, - amount: 5, + paid: 38, + price: 38, + cost: 5, + productsPrice: 28, + productsCount: 2, + createdAt: now, + products: const [ + OrderProductObject( + id: 1, + productName: "p-1", + catalogName: "c-1", + count: 1, + singleCost: 5, + singlePrice: 17, + originalPrice: 17, + isDiscount: false, + ingredients: [ + OrderIngredientObject( + ingredientName: "i-1", + quantityName: "q-1", + additionalPrice: 10, + additionalCost: 5, + amount: 5, + ), + OrderIngredientObject( + ingredientName: "i-2", + amount: 3, + ), + ], ), - OrderIngredientObject( - ingredientName: "i-2", - amount: 3, + OrderProductObject( + id: 2, + productName: "p-2", + catalogName: "c-2", + count: 1, + singleCost: 0, + singlePrice: 11, + originalPrice: 11, + isDiscount: false, ), ], - ), - OrderProductObject( - id: 2, - productName: "p-2", - catalogName: "c-2", - count: 1, - singleCost: 0, - singlePrice: 11, - originalPrice: 11, - isDiscount: false, - ), - ], - attributes: const [ - OrderSelectedAttributeObject( - name: 'oa-2', - optionName: 'oao-3', - mode: OrderAttributeMode.changePrice, - modeValue: 10, - ), - OrderSelectedAttributeObject( - name: 'oa-3', - optionName: 'oao-5', - mode: OrderAttributeMode.statOnly, - ), - ], - )); - - await tester.tap(find.byKey(const Key('order.details.confirm'))); - await tester.pumpAndSettle(); - await tester.pumpAndSettle(); - - checker(); - - verify(storage.set(Stores.cashier, argThat(predicate((data) { - // 30 + 5 + 3 - return data is Map && - data['.current'][2]['count'] == 3 && - data['.current'][1]['count'] == 1 && - data['.current'][0]['count'] == 3; - })))); - verify(storage.set(Stores.stock, argThat(predicate((data) { - return data is Map && - data['i-1.currentAmount'] == 95 && - !data.containsKey('i-1.updatedAt') && - data['i-2.currentAmount'] == 97 && - !data.containsKey('i-2.updatedAt'); - })))); - - expect(find.text(S.actSuccess), findsOneWidget); - expect(Cart.instance.isEmpty, isTrue); - expect(find.byKey(const Key('order.details.confirm')), findsNothing); - }); + attributes: const [ + OrderSelectedAttributeObject( + name: 'oa-2', + optionName: 'oao-3', + mode: OrderAttributeMode.changePrice, + modeValue: 10, + ), + OrderSelectedAttributeObject( + name: 'oa-3', + optionName: 'oao-5', + mode: OrderAttributeMode.statOnly, + ), + ], + )); + + await tester.tap(find.byKey(const Key('order.details.confirm'))); + await tester.pumpAndSettle(); + await tester.pumpAndSettle(); + + checker(); + + verify(storage.set(Stores.cashier, argThat(predicate((data) { + // 30 + 5 + 3 + return data is Map && + data['.current'][2]['count'] == 3 && + data['.current'][1]['count'] == 1 && + data['.current'][0]['count'] == 3; + })))); + verify(storage.set(Stores.stock, argThat(predicate((data) { + return data is Map && + data['i-1.currentAmount'] == 95 && + !data.containsKey('i-1.updatedAt') && + data['i-2.currentAmount'] == 97 && + !data.containsKey('i-2.updatedAt'); + })))); + + expect(find.text(S.actSuccess), findsOneWidget); + expect(Cart.instance.isEmpty, isTrue); + expect(find.byKey(const Key('order.details.confirm')), findsNothing); + }); + + testWidgets('is able to stash the order', (tester) async { + deviceAs(device, tester); + // only test available and actual function was test by other test case. + when(database.push(StashedOrders.table, any)).thenAnswer((_) => Future.value(1)); + + await tester.pumpWidget(buildApp()); + await tester.pumpAndSettle(); + + await tester.tap(find.byKey(const Key('order.checkout'))); + await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('order.details.stash'))); + await tester.pumpAndSettle(); + + expect(find.text(S.actSuccess), findsOneWidget); + }); + }); + } testWidgets('Play with calculator', (tester) async { CurrencySetting.instance.isInt = false; - tester.view.physicalSize = const Size(1500, 3000); - addTearDown(tester.view.resetPhysicalSize); + deviceAs(Device.mobile, tester); await tester.pumpWidget(buildApp()); await tester.tap(find.byKey(const Key('order.checkout'))); await tester.pumpAndSettle(); + await tester.tap(find.byKey(const Key('order.details.order'))); + await tester.pumpAndSettle(); await tester.drag( find.byKey(const Key('order.details.ds')), @@ -543,21 +576,6 @@ void main() { verifyText('change', '32'); }); - testWidgets('is able to stash the order', (tester) async { - // only test available and actual function was test by other test case. - when(database.push(StashedOrders.table, any)).thenAnswer((_) => Future.value(1)); - - await tester.pumpWidget(buildApp()); - await tester.pumpAndSettle(); - - await tester.tap(find.byKey(const Key('order.checkout'))); - await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('order.details.stash'))); - await tester.pumpAndSettle(); - - expect(find.text(S.actSuccess), findsOneWidget); - }); - setUp(() { // disable any features when(cache.get(any)).thenReturn(null); diff --git a/test/ui/order/order_page_test.dart b/test/ui/order/order_page_test.dart index 00af62e4..f3027564 100644 --- a/test/ui/order/order_page_test.dart +++ b/test/ui/order/order_page_test.dart @@ -23,14 +23,13 @@ import 'package:possystem/routes.dart'; import 'package:possystem/settings/checkout_warning.dart'; import 'package:possystem/settings/currency_setting.dart'; import 'package:possystem/settings/order_awakening_setting.dart'; -import 'package:possystem/settings/order_outlook_setting.dart'; -import 'package:possystem/settings/order_product_axis_count_setting.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/order/order_page.dart'; import 'package:provider/provider.dart'; import '../../mocks/mock_cache.dart'; import '../../mocks/mock_storage.dart'; +import '../../test_helpers/breakpoint_mocker.dart'; import '../../test_helpers/translator.dart'; void main() { @@ -110,31 +109,37 @@ void main() { } Widget buildApp({T Function()? popResult}) { + final baseRoute = Routes.getDesiredRoute(0).routes[0] as GoRoute; return MultiProvider( providers: [ ChangeNotifierProvider.value(value: Seller.instance), ChangeNotifierProvider.value(value: Cart.instance), ], child: MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', builder: (_, __) => const OrderPage(), routes: [ GoRoute( - name: Routes.orderDetails, - path: 'test', - builder: (context, __) { - return Scaffold( - body: TextButton( - onPressed: () => context.pop(popResult?.call()), - child: const Text('hi', key: Key('test')), - ), - ); - }), - ...Routes.routes.where((e) => e.name != Routes.order), + name: Routes.orderCheckout, + path: 'test', + builder: (context, __) { + return Scaffold( + body: TextButton( + onPressed: () => context.pop(popResult?.call()), + child: const Text('hi', key: Key('test')), + ), + ); + }, + ), ], ), + GoRoute( + path: baseRoute.path, + redirect: baseRoute.redirect, + routes: baseRoute.routes.where((e) => e is! GoRoute || e.name != Routes.order).toList(), + ), ]), ), ); @@ -328,14 +333,25 @@ void main() { group('All in one page', () { testWidgets('scroll to bottom', (tester) async { OrderAwakeningSetting.instance.value = false; - OrderOutlookSetting.instance.value = OrderOutlookTypes.singleView; - OrderProductAxisCountSetting.instance.value = 0; + deviceAs(Device.landscape, tester); try { prepareData(); await tester.pumpWidget(buildApp()); + // check open and close is all ok + await tester.tap(find.byIcon(Icons.grid_view_outlined)); + await tester.pumpAndSettle(); + expect(find.byIcon(Icons.view_list_outlined), findsOneWidget); + await tester.tap(find.byIcon(Icons.grid_view_outlined).first); + await tester.pumpAndSettle(); + expect(find.byIcon(Icons.view_list_outlined), findsNothing); + // change the view + await tester.tap(find.byIcon(Icons.grid_view_outlined)); + await tester.pumpAndSettle(); + await tester.tap(find.byIcon(Icons.view_list_outlined)); + await tester.pumpAndSettle(); await tester.tap(find.byKey(const Key('order.product.p-1'))); await tester.tap(find.byKey(const Key('order.catalog.c-2'))); await tester.pumpAndSettle(); @@ -345,29 +361,32 @@ void main() { await tester.tap(find.byKey(const Key('order.product.p-2'))); await tester.tap(find.byKey(const Key('order.product.p-2'))); await tester.tap(find.byKey(const Key('order.product.p-2'))); + await tester.tap(find.byKey(const Key('order.product.p-2'))); + await tester.tap(find.byKey(const Key('order.product.p-2'))); + await tester.tap(find.byKey(const Key('order.product.p-2'))); + await tester.tap(find.byKey(const Key('order.product.p-2'))); + await tester.tap(find.byKey(const Key('order.product.p-2'))); + await tester.tap(find.byKey(const Key('order.product.p-2'))); await tester.pumpAndSettle(); expect(find.byKey(const Key('cart_snapshot.price')), findsNothing); final scrollController = tester.widget(find.byKey(const Key('cart.product_list'))).controller!; // scroll to bottom expect(scrollController.position.maxScrollExtent, isNonZero); - expect(find.byKey(const Key('order.orientation.landscape')), findsOneWidget); // setup portrait env - tester.view.physicalSize = const Size(1000, 2000); - addTearDown(tester.view.resetPhysicalSize); + deviceAs(Device.mobile, tester); + // change the view should not happen any error await tester.pumpAndSettle(); - expect(find.byKey(const Key('order.orientation.portrait')), findsOneWidget); } finally { OrderAwakeningSetting.instance.value = OrderAwakeningSetting.defaultValue; - OrderOutlookSetting.instance.value = OrderOutlookSetting.defaultValue; - OrderProductAxisCountSetting.instance.value = OrderProductAxisCountSetting.defaultValue; } }); }); testWidgets('Cart actions', (tester) async { + deviceAs(Device.mobile, tester); Cart.instance.replaceAll(products: [ CartProduct(Menu.instance.getProduct('p-1')!, count: 1), CartProduct(Menu.instance.getProduct('p-1')!, count: 8), @@ -378,7 +397,7 @@ void main() { await tester.pumpAndSettle(); await tester.drag( find.byKey(const Key('order.ds')), - const Offset(0, -400), + const Offset(0, -800), ); await tester.pumpAndSettle(); @@ -462,6 +481,7 @@ void main() { }); testWidgets('Ingredient should selected by product', (tester) async { + deviceAs(Device.mobile, tester); await tester.pumpWidget(buildApp()); await tester.tap(find.byKey(const Key('order.product.p-1'))); @@ -469,10 +489,9 @@ void main() { await tester.tap(find.byKey(const Key('order.product.p-3'))); await tester.pumpAndSettle(); - await tester.drag( - find.byKey(const Key('order.ds')), - const Offset(0, -400), - ); + await tester.drag(find.byKey(const Key('order.ds')), const Offset(0, -1200)); + await tester.pumpAndSettle(); + await tester.dragFrom(const Offset(0, 400), const Offset(0, -300)); await tester.pumpAndSettle(); final chip = tester.widget(find.byKey(const Key('order.ingredient.pi-3'))); diff --git a/test/ui/order/stashed_order_test.dart b/test/ui/order/stashed_order_test.dart index fb0ff613..2ecf8e1a 100644 --- a/test/ui/order/stashed_order_test.dart +++ b/test/ui/order/stashed_order_test.dart @@ -195,7 +195,7 @@ void main() { await tester.longPress(find.byKey(const Key('stashed_order.0'))); await tester.pumpAndSettle(); - await tester.tap(find.byIcon(Icons.file_upload)); + await tester.tap(find.byIcon(Icons.file_upload_outlined)); await tester.pumpAndSettle(); await tester.tap(find.byKey(const Key('confirm_dialog.confirm'))); diff --git a/test/ui/order_attr/order_attribute_page_test.dart b/test/ui/order_attr/order_attribute_page_test.dart index cea970c5..225980ff 100644 --- a/test/ui/order_attr/order_attribute_page_test.dart +++ b/test/ui/order_attr/order_attribute_page_test.dart @@ -25,12 +25,12 @@ void main() { await tester.pumpWidget(ChangeNotifierProvider.value( value: attrs, child: MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, builder: (_, __) => const OrderAttributePage(), - ) + ), + ...Routes.getDesiredRoute(0).routes, ]), ), )); @@ -94,12 +94,12 @@ void main() { ChangeNotifierProvider.value(value: attrs), ], child: MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, builder: (_, __) => const OrderAttributePage(), - ) + ), + ...Routes.getDesiredRoute(0).routes, ]), darkTheme: ThemeData.dark(), themeMode: ThemeMode.dark, @@ -115,7 +115,7 @@ void main() { await tester.pumpAndSettle(); await tester.tap(find.byKey(const Key('order_attributes.1.more'))); await tester.pumpAndSettle(); - await tester.tap(find.byIcon(Icons.text_fields_sharp)); + await tester.tap(find.byIcon(Icons.text_fields_outlined)); await tester.pumpAndSettle(); // repeat name @@ -178,7 +178,7 @@ void main() { final rect = tester.getRect(find.byKey(const Key('reorder.0'))); await tester.drag( - find.byIcon(Icons.reorder_sharp).first, + find.byIcon(Icons.reorder_outlined).first, Offset(0, rect.height + rect.top), ); await tester.tap(find.byKey(const Key('reorder.save'))); @@ -209,7 +209,7 @@ void main() { await tester.pumpAndSettle(); expect(tester.widget(find.byKey(const Key('order_attribute_option.modeValue'))).controller?.text, equals('-10')); - await tester.tap(find.byKey(const Key('pop'))); + await tester.tap(find.byKey(const Key('pop')).last); await tester.pumpAndSettle(); await tester.tap(find.byKey(const Key('order_attributes.1.add'))); await tester.pumpAndSettle(); @@ -262,7 +262,7 @@ void main() { await tester.pumpAndSettle(); await tester.tap(find.byKey(const Key('order_attributes.3.add'))); await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('pop'))); + await tester.tap(find.byKey(const Key('pop')).last); await tester.pumpAndSettle(); await tester.tap(find.byKey(const Key('order_attributes.2'))); @@ -333,7 +333,7 @@ void main() { await tester.tap(find.text(S.orderAttributeOptionTitleReorder)); await tester.pumpAndSettle(); - await tester.drag(find.byIcon(Icons.reorder_sharp).first, const Offset(0, 200)); + await tester.drag(find.byIcon(Icons.reorder_outlined).first, const Offset(0, 200)); await tester.tap(find.byKey(const Key('reorder.save'))); await tester.pumpAndSettle(); diff --git a/test/ui/stock/quantity_page_test.dart b/test/ui/stock/quantities_page_test.dart similarity index 88% rename from test/ui/stock/quantity_page_test.dart rename to test/ui/stock/quantities_page_test.dart index 2e49a5d7..fcfe2bb3 100644 --- a/test/ui/stock/quantity_page_test.dart +++ b/test/ui/stock/quantities_page_test.dart @@ -11,7 +11,7 @@ import 'package:possystem/models/repository/quantities.dart'; import 'package:possystem/models/stock/ingredient.dart'; import 'package:possystem/models/stock/quantity.dart'; import 'package:possystem/routes.dart'; -import 'package:possystem/ui/stock/quantity_page.dart'; +import 'package:possystem/ui/stock/quantities_page.dart'; import 'package:provider/provider.dart'; import '../../mocks/mock_storage.dart'; @@ -31,12 +31,12 @@ void main() { await tester.pumpWidget(ChangeNotifierProvider.value( value: quantities, builder: (_, __) => MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, - builder: (_, __) => const QuantityPage(), - ) + builder: (_, __) => const QuantitiesPage(), + ), + ...Routes.getDesiredRoute(0).routes, ]), ), )); @@ -69,17 +69,17 @@ void main() { await tester.pumpWidget(ChangeNotifierProvider.value( value: quantities, builder: (_, __) => MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, - builder: (_, __) => const QuantityPage(), - ) + builder: (_, __) => const QuantitiesPage(), + ), + ...Routes.getDesiredRoute(0).routes, ]), ), )); - await tester.tap(find.byKey(const Key('quantity.add'))); + await tester.tap(find.byKey(const Key('empty_body'))); await tester.pumpAndSettle(); await tester.enterText(find.byKey(const Key('quantity.name')), 'q-1'); @@ -132,12 +132,12 @@ void main() { ChangeNotifierProvider.value(value: quantities), ], builder: (_, __) => MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, - builder: (_, __) => const QuantityPage(), - ) + builder: (_, __) => const QuantitiesPage(), + ), + ...Routes.getDesiredRoute(0).routes, ]), ), )); diff --git a/test/ui/stock/replenishment_page_test.dart b/test/ui/stock/replenishment_page_test.dart index e79f58dd..774d9189 100644 --- a/test/ui/stock/replenishment_page_test.dart +++ b/test/ui/stock/replenishment_page_test.dart @@ -23,18 +23,17 @@ void main() { ChangeNotifierProvider.value(value: replenisher), ], builder: (_, __) => MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, builder: (_, __) => const ReplenishmentPage(), - ) + ), + ...Routes.getDesiredRoute(0).routes, ]), ), ); } - // TODO: find which causing overflows testWidgets('Edit replenishment', (tester) async { final replenishment = Replenishment(id: 'r-1', name: 'r-1', data: { 'i-1': 1, @@ -86,7 +85,7 @@ void main() { await tester.pumpWidget(buildApp(stock, replenisher)); - await tester.tap(find.byKey(const Key('replenisher.add'))); + await tester.tap(find.byKey(const Key('empty_body'))); await tester.pumpAndSettle(); await tester.enterText(find.byKey(const Key('replenishment.name')), 'r-1'); diff --git a/test/ui/stock/stock_view_test.dart b/test/ui/stock/stock_view_test.dart index ff8c933e..46df839d 100644 --- a/test/ui/stock/stock_view_test.dart +++ b/test/ui/stock/stock_view_test.dart @@ -27,12 +27,12 @@ void main() { group('Stock View', () { Widget buildApp() { return MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', - routes: Routes.routes, builder: (_, __) => const Scaffold(body: StockView()), - ) + ), + ...Routes.getDesiredRoute(0).routes, ]), ); } @@ -249,7 +249,7 @@ void main() { await tester.dragUntilVisible(p1, find.byType(ListView), const Offset(0, -300)); await tester.tap(p1); await tester.pumpAndSettle(); - await tester.tap(find.byKey(const Key('pop'))); + await tester.tap(find.byKey(const Key('pop')).last); await tester.pumpAndSettle(); // validate failed diff --git a/test/ui/transit/google_sheet/export_basic_test.dart b/test/ui/transit/google_sheet/export_basic_test.dart index efcd5289..f71ba65e 100644 --- a/test/ui/transit/google_sheet/export_basic_test.dart +++ b/test/ui/transit/google_sheet/export_basic_test.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; +import 'package:go_router/go_router.dart'; import 'package:googleapis/sheets/v4.dart' as gs; import 'package:mockito/mockito.dart'; import 'package:possystem/helpers/exporter/google_sheet_exporter.dart'; @@ -20,6 +21,7 @@ import 'package:possystem/models/repository/stock.dart'; import 'package:possystem/models/stock/ingredient.dart'; import 'package:possystem/models/stock/quantity.dart'; import 'package:possystem/models/stock/replenishment.dart'; +import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/transit/transit_station.dart'; @@ -36,15 +38,20 @@ void main() { const gsExporterScopes = [gs.SheetsApi.driveFileScope, gs.SheetsApi.spreadsheetsScope]; Widget buildApp([CustomMockSheetsApi? sheetsApi]) { - return MaterialApp( - home: TransitStation( - catalog: TransitCatalog.model, - method: TransitMethod.googleSheet, - exporter: GoogleSheetExporter( - sheetsApi: sheetsApi, - scopes: gsExporterScopes, + return MaterialApp.router( + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (context, state) => TransitStation( + catalog: TransitCatalog.model, + method: TransitMethod.googleSheet, + exporter: GoogleSheetExporter( + sheetsApi: sheetsApi, + scopes: gsExporterScopes, + ), + ), ), - ), + ]), ); } @@ -106,7 +113,7 @@ void main() { for (var value in values) { expect(find.text(value), findsOneWidget); } - await tester.tap(find.byKey(const Key('pop'))); + await tester.tap(find.byKey(const Key('pop')).last); await tester.pumpAndSettle(); } @@ -288,7 +295,7 @@ void main() { await tester.pumpAndSettle(); // change sheet name - await tester.tap(find.byKey(const Key('sheet_namer.stock.more'))); + await tester.longPress(find.byKey(const Key('sheet_namer.stock'))); await tester.pumpAndSettle(); await tester.tap(find.byKey(const Key('btn.edit'))); await tester.pumpAndSettle(); diff --git a/test/ui/transit/google_sheet/export_order_test.dart b/test/ui/transit/google_sheet/export_order_test.dart index fd35cc61..6e0d2e3f 100644 --- a/test/ui/transit/google_sheet/export_order_test.dart +++ b/test/ui/transit/google_sheet/export_order_test.dart @@ -1,11 +1,13 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; +import 'package:go_router/go_router.dart'; import 'package:googleapis/sheets/v4.dart' as gs; import 'package:intl/intl.dart'; import 'package:mockito/mockito.dart'; import 'package:possystem/helpers/exporter/google_sheet_exporter.dart'; import 'package:possystem/helpers/util.dart'; +import 'package:possystem/routes.dart'; import 'package:possystem/settings/language_setting.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/transit/google_sheet/order_formatter.dart'; @@ -26,15 +28,20 @@ void main() { const gsExporterScopes = [gs.SheetsApi.driveFileScope, gs.SheetsApi.spreadsheetsScope]; Widget buildApp([CustomMockSheetsApi? sheetsApi]) { - return MaterialApp( - home: TransitStation( - catalog: TransitCatalog.order, - method: TransitMethod.googleSheet, - exporter: GoogleSheetExporter( - sheetsApi: sheetsApi, - scopes: gsExporterScopes, + return MaterialApp.router( + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (context, state) => TransitStation( + catalog: TransitCatalog.order, + method: TransitMethod.googleSheet, + exporter: GoogleSheetExporter( + sheetsApi: sheetsApi, + scopes: gsExporterScopes, + ), + ), ), - ), + ]), ); } diff --git a/test/ui/transit/google_sheet/import_basic_test.dart b/test/ui/transit/google_sheet/import_basic_test.dart index e4686053..2b7dd6dd 100644 --- a/test/ui/transit/google_sheet/import_basic_test.dart +++ b/test/ui/transit/google_sheet/import_basic_test.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; +import 'package:go_router/go_router.dart'; import 'package:googleapis/sheets/v4.dart' as gs; import 'package:mockito/mockito.dart'; import 'package:possystem/helpers/exporter/google_sheet_exporter.dart'; @@ -12,6 +13,7 @@ import 'package:possystem/models/repository/replenisher.dart'; import 'package:possystem/models/repository/stock.dart'; import 'package:possystem/models/stock/ingredient.dart'; import 'package:possystem/models/stock/quantity.dart'; +import 'package:possystem/routes.dart'; import 'package:possystem/services/storage.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/transit/transit_station.dart'; @@ -21,6 +23,7 @@ import '../../../mocks/mock_cache.dart'; import '../../../mocks/mock_google_api.dart'; import '../../../mocks/mock_storage.dart'; import '../../../services/auth_test.mocks.dart'; +import '../../../test_helpers/breakpoint_mocker.dart'; import '../../../test_helpers/translator.dart'; void main() { @@ -29,15 +32,20 @@ void main() { const gsExporterScopes = [gs.SheetsApi.driveFileScope, gs.SheetsApi.spreadsheetsScope]; Widget buildApp([CustomMockSheetsApi? sheetsApi]) { - return MaterialApp( - home: TransitStation( - catalog: TransitCatalog.model, - method: TransitMethod.googleSheet, - exporter: GoogleSheetExporter( - sheetsApi: sheetsApi, - scopes: gsExporterScopes, + return MaterialApp.router( + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (context, state) => TransitStation( + catalog: TransitCatalog.model, + method: TransitMethod.googleSheet, + exporter: GoogleSheetExporter( + sheetsApi: sheetsApi, + scopes: gsExporterScopes, + ), + ), ), - ), + ]), ); } @@ -114,14 +122,14 @@ void main() { // scroll down await tester.drag( - find.byIcon(Icons.remove_red_eye_sharp).first, + find.byIcon(Icons.remove_red_eye_outlined).first, const Offset(0, -1000), ); await tester.pumpAndSettle(); - final btn = find.byIcon(Icons.remove_red_eye_sharp); + final btn = find.byIcon(Icons.remove_red_eye_outlined); await tester.tap(btn.at(index)); - await tester.pumpAndSettle(); + await tester.pump(); } void mockSheetData( @@ -175,36 +183,49 @@ void main() { expect(find.text(S.transitGSErrorImportNotFoundSheets('title')), findsOneWidget); }); - testWidgets('pop preview source', (tester) async { - const ing = '- i1,1\n + q1,1,1,1\n + q2'; - final sheetsApi = getMockSheetsApi(); - final notifier = ValueNotifier(''); - mockSheetData(sheetsApi, [ - ['c1', 'p1', 1, 1], - ['c1', 'p2', 2, 2, ing], - ]); - - await tester.pumpWidget(MaterialApp( - home: TransitStation( - catalog: TransitCatalog.model, - notifier: notifier, - exporter: GoogleSheetExporter( - sheetsApi: sheetsApi, - scopes: gsExporterScopes, - ), - method: TransitMethod.googleSheet, - ), - )); - await tapBtn(tester); - - expect(find.text(ing), findsOneWidget); - expect(notifier.value, equals(S.transitGSProgressStatusVerifyUser)); - - await tester.tap(find.byKey(const Key('pop'))); - await tester.pumpAndSettle(); - - expect(notifier.value, equals('_finish')); - }); + for (final device in [Device.desktop, Device.mobile]) { + group(device.name, () { + testWidgets('pop preview source', (tester) async { + deviceAs(device, tester); + const ing = '- i1,1\n + q1,1,1,1\n + q2'; + final sheetsApi = getMockSheetsApi(); + final notifier = ValueNotifier(''); + mockSheetData(sheetsApi, [ + ['c1', 'p1', 1, 1], + ['c1', 'p2', 2, 2, ing], + ]); + + await tester.pumpWidget(MaterialApp.router( + routerConfig: GoRouter( + navigatorKey: Routes.rootNavigatorKey, + routes: [ + GoRoute( + path: '/', + builder: (_, __) => TransitStation( + catalog: TransitCatalog.model, + notifier: notifier, + exporter: GoogleSheetExporter( + sheetsApi: sheetsApi, + scopes: gsExporterScopes, + ), + method: TransitMethod.googleSheet, + ), + ), + ], + ), + )); + await tapBtn(tester); + + expect(find.text(ing), findsOneWidget); + expect(notifier.value, equals(S.transitGSProgressStatusVerifyUser)); + + await tester.tap(find.byKey(const Key('pop')).last); + await tester.pumpAndSettle(); + + expect(notifier.value, equals('_finish')); + }); + }); + } testWidgets('menu(commit)', (tester) async { final sheetsApi = getMockSheetsApi(); @@ -238,14 +259,14 @@ void main() { ]); when(cache.set(any, any)).thenAnswer((_) => Future.value(true)); - final btn = find.byIcon(Icons.remove_red_eye_sharp); + final btn = find.byIcon(Icons.remove_red_eye_outlined); await tester.tap(btn.first); - await tester.pumpAndSettle(); + await tester.pump(); verify(cache.set(iCacheKey + '.menu', 'new-sheet 2')); await tester.tap(find.text(S.transitImportPreviewBtn)); - await tester.pumpAndSettle(); + await tester.pump(); for (var e in ['p1', 'p2', 'p3', 'c1', 'c2']) { findText(e, 'staged'); @@ -253,7 +274,7 @@ void main() { expect(find.text(S.transitImportErrorDuplicate), findsOneWidget); await tester.tap(find.byType(ExpansionTile).first); - await tester.pumpAndSettle(); + await tester.pump(); findText('i1', 'stagedIng'); findText('q1', 'stagedQua'); @@ -287,7 +308,7 @@ void main() { await tester.pumpWidget(buildApp(sheetsApi)); await tapBtn(tester, index); await tester.tap(find.text(S.transitImportPreviewBtn)); - await tester.pumpAndSettle(); + await tester.pump(); if (names == null) { for (var item in data) { diff --git a/test/ui/transit/google_sheet/select_spreadsheet_test.dart b/test/ui/transit/google_sheet/select_spreadsheet_test.dart index 7111b532..14784823 100644 --- a/test/ui/transit/google_sheet/select_spreadsheet_test.dart +++ b/test/ui/transit/google_sheet/select_spreadsheet_test.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; +import 'package:go_router/go_router.dart'; import 'package:googleapis/sheets/v4.dart' as gs; import 'package:mockito/mockito.dart'; import 'package:possystem/constants/icons.dart'; @@ -11,6 +12,7 @@ import 'package:possystem/models/repository/order_attributes.dart'; import 'package:possystem/models/repository/quantities.dart'; import 'package:possystem/models/repository/replenisher.dart'; import 'package:possystem/models/repository/stock.dart'; +import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/transit/google_sheet/sheet_namer.dart'; import 'package:possystem/ui/transit/transit_station.dart'; @@ -29,15 +31,20 @@ void main() { const gsExporterScopes = [gs.SheetsApi.driveFileScope, gs.SheetsApi.spreadsheetsScope]; Widget buildApp([CustomMockSheetsApi? sheetsApi]) { - return MaterialApp( - home: TransitStation( - catalog: TransitCatalog.model, - method: TransitMethod.googleSheet, - exporter: GoogleSheetExporter( - sheetsApi: sheetsApi, - scopes: gsExporterScopes, + return MaterialApp.router( + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (context, state) => TransitStation( + catalog: TransitCatalog.model, + method: TransitMethod.googleSheet, + exporter: GoogleSheetExporter( + sheetsApi: sheetsApi, + scopes: gsExporterScopes, + ), + ), ), - ), + ]), ); } diff --git a/test/ui/transit/plain_text/export_basic_test.dart b/test/ui/transit/plain_text/export_basic_test.dart index 465d555a..0e3bfe41 100644 --- a/test/ui/transit/plain_text/export_basic_test.dart +++ b/test/ui/transit/plain_text/export_basic_test.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_test/flutter_test.dart'; +import 'package:go_router/go_router.dart'; import 'package:possystem/helpers/exporter/plain_text_exporter.dart'; import 'package:possystem/models/repository/menu.dart'; import 'package:possystem/models/repository/order_attributes.dart'; @@ -8,6 +9,7 @@ import 'package:possystem/models/repository/quantities.dart'; import 'package:possystem/models/repository/replenisher.dart'; import 'package:possystem/models/repository/stock.dart'; import 'package:possystem/models/stock/quantity.dart'; +import 'package:possystem/routes.dart'; import 'package:possystem/translator.dart'; import 'package:possystem/ui/transit/plain_text/views.dart' as pt; import 'package:possystem/ui/transit/transit_station.dart'; @@ -23,12 +25,17 @@ void main() { .setMockMethodCallHandler(SystemChannels.platform, mockClipboard.handleMethodCall); Widget buildApp() { - return const MaterialApp( - home: TransitStation( - exporter: PlainTextExporter(), - catalog: TransitCatalog.model, - method: TransitMethod.plainText, - ), + return MaterialApp.router( + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ + GoRoute( + path: '/', + builder: (context, state) => const TransitStation( + exporter: PlainTextExporter(), + catalog: TransitCatalog.model, + method: TransitMethod.plainText, + ), + ), + ]), ); } diff --git a/test/ui/transit/transit_order_list_test.dart b/test/ui/transit/transit_order_list_test.dart index 73114651..17c4143c 100644 --- a/test/ui/transit/transit_order_list_test.dart +++ b/test/ui/transit/transit_order_list_test.dart @@ -13,6 +13,7 @@ void main() { final yesterday = DateTime.now().subtract(const Duration(days: 1)); final range = DateTimeRange(start: yesterday, end: DateTime.now()); final widget = TransitOrderList( + leading: const Text(''), notifier: ValueNotifier(range), formatOrder: (o) => const Text('hi'), memoryPredictor: (m) => m.revenue.toInt(), diff --git a/test/ui/transit/transit_page_test.dart b/test/ui/transit/transit_page_test.dart index f3dc9c33..b2e72e9a 100644 --- a/test/ui/transit/transit_page_test.dart +++ b/test/ui/transit/transit_page_test.dart @@ -22,12 +22,12 @@ void main() { when(cache.get(any)).thenReturn(null); await tester.pumpWidget(MaterialApp.router( - routerConfig: GoRouter(routes: [ + routerConfig: GoRouter(navigatorKey: Routes.rootNavigatorKey, routes: [ GoRoute( path: '/', builder: (_, __) => const TransitPage(), - routes: Routes.routes, ), + ...Routes.getDesiredRoute(0).routes, ]), ));