added radio component field (#309)

Alfresco · Feb 1, 2024 · e837852 · e837852
1 parent 497ae12
commit e837852
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 0 deletions.
diff --git a/data/src/main/kotlin/com/alfresco/content/data/payloads/FieldsData.kt b/data/src/main/kotlin/com/alfresco/content/data/payloads/FieldsData.kt
@@ -76,6 +76,7 @@ enum class FieldType {
     DATETIME,
     DATE,
     DROPDOWN,
+    RADIO_BUTTONS,
     ;
 
     fun value() = name.lowercase()

diff --git a/process-app/src/main/kotlin/com/alfresco/content/process/ui/FormDetailScreen.kt b/process-app/src/main/kotlin/com/alfresco/content/process/ui/FormDetailScreen.kt
@@ -26,6 +26,7 @@ import com.alfresco.content.process.ui.components.DateTimeField
 import com.alfresco.content.process.ui.components.DropdownField
 import com.alfresco.content.process.ui.components.IntegerInputField
 import com.alfresco.content.process.ui.components.MultiLineInputField
+import com.alfresco.content.process.ui.components.RadioButtonField
 import com.alfresco.content.process.ui.components.SingleLineInputField
 
 @OptIn(ExperimentalComposeUiApi::class)
@@ -131,6 +132,20 @@ fun FormDetailScreen(state: FormViewState, viewModel: FormViewModel) {
                         fieldsData = field,
                     )
                 }
+
+                FieldType.RADIO_BUTTONS.value() -> {
+                    var textFieldValue by remember { mutableStateOf(field.value as? String ?: "") }
+                    var textFieldQuery by remember { mutableStateOf("") }
+                    RadioButtonField(
+                        selectedOption = textFieldValue,
+                        selectedQuery = textFieldQuery,
+                        onSelectedOption = { (newText, newQuery) ->
+                            textFieldValue = newText
+                            textFieldQuery = newQuery
+                        },
+                        fieldsData = field,
+                    )
+                }
             }
         }
     }

diff --git a/process-app/src/main/kotlin/com/alfresco/content/process/ui/components/RadioButtonField.kt b/process-app/src/main/kotlin/com/alfresco/content/process/ui/components/RadioButtonField.kt
@@ -0,0 +1,87 @@
+package com.alfresco.content.process.ui.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.Text
+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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.unit.dp
+import com.alfresco.content.data.payloads.FieldsData
+import com.alfresco.content.process.R
+import com.alfresco.content.process.ui.theme.AlfrescoError
+
+@Composable
+fun RadioButtonField(
+    selectedOption: String = "",
+    selectedQuery: String = "",
+    onSelectedOption: (Pair<String, String>) -> Unit = {},
+    fieldsData: FieldsData = FieldsData(),
+) {
+    val labelWithAsterisk = buildAnnotatedString {
+        append(fieldsData.name)
+        if (fieldsData.required) {
+            withStyle(style = SpanStyle(color = AlfrescoError)) {
+                append(" *") // Adding a red asterisk for mandatory fields
+            }
+        }
+    }
+
+    var showError by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(start = 24.dp),
+        horizontalAlignment = Alignment.Start,
+    ) {
+        Column(
+            horizontalAlignment = Alignment.Start,
+            modifier = Modifier
+                .fillMaxWidth(),
+        ) {
+            Text(
+                text = labelWithAsterisk,
+                modifier = Modifier.padding(end = 4.dp),
+            )
+            fieldsData.options.forEach { option ->
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    RadioButton(
+                        selected = (option.id == selectedQuery),
+                        onClick = {
+                            onSelectedOption(Pair(option.name, option.id))
+                        },
+                    )
+                    Text(
+                        text = option.name,
+                        style = MaterialTheme.typography.bodyMedium,
+                    )
+                }
+            }
+        }
+
+        if (showError) {
+            Text(
+                text = stringResource(R.string.error_required_field),
+                color = AlfrescoError,
+                modifier = Modifier
+                    .padding(start = 16.dp, top = 0.dp), // Adjust padding as needed
+                style = MaterialTheme.typography.titleSmall,
+                textAlign = TextAlign.Start,
+            )
+        }
+    }
+}