From cf21a05a860286be63f1e8ae72f7a02f1cc9f936 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marlon=20L=C3=B3pez?= Date: Sun, 17 Mar 2024 20:32:01 -0500 Subject: [PATCH] feat(mobile-app): Updated catalog search route ui content for book mode --- .../catalog_search/CatalogSearchRoute.kt | 55 +++++-------- .../screens/CatalogSearchRouteScreen.kt | 77 +++++++++++++++++ .../DefaultPortraitCatalogSearchScreen.kt | 69 ++++++++++++++++ .../LandscapeTwoPaneCatalogSearchScreen.kt | 82 +++++++++++++++++++ 4 files changed, 247 insertions(+), 36 deletions(-) create mode 100644 apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/CatalogSearchRouteScreen.kt create mode 100644 apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/DefaultPortraitCatalogSearchScreen.kt create mode 100644 apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/LandscapeTwoPaneCatalogSearchScreen.kt diff --git a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/CatalogSearchRoute.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/CatalogSearchRoute.kt index 421ef79..403003c 100644 --- a/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/CatalogSearchRoute.kt +++ b/apps/mobile-app/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/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/CatalogSearchRouteScreen.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/CatalogSearchRouteScreen.kt new file mode 100644 index 0000000..1205b8e --- /dev/null +++ b/apps/mobile-app/src/main/kotlin/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, + showClearIcon: State, + 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/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/DefaultPortraitCatalogSearchScreen.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/DefaultPortraitCatalogSearchScreen.kt new file mode 100644 index 0000000..4c88468 --- /dev/null +++ b/apps/mobile-app/src/main/kotlin/dev/marlonlom/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, + showClearIcon: State, + 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/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/LandscapeTwoPaneCatalogSearchScreen.kt b/apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_search/screens/LandscapeTwoPaneCatalogSearchScreen.kt new file mode 100644 index 0000000..07e578a --- /dev/null +++ b/apps/mobile-app/src/main/kotlin/dev/marlonlom/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, + showClearIcon: State, + 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") + } + } +} +