feat(mobile-app): Updated catalog search route ui content for book mode

marlonlom · Mar 18, 2024 · cf21a05 · cf21a05
1 parent 8b0389b
commit cf21a05
Show file tree

Hide file tree

Showing 4 changed files with 247 additions and 36 deletions.
diff --git a/.../src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/CatalogSearchRoute.kt b/.../src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/CatalogSearchRoute.kt
@@ -6,61 +6,44 @@
 package dev.marlonlom.apps.cappajv.features.catalog_search
 
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import dev.marlonlom.apps.cappajv.features.catalog_search.parts.CatalogSearchHeadline
-import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchInputSlot
-import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchResultsSlot
+import dev.marlonlom.apps.cappajv.features.catalog_search.screens.CatalogSearchRouteScreen
 import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
 import org.koin.androidx.compose.koinViewModel
 import timber.log.Timber
 
+/**
+ * Catalog search route composable ui.
+ *
+ * @author marlonlom
+ *
+ * @param appState Application ui state.
+ * @param viewModel Catalog search viewmodel.
+ */
 @ExperimentalFoundationApi
 @Composable
 fun CatalogSearchRoute(
   appState: CappajvAppState,
   viewModel: CatalogSearchViewModel = koinViewModel(),
 ) {
-  val contentHorizontalPadding = when {
-    appState.isLandscape.not().and(appState.isMediumWidth) -> 40.dp
-    appState.isLandscape.not().and(appState.isExpandedWidth) -> 80.dp
-    else -> 20.dp
-  }
-
   val queryText = rememberSaveable { viewModel.queryText }
   val showClearIcon = remember {
     derivedStateOf { viewModel.queryText.value.isNotEmpty() }
   }
-
   val searchResultState by viewModel.searchResult.collectAsStateWithLifecycle()
-
-  Column(
-    modifier = Modifier
-      .fillMaxWidth()
-      .padding(contentHorizontalPadding)
-  ) {
-    CatalogSearchHeadline(appState)
-    CatalogSearchInputSlot(
-      appState = appState,
-      queryText = queryText,
-      showClearIcon = showClearIcon,
-      onSearchReady = viewModel::onQueryTextChanged,
-    )
-    CatalogSearchResultsSlot(
-      appState = appState,
-      searchResultUiState = searchResultState,
-      onSearchedItemClicked = {
-        Timber.d("[CatalogSearchRoute] clicked item[$it] ")
-      },
-    )
-  }
+  CatalogSearchRouteScreen(
+    appState = appState,
+    queryText = queryText,
+    showClearIcon = showClearIcon,
+    onSearchReady = viewModel::onQueryTextChanged,
+    searchResultUiState = searchResultState,
+    onSearchedItemClicked = {
+      Timber.d("[CatalogSearchRoute] clicked item[$it] ")
+    },
+  )
 }
diff --git a/...in/dev/marlonlom/apps/cappajv/features/catalog_search/screens/CatalogSearchRouteScreen.kt b/...in/dev/marlonlom/apps/cappajv/features/catalog_search/screens/CatalogSearchRouteScreen.kt
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2024 Marlonlom
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package dev.marlonlom.apps.cappajv.features.catalog_search.screens
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.State
+import dev.marlonlom.apps.cappajv.features.catalog_search.CatalogSearchUiState
+import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
+import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
+import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType
+
+/**
+ * Catalog search route screen content composable ui.
+ *
+ * @author marlonlom
+ *
+ * @param appState Application ui state.
+ * @param queryText Query text for searching.
+ * @param showClearIcon True/False if query text should be cleared.
+ * @param onSearchReady Action for query text ready for search.
+ * @param searchResultUiState Catalog search results ui state.
+ * @param onSearchedItemClicked Action for searched item clicked.
+ */
+@ExperimentalFoundationApi
+@Composable
+fun CatalogSearchRouteScreen(
+  appState: CappajvAppState,
+  queryText: MutableState<String>,
+  showClearIcon: State<Boolean>,
+  onSearchReady: () -> Unit,
+  searchResultUiState: CatalogSearchUiState,
+  onSearchedItemClicked: (Long) -> Unit,
+) {
+  when {
+    appState.isLandscape
+      .and(appState.devicePosture is DevicePosture.Separating.Book)
+      .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> {
+      LandscapeTwoPaneCatalogSearchScreen(
+        appState = appState,
+        queryText = queryText,
+        showClearIcon = showClearIcon,
+        onSearchReady = onSearchReady,
+        searchResultUiState = searchResultUiState,
+        onSearchedItemClicked = onSearchedItemClicked
+      )
+    }
+
+    appState.isLandscape
+      .and(appState.devicePosture == DevicePosture.Normal)
+      .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> {
+      LandscapeTwoPaneCatalogSearchScreen(
+        appState = appState,
+        queryText = queryText,
+        showClearIcon = showClearIcon,
+        onSearchReady = onSearchReady,
+        searchResultUiState = searchResultUiState,
+        onSearchedItemClicked = onSearchedItemClicked
+      )
+    }
+
+    else -> {
+      DefaultPortraitCatalogSearchScreen(
+        appState = appState,
+        queryText = queryText,
+        showClearIcon = showClearIcon,
+        onSearchReady = onSearchReady,
+        searchResultUiState = searchResultUiState,
+        onSearchedItemClicked = onSearchedItemClicked
+      )
+    }
+  }
+}
diff --git a/...lonlom/apps/cappajv/features/catalog_search/screens/DefaultPortraitCatalogSearchScreen.kt b/...lonlom/apps/cappajv/features/catalog_search/screens/DefaultPortraitCatalogSearchScreen.kt
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2024 Marlonlom
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package dev.marlonlom.apps.cappajv.features.catalog_search.screens
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.State
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import dev.marlonlom.apps.cappajv.features.catalog_search.CatalogSearchUiState
+import dev.marlonlom.apps.cappajv.features.catalog_search.parts.CatalogSearchHeadline
+import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchInputSlot
+import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchResultsSlot
+import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
+
+/**
+ * Default portrait catalog search screen composable ui.
+ *
+ * @author marlonlom
+ *
+ * @param appState Application ui state.
+ * @param queryText Query text for searching.
+ * @param showClearIcon True/False if query text should be cleared.
+ * @param onSearchReady Action for query text ready for search.
+ * @param searchResultUiState Catalog search results ui state.
+ * @param onSearchedItemClicked Action for searched item clicked.
+ */
+@ExperimentalFoundationApi
+@Composable
+internal fun DefaultPortraitCatalogSearchScreen(
+  appState: CappajvAppState,
+  queryText: MutableState<String>,
+  showClearIcon: State<Boolean>,
+  onSearchReady: () -> Unit,
+  searchResultUiState: CatalogSearchUiState,
+  onSearchedItemClicked: (Long) -> Unit
+) {
+  val contentHorizontalPadding = when {
+    appState.isLandscape.not().and(appState.isMediumWidth) -> 40.dp
+    appState.isLandscape.not().and(appState.isExpandedWidth) -> 80.dp
+    else -> 20.dp
+  }
+
+  Column(
+    modifier = Modifier
+      .fillMaxWidth()
+      .padding(contentHorizontalPadding)
+  ) {
+    CatalogSearchHeadline(appState)
+    CatalogSearchInputSlot(
+      appState = appState,
+      queryText = queryText,
+      showClearIcon = showClearIcon,
+      onSearchReady = onSearchReady,
+    )
+    CatalogSearchResultsSlot(
+      appState = appState,
+      searchResultUiState = searchResultUiState,
+      onSearchedItemClicked = onSearchedItemClicked,
+    )
+  }
+}
diff --git a/...onlom/apps/cappajv/features/catalog_search/screens/LandscapeTwoPaneCatalogSearchScreen.kt b/...onlom/apps/cappajv/features/catalog_search/screens/LandscapeTwoPaneCatalogSearchScreen.kt
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2024 Marlonlom
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package dev.marlonlom.apps.cappajv.features.catalog_search.screens
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeContentPadding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.State
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import dev.marlonlom.apps.cappajv.features.catalog_search.CatalogSearchUiState
+import dev.marlonlom.apps.cappajv.features.catalog_search.parts.CatalogSearchHeadline
+import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchInputSlot
+import dev.marlonlom.apps.cappajv.features.catalog_search.slots.CatalogSearchResultsSlot
+import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
+
+/**
+ * Landscape two-pane catalog search screen composable ui.
+ *
+ * @author marlonlom
+ *
+ * @param appState Application ui state.
+ * @param queryText Query text for searching.
+ * @param showClearIcon True/False if query text should be cleared.
+ * @param onSearchReady Action for query text ready for search.
+ * @param searchResultUiState Catalog search results ui state.
+ * @param onSearchedItemClicked Action for searched item clicked.
+ */
+@ExperimentalFoundationApi
+@Composable
+internal fun LandscapeTwoPaneCatalogSearchScreen(
+  appState: CappajvAppState,
+  queryText: MutableState<String>,
+  showClearIcon: State<Boolean>,
+  onSearchReady: () -> Unit,
+  searchResultUiState: CatalogSearchUiState,
+  onSearchedItemClicked: (Long) -> Unit
+) {
+  Row {
+    Column(
+      modifier = Modifier
+        .fillMaxWidth(0.45f)
+        .fillMaxHeight()
+        .padding(horizontal = 20.dp),
+    ) {
+      CatalogSearchHeadline(appState)
+      CatalogSearchInputSlot(
+        appState = appState,
+        queryText = queryText,
+        showClearIcon = showClearIcon,
+        onSearchReady = onSearchReady,
+      )
+      CatalogSearchResultsSlot(
+        appState = appState,
+        searchResultUiState = searchResultUiState,
+        onSearchedItemClicked = onSearchedItemClicked,
+      )
+    }
+    Column(
+      modifier = Modifier
+        .background(MaterialTheme.colorScheme.primaryContainer)
+        .fillMaxSize()
+        .safeContentPadding(),
+    ) {
+      Text(text = "Detail")
+    }
+  }
+}
+