ADST-28

data/src/main/kotlin/com/alfresco/content/data/payloads/FieldsData.kt

@@ -79,6 +79,7 @@ enum class FieldType {
     RADIO_BUTTONS,
     READONLY_TEXT,
     READONLY,
+    PEOPLE,
     ;
 
     fun value() = name.lowercase()

process-app/src/main/kotlin/com/alfresco/content/process/ProcessFormActivity.kt

@@ -47,7 +47,14 @@ class ProcessFormActivity : AppCompatActivity() {
 
         fragmentManager
             .beginTransaction()
-            .replace(fragmentContainer.id, ProcessFormFragment(), "firstFragment")
+            .replace(
+                fragmentContainer.id,
+                ProcessFormFragment().apply {
+                    // Set your data using intent extras
+                    arguments = intent.extras
+                },
+                "firstFragment",
+            )
             .commit()
     }
 }

process-app/src/main/kotlin/com/alfresco/content/process/ui/FormDetailScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.tooling.preview.Preview
 import com.alfresco.content.data.TaskRepository
+import com.alfresco.content.data.UserGroupDetails
 import com.alfresco.content.data.payloads.FieldType
 import com.alfresco.content.process.FormViewModel
 import com.alfresco.content.process.FormViewState
@@ -26,6 +27,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.PeopleField
 import com.alfresco.content.process.ui.components.RadioButtonField
 import com.alfresco.content.process.ui.components.ReadOnlyField
 import com.alfresco.content.process.ui.components.SingleLineInputField
@@ -155,6 +157,18 @@ fun FormDetailScreen(state: FormViewState, viewModel: FormViewModel) {
                         fieldsData = field,
                     )
                 }
+
+                FieldType.PEOPLE.value() -> {
+                    var userDetailValue by remember { mutableStateOf<UserGroupDetails?>(null) }
+                    PeopleField(
+                        userDetail = userDetailValue,
+                        onAssigneeSelected = { userDetails ->
+                            userDetailValue = userDetails
+                        },
+                        fieldsData = field,
+                        processEntry = state.parent,
+                    )
+                }
             }
         }
     }

process-app/src/main/kotlin/com/alfresco/content/process/ui/components/ComposeTopBar.kt

@@ -10,7 +10,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.alfresco.content.process.R
 import com.alfresco.content.process.ui.BackButton
-import com.alfresco.content.process.ui.theme.SeparateColorGray
+import com.alfresco.content.process.ui.theme.SeparateColorGrayLT
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -27,6 +27,6 @@ fun ComposeTopBar() {
                 BackButton(onClick = { (context as Activity).finish() })
             },
         )
-        Divider(color = SeparateColorGray, thickness = 1.dp)
+        Divider(color = SeparateColorGrayLT, thickness = 1.dp)
     }
 }

process-app/src/main/kotlin/com/alfresco/content/process/ui/components/InputChip.kt

@@ -0,0 +1,85 @@
+package com.alfresco.content.process.ui.components
+
+import android.content.Context
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.InputChip
+import androidx.compose.material3.InputChipDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.alfresco.content.data.UserGroupDetails
+import com.alfresco.content.getLocalizedName
+import com.alfresco.content.process.ui.theme.SeparateColorGrayDT
+import com.alfresco.content.process.ui.theme.SeparateColorGrayLT
+import com.alfresco.content.process.ui.theme.chipBackgroundColorGrayDT
+import com.alfresco.content.process.ui.theme.chipBackgroundColorGrayLT
+import com.alfresco.content.process.ui.theme.chipColorGrayDT
+import com.alfresco.content.process.ui.theme.chipColorGrayLT
+import com.alfresco.content.process.ui.theme.isNightMode
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun InputChip(
+    context: Context,
+    userDetail: UserGroupDetails,
+) {
+    val isNightMode = isNightMode()
+    InputChip(
+        modifier = Modifier.padding(vertical = 8.dp),
+        onClick = {
+        },
+        label = { Text(context.getLocalizedName(userDetail.name)) },
+        selected = true,
+        shape = RoundedCornerShape(24.dp),
+        border = InputChipDefaults.inputChipBorder(
+            selectedBorderWidth = 0.dp,
+
+        ),
+        colors = getInputChipColors(),
+        leadingIcon = {
+            Text(
+                color = if (isNightMode) SeparateColorGrayDT else SeparateColorGrayLT,
+                modifier = Modifier
+                    .padding(16.dp)
+                    .drawBehind {
+                        drawCircle(
+                            color = if (isNightMode) chipColorGrayDT else chipColorGrayLT,
+                            radius = this.size.maxDimension,
+                        )
+                    },
+                text = context.getLocalizedName(userDetail.nameInitial),
+                fontSize = 12.sp,
+            )
+        },
+    )
+}
+
+@Preview
+@Composable
+fun InputChipPreview() {
+    InputChip(LocalContext.current, UserGroupDetails())
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun getInputChipColors() = if (isNightMode()) {
+    InputChipDefaults.inputChipColors(
+        labelColor = SeparateColorGrayDT,
+        selectedLabelColor = SeparateColorGrayDT,
+        selectedLeadingIconColor = SeparateColorGrayDT,
+        selectedContainerColor = chipBackgroundColorGrayDT,
+    )
+} else
+    InputChipDefaults.inputChipColors(
+        labelColor = SeparateColorGrayLT,
+        selectedLabelColor = SeparateColorGrayLT,
+        selectedLeadingIconColor = SeparateColorGrayLT,
+        selectedContainerColor = chipBackgroundColorGrayLT,
+    )

process-app/src/main/kotlin/com/alfresco/content/process/ui/components/PeopleField.kt

@@ -0,0 +1,86 @@
+package com.alfresco.content.process.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.alfresco.content.component.searchusergroup.SearchUserGroupComponentBuilder
+import com.alfresco.content.data.ProcessEntry
+import com.alfresco.content.data.UserGroupDetails
+import com.alfresco.content.data.payloads.FieldsData
+import com.alfresco.content.process.R
+import com.alfresco.content.process.ui.theme.AlfrescoError
+
+@Composable
+fun PeopleField(
+    userDetail: UserGroupDetails? = null,
+    onAssigneeSelected: (UserGroupDetails?) -> Unit = { },
+    fieldsData: FieldsData = FieldsData(),
+    processEntry: ProcessEntry = ProcessEntry(),
+) {
+    val labelWithAsterisk = buildAnnotatedString {
+        append(fieldsData.name)
+        if (fieldsData.required) {
+            withStyle(style = SpanStyle(color = AlfrescoError)) {
+                append(" *") // Adding a red asterisk for mandatory fields
+            }
+        }
+    }
+
+    val context = LocalContext.current
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(all = 16.dp),
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            Text(
+                text = labelWithAsterisk,
+                modifier = Modifier
+                    .padding(end = 4.dp),
+            )
+
+            IconButton(onClick = {
+                SearchUserGroupComponentBuilder(context, processEntry)
+                    .onApply { userDetails ->
+                        onAssigneeSelected(userDetails)
+                    }
+                    .onCancel {
+                        onAssigneeSelected(null)
+                    }
+                    .show()
+            }) {
+                Icon(
+                    painterResource(R.drawable.ic_add),
+                    contentDescription = "",
+                )
+            }
+        }
+        if (userDetail != null) {
+            InputChip(context, userDetail)
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PeopleFieldPreview() {
+    PeopleField()
+}

process-app/src/main/kotlin/com/alfresco/content/process/ui/theme/Color.kt

@@ -24,4 +24,10 @@ val White = Color.White
 val White15 = Color(0x26FFFFFF)
 val White60 = Color(0x99FFFFFF)
 val ActionModeColor = AlfrescoBlue700 // Using AlfrescoBlue700 as action mode color
-val SeparateColorGray = Color(0xFF212121)
+val SeparateColorGrayLT = Color(0xFF212121)
+val chipColorGrayLT = Color(0x1F212121)
+val chipBackgroundColorGrayLT = Color(0x0D212121)
+
+val SeparateColorGrayDT = Color(0xFFFFFFFF)
+val chipColorGrayDT = Color(0x1FFFFFFF)
+val chipBackgroundColorGrayDT = Color(0x0DFFFFFF)

process-app/src/main/res/drawable/ic_add.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="#7F7F7F">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+</vector>