[Woo POS][Historical Orders] Order List and Details Empty and Error States (Wireframe UI) #16122
Conversation
Generated by 🚫 Danger |
|
|
There was a problem hiding this comment.
Works as expected, thanks.
A few small suggestions inline... and a bigger one:
On the main item list, if we get a failure to load the first page, we show a full-screen error view. That's a bit of a pain to do in the code, but I do think it looks better than showing an error only in the left hand pane.
Do you think we should do the same thing here? If not, what benefit do we get from keeping the split view?
| orderListModel.ordersController.selectOrder(order) | ||
| }) { | ||
| OrderRowView(order: order, isSelected: orderListModel.ordersController.selectedOrder?.id == order.id) | ||
| VStack(spacing: POSSpacing.small) { |
There was a problem hiding this comment.
Is a VStack needed here? I don't think it ever has more than one view in it.
That said, Group can be weird, so as a container it might be the best option. Not sure why we'd need a spacing setting, though?
There was a problem hiding this comment.
Yes, you're right, we don't need any container for these views here. 👍
| InfiniteScrollView( | ||
| triggerDeterminer: infiniteScrollTriggerDeterminer, | ||
| loadMore: { | ||
| guard case .loaded(_, let hasMoreItems) = ordersViewState, hasMoreItems else { return } | ||
| await orderListModel.ordersController.loadNextOrders() | ||
| }, | ||
| content: { | ||
| LazyVStack(spacing: POSSpacing.small) { | ||
| headerRows | ||
|
|
||
| let orders = ordersViewState.orders | ||
| ForEach(orders, id: \.id) { order in | ||
| Button(action: { | ||
| orderListModel.ordersController.selectOrder(order) | ||
| }) { | ||
| OrderRowView(order: order, isSelected: orderListModel.ordersController.selectedOrder?.id == order.id) | ||
| } | ||
| .buttonStyle(PlainButtonStyle()) | ||
| } | ||
| .buttonStyle(PlainButtonStyle()) | ||
| .animation(.default, value: orders.first?.id) | ||
|
|
||
| footerRows | ||
| } | ||
| .animation(.default, value: orders.first?.id) | ||
| .padding(.horizontal) | ||
| .padding(.bottom, POSPadding.medium) | ||
| } | ||
|
|
||
| footerRows | ||
| } | ||
| .padding(.horizontal) | ||
| ) | ||
| .scrollDismissesKeyboard(.immediately) |
There was a problem hiding this comment.
Perhaps consider extracting this to a subview for readability now...
| @@ -385,6 +389,23 @@ final class PointOfSalePreviewOrderListController: PointOfSaleSearchingOrderList | |||
| func clearSearchOrders() {} | |||
| } | |||
|
|
|||
| final class PointOfSaleConfigurablePreviewOrderListController: PointOfSaleSearchingOrderListControllerProtocol { | |||
There was a problem hiding this comment.
| final class PointOfSaleConfigurablePreviewOrderListController: PointOfSaleSearchingOrderListControllerProtocol { | |
| final class POSConfigurablePreviewOrderListController: POSSearchingOrderListControllerProtocol { |
| } | ||
| } | ||
|
|
||
| struct PointOfSaleItemListEmptyViewModel: POSListEmptyViewModelProtocol { |
There was a problem hiding this comment.
| struct PointOfSaleItemListEmptyViewModel: POSListEmptyViewModelProtocol { | |
| struct POSListEmptyViewModel: POSListEmptyViewModelProtocol { |
|
@joshheald, thanks for the review!
Yes, that could definitely be done; we could keep things consistent across the app. |
…list-empty-loading-and-error
…list-empty-loading-and-error
staskus
force-pushed
the
woomob-1136-woo-poshistorical-orders-order-list-empty-loading-and-error
branch
from
4cc899a to
b8ef8ca
Compare
staskus
deleted the
woomob-1136-woo-poshistorical-orders-order-list-empty-loading-and-error
branch
WOOMOB-1136
Description
Orders List
Adopting the same type of error, empty, and inline errors as the Items list. For reusability:
POSListEmptyView, POSListErrorView,POSListInlineErrorView`, and made a few refactoring for reusability.POSListInlineErrorViewsince it has to fit in a narrower list.Steps to reproduce
Test POS with:
Testing information
Tested on iPad Air 26 simulator
Screenshots
RELEASE-NOTES.txtif necessary.