Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] label selection UI #66

Merged
merged 12 commits into from
Nov 7, 2024
Merged
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.verticalScroll
Expand All @@ -27,6 +28,9 @@ import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
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
Expand All @@ -35,18 +39,22 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.boostcamp.dreamteam.dreamdiary.designsystem.theme.DreamdiaryTheme
import com.boostcamp.dreamteam.dreamdiary.feature.diary.R
import com.boostcamp.dreamteam.dreamdiary.feature.diary.models.LabelUi
import com.boostcamp.dreamteam.dreamdiary.feature.diary.write.components.LabelSelectionDialog
import com.boostcamp.dreamteam.dreamdiary.feature.diary.write.model.DiaryWriteEvent
import com.boostcamp.dreamteam.dreamdiary.feature.diary.write.model.SelectableLabel
import kotlinx.coroutines.flow.collectLatest

@Composable
fun DiaryWriteScreen(
internal fun DiaryWriteScreen(
viewModel: DiaryWriteViewModel = hiltViewModel(),
onBackClick: () -> Unit,
) {
val uiState by viewModel.uiState.collectAsStateWithLifecycle()

val (title, content) = uiState
val (title, content, searchValue, selectableLabels) = uiState

LaunchedEffect(Unit) {
viewModel.event.collectLatest {
Expand All @@ -59,24 +67,33 @@ fun DiaryWriteScreen(
DiaryWriteScreen(
title = title,
content = content,
searchValue = searchValue,
selectableLabels = selectableLabels,
onTitleChange = viewModel::setTitle,
onContentChange = viewModel::setContent,
onCheckChange = viewModel::toggleLabel,
onSearchValueChange = viewModel::setSearchValue,
onClickSave = viewModel::addDreamDiary,
onBackClick = onBackClick,
)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DiaryWriteScreen(
private fun DiaryWriteScreen(
title: String,
content: String,
searchValue: String,
selectableLabels: List<SelectableLabel>,
onTitleChange: (String) -> Unit,
onContentChange: (String) -> Unit,
onCheckChange: (labelUi: LabelUi) -> Unit,
onSearchValueChange: (String) -> Unit,
onClickSave: () -> Unit,
onBackClick: () -> Unit,
) {
val scrollState = rememberScrollState()
var isLabelSelectionDialogOpen by remember { mutableStateOf(false) }

Scaffold(
topBar = {
Expand Down Expand Up @@ -137,7 +154,7 @@ fun DiaryWriteScreen(
modifier = Modifier
.padding(horizontal = 16.dp)
.clickable {
// TODO
isLabelSelectionDialogOpen = true
},
verticalAlignment = Alignment.CenterVertically,
) {
Expand Down Expand Up @@ -184,18 +201,38 @@ fun DiaryWriteScreen(
},
)
}
if (isLabelSelectionDialogOpen) {
LabelSelectionDialog(
onDismissRequest = { isLabelSelectionDialogOpen = false },
searchValue = searchValue,
onSearchValueChange = onSearchValueChange,
selectableLabels = selectableLabels,
onCheckChange = onCheckChange,
modifier = Modifier.width(400.dp),
)
}
}
}

@Composable
@Preview(showBackground = true)
fun PreviewDiaryListScreen() {
DiaryWriteScreen(
title = "",
content = "",
onTitleChange = {},
onContentChange = {},
onClickSave = {},
onBackClick = {},
)
private fun PreviewDiaryListScreen() {
DreamdiaryTheme {
DiaryWriteScreen(
title = "",
content = "",
searchValue = "",
selectableLabels = listOf(
SelectableLabel(LabelUi("์•…๋ชฝ"), isSelected = true),
SelectableLabel(LabelUi("๊ฐœ๊ฟˆ"), isSelected = false),
SelectableLabel(LabelUi("๊ท€์‹ "), isSelected = false),
),
onTitleChange = {},
onContentChange = {},
onCheckChange = {},
onClickSave = {},
onBackClick = {},
onSearchValueChange = {},
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ package com.boostcamp.dreamteam.dreamdiary.feature.diary.write
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.boostcamp.dreamteam.dreamdiary.core.domain.usecase.AddDreamDiaryUseCase
import com.boostcamp.dreamteam.dreamdiary.feature.diary.models.LabelUi
import com.boostcamp.dreamteam.dreamdiary.feature.diary.write.model.DiaryWriteEvent
import com.boostcamp.dreamteam.dreamdiary.feature.diary.write.model.DiaryWriteUiState
import dagger.hilt.android.lifecycle.HiltViewModel
Expand Down Expand Up @@ -32,6 +33,22 @@ class DiaryWriteViewModel @Inject constructor(
_uiState.value = _uiState.value.copy(content = content)
}

fun setSearchValue(searchValue: String) {
_uiState.value = _uiState.value.copy(searchValue = searchValue)
}

fun toggleLabel(labelUi: LabelUi) {
_uiState.value = _uiState.value.copy(
selectableLabels = _uiState.value.selectableLabels.map {
if (it.label.name == labelUi.name) {
it.copy(isSelected = !it.isSelected)
} else {
it
}
},
)
}

fun addDreamDiary() {
val title = _uiState.value.title
val content = _uiState.value.content
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
package com.boostcamp.dreamteam.dreamdiary.feature.diary.write.components

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.boostcamp.dreamteam.dreamdiary.designsystem.theme.DreamdiaryTheme
import com.boostcamp.dreamteam.dreamdiary.feature.diary.models.LabelUi

@Composable
internal fun LabelItem(
label: String,
isChecked: Boolean,
onLabelClick: (LabelUi) -> Unit,
modifier: Modifier = Modifier,
) {
Row(
modifier = modifier
.clickable { onLabelClick(LabelUi(label)) }
.padding(8.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
Text(text = label)
Checkbox(
checked = isChecked,
onCheckedChange = null,
)
}
}

@Preview(showBackground = true)
@Composable
private fun LabelItemPreview() {
DreamdiaryTheme {
LabelItem(
modifier = Modifier
.width(200.dp)
.padding(4.dp),
label = "์•…๋ชฝ",
isChecked = true,
onLabelClick = {},
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
package com.boostcamp.dreamteam.dreamdiary.feature.diary.write.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import com.boostcamp.dreamteam.dreamdiary.designsystem.theme.DreamdiaryTheme
import com.boostcamp.dreamteam.dreamdiary.feature.diary.models.LabelUi
import com.boostcamp.dreamteam.dreamdiary.feature.diary.write.model.SelectableLabel

@Composable
internal fun LabelSelectionDialog(
onDismissRequest: () -> Unit,
searchValue: String,
selectableLabels: List<SelectableLabel>,
onSearchValueChange: (String) -> Unit,
onCheckChange: (labelUi: LabelUi) -> Unit,
modifier: Modifier = Modifier,
) {
Dialog(onDismissRequest = onDismissRequest) {
Surface(
shape = MaterialTheme.shapes.medium,
color = MaterialTheme.colorScheme.surface,
modifier = modifier,
) {
Column(
modifier = Modifier.verticalScroll(rememberScrollState()),
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth(),
) {
TextField(
value = searchValue,
onValueChange = { onSearchValueChange(it) },
modifier = Modifier.fillMaxWidth(),
label = { Text("๊ฒ€์ƒ‰") },
trailingIcon = {
if (searchValue.isNotEmpty()) {
Icon(
imageVector = Icons.Default.Add,
contentDescription = "Add Label",
)
} else {
Icon(
imageVector = Icons.Default.Search,
contentDescription = "Search Label",
)
}
},
singleLine = true,
)
}

Spacer(modifier = Modifier.height(8.dp))

Column(modifier = Modifier.fillMaxWidth()) {
selectableLabels.forEachIndexed { index, selectableLabel ->
LabelItem(
modifier = Modifier
.fillMaxWidth()
.padding(start = 8.dp),
label = selectableLabel.label.name,
isChecked = selectableLabels[index].isSelected,
onLabelClick = onCheckChange,
)
}
}

Spacer(modifier = Modifier.height(16.dp))

Row(
modifier = Modifier.align(Alignment.End),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
TextButton(onClick = {
onDismissRequest()
onSearchValueChange("")
}) {
Text("์ทจ์†Œ")
}
TextButton(onClick = { onDismissRequest() }) {
Text("ํ™•์ธ")
}
}
}
}
}
}

@Preview(showBackground = true)
@Composable
private fun LabelSelectionDialogPreview() {
DreamdiaryTheme {
LabelSelectionDialog(
onDismissRequest = {},
searchValue = "",
onSearchValueChange = {},
onCheckChange = {},
selectableLabels = listOf(
SelectableLabel(LabelUi("์•…๋ชฝ"), isSelected = true),
SelectableLabel(LabelUi("๊ฐœ๊ฟˆ"), isSelected = false),
SelectableLabel(LabelUi("๊ท€์‹ "), isSelected = false),
),
modifier = Modifier.width(400.dp),
)
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
package com.boostcamp.dreamteam.dreamdiary.feature.diary.write.model

import com.boostcamp.dreamteam.dreamdiary.feature.diary.models.LabelUi

data class DiaryWriteUiState(
val title: String = "",
val content: String = "",
val searchValue: String = "",
val selectableLabels: List<SelectableLabel> = emptyList(),
)

data class SelectableLabel(
val label: LabelUi,
val isSelected: Boolean,
)