MOBILEAPPS-2091

app/build.gradle

@@ -121,6 +121,7 @@ dependencies {
 
     implementation libs.coil.core
     implementation libs.gson
+    implementation libs.compose.runtime
 
     coreLibraryDesugaring libs.android.desugar
 

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

@@ -22,6 +22,7 @@ data class FieldsData(
     var overrideId: Boolean = false,
     var fields: List<FieldsData> = emptyList(),
     var options: List<OptionsModel> = emptyList(),
+    var placeHolder: String? = null,
 ) : Parcelable {
 
     companion object {
@@ -45,3 +46,10 @@ data class FieldsData(
         }
     }
 }
+
+enum class FieldType() {
+    TEXT,
+    ;
+
+    fun value() = name.lowercase()
+}

gradle/libs.versions.toml

@@ -138,4 +138,5 @@ ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 material3 = { group = "androidx.compose.material3", name = "material3" }
 navigation-compose = "androidx.navigation:navigation-compose:2.7.5"
+compose-runtime = "androidx.compose.runtime:runtime:1.5.4"
 

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

@@ -12,25 +12,60 @@ import com.airbnb.mvrx.Uninitialized
 import com.airbnb.mvrx.ViewModelContext
 import com.alfresco.content.data.ProcessEntry
 import com.alfresco.content.data.ResponseListForm
+import com.alfresco.content.data.ResponseListProcessDefinition
 import com.alfresco.content.data.TaskRepository
+import com.alfresco.content.data.payloads.FieldsData
 import com.alfresco.coroutines.asFlow
 import kotlinx.coroutines.launch
 
 data class FormViewState(
-    val parent: ProcessEntry,
+    val parent: ProcessEntry = ProcessEntry(),
     val requestStartForm: Async<ResponseListForm> = Uninitialized,
+    val requestProcessDefinition: Async<ResponseListProcessDefinition> = Uninitialized,
+    val formFields: List<FieldsData> = emptyList(),
 ) : MavericksState {
     constructor(target: ProcessEntry) : this(parent = target)
+
+    /**
+     * update the single process definition entry
+     */
+    fun updateSingleProcessDefinition(response: ResponseListProcessDefinition): FormViewState {
+        if (parent == null) {
+            return this
+        }
+        val processEntry = ProcessEntry.with(response.listProcessDefinitions.first(), parent)
+        return copy(parent = processEntry)
+    }
 }
 
 class FormViewModel(
-    state: FormViewState,
+    val state: FormViewState,
     val context: Context,
     private val repository: TaskRepository,
 ) : MavericksViewModel<FormViewState>(state) {
 
     init {
-        getStartForm(state.parent)
+        singleProcessDefinition(state.parent.id)
+    }
+
+    private fun singleProcessDefinition(appDefinitionId: String) = withState { state ->
+        viewModelScope.launch {
+            repository::singleProcessDefinition.asFlow(appDefinitionId).execute {
+                when (it) {
+                    is Loading -> copy(requestProcessDefinition = Loading())
+                    is Fail -> copy(requestProcessDefinition = Fail(it.error))
+                    is Success -> {
+                        val updatedState = updateSingleProcessDefinition(it())
+                        getStartForm(updatedState.parent)
+                        copy(requestProcessDefinition = Success(it()))
+                    }
+
+                    else -> {
+                        this
+                    }
+                }
+            }
+        }
     }
 
     private fun getStartForm(processEntry: ProcessEntry) {
@@ -39,12 +74,13 @@ class FormViewModel(
             repository::startForm.asFlow(processEntry.id).execute {
                 when (it) {
                     is Loading -> copy(requestStartForm = Loading())
-                    is Fail -> copy(requestStartForm = Fail(it.error))
+                    is Fail -> {
+                        it.error.printStackTrace()
+                        copy(requestStartForm = Fail(it.error)) }
                     is Success -> {
-                        println("form-data == ${it()}")
-                        copy(requestStartForm = Success(it()))
+//                        println("form-data == ${it()}")
+                        copy(formFields = it().fields.first().fields, requestStartForm = Success(it()))
                     }
-
                     else -> {
                         this
                     }
@@ -53,6 +89,19 @@ class FormViewModel(
         }
     }
 
+    fun updateFieldValue(fieldId: String, newValue: String, state: FormViewState) {
+        val updatedFields = state.copy(
+            formFields = state.formFields.map { field ->
+                if (field.id == fieldId) {
+                    field.copy(value = newValue)
+                } else {
+                    field
+                }
+            },
+        )
+        setState { updatedFields }
+    }
+
     companion object : MavericksViewModelFactory<FormViewModel, FormViewState> {
 
         override fun create(

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

@@ -1,6 +1,5 @@
 package com.alfresco.content.process
 
-import android.os.Bundle
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
@@ -11,14 +10,14 @@ import androidx.navigation.compose.rememberNavController
 import com.alfresco.content.process.ui.FormFragment
 
 @Composable
-fun NavigationComponent(extras: Bundle?) {
+fun NavigationComponent() {
     val navController = rememberNavController()
 
     Surface(modifier = Modifier.fillMaxSize()) {
         NavHost(navController = navController, startDestination = "first_screen") {
             composable("first_screen") {
                 // Replace with the content of your first fragment
-                FormFragment(navController = navController, extras)
+                FormFragment(navController = navController)
             }
             // Add more composable entries for other fragments in your navigation graph
         }

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

@@ -18,7 +18,7 @@ class ProcessFormActivity : ComponentActivity() {
             AlfrescoBaseTheme {
                 // A surface container using the 'background' color from the theme
                 Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
-                    NavigationComponent(intent.extras)
+                    NavigationComponent()
                 }
             }
         }
@@ -29,6 +29,6 @@ class ProcessFormActivity : ComponentActivity() {
 @Composable
 fun GreetingPreview() {
     AlfrescoBaseTheme {
-        NavigationComponent(null)
+        NavigationComponent()
     }
 }

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

@@ -1,72 +1,126 @@
 package com.alfresco.content.process.ui
 
-import android.os.Bundle
+import android.app.Activity
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
+import com.airbnb.mvrx.Loading
+import com.airbnb.mvrx.compose.collectAsState
 import com.airbnb.mvrx.compose.mavericksActivityViewModel
+import com.alfresco.content.data.TaskRepository
+import com.alfresco.content.data.payloads.FieldType
 import com.alfresco.content.process.FormViewModel
+import com.alfresco.content.process.FormViewState
+import com.alfresco.content.process.ui.components.CustomLinearProgressIndicator
 import com.alfresco.content.process.ui.components.TextInputField
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun FormFragment(navController: NavController, extras: Bundle?) {
+fun FormFragment(navController: NavController) {
     val context = LocalContext.current
+    // This will get or create a ViewModel scoped to the Activity.
+    val viewModel: FormViewModel = mavericksActivityViewModel()
+    val state by viewModel.collectAsState()
+
     Scaffold(
         topBar = {
             TopAppBar(
                 title = {
-                    Text(text = "Form Details")
+                    Text(text = "Workflow form")
                 },
                 navigationIcon = {
-                    IconButton(onClick = { /* Handle navigation icon click */ }) {
-                        // Add navigation icon here
-                    }
+                    BackButton(onClick = { (context as Activity).finish() })
                 },
                 actions = {
                     // Add actions if any
                 },
             )
         },
         content = { padding ->
-            FormDetailScreen(padding)
+
+            val colorScheme = MaterialTheme.colorScheme
+
+            Surface(
+                color = colorScheme.background,
+                contentColor = colorScheme.onBackground,
+            ) {
+                if (state.requestStartForm is Loading) {
+                    CustomLinearProgressIndicator(padding)
+                }
+                FormDetailScreen(padding, state, viewModel)
+            }
         },
     )
 }
 
 @Composable
-fun FormDetailScreen(padding: PaddingValues) {
-    // This will get or create a ViewModel scoped to the Activity.
-    val viewModel: FormViewModel = mavericksActivityViewModel()
+fun BackButton(onClick: () -> Unit) {
+    IconButton(onClick = onClick) {
+        Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "Back")
+    }
+}
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun FormDetailScreen(padding: PaddingValues, state: FormViewState, viewModel: FormViewModel) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
 
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .padding(16.dp),
-        verticalArrangement = Arrangement.Center,
+            .clickable {
+                // Hide the keyboard on click outside of input fields
+                keyboardController?.hide()
+                focusManager.clearFocus()
+            }
+            .padding(padding),
+        verticalArrangement = Arrangement.Top,
         horizontalAlignment = Alignment.CenterHorizontally,
+
     ) {
-        TextInputField(1)
+        state.formFields.forEach { field ->
+            if (field.type == FieldType.TEXT.value()) {
+                TextInputField(
+                    value = field.value as? String,
+                    onValueChange = { newValue ->
+                        viewModel.updateFieldValue(field.id, newValue, state)
+                    },
+                    field,
+                )
+            }
+        }
         // Add more Composables here based on your UI requirements
     }
 }
 
 @Preview
 @Composable
 fun PreviewProcessDetailScreen() {
-    FormDetailScreen(PaddingValues(16.dp))
+    val state = FormViewState()
+    FormDetailScreen(PaddingValues(16.dp), state, FormViewModel(state, LocalContext.current, TaskRepository()))
 }

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

@@ -0,0 +1,28 @@
+package com.alfresco.content.process.ui.components
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun CustomLinearProgressIndicator(padding: PaddingValues) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(2.dp)
+            .padding(padding), // Adjust padding as needed
+    ) {
+        LinearProgressIndicator(
+            color = Color.Blue, // Set your desired color here
+            modifier = Modifier.align(Alignment.TopCenter),
+        )
+    }
+}