Skip to content

[Dynamic Dashboard] Make order items clickable #11554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 21, 2024
Merged

[Dynamic Dashboard] Make order items clickable #11554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cbf2d2a
Make orders clickable
0nko May 20, 2024
7bbfbad
Filter trashed orders to prevent a crash
0nko May 20, 2024
6812b94
Open order list and then order details when order clicked in the dash…
0nko May 20, 2024
04b14d8
Simplify navigation
0nko May 20, 2024
adb175b
Fix the build
0nko May 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 35 additions & 11 deletions ...mmerce/src/main/kotlin/com/woocommerce/android/ui/dashboard/orders/DashboardOrdersCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
package com.woocommerce.android.ui.dashboard.orders

import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
Expand All @@ -21,6 +23,7 @@ import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.lifecycle.LiveData
import androidx.lifecycle.Observer
import androidx.navigation.NavController
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.navOptions
import com.woocommerce.android.R
Expand All @@ -33,12 +36,14 @@ import com.woocommerce.android.ui.dashboard.DashboardFilterableCardHeader
import com.woocommerce.android.ui.dashboard.DashboardViewModel
import com.woocommerce.android.ui.dashboard.WidgetCard
import com.woocommerce.android.ui.dashboard.WidgetError
import com.woocommerce.android.ui.dashboard.orders.DashboardOrdersViewModel.NavigateToOrderDetails
import com.woocommerce.android.ui.dashboard.orders.DashboardOrdersViewModel.NavigateToOrders
import com.woocommerce.android.ui.dashboard.orders.DashboardOrdersViewModel.ViewState.Content
import com.woocommerce.android.ui.dashboard.orders.DashboardOrdersViewModel.ViewState.Error
import com.woocommerce.android.ui.dashboard.orders.DashboardOrdersViewModel.ViewState.Loading
import com.woocommerce.android.ui.dashboard.orders.DashboardOrdersViewModel.ViewState.OrderItem
import com.woocommerce.android.ui.orders.filters.data.OrderStatusOption
import com.woocommerce.android.ui.orders.list.OrderListFragmentDirections
import com.woocommerce.android.viewmodel.MultiLiveEvent.Event

@Composable
Expand All @@ -63,7 +68,8 @@ fun DashboardOrdersCard(
selectedFilter = state.selectedFilter,
filterOptions = state.filterOptions,
onFilterSelected = viewModel::onFilterSelected,
orders = state.orders
orders = state.orders,
onOrderClicked = { order -> viewModel.onOrderClicked(order.id) }
)
}
is Error -> WidgetError(
Expand All @@ -82,20 +88,32 @@ fun DashboardOrdersCard(
private fun HandleEvents(
event: LiveData<Event>
) {
fun NavController.navigateToOrders() {
navigateSafely(
resId = R.id.orders,
navOptions = navOptions {
popUpTo(graph.findStartDestination().id) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious why do you need these navOptions?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It fixes an issue when you try to tap on the bottom navigation, which doesn't work without the above. Hicham found this solution here.

saveState = true
}
}
)
}

val navController = rememberNavController()
val lifecycleOwner = LocalLifecycleOwner.current

DisposableEffect(event, navController, lifecycleOwner) {
val observer = Observer { event: Event ->
when (event) {
is NavigateToOrders -> {
navController.navigateToOrders()
}
is NavigateToOrderDetails -> {
navController.navigateToOrders()
navController.navigateSafely(
resId = R.id.orders,
navOptions = navOptions {
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
}
directions = OrderListFragmentDirections
.actionOrderListFragmentToOrderDetailFragment(event.orderId, longArrayOf()),
skipThrottling = true
)
}
}
Expand Down Expand Up @@ -134,7 +152,8 @@ fun TopOrders(
selectedFilter: OrderStatusOption,
filterOptions: List<OrderStatusOption>,
onFilterSelected: (OrderStatusOption) -> Unit,
orders: List<OrderItem>
orders: List<OrderItem>,
onOrderClicked: (OrderItem) -> Unit
) {
Column {
Header(
Expand All @@ -143,7 +162,7 @@ fun TopOrders(
onFilterSelected = onFilterSelected
)
orders.forEach { order ->
OrderListItem(order)
OrderListItem(order, onOrderClicked)

Divider(
modifier = Modifier
Expand Down Expand Up @@ -234,10 +253,12 @@ private fun LoadingItem() {

@Suppress("DestructuringDeclarationWithTooManyEntries")
@Composable
private fun OrderListItem(order: OrderItem) {
private fun OrderListItem(order: OrderItem, onOrderClicked: (OrderItem) -> Unit) {
ConstraintLayout(
modifier = Modifier
.fillMaxWidth()
.focusable(true)
.clickable(onClick = { onOrderClicked(order) })
.padding(16.dp)
) {
val (number, date, name, status, total) = createRefs()
Expand Down Expand Up @@ -306,6 +327,7 @@ fun PreviewTopOrders() {
TopOrders(
orders = listOf(
OrderItem(
id = 0L,
number = "123",
date = "2021-09-01",
customerName = "John Doe",
Expand All @@ -314,6 +336,7 @@ fun PreviewTopOrders() {
totalPrice = "$100.00"
),
OrderItem(
id = 0L,
number = "124",
date = "2021-09-02",
customerName = "Jane Doe",
Expand Down Expand Up @@ -342,7 +365,8 @@ fun PreviewTopOrders() {
isSelected = false
)
),
onFilterSelected = {}
onFilterSelected = {},
onOrderClicked = {}
)
}

Expand Down
7 changes: 7 additions & 0 deletions ...e/src/main/kotlin/com/woocommerce/android/ui/dashboard/orders/DashboardOrdersViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ class DashboardOrdersViewModel @AssistedInject constructor(
.first { option -> option.key == order.status.value }.label

ViewState.OrderItem(
id = order.id,
number = "#${order.number}",
date = order.dateCreated.formatToMMMdd(),
customerName = order.billingName.ifEmpty {
Expand Down Expand Up @@ -175,6 +176,10 @@ class DashboardOrdersViewModel @AssistedInject constructor(
selectedFilter.value = filter.key
}

fun onOrderClicked(orderId: Long) {
triggerEvent(NavigateToOrderDetails(orderId))
}

sealed class ViewState {
data object Loading : ViewState()
data class Error(val message: String) : ViewState()
Expand All @@ -187,6 +192,7 @@ class DashboardOrdersViewModel @AssistedInject constructor(
@StringRes val title: Int = ORDERS.titleResource

data class OrderItem(
val id: Long,
val number: String,
val date: String,
val customerName: String,
Expand All @@ -202,4 +208,5 @@ class DashboardOrdersViewModel @AssistedInject constructor(
}

data object NavigateToOrders : MultiLiveEvent.Event()
data class NavigateToOrderDetails(val orderId: Long) : MultiLiveEvent.Event()
}
3 changes: 2 additions & 1 deletion WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/list/OrderListRepository.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ class OrderListRepository @Inject constructor(
) {
companion object {
private const val TAG = "OrderListRepository"
private const val ORDER_STATUS_TRASH = "trash"
}

private var isFetchingOrderStatusOptions = false
Expand Down Expand Up @@ -134,7 +135,7 @@ class OrderListRepository @Inject constructor(
if (!isForced) {
orderStore.getOrdersForSite(selectedSite.get())
.asSequence()
.filter { statusFilter == null || it.status == statusFilter.value }
.filter { it.status != ORDER_STATUS_TRASH && (statusFilter == null || it.status == statusFilter.value) }
.sortedByDescending { it.dateCreated }
.take(count)
.map { orderMapper.toAppModel(it) }
Expand Down
Loading