Merge pull request #14671 from woocommerce/issue/WOOMOB-1237-booking-list-sorting-ui

irfano · web-flow · commit c513ed067390 · 2025-10-03T18:43:47.000+03:00
[Bookings] Add "Sort by" UI to booking list screen
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingListScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingListScreen.kt
@@ -2,12 +2,17 @@ package com.woocommerce.android.ui.bookings.list
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.lazy.LazyColumn
@@ -17,12 +22,14 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
@@ -35,6 +42,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
@@ -59,6 +67,7 @@ fun BookingListScreen(viewModel: BookingListViewModel) {
 
 @Composable
 fun BookingListScreen(state: BookingListViewState) {
+    state.sortBottomSheetState?.let { BookingSortBottomSheet(it) }
     Scaffold(
         topBar = {
             Toolbar(
@@ -90,6 +99,8 @@ fun BookingListScreen(state: BookingListViewState) {
                     state.tabState.onTabChanged(it)
                 }
             )
+            BookingListControls(state.controlsState)
+            HorizontalDivider(thickness = 0.5.dp)
 
             when {
                 state.contentState.isNotEmpty() -> {
@@ -227,6 +238,51 @@ private fun BookingList(
     }
 }
 
+@Composable
+private fun BookingListControls(
+    state: BookingListControlsState,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(MaterialTheme.colorScheme.surface)
+            .padding(horizontal = 8.dp, vertical = 4.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        OutlinedButton(
+            modifier = Modifier.defaultMinSize(minHeight = 36.dp),
+            contentPadding = PaddingValues(start = 16.dp, end = 8.dp),
+            onClick = state.onSortClick,
+        ) {
+            Text(
+                text = state.selectedSortOption.shortName(),
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
+            )
+            Spacer(modifier = Modifier.width(8.dp))
+            Icon(
+                painter = painterResource(id = R.drawable.ic_arrow_drop_down),
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant
+            )
+        }
+        OutlinedButton(
+            modifier = Modifier.defaultMinSize(minWidth = 88.dp, minHeight = 36.dp),
+            contentPadding = PaddingValues(horizontal = 16.dp),
+            colors = ButtonDefaults.outlinedButtonColors().copy(
+                contentColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
+            ),
+            onClick = state.onFilterClick,
+        ) {
+            Text(
+                text = stringResource(R.string.bookings_filters_default_title),
+                style = MaterialTheme.typography.bodyMedium,
+            )
+        }
+    }
+}
+
 @Composable
 private fun BookingListTab.name(): String = when (this) {
     BookingListTab.Today -> stringResource(R.string.bookings_tab_today)
@@ -262,6 +318,12 @@ private fun BookingListPreview() {
                     selectedTab = BookingListTab.Today,
                     onTabChanged = {}
                 ),
+                controlsState = BookingListControlsState(
+                    selectedSortOption = BookingListSortOption.NewestToOldest,
+                    onSortClick = {},
+                    onFilterClick = {}
+                ),
+                sortBottomSheetState = null,
                 searchState = BookingListSearchState(
                     query = null,
                     onQueryChanged = {}
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingListViewModel.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingListViewModel.kt
@@ -38,6 +38,16 @@ class BookingListViewModel @Inject constructor(
         key = "searchQuery"
     )
 
+    private val sortOptionsByTab = MutableStateFlow(
+        mapOf(
+            BookingListTab.Today to BookingListSortOption.NewestToOldest,
+            BookingListTab.Upcoming to BookingListSortOption.NewestToOldest,
+            BookingListTab.All to BookingListSortOption.NewestToOldest,
+        )
+    )
+
+    private val isSortSheetVisible = MutableStateFlow(false)
+
     private var bookingsFetchJob: Job? = null
     private var bookingsLoadMoreJob: Job? = null
 
@@ -65,14 +75,31 @@ class BookingListViewModel @Inject constructor(
     val state = combine(
         contentState,
         selectedTab,
+        sortOptionsByTab,
+        isSortSheetVisible,
         searchState
-    ) { contentState, selectedTab, searchState ->
+    ) { contentState, selectedTab, sortOptionsByTab, sheetVisible, searchState ->
+        val sortOption = sortOptionsByTab[selectedTab] ?: BookingListSortOption.NewestToOldest
         BookingListViewState(
             contentState = contentState,
             tabState = BookingListTabState(
                 selectedTab = selectedTab,
                 onTabChanged = ::onTabChanged
             ),
+            controlsState = BookingListControlsState(
+                selectedSortOption = sortOption,
+                onSortClick = ::onSortClicked,
+                onFilterClick = ::onFilterClicked
+            ),
+            sortBottomSheetState = if (sheetVisible) {
+                BookingListSortBottomSheetState(
+                    selectedOption = sortOption,
+                    onSelect = ::onSortOptionSelected,
+                    onDismiss = ::onSortDismiss
+                )
+            } else {
+                null
+            },
             searchState = searchState
         )
     }.asLiveData()
@@ -138,6 +165,26 @@ class BookingListViewModel @Inject constructor(
         selectedTab.value = tab
     }
 
+    private fun onSortClicked() {
+        isSortSheetVisible.value = true
+    }
+
+    private fun onSortOptionSelected(option: BookingListSortOption) {
+        val tab = selectedTab.value
+        sortOptionsByTab.value = sortOptionsByTab.value.toMutableMap()
+            .also { it[tab] = option }
+        isSortSheetVisible.value = false
+        // TODO Apply the selected sorting to the data for the active tab
+    }
+
+    private fun onSortDismiss() {
+        isSortSheetVisible.value = false
+    }
+
+    private fun onFilterClicked() {
+        // TODO Show filter bottom sheet
+    }
+
     private fun prepareFilters(): List<BookingsFilterOption> = with(filtersBuilder) {
         listOfNotNull(
             selectedTab.value.asDateRangeFilter()
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingListViewState.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingListViewState.kt
@@ -12,6 +12,8 @@ import java.time.format.FormatStyle
 data class BookingListViewState(
     val contentState: BookingListContentState,
     val tabState: BookingListTabState,
+    val controlsState: BookingListControlsState,
+    val sortBottomSheetState: BookingListSortBottomSheetState?,
     val searchState: BookingListSearchState
 ) {
     // TODO combine with other filters when available
@@ -42,6 +44,12 @@ data class BookingListTabState(
     val onTabChanged: (BookingListTab) -> Unit
 )
 
+data class BookingListControlsState(
+    val selectedSortOption: BookingListSortOption,
+    val onSortClick: () -> Unit,
+    val onFilterClick: () -> Unit
+)
+
 data class BookingListItem(
     val id: Long,
     val summary: BookingSummaryModel
@@ -55,6 +63,16 @@ enum class BookingListTab {
     Today, Upcoming, All
 }
 
+enum class BookingListSortOption {
+    NewestToOldest, OldestToNewest
+}
+
+data class BookingListSortBottomSheetState(
+    val selectedOption: BookingListSortOption,
+    val onSelect: (BookingListSortOption) -> Unit,
+    val onDismiss: () -> Unit
+)
+
 fun Booking.toUiModel(): BookingListItem {
     val dateFormatter = DateTimeFormatter.ofLocalizedDateTime(
         FormatStyle.MEDIUM,
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingSortBottomSheet.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/list/BookingSortBottomSheet.kt
@@ -0,0 +1,82 @@
+package com.woocommerce.android.ui.bookings.list
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.woocommerce.android.R
+import com.woocommerce.android.ui.compose.component.WCModalBottomSheet
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BookingSortBottomSheet(state: BookingListSortBottomSheetState) {
+    val sheetState = rememberModalBottomSheetState()
+    WCModalBottomSheet(
+        sheetState = sheetState,
+        onDismissRequest = state.onDismiss
+    ) {
+        Column(
+            modifier = Modifier
+                .padding(bottom = 16.dp)
+                .verticalScroll(rememberScrollState())
+        ) {
+            Text(
+                modifier = Modifier.padding(horizontal = 16.dp),
+                text = stringResource(id = R.string.product_list_sorting_header),
+                style = MaterialTheme.typography.titleSmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant
+            )
+            Spacer(modifier = Modifier.size(16.dp))
+            BookingListSortOption.entries.forEach { option ->
+                ListItem(
+                    modifier = Modifier.clickable { state.onSelect(option) },
+                    colors = ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainerLow),
+                    headlineContent = {
+                        Text(
+                            text = option.name(),
+                            fontWeight = FontWeight.Medium
+                        )
+                    },
+                    trailingContent = {
+                        if (state.selectedOption == option) {
+                            Image(
+                                modifier = Modifier.padding(end = 12.dp),
+                                imageVector = ImageVector.vectorResource(R.drawable.ic_check),
+                                contentDescription = stringResource(R.string.product_list_sorting_list_item),
+                            )
+                        }
+                    }
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun BookingListSortOption.name() = when (this) {
+    BookingListSortOption.NewestToOldest -> stringResource(R.string.bookings_sort_by_newest_to_oldest)
+    BookingListSortOption.OldestToNewest -> stringResource(R.string.bookings_sort_by_oldest_to_newest)
+}
+
+@Composable
+fun BookingListSortOption.shortName() = when (this) {
+    BookingListSortOption.NewestToOldest -> stringResource(R.string.bookings_sort_by_newest_to_oldest_short)
+    BookingListSortOption.OldestToNewest -> stringResource(R.string.bookings_sort_by_oldest_to_newest_short)
+}
diff --git a/WooCommerce/src/main/res/drawable/ic_check.xml b/WooCommerce/src/main/res/drawable/ic_check.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="15dp"
+    android:height="15dp"
+    android:viewportWidth="15"
+    android:viewportHeight="15">
+    <path
+        android:fillColor="@color/woo_purple_40"
+        android:pathData="M5.819,14.411c-0.415,0 -0.722,-0.174 -1.013,-0.531L0.506,8.5C0.3,8.244 0.208,8.003 0.208,7.754c0,-0.573 0.423,-0.988 1.004,-0.988 0.365,0 0.614,0.133 0.855,0.457l3.719,4.773L12.999,0.54c0.249,-0.39 0.49,-0.532 0.896,-0.532 0.582,0 0.98,0.399 0.98,0.971 0,0.225 -0.066,0.457 -0.24,0.723L6.831,13.872a1.15,1.15 0,0 1,-1.013 0.54" />
+</vector>
diff --git a/WooCommerce/src/main/res/values/strings.xml b/WooCommerce/src/main/res/values/strings.xml
@@ -4130,6 +4130,12 @@
     <string name="bookings_tab_all">All</string>
     <string name="bookings_search_hint">Search bookings</string>
     <string name="bookings_search_with_filters_hint">Search filtered bookings</string>
+    <string name="bookings_sort_by_oldest_to_newest">Oldest to newest</string>
+    <string name="bookings_sort_by_newest_to_oldest">Newest to oldest</string>
+    <string name="bookings_sort_by_oldest_to_newest_short">Oldest</string>
+    <string name="bookings_sort_by_newest_to_oldest_short">Newest</string>
+    <string name="bookings_filters_default_title">Filters</string>
+    <string name="bookings_filters_count_title">Filters (%d)</string>
 
     <!-- Booking details view-->
     <string name="booking_details_title">Booking #%s</string>
diff --git a/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/bookings/list/BookingListViewModelTest.kt b/WooCommerce/src/test/kotlin/com/woocommerce/android/ui/bookings/list/BookingListViewModelTest.kt
