Search Functionality In Category Screen

screen/categories/src/main/java/com/ivy/categories/CategoriesScreen.kt

@@ -51,9 +51,11 @@ import com.ivy.data.model.primitive.IconAsset
 import com.ivy.data.model.primitive.NotBlankTrimmedString
 import com.ivy.design.l0_system.UI
 import com.ivy.design.l0_system.style
+import com.ivy.legacy.ui.SearchInput
 import com.ivy.legacy.utils.balancePrefix
 import com.ivy.legacy.utils.compactBalancePrefix
 import com.ivy.legacy.utils.format
+import com.ivy.legacy.utils.selectEndTextFieldValue
 import com.ivy.navigation.CategoriesScreen
 import com.ivy.navigation.TransactionsScreen
 import com.ivy.navigation.navigation
@@ -100,7 +102,10 @@ fun BoxWithConstraintsScope.CategoriesScreen(screen: CategoriesScreen) {
 
 @Composable
 private fun BoxWithConstraintsScope.UI(
-    state: CategoriesScreenState = CategoriesScreenState(compactCategoriesModeEnabled = false),
+    state: CategoriesScreenState = CategoriesScreenState(
+        compactCategoriesModeEnabled = false,
+        showCategorySearchBar = false
+    ),
     onEvent: (CategoriesScreenEvent) -> Unit = {}
 ) {
     val nav = navigation()
@@ -158,6 +163,10 @@ private fun BoxWithConstraintsScope.UI(
                 Spacer(Modifier.width(24.dp))
             }
 
+            if (state.showCategorySearchBar) {
+                Spacer(Modifier.height(16.dp))
+                SearchField(onSearch = { onEvent(CategoriesScreenEvent.OnSearchQueryUpdate(it)) })
+            }
             Spacer(Modifier.height(16.dp))
         }
 
@@ -679,11 +688,22 @@ private fun PreviewCategoriesCompactModeEnabled(theme: Theme = Theme.LIGHT) {
 
 @Preview
 @Composable
-private fun Preview(theme: Theme = Theme.LIGHT, compactModeEnabled: Boolean = false) {
+private fun PreviewCategoriesCompactModeEnabledAndSearchBarEnabled(theme: Theme = Theme.LIGHT) {
+    Preview(theme = theme, compactModeEnabled = true, displaySearchBarEnabled = true)
+}
+
+@Preview
+@Composable
+private fun Preview(
+    theme: Theme = Theme.LIGHT,
+    compactModeEnabled: Boolean = false,
+    displaySearchBarEnabled: Boolean = false
+) {
     com.ivy.legacy.IvyWalletPreview(theme) {
         val state = CategoriesScreenState(
             baseCurrency = "BGN",
             compactCategoriesModeEnabled = compactModeEnabled,
+            showCategorySearchBar = displaySearchBarEnabled,
             categories = persistentListOf(
                 CategoryData(
                     category = Category(
@@ -752,6 +772,106 @@ private fun Preview(theme: Theme = Theme.LIGHT, compactModeEnabled: Boolean = fa
     }
 }
 
+@Preview
+@Composable
+private fun PreviewWithSearchBarEnabled(
+    theme: Theme = Theme.LIGHT,
+    compactModeEnabled: Boolean = false,
+    displaySearchBarEnabled: Boolean = true
+) {
+    com.ivy.legacy.IvyWalletPreview(theme) {
+        val state = CategoriesScreenState(
+            baseCurrency = "BGN",
+            compactCategoriesModeEnabled = compactModeEnabled,
+            showCategorySearchBar = displaySearchBarEnabled,
+            categories = persistentListOf(
+                CategoryData(
+                    category = Category(
+                        id = CategoryId(UUID.randomUUID()),
+                        name = NotBlankTrimmedString.unsafe("Groceries"),
+                        color = ColorInt(Green.toArgb()),
+                        icon = IconAsset.unsafe("groceries"),
+                        orderNum = 0.0,
+                    ),
+                    monthlyBalance = 2125.0,
+                    monthlyExpenses = 920.0,
+                    monthlyIncome = 3045.0
+                ),
+                CategoryData(
+                    category = Category(
+                        id = CategoryId(UUID.randomUUID()),
+                        name = NotBlankTrimmedString.unsafe("Fun"),
+                        color = ColorInt(Orange.toArgb()),
+                        icon = IconAsset.unsafe("game"),
+                        orderNum = 0.0,
+                    ),
+                    monthlyBalance = 1200.0,
+                    monthlyExpenses = 750.0,
+                    monthlyIncome = 0.0
+                ),
+                CategoryData(
+                    category = Category(
+                        id = CategoryId(UUID.randomUUID()),
+                        name = NotBlankTrimmedString.unsafe("Ivy"),
+                        color = ColorInt(IvyDark.toArgb()),
+                        icon = IconAsset.unsafe("star"),
+                        orderNum = 0.0,
+                    ),
+                    monthlyBalance = 1200.0,
+                    monthlyExpenses = 0.0,
+                    monthlyIncome = 5000.0
+                ),
+                CategoryData(
+                    category = Category(
+                        id = CategoryId(UUID.randomUUID()),
+                        name = NotBlankTrimmedString.unsafe("Food"),
+                        color = ColorInt(GreenLight.toArgb()),
+                        icon = IconAsset.unsafe("atom"),
+                        orderNum = 0.0,
+                    ),
+                    monthlyBalance = 12125.21,
+                    monthlyExpenses = 1350.50,
+                    monthlyIncome = 8000.48
+                ),
+                CategoryData(
+                    category = Category(
+                        id = CategoryId(UUID.randomUUID()),
+                        name = NotBlankTrimmedString.unsafe("Shisha"),
+                        color = ColorInt(GreenDark.toArgb()),
+                        icon = IconAsset.unsafe("drink"),
+                        orderNum = 0.0,
+                    ),
+                    monthlyBalance = 820.0,
+                    monthlyExpenses = 340.0,
+                    monthlyIncome = 400.0
+                ),
+
+                )
+        )
+        UI(state = state)
+    }
+}
+
+@Composable
+private fun SearchField(
+    onSearch: (String) -> Unit,
+) {
+    var searchQueryTextFieldValue by remember {
+        mutableStateOf(selectEndTextFieldValue(""))
+    }
+
+    SearchInput(
+        searchQueryTextFieldValue = searchQueryTextFieldValue,
+        hint = "Search categories",
+        focus = false,
+        showClearIcon = searchQueryTextFieldValue.text.isNotEmpty(),
+        onSetSearchQueryTextField = {
+            searchQueryTextFieldValue = it
+            onSearch(it.text)
+        }
+    )
+}
+
 /** For screenshot testing */
 @Composable
 fun CategoriesScreenUiTest(isDark: Boolean) {
@@ -762,6 +882,16 @@ fun CategoriesScreenUiTest(isDark: Boolean) {
     Preview(theme)
 }
 
+/** For screenshot testing */
+@Composable
+fun CategoriesScreenWithSearchBarUiTest(isDark: Boolean) {
+    val theme = when (isDark) {
+        true -> Theme.DARK
+        false -> Theme.LIGHT
+    }
+    Preview(theme = theme, displaySearchBarEnabled = true)
+}
+
 /** For screenshot testing */
 @Composable
 fun CategoriesScreenCompactUiTest(isDark: Boolean) {
@@ -770,4 +900,14 @@ fun CategoriesScreenCompactUiTest(isDark: Boolean) {
         false -> Theme.LIGHT
     }
     Preview(theme, compactModeEnabled = true)
+}
+
+/** For screenshot testing */
+@Composable
+fun CategoriesScreenWithSearchBarCompactUiTest(isDark: Boolean) {
+    val theme = when (isDark) {
+        true -> Theme.DARK
+        false -> Theme.LIGHT
+    }
+    Preview(theme, compactModeEnabled = true, displaySearchBarEnabled = true)
 }

screen/categories/src/main/java/com/ivy/categories/CategoriesScreenEvent.kt

@@ -17,4 +17,5 @@ sealed interface CategoriesScreenEvent {
     data class OnSortOrderModalVisible(val visible: Boolean) : CategoriesScreenEvent
     data class OnCategoryModalVisible(val categoryModalData: CategoryModalData?) :
         CategoriesScreenEvent
+    data class OnSearchQueryUpdate(val queryString: String) : CategoriesScreenEvent
 }

screen/categories/src/main/java/com/ivy/categories/CategoriesScreenState.kt

@@ -15,4 +15,6 @@ data class CategoriesScreenState(
     val sortOrderItems: ImmutableList<SortOrder> = SortOrder.values().toList().toImmutableList(),
     val sortOrder: SortOrder = SortOrder.DEFAULT,
     val compactCategoriesModeEnabled: Boolean,
+    val showCategorySearchBar: Boolean,
+
 )

screen/categories/src/main/java/com/ivy/categories/CategoriesViewModel.kt

@@ -9,14 +9,14 @@ import com.ivy.base.legacy.SharedPrefs
 import com.ivy.base.legacy.Transaction
 import com.ivy.base.time.TimeConverter
 import com.ivy.base.time.TimeProvider
-import com.ivy.ui.ComposeViewModel
 import com.ivy.data.repository.CategoryRepository
 import com.ivy.domain.features.Features
 import com.ivy.frp.action.thenMap
 import com.ivy.frp.thenInvokeAfter
 import com.ivy.legacy.data.model.TimePeriod
 import com.ivy.legacy.datamodel.Account
 import com.ivy.legacy.utils.ioThread
+import com.ivy.ui.ComposeViewModel
 import com.ivy.wallet.domain.action.account.AccountsAct
 import com.ivy.wallet.domain.action.category.LegacyCategoryIncomeWithAccountFiltersAct
 import com.ivy.wallet.domain.action.settings.BaseCurrencyAct
@@ -55,6 +55,8 @@ class CategoriesViewModel @Inject constructor(
     private val baseCurrency = mutableStateOf("")
     private val categories =
         mutableStateOf<ImmutableList<CategoryData>>(persistentListOf<CategoryData>())
+    private val allCategories =
+        mutableStateOf<ImmutableList<CategoryData>>(persistentListOf<CategoryData>())
     private val reorderModalVisible = mutableStateOf(false)
     private val categoryModalData = mutableStateOf<CategoryModalData?>(null)
     private val sortModalVisible = mutableStateOf(false)
@@ -74,6 +76,7 @@ class CategoriesViewModel @Inject constructor(
             sortOrder = getSortOrder(),
             sortModalVisible = getSortModalVisible(),
             compactCategoriesModeEnabled = getCompactCategoriesMode(),
+            showCategorySearchBar = getShowCategorySearchBar()
         )
     }
 
@@ -82,6 +85,11 @@ class CategoriesViewModel @Inject constructor(
         return features.compactCategoriesMode.asEnabledState()
     }
 
+    @Composable
+    private fun getShowCategorySearchBar(): Boolean {
+        return features.showCategorySearchBar.asEnabledState()
+    }
+
     @Composable
     private fun getBaseCurrency(): String {
         return baseCurrency.value
@@ -126,7 +134,11 @@ class CategoriesViewModel @Inject constructor(
         ioThread {
             val range = TimePeriod.currentMonth(
                 startDayOfMonth = ivyContext.startDayOfMonth
-            ).toRange(ivyContext.startDayOfMonth, timeConverter, timeProvider) // this must be monthly
+            ).toRange(
+                ivyContext.startDayOfMonth,
+                timeConverter,
+                timeProvider
+            ) // this must be monthly
 
             allAccounts = accountsAct(Unit)
             baseCurrency.value = baseCurrencyAct(Unit)
@@ -135,7 +147,7 @@ class CategoriesViewModel @Inject constructor(
                 TrnsWithRangeAndAccFiltersAct.Input(
                     range = range,
                     accountIdFilterSet = suspend { allAccounts } thenMap { it.id }
-                        thenInvokeAfter { it.toHashSet() }
+                            thenInvokeAfter { it.toHashSet() }
                 )
             )
 
@@ -171,9 +183,21 @@ class CategoriesViewModel @Inject constructor(
             }
 
             val sortedList = sortList(categories, sortOrder.value).toImmutableList()
+            this.allCategories.value = sortedList
+            this.categories.value = this.allCategories.value
+        }
+    }
 
-            this.categories.value = sortedList
+    private fun filterCategories(queryString: String) {
+        var unsortedList: List<CategoryData>
+        if (queryString.isNotEmpty()) {
+            unsortedList = this.allCategories.value.filter {
+                it.category.name.value.toLowerCase().contains(queryString.toLowerCase().trim())
+            }
+        } else {
+            unsortedList = this.allCategories.value
         }
+        this.categories.value = sortList(unsortedList, sortOrder.value).toImmutableList()
     }
 
     private suspend fun reorder(
@@ -244,6 +268,8 @@ class CategoriesViewModel @Inject constructor(
                 is CategoriesScreenEvent.OnCategoryModalVisible -> {
                     categoryModalData.value = event.categoryModalData
                 }
+
+                is CategoriesScreenEvent.OnSearchQueryUpdate -> filterCategories(event.queryString)
             }
         }
     }

screen/categories/src/test/java/com/ivy/categories/CategoriesScreenPaparazziTest.kt

@@ -19,10 +19,24 @@ class CategoriesScreenPaparazziTest(
         }
     }
 
+    @Test
+    fun `snapshot Categories nonCompact Screen with search bar`() {
+        snapshot(theme) {
+            CategoriesScreenWithSearchBarUiTest(theme == PaparazziTheme.Dark)
+        }
+    }
+
     @Test
     fun `snapshot Categories compact Screen`() {
         snapshot(theme) {
             CategoriesScreenCompactUiTest(theme == PaparazziTheme.Dark)
         }
     }
-}
+
+    @Test
+    fun `snapshot Categories compact Screen with search bar`() {
+        snapshot(theme) {
+            CategoriesScreenWithSearchBarCompactUiTest(theme == PaparazziTheme.Dark)
+        }
+    }
+}

shared/domain/src/main/java/com/ivy/domain/features/Features.kt

@@ -5,6 +5,7 @@ interface Features {
     val compactAccountsMode: BoolFeature
     val compactCategoriesMode: BoolFeature
     val showTitleSuggestions: BoolFeature
+    val showCategorySearchBar: BoolFeature
     val hideTotalBalance: BoolFeature
 
     val allFeatures: List<BoolFeature>

shared/domain/src/main/java/com/ivy/domain/features/IvyFeatures.kt

@@ -32,6 +32,13 @@ class IvyFeatures @Inject constructor() : Features {
         defaultValue = true
     )
 
+    override val showCategorySearchBar = BoolFeature(
+        key = "show_category_search_bar",
+        name = "Show category search bar",
+        description = "Show search bar in category screen",
+        defaultValue = false
+    )
+
     override val hideTotalBalance = BoolFeature(
         key = "hide_total_balance",
         name = "Hide total balance",
@@ -45,6 +52,7 @@ class IvyFeatures @Inject constructor() : Features {
             compactAccountsMode,
             compactCategoriesMode,
             showTitleSuggestions,
+            showCategorySearchBar,
             hideTotalBalance
         )
 }

temp/legacy-code/src/main/java/com/ivy/legacy/ui/SearchInput.kt

@@ -29,6 +29,7 @@ fun SearchInput(
     searchQueryTextFieldValue: TextFieldValue,
     hint: String,
     focus: Boolean = true,
+    showClearIcon: Boolean = true,
     onSetSearchQueryTextField: (TextFieldValue) -> Unit
 ) {
     Row(
@@ -61,13 +62,15 @@ fun SearchInput(
             }
         }
 
-        IvyIcon(
-            modifier = Modifier
-                .weight(1f)
-                .clickable {
-                    onSetSearchQueryTextField(selectEndTextFieldValue(""))
-                },
-            icon = R.drawable.ic_outline_clear_24
-        )
+        if (showClearIcon) {
+            IvyIcon(
+                modifier = Modifier
+                    .weight(1f)
+                    .clickable {
+                        onSetSearchQueryTextField(selectEndTextFieldValue(""))
+                    },
+                icon = R.drawable.ic_outline_clear_24
+            )
+        }
     }
 }