@Composable
fun GoalExpansionScreen(
goalName:String,
goalId: String,
state : GoalExpansionScreenState,
onEvent: (GoalExpansionScreenEvent) -> Unit,
list : List<RealmEntity>)
{
LaunchedEffect(Unit)
{
onEvent(GoalExpansionScreenEvent.HeaderIdChanged(ObjectId(goalId)))
onEvent(GoalExpansionScreenEvent.HeaderTitleChanged(goalName))
}
Scaffold(
floatingActionButton = { FabFunGAE(onEvent) })
{padding->
Column(modifier = Modifier
.fillMaxSize()
.padding(padding))
{
Text(text = state.headerName,
textAlign = TextAlign.Center,
fontSize = 24.sp,
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
.border(
width = 2.dp,
color = Color.Magenta,
shape = RoundedCornerShape(10.dp)
))
Column(modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally)
{
LazyColumn(modifier = Modifier
.fillMaxWidth()
.fillMaxHeight())
{
items(state.listOfImmediateChildren)
{r->
ChildrenCard(rE = r,
onChildAddClick = {
onEvent(
GoalExpansionScreenEvent
.HeaderTitleChanged(
r.name))
onEvent(
GoalExpansionScreenEvent
.HeaderIdChanged(r._id))
onEvent(
GoalExpansionScreenEvent
.RefreshListOfImmediateChildren
)
},
onChildDeleteClick = {
onEvent(GoalExpansionScreenEvent
.RealmEntityChanged(r))
onEvent(GoalExpansionScreenEvent
.SelectedIdChanged(r._id))
onEvent(GoalExpansionScreenEvent
.Delete)
onEvent(GoalExpansionScreenEvent
.RefreshListOfImmediateChildren)
},
onEvent = onEvent)
}
}
}
}
if(state.showDialog) { AddEditChildDialog(onEvent, state) }
}
}
@Composable
fun ChildrenCard(rE:RealmEntity,
onChildAddClick:()->Unit,
onChildDeleteClick:()->Unit,
onEvent: (GoalExpansionScreenEvent) -> Unit
)
{
ElevatedCard(modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.padding(10.dp),
shape = RoundedCornerShape(40.dp),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.onBackground)
)
{
Column(modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally)
{
Row(modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 53.dp, vertical = 20.dp),
horizontalArrangement = Arrangement.End)
{
Row{
IconButton(onClick = { /*TODO*/ },
modifier = Modifier
.height(15.dp)
.width(15.dp))
{
Icon(imageVector = ImageVector.vectorResource(
id = R.drawable.circleicon
), contentDescription = "editIcon",
tint = MaterialTheme.colorScheme.background,
modifier = Modifier
.height(15.dp)
.width(15.dp))
}
Spacer(modifier = Modifier.width(20.dp))
IconButton(onClick = { onChildDeleteClick() },
modifier = Modifier
.height(15.dp)
.width(15.dp))
{
Icon(imageVector = ImageVector.vectorResource(
id = R.drawable.circleicon
), contentDescription = "deleteIcon",
tint = MaterialTheme.colorScheme.background,
modifier = Modifier
.height(15.dp)
.width(15.dp))
}
}
}
Column(modifier = Modifier
.fillMaxSize()
.padding(horizontal = 53.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally)
{
Text(text = rE.name,
fontSize = 24.sp)
Divider(modifier = Modifier
.fillMaxWidth()
.padding(vertical = 10.dp)
)
Row(modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically)
{
Row()
{
Text(text = "${rE.numberOfChildrenCompleted}")
Text(text = "/")
Text(text = "${rE.totalNumberOfChildren}")
}
Text(text = "${rE.progress}")
Checkbox(checked = rE.isCompleted,
onCheckedChange = {
if(rE.isCompleted)
{
onEvent(GoalExpansionScreenEvent
.CompletionChanged(false))
onEvent(
GoalExpansionScreenEvent
.RealmEntityChanged(rE))
onEvent(GoalExpansionScreenEvent.
MarkCompleteOrInComplete)
onEvent(GoalExpansionScreenEvent
.RefreshListOfImmediateChildren)
}else{
onEvent(GoalExpansionScreenEvent
.CompletionChanged(true))
onEvent(
GoalExpansionScreenEvent
.RealmEntityChanged(rE))
onEvent(GoalExpansionScreenEvent.
MarkCompleteOrInComplete)
onEvent(GoalExpansionScreenEvent
.RefreshListOfImmediateChildren)
}})
Icon(imageVector = Icons.Default.Add,
contentDescription = "",
modifier = Modifier.clickable {onChildAddClick()})
}
}
}
}
}
@Composable
fun FabFunGAE(onEvent: (GoalExpansionScreenEvent) -> Unit)
{
FloatingActionButton(onClick = {
onEvent(GoalExpansionScreenEvent.ChangeDialogVisibility)
onEvent(GoalExpansionScreenEvent
.ModeChanged(ModeConstants.ADD))},
modifier = Modifier
.height(80.dp)
.width(80.dp)
.padding(10.dp))
{
Icon(imageVector = Icons.Default.Add,
contentDescription = "Add")
}
}
@Composable
fun AddEditChildDialog(
onEvent: (GoalExpansionScreenEvent) -> Unit,
state: GoalExpansionScreenState
)
{
Dialog(onDismissRequest = {
onEvent(GoalExpansionScreenEvent.ChangeDialogVisibility)
})
{
ElevatedCard(modifier = Modifier
.fillMaxWidth()
.height(200.dp),
shape = RoundedCornerShape(15.dp),
elevation = CardDefaults.cardElevation(defaultElevation = 15.dp)
)
{
Column(modifier = Modifier
.fillMaxSize()
.padding(10.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally)
{
Spacer(modifier = Modifier
.fillMaxWidth()
.weight(1f))
AddChildOutlinedTextField(onEvent, state = state )
Spacer(modifier = Modifier
.fillMaxWidth()
.weight(1f))
Row(modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(10.dp),
verticalAlignment = Alignment.CenterVertically)
{
Spacer(modifier = Modifier.weight(1f))
Text(text = "Save",
fontSize = 16.sp,
modifier = Modifier.clickable{
onEvent(GoalExpansionScreenEvent.SaveOrEdit)
onEvent(GoalExpansionScreenEvent
.ChangeDialogVisibility)
onEvent(GoalExpansionScreenEvent
.RefreshListOfImmediateChildren)
})
Text(text = "Cancel",
fontSize = 16.sp,
modifier = Modifier.clickable {
onEvent(GoalExpansionScreenEvent
.ChangeDialogVisibility)})
}
}
}
}
}
@Composable
fun AddChildOutlinedTextField(
onEvent: (GoalExpansionScreenEvent) -> Unit,
state: GoalExpansionScreenState)
{
OutlinedTextField(value = state.title ,
onValueChange ={
onEvent(GoalExpansionScreenEvent.TitleChanged(it))},
colors = TextFieldDefaults
.outlinedTextFieldColors(
focusedBorderColor = if(state.cLabel == "Title")
{
MaterialTheme.colorScheme.outline}
else{
MaterialTheme.colorScheme.onErrorContainer},
focusedLabelColor = if(state.cLabel == "Title")
{
MaterialTheme.colorScheme.outline}
else{
MaterialTheme.colorScheme.onErrorContainer},
unfocusedBorderColor =
if(state.cLabel == "Title") {
Color.LightGray}
else{
MaterialTheme.colorScheme.outline},
unfocusedLabelColor =
if(state.cLabel == "Title") {
Color.LightGray}
else{
MaterialTheme.colorScheme.onErrorContainer}
),
textStyle = TextStyle(color =
MaterialTheme.colorScheme.onBackground),
label = { Text(text = state.cLabel,fontSize = 15.sp) },
modifier = Modifier.fillMaxWidth())
}