Adjust layout and implement spell search

alexandregpereira · Jan 23, 2024 · 0211cb3 · 0211cb3
1 parent 846c761
commit 0211cb3
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 8 deletions.
diff --git a/...tlin/br/alexandregpereira/hunter/monster/registration/ui/form/MonsterSpellcastingsForm.kt b/...tlin/br/alexandregpereira/hunter/monster/registration/ui/form/MonsterSpellcastingsForm.kt
@@ -22,6 +22,10 @@ internal fun MonsterSpellcastingsForm(
     onSpellClick: (String) -> Unit = {},
     onChanged: (List<Spellcasting>) -> Unit = {}
 ) = Form(modifier, stringResource(R.string.monster_registration_spells)) {
+    if (spellcastings.isEmpty()) {
+        AddButton(text = stringResource(R.string.monster_registration_add_spellcasting_type))
+        return@Form
+    }
     val newSpellcastings = spellcastings.toMutableList()
     val options = SpellcastingType.entries
     val optionStrings = SpellcastingType.entries.map { it.toState().getStringName() }

diff --git a/...id/src/main/java/br/alexandregpereira/hunter/spell/compendium/ui/SpellCompendiumScreen.kt b/...id/src/main/java/br/alexandregpereira/hunter/spell/compendium/ui/SpellCompendiumScreen.kt
@@ -3,9 +3,7 @@ package br.alexandregpereira.hunter.spell.compendium.ui
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -47,8 +45,6 @@ internal fun SpellCompendiumScreen(
                     onValueChange = intent::onSearchTextChange
                 )
 
-                Spacer(modifier = Modifier.height(16.dp))
-
                 SpellList(
                     spellsGroupByLevel = state.spellsGroupByLevel,
                     initialItemIndex = state.initialItemIndex,

diff --git a/...monMain/kotlin/br/alexandregpereira/hunter/spell/compendium/SpellCompendiumStateHolder.kt b/...monMain/kotlin/br/alexandregpereira/hunter/spell/compendium/SpellCompendiumStateHolder.kt
@@ -29,6 +29,7 @@ class SpellCompendiumStateHolder internal constructor(
     StateHolder<SpellCompendiumState> by stateHandler {
 
     private val searchQuery = MutableStateFlow(state.value.searchText)
+    private val originalSpellsGroupByLevel = mutableMapOf<String, List<SpellCompendiumItemState>>()
 
     init {
         debounceSearch()
@@ -50,6 +51,8 @@ class SpellCompendiumStateHolder internal constructor(
                 }?.level?.let { level ->
                     spellsGroupByLevel.compendiumIndexOf(level)
                 }
+                originalSpellsGroupByLevel.clear()
+                originalSpellsGroupByLevel.putAll(spellsGroupByLevel)
                 stateHandler.setState {
                     copy(
                         spellsGroupByLevel = spellsGroupByLevel,
@@ -63,6 +66,18 @@ class SpellCompendiumStateHolder internal constructor(
 
     private fun debounceSearch() {
         searchQuery.debounce(500L)
+            .onEach { text ->
+                stateHandler.setState {
+                    val spellsGroupByLevel = if (text.isNotBlank()){
+                        val spellsFiltered = spellsGroupByLevel.values.flatten()
+                            .filter { it.name.contains(text, ignoreCase = true) }
+                        mapOf("${spellsFiltered.size} results" to spellsFiltered)
+                    } else originalSpellsGroupByLevel
+
+                    copy(spellsGroupByLevel = spellsGroupByLevel)
+                }
+            }
+            .flowOn(dispatcher)
             .launchIn(scope)
     }
 

diff --git a/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/AppTextField.kt b/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/AppTextField.kt
@@ -16,19 +16,32 @@
 
 package br.alexandregpereira.hunter.ui.compose
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
 import androidx.compose.material.TextFieldDefaults
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Clear
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.Preview
 
 @Composable
 fun AppTextField(
@@ -38,7 +51,24 @@ fun AppTextField(
     keyboardType: AppKeyboardType = AppKeyboardType.TEXT,
     multiline: Boolean = false,
     capitalize: Boolean = true,
-    onValueChange: (String) -> Unit = {}
+    onValueChange: (String) -> Unit = {},
+    trailingIcon: @Composable (() -> Unit)? = {
+        AnimatedVisibility(
+            visible = text.isNotEmpty(),
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
+            IconButton(
+                onClick = { onValueChange("") },
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.Clear,
+                    contentDescription = "Clear",
+                    tint = MaterialTheme.colors.onSurface
+                )
+            }
+        }
+    },
 ) {
     val focusManager = LocalFocusManager.current
     val capitalization = if (capitalize) {
@@ -64,7 +94,8 @@ fun AppTextField(
             },
             capitalization = capitalization,
         ),
-        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() })
+        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
+        trailingIcon = trailingIcon
     )
 }
 
@@ -90,3 +121,17 @@ enum class AppKeyboardType {
     TEXT,
     NUMBER
 }
+
+@Preview
+@Composable
+private fun AppTextFieldPreview() = Window {
+    var value by remember { mutableStateOf("Text") }
+    AppTextField(text = "Text", label = "Label", onValueChange = { value = it })
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun AppTextFieldDarkPreview() = Window {
+    var value by remember { mutableStateOf("Text") }
+    AppTextField(text = "Text", label = "Label", onValueChange = { value = it })
+}
diff --git a/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/ClickableField.kt b/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/ClickableField.kt
@@ -6,6 +6,10 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -17,11 +21,18 @@ fun ClickableField(
     label: String,
     text: String,
     modifier: Modifier = Modifier,
+    trailingIcon: @Composable (() -> Unit)? = {
+        Icon(
+            imageVector = Icons.Filled.KeyboardArrowDown,
+            contentDescription = "",
+            tint = MaterialTheme.colors.onSurface
+        )
+    },
     onClick: () -> Unit = {}
 ) {
     Box(modifier) {
         Column {
-            AppTextField(text = text, label = label)
+            AppTextField(text = text, label = label, trailingIcon = trailingIcon)
         }
         Spacer(
             modifier = Modifier

diff --git a/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/PickerField.kt b/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/PickerField.kt
@@ -10,7 +10,11 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -31,7 +35,17 @@ fun PickerField(
     val isOpen = remember { mutableStateOf(false) }
     Box(modifier) {
         Column {
-            AppTextField(text = value, label = label)
+            AppTextField(
+                text = value,
+                label = label,
+                trailingIcon = {
+                    Icon(
+                        imageVector = Icons.Filled.KeyboardArrowDown,
+                        contentDescription = "",
+                        tint = MaterialTheme.colors.onSurface
+                    )
+                }
+            )
             DropdownMenu(
                 modifier = Modifier.fillMaxWidth(),
                 expanded = isOpen.value,