#18 Basic structure of editing profile screen

app/src/main/java/be/ugent/sel/studeez/common/composable/TextFieldComposable.kt

@@ -19,6 +19,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
+import be.ugent.sel.studeez.common.ext.fieldModifier
 
 @Composable
 fun BasicField(
@@ -36,6 +37,20 @@ fun BasicField(
     )
 }
 
+@Composable
+fun LabelledInputField(
+    value: String,
+    onNewValue: (String) -> Unit,
+    @StringRes label: Int
+) {
+    OutlinedTextField(
+        value = value,
+        onValueChange = onNewValue,
+        label = { Text(text = stringResource(id = label)) },
+        modifier = Modifier.fieldModifier()
+    )
+}
+
 @Composable
 fun UsernameField(
     value: String,

app/src/main/java/be/ugent/sel/studeez/screens/profile/ProfileEditScreen.kt

@@ -1,22 +1,44 @@
 package be.ugent.sel.studeez.screens.profile
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material.Button
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.viewmodel.compose.viewModel
 import be.ugent.sel.studeez.R
+import be.ugent.sel.studeez.common.composable.BasicButton
+import be.ugent.sel.studeez.common.composable.BasicTextButton
+import be.ugent.sel.studeez.common.composable.LabelledInputField
 import be.ugent.sel.studeez.common.composable.SecondaryScreenTemplate
+import be.ugent.sel.studeez.common.ext.textButton
 import be.ugent.sel.studeez.resources
 import be.ugent.sel.studeez.ui.theme.StudeezTheme
 
 @Composable
 fun EditProfileScreen(
-    goBack: () -> Unit
+    goBack: () -> Unit,
+    viewModel: ProfileEditViewModel = hiltViewModel()
 ) {
+    val uiState by viewModel.uiState
+
     SecondaryScreenTemplate(
         title = resources().getString(R.string.editing_profile),
         popUp = goBack
     ) {
-        Text(text = "TODO")
+        Column {
+            LabelledInputField(
+                value = uiState.username,
+                onNewValue = viewModel::onUsernameChange,
+                label = R.string.username
+            )
+
+            BasicTextButton(text = R.string.save, Modifier.textButton()) {} // TODO
+            BasicTextButton(text = R.string.delete_profile, Modifier.textButton()) {} // TODO
+        }
     }
 }
 
@@ -24,8 +46,8 @@ fun EditProfileScreen(
 @Composable
 fun EditProfileScreenComposable() {
     StudeezTheme {
-        EditProfileScreen {
+        EditProfileScreen (
             {}
-        }
+        )
     }
 }

app/src/main/java/be/ugent/sel/studeez/screens/profile/ProfileEditUiState.kt

@@ -0,0 +1,5 @@
+package be.ugent.sel.studeez.screens.profile
+
+data class ProfileEditUiState (
+    val username: String = ""
+)

app/src/main/java/be/ugent/sel/studeez/screens/profile/ProfileEditViewModel.kt

@@ -0,0 +1,31 @@
+package be.ugent.sel.studeez.screens.profile
+
+import androidx.compose.runtime.mutableStateOf
+import be.ugent.sel.studeez.domain.LogService
+import be.ugent.sel.studeez.screens.StudeezViewModel
+import dagger.hilt.android.lifecycle.HiltViewModel
+import javax.inject.Inject
+
+@HiltViewModel
+class ProfileEditViewModel @Inject constructor(
+    logService: LogService
+) : StudeezViewModel(logService) {
+
+    var uiState = mutableStateOf(ProfileEditUiState())
+        private set
+
+    private val username
+        get() = uiState.value.username
+
+    fun onUsernameChange(newValue: String) {
+        uiState.value = uiState.value.copy(username = newValue)
+    }
+
+    fun onSaveClick() {
+        // TODO
+    }
+
+    fun onDeleteClick() {
+        // TODO
+    }
+}