Skip to content

Commit

Permalink
[MERGE] #51 -> develop
Browse files Browse the repository at this point in the history
[UI/#51] 필터링 μž¬μ„€μ • UI κ΅¬ν˜„
  • Loading branch information
Hyobeen-Park authored Jul 15, 2024
2 parents 962dc41 + 0fa6c2f commit 5cfdab5
Show file tree
Hide file tree
Showing 11 changed files with 406 additions and 48 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
package com.terning.core.designsystem.component.button

import androidx.annotation.StringRes
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ripple.LocalRippleTheme
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.terning.core.designsystem.theme.Grey400
import com.terning.core.designsystem.theme.TerningMain
import com.terning.core.designsystem.theme.TerningSub1
import com.terning.core.designsystem.theme.TerningSub5
import com.terning.core.designsystem.theme.TerningTheme
import com.terning.core.designsystem.theme.White
import com.terning.core.util.NoRippleTheme

@Composable
fun ChangeFilterButton(
isSelected: Boolean,
@StringRes text: Int,
cornerRadius: Dp,
paddingVertical: Dp,
onButtonClick: () -> Unit,
modifier: Modifier = Modifier,
) {
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val backgroundColor = when {
!isSelected && !isPressed -> White
!isSelected && isPressed -> TerningSub5
else -> TerningMain
}
val textColor = when {
!isSelected -> Grey400
else -> White
}
val borderColor = when {
!isSelected && !isPressed -> TerningMain
!isSelected && isPressed -> TerningSub1
else -> TerningMain
}

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
Button(
contentPadding = PaddingValues(vertical = paddingVertical),
modifier = modifier
.fillMaxWidth()
.wrapContentHeight(),
interactionSource = interactionSource,
colors = ButtonDefaults.buttonColors(
containerColor = backgroundColor,
contentColor = textColor,
),
border = BorderStroke(
width = 1.dp,
color = borderColor
),
shape = RoundedCornerShape(cornerRadius),
onClick = { onButtonClick() }
) {
Text(
text = stringResource(id = text),
style = TerningTheme.typography.button3,
textAlign = TextAlign.Center,
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
package com.terning.feature.home.changefilter

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavController
import com.terning.core.designsystem.component.button.RectangleButton
import com.terning.core.designsystem.component.datepicker.DatePickerUI
import com.terning.core.designsystem.component.topappbar.BackButtonTopAppBar
import com.terning.core.designsystem.theme.TerningTheme
import com.terning.feature.R
import com.terning.feature.home.changefilter.component.ChangeFilteringRadioGroup
import com.terning.feature.home.changefilter.component.FilteringMainTitleText
import com.terning.feature.home.changefilter.component.FilteringSubTitleText
import com.terning.feature.home.home.HomeViewModel
import com.terning.feature.home.home.model.InternFilterData
import com.terning.feature.home.home.model.UserNameState
import com.terning.feature.home.home.navigation.navigateHome
import java.util.Calendar

val currentYear = Calendar.getInstance().get(Calendar.YEAR)
val currentMonth = Calendar.getInstance().get(Calendar.MONTH)

@Composable
fun ChangeFilterRoute(
navController: NavController,
) {
ChangeFilterScreen(navController)
}

@Composable
fun ChangeFilterScreen(
navController: NavController,
viewModel: HomeViewModel = hiltViewModel(),
) {
Scaffold(
topBar = {
BackButtonTopAppBar(
title = stringResource(id = R.string.change_filter_top_bar_title),
onBackButtonClick = { navController.popBackStack() },
modifier = Modifier
.shadow(elevation = 2.dp)
)
}
) { paddingValues ->
Column(
modifier = Modifier
.padding(
top = paddingValues.calculateTopPadding(),
)
) {
ShowTitle(
mainTitle = stringResource(id = R.string.change_filter_grade_main),
subTitle = stringResource(id = R.string.filtering_status1_sub),
modifier = Modifier.padding(
top = 31.dp,
start = 24.dp,
end = 24.dp
)
)
ChangeFilteringRadioGroup(
filterType = 0,
internFilterData = viewModel.userName.internFilter,
onButtonClick = { viewModel.setGrade(it) }
)

UserNameState(
userName = "λ‚¨μ§€μš°μžλž‘μŠ€λŸ¬μš΄ν‹°μ—˜μ΄λ˜",
internFilter = InternFilterData(
grade = 4,
workingPeriod = 1,
startYear = 2024,
startMonth = 7,
)
)

ShowTitle(
mainTitle = stringResource(id = R.string.filtering_status2_title),
subTitle = stringResource(id = R.string.filtering_status2_sub),
modifier = Modifier.padding(
top = 39.dp,
start = 24.dp,
end = 24.dp
)
)
ChangeFilteringRadioGroup(
filterType = 1,
internFilterData = viewModel.userName.internFilter,
onButtonClick = { viewModel.setWorkingPeriod(it) }
)

ShowTitle(
mainTitle = stringResource(id = R.string.filtering_status3_title),
subTitle = stringResource(id = R.string.filtering_status3_sub),
modifier = Modifier.padding(
top = 39.dp,
start = 24.dp,
end = 24.dp
)
)

Spacer(modifier = Modifier.weight(1f))
DatePickerUI(
chosenYear = currentYear,
chosenMonth = currentMonth,
)
Spacer(modifier = Modifier.weight(1f))

RectangleButton(
style = TerningTheme.typography.button0,
paddingVertical = 19.dp,
text = R.string.change_filter_save,
onButtonClick = {
navController.navigateHome()
}
)
}
}
}

@Composable
private fun ShowTitle(
mainTitle: String,
subTitle: String,
modifier: Modifier = Modifier,
) {
FilteringMainTitleText(
text = mainTitle,
modifier = modifier.padding()
)
FilteringSubTitleText(
text = subTitle,
modifier = Modifier
.padding(
top = 3.dp,
bottom = 13.dp,
start = 24.dp,
end = 24.dp
)
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
package com.terning.feature.home.changefilter.component

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.itemsIndexed
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.terning.core.designsystem.component.button.ChangeFilterButton
import com.terning.feature.R
import com.terning.feature.home.home.model.InternFilterData

@Composable
fun ChangeFilteringRadioGroup(
filterType: Int,
internFilterData: InternFilterData?,
onButtonClick: (Int) -> Unit,
modifier: Modifier = Modifier,
) {
val options = if (filterType == 0) {
listOf(
R.string.filtering_status1_button1,
R.string.filtering_status1_button2,
R.string.filtering_status1_button3,
R.string.filtering_status1_button4,
)
} else {
listOf(
R.string.filtering_status2_button1,
R.string.filtering_status2_button2,
R.string.filtering_status2_button3,
)
}

val selectedIndex = remember { mutableIntStateOf(0) }
var selectedButton = remember { mutableStateListOf(false, false, false, false) }

if (filterType == 0) {
selectedButton[
internFilterData?.grade ?: 0
] = true
} else {
selectedButton[
internFilterData?.workingPeriod ?: 0
] = true
}

LazyVerticalGrid(
columns = GridCells.Fixed(options.size),
horizontalArrangement = Arrangement.spacedBy(12.dp),
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(horizontal = 24.dp)

) {
itemsIndexed(options) { index, option ->
ChangeFilterButton(
isSelected = selectedButton[index],
modifier = Modifier
.wrapContentHeight(),
text = options[index],
cornerRadius = 10.dp,
paddingVertical = 10.dp,
onButtonClick = {
selectedIndex.intValue = option
selectedButton.indices.forEach { i -> selectedButton[i] = false }
selectedButton[index] = true
onButtonClick(index)
}
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
package com.terning.feature.home.changefilter.navigation

import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.NavHostController
import androidx.navigation.NavOptions
import androidx.navigation.compose.composable
import com.terning.core.navigation.Route
import com.terning.feature.home.changefilter.ChangeFilterRoute
import kotlinx.serialization.Serializable

fun NavController.navigateChangeFilter(navOptions: NavOptions? = null) {
navigate(
route = ChangeFilter,
navOptions = navOptions
)
}

fun NavGraphBuilder.changeFilterNavGraph(
navHostController: NavHostController
) {
composable<ChangeFilter> {
ChangeFilterRoute(
navController = navHostController
)
}
}

@Serializable
data object ChangeFilter : Route
Loading

0 comments on commit 5cfdab5

Please sign in to comment.