UI: Add mode selection filter to TimeTableScreen (#608)

ksharma-xyz · Feb 12, 2025 · c34d0d3 · c34d0d3
1 parent 9c1ca1a
commit c34d0d3
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 5 deletions.
diff --git a/...c/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/state/timetable/TimeTableUiEvent.kt b/...c/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/state/timetable/TimeTableUiEvent.kt
@@ -20,4 +20,6 @@ sealed interface TimeTableUiEvent {
     data object AnalyticsDateTimeSelectorClicked : TimeTableUiEvent
 
     data class JourneyLegClicked(val expanded: Boolean) : TimeTableUiEvent
+
+    data class ModeSelectionChanged(val x: String) : TimeTableUiEvent
 }
diff --git a/feature/trip-planner/ui/src/commonMain/composeResources/drawable/ic_check.xml b/feature/trip-planner/ui/src/commonMain/composeResources/drawable/ic_check.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="52dp"
+    android:height="52dp"
+    android:viewportWidth="52"
+    android:viewportHeight="52">
+  <path
+      android:pathData="M19.5,35.035L10.465,26L7.388,29.055L19.5,41.166L45.5,15.166L42.445,12.111L19.5,35.035Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/...src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableDestination.kt b/...src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableDestination.kt
@@ -80,6 +80,10 @@ internal fun NavGraphBuilder.timeTableDestination(navController: NavHostControll
             onJourneyLegClick = { journeyId ->
                 viewModel.onEvent(TimeTableUiEvent.JourneyLegClicked(journeyId))
             },
+            onModeSelectionChanged = { unselectedModes ->
+                log(unselectedModes.toString())
+                viewModel.onEvent(TimeTableUiEvent.ModeSelectionChanged(""))
+            }
         )
     }
 }

diff --git a/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt b/...r/ui/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt
@@ -27,10 +27,8 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.saveable.listSaver
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.runtime.toMutableStateList
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -42,14 +40,15 @@ import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toImmutableList
-import kotlinx.collections.immutable.toPersistentList
 import krail.feature.trip_planner.ui.generated.resources.Res
 import krail.feature.trip_planner.ui.generated.resources.ic_filter
 import krail.feature.trip_planner.ui.generated.resources.ic_reverse
 import krail.feature.trip_planner.ui.generated.resources.ic_star
+import krail.feature.trip_planner.ui.generated.resources.ic_check
 import krail.feature.trip_planner.ui.generated.resources.ic_star_filled
 import org.jetbrains.compose.resources.painterResource
 import xyz.ksharma.krail.taj.LocalThemeColor
+import xyz.ksharma.krail.taj.components.Button
 import xyz.ksharma.krail.taj.components.ButtonDefaults
 import xyz.ksharma.krail.taj.components.SubtleButton
 import xyz.ksharma.krail.taj.components.Text
@@ -83,6 +82,7 @@ fun TimeTableScreen(
     onJourneyLegClick: (Boolean) -> Unit,
     modifier: Modifier = Modifier,
     dateTimeSelectorClicked: () -> Unit = {},
+    onModeSelectionChanged: (Set<Int>) -> Unit = {},
 ) {
     val themeColorHex by LocalThemeColor.current
     val themeColor = themeColorHex.hexToComposeColor()
@@ -191,6 +191,7 @@ fun TimeTableScreen(
                         dimensions = ButtonDefaults.mediumButtonSize(),
                     ) {
                         Row(
+                            //todo -  handle in Button
                             horizontalArrangement = Arrangement.spacedBy(4.dp),
                             verticalAlignment = Alignment.CenterVertically,
                         ) {
@@ -223,6 +224,7 @@ fun TimeTableScreen(
                                 transportMode = it,
                                 selected = !unselectedModesProductClass.contains(it.productClass),
                                 onClick = {
+                                    // Toggle / Set behavior
                                     if (unselectedModesProductClass.contains(it.productClass)) {
                                         unselectedModesProductClass.remove(it.productClass)
                                     } else {
@@ -233,14 +235,40 @@ fun TimeTableScreen(
                         }
                     }
                 }
+
+                item("mode-selection-confirm-button") {
+                    Button(
+                        dimensions = ButtonDefaults.largeButtonSize(),
+                        onClick = {
+                            displayModeSelectionRow = false
+                            onModeSelectionChanged(unselectedModesProductClass.toSet())
+                        },
+                        modifier = Modifier
+                            .padding(vertical = 8.dp, horizontal = 12.dp)
+                            .animateItem()
+                    ) {
+                        //todo -  handle in Button
+                        Row(
+                            horizontalArrangement = Arrangement.spacedBy(4.dp),
+                            verticalAlignment = Alignment.CenterVertically,
+                        ) {
+                            Image(
+                                painter = painterResource(Res.drawable.ic_check),
+                                contentDescription = null,
+                                modifier = Modifier.size(20.dp),
+                            )
+                            Text("Done", modifier = Modifier.padding(start = 4.dp))
+                        }
+                    }
+                }
             }
 
             item {
                 Spacer(modifier = Modifier.height(8.dp))
             }
 
             if (timeTableState.isError) {
-                item {
+                item("error") {
                     ErrorMessage(
                         title = "Eh! That's not looking right mate!",
                         message = "Let's try again.",

diff --git a/...i/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableViewModel.kt b/...i/src/commonMain/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableViewModel.kt
@@ -148,9 +148,15 @@ class TimeTableViewModel(
             is TimeTableUiEvent.JourneyLegClicked -> {
                 analytics.track(AnalyticsEvent.JourneyLegClickEvent(expanded = event.expanded))
             }
+
+            is TimeTableUiEvent.ModeSelectionChanged -> onModeSelectionChanged()
         }
     }
 
+    private fun onModeSelectionChanged() {
+
+    }
+
     private fun onDateTimeSelectionChanged(item: DateTimeSelectionItem?) {
         log("DateTimeSelectionChanged: $item")
         // Verify if date time selection has actually changed, otherwise, api will be called unnecessarily.

diff --git a/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt b/taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt
@@ -47,7 +47,7 @@ fun Button(
     colors: ButtonColors = ButtonDefaults.buttonColors(),
     dimensions: ButtonDimensions = ButtonDefaults.largeButtonSize(),
     enabled: Boolean = true,
-    content: @Composable () -> Unit,
+    content: @Composable () -> Unit, // RowScope and place
 ) {
     val contentAlphaProvider =
         rememberSaveable(enabled) { if (enabled) EnabledContentAlpha else DisabledContentAlpha }