[Feature] [Item] Add domain chip menu for editing and deletion

Author: OffRange

feature/item/create/src/main/kotlin/de/davis/keygo/feature/item/create/presentation/password/PasswordContent.kt

@@ -2,25 +2,37 @@ package de.davis.keygo.feature.item.create.presentation.password
 
 import android.content.res.Configuration
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.text.input.rememberTextFieldState
+import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.AutoAwesome
+import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material.icons.filled.Done
+import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.QrCodeScanner
+import androidx.compose.material3.DropdownMenuGroup
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.DropdownMenuPopup
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.InputChip
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MediumFlexibleTopAppBar
+import androidx.compose.material3.MenuDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
@@ -29,6 +41,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.input.nestedscroll.nestedScroll
@@ -216,10 +229,19 @@ internal fun PasswordContent(state: PasswordUiState, onEvent: (PasswordUiEvent)
                         Text(text = detectedScheme ?: "https://")
                     }
                 ) { item, selected ->
-                    InputChip(
-                        selected = selected,
-                        onClick = { /* TODO: maybe allow editing? but definitely removing */ },
-                        label = { Text(text = item.value) }
+                    MenuChip(
+                        chipText = item.value,
+                        chipSelected = selected,
+                        onDeleteClick = {
+                            onEvent(PasswordUiEvent.OnDeleteDomain(item.value))
+                        },
+                        onModifyClick = {
+                            // TODO:
+                            //  1. when the user does not submit the new domain, rollback to the old domaine
+                            //  2. when the user clears the text-field and the focus is lost, rollback to old domain
+                            onEvent(PasswordUiEvent.OnDeleteDomain(item.value))
+                            domainTextFieldState.setTextAndPlaceCursorAtEnd(item.value)
+                        }
                     )
                 }
             }
@@ -289,6 +311,64 @@ internal fun PasswordContent(state: PasswordUiState, onEvent: (PasswordUiEvent)
     }
 }
 
+
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
+@Composable
+private fun MenuChip(
+    chipText: String,
+    chipSelected: Boolean,
+    onDeleteClick: () -> Unit,
+    onModifyClick: () -> Unit
+) {
+    var expanded by rememberSaveable { mutableStateOf(false) }
+
+    Box(
+        modifier = Modifier.wrapContentSize(Alignment.TopStart)
+    ) {
+        InputChip(
+            selected = chipSelected,
+            onClick = { expanded = !expanded },
+            label = { Text(text = chipText) }
+        )
+
+        DropdownMenuPopup(
+            expanded = expanded,
+            onDismissRequest = { expanded = false },
+            modifier = Modifier.widthIn(min = 175.dp)
+        ) {
+            DropdownMenuGroup(
+                shapes = MenuDefaults.groupShape(0, 1),
+                containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
+            ) {
+                DropdownMenuItem(
+                    onClick = onModifyClick,
+                    text = { Text(text = stringResource(R.string.edit)) },
+                    leadingIcon = {
+                        Icon(
+                            imageVector = Icons.Default.Edit,
+                            modifier = Modifier.size(MenuDefaults.LeadingIconSize),
+                            contentDescription = null
+                        )
+                    },
+                    shape = MenuDefaults.itemShape(0, 2).shape,
+                )
+                DropdownMenuItem(
+                    onClick = onDeleteClick,
+                    text = { Text(text = stringResource(R.string.delete)) },
+                    leadingIcon = {
+                        Icon(
+                            imageVector = Icons.Default.Delete,
+                            modifier = Modifier.size(MenuDefaults.LeadingIconSize),
+                            contentDescription = null
+                        )
+                    },
+                    shape = MenuDefaults.itemShape(1, 2).shape,
+                )
+            }
+        }
+    }
+}
+
 private val DELIMITERS = setOf(',', ' ')
 
 @Preview
@@ -311,4 +391,4 @@ private fun PasswordContentPreview() {
             onEvent = {}
         )
     }
-}
+}

feature/item/create/src/main/kotlin/de/davis/keygo/feature/item/create/presentation/password/model/PasswordUiState.kt

@@ -1,10 +1,12 @@
 package de.davis.keygo.feature.item.create.presentation.password.model
 
 import androidx.compose.foundation.text.input.TextFieldState
+import androidx.compose.runtime.Immutable
 import de.davis.keygo.core.item.domain.model.DomainInfo
 import de.davis.keygo.core.item.domain.model.Password
 import de.davis.keygo.feature.item.core.presentation.model.InputFieldError
 
+@Immutable
 internal data class PasswordUiState(
     val nameTextFieldState: TextFieldState = TextFieldState(),
     val notesTextFieldState: TextFieldState = TextFieldState(),

feature/item/create/src/main/res/values/strings.xml

@@ -57,7 +57,10 @@
     <string name="generate_password_content_description">Generate Password</string>
 
     <string name="add_domains">Add domains</string>
-    
+
     <string name="database_error">An unexpected database error has occurred: %s</string>
     <string name="invalid_vault_id">Vault item ID can not be found</string>
+
+    <string name="delete">Delete</string>
+    <string name="edit">Edit</string>
 </resources>