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

[Feature/#18] : 타임테이블 수정 #19

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -3,148 +3,171 @@ package com.sopt.core.designsystem.component.timetable
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.sopt.core.designsystem.theme.Gray200
import com.sopt.core.designsystem.theme.NoostakAndroidTheme
import com.sopt.core.designsystem.theme.NoostakTheme
import com.sopt.core.extension.noRippleClickable
import com.sopt.core.type.CellType
import com.sopt.core.util.timetable.TimeTable
import com.sopt.domain.entity.AvailableTimeEntity
import com.sopt.domain.entity.TimeEntity
import com.sopt.domain.entity.TimeTableEntity
import com.sopt.domain.entity.PeriodEntity

@Composable
fun NoostakEditableTimeTable(
data: TimeTableEntity,
availablePeriods: PeriodEntity,
modifier: Modifier = Modifier,
onSelectionChange: (List<TimeEntity>) -> Unit
onSelectedTimesChanged: (List<AvailableTimeEntity>) -> Unit
) {
val days = data.timeEntity.size
val timeSlots = calculateTimeSlots(data.startTime, data.endTime)
val selectedCells = remember { mutableStateListOf<Pair<Int, Int>>() } // Row, Column 저장
val days = availablePeriods.dates.size
val timeSlots =
TimeTable().calculateTimeSlots(availablePeriods.startTime, availablePeriods.endTime)
val selectedCells = remember { mutableStateListOf<Pair<Int, Int>>() }

LazyVerticalGrid(
LazyColumn(
modifier = modifier
.border(
width = 1.dp,
color = NoostakTheme.colors.gray200,
shape = RoundedCornerShape(8.dp)
),
columns = GridCells.Fixed(days + 1)
)
) {
items((days + 1) * (timeSlots + 1)) { index ->
val (rowIndex, columnIndex) = index / (days + 1) to index % (days + 1)
val cellType = determineCellType(rowIndex, columnIndex)
val isSelected = selectedCells.contains(rowIndex to columnIndex)
val backgroundColor =
getEditableBackgroundColor(cellType, isSelected)
val text = getCellText(cellType, rowIndex, columnIndex, data)
// 행 반복
items(timeSlots + 1) { rowIndex ->
Row(modifier = Modifier.fillMaxWidth()) {
// 열 반복
for (columnIndex in 0..days) {
val cellType = TimeTable().determineCellType(rowIndex, columnIndex)
val text =
TimeTable().getCellText(cellType, rowIndex, columnIndex, availablePeriods)
val isSelected = selectedCells.contains(rowIndex to columnIndex)
val backgroundColor =
TimeTable().getEditableBackgroundColor(cellType, isSelected)
val shape = when (rowIndex to columnIndex) {
0 to 0 -> RoundedCornerShape(topStart = 8.dp)
0 to days -> RoundedCornerShape(topEnd = 8.dp)
timeSlots to days -> RoundedCornerShape(bottomEnd = 8.dp)
timeSlots to 0 -> RoundedCornerShape(bottomStart = 8.dp)
else -> RoundedCornerShape(0.dp)
}

Box(
modifier = when (cellType) {
CellType.Blank ->
Modifier
.width(42.dp)
.height(36.dp)

NoostakEditableTimeTableBox(
index = index,
days = days,
timeSlots = timeSlots,
backgroundColor = backgroundColor,
text = text,
onClick = {
if (cellType == CellType.Data) {
val cell = rowIndex to columnIndex
if (selectedCells.contains(cell)) {
selectedCells.remove(cell)
} else {
selectedCells.add(cell)
CellType.TimeHeader ->
Modifier
.width(42.dp)
.height(32.dp)

CellType.DateHeader ->
Modifier
.weight(1f)
.height(36.dp)

else ->
Modifier
.weight(1f)
.height(32.dp)
}
onSelectionChange(
selectedCells.toTimeEntities(
data.startTime,
data.timeEntity
.background(
color = backgroundColor,
shape = shape
)
.drawBehind {
val borderWidth = 1.dp.toPx()
val borderColor = Gray200

if (rowIndex > 0) {
drawLine(
color = borderColor,
start = Offset(0f, 0f),
end = Offset(size.width, 0f),
strokeWidth = borderWidth
)
}

if (columnIndex > 0) {
drawLine(
color = borderColor,
start = Offset(0f, 0f),
end = Offset(0f, size.height),
strokeWidth = borderWidth
)
}
}
.noRippleClickable {
if (cellType == CellType.Data) {
val cell = rowIndex to columnIndex
if (selectedCells.contains(cell)) {
selectedCells.remove(cell)
} else {
selectedCells.add(cell)
}
onSelectedTimesChanged(
TimeTable().getSelectedTimes(
selectedCells,
availablePeriods
)
)
}
},
contentAlignment = Alignment.Center
) {
Text(
text = text,
style = NoostakTheme.typography.c4Regular,
color = NoostakTheme.colors.gray600,
textAlign = TextAlign.Center
)
}
}
)
}
}
}
}

@Preview(showBackground = true)
@Composable
fun getEditableBackgroundColor(
cellType: CellType,
isSelected: Boolean
): Color = when (cellType) {
CellType.Blank, CellType.DateHeader, CellType.TimeHeader -> Color.Transparent
CellType.Data -> if (isSelected) NoostakTheme.colors.blue400 else Color.Transparent
}

@Composable
fun NoostakEditableTimeTableBox(
index: Int,
days: Int,
timeSlots: Int,
backgroundColor: Color,
text: String,
onClick: () -> Unit
) {
val shape = when (index) {
0 -> RoundedCornerShape(topStart = 10.dp)
days -> RoundedCornerShape(topEnd = 10.dp)
(days + 1) * timeSlots -> RoundedCornerShape(bottomStart = 10.dp)
(days + 1) * (timeSlots + 1) - 1 -> RoundedCornerShape(bottomEnd = 10.dp)
else -> RoundedCornerShape(0.dp)
}

Box(
modifier = Modifier
.border(
width = 0.5.dp,
color = NoostakTheme.colors.gray200,
shape = shape
)
.background(
color = backgroundColor,
shape = shape
)
.defaultMinSize(minWidth = 42.dp, minHeight = 36.dp)
.noRippleClickable { onClick() },
contentAlignment = Alignment.Center
) {
Text(
modifier = Modifier.padding(horizontal = 5.dp, vertical = 3.dp),
text = text,
color = NoostakTheme.colors.gray600,
style = NoostakTheme.typography.c4Regular,
textAlign = TextAlign.Center,
maxLines = 2
fun NoostakEditableTimeTable1Preview() {
NoostakAndroidTheme {
val mockAvailablePeriods = PeriodEntity(
dates = listOf("2024-09-05T10:00:00", "2024-09-06T10:00:00", "2024-09-07T10:00:00"),
startTime = "2024-09-05T10:00:00",
endTime = "2024-09-07T18:00:00"
)
}
}

fun List<Pair<Int, Int>>.toTimeEntities(
startTime: String,
timeEntityList: List<TimeEntity>
): List<TimeEntity> {
val startHour = startTime.split(":")[0].toInt()

return this.groupBy { it.second }.mapNotNull { (columnIndex, rowIndex) ->
val date = timeEntityList.getOrNull(columnIndex - 1)?.date ?: return@mapNotNull null
val times = rowIndex.map { row ->
val hour = startHour + (row.first - 1)
AvailableTimeEntity(
startTime = "%02d:00".format(hour),
endTime = "%02d:00".format(hour + 1)
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
NoostakEditableTimeTable(
availablePeriods = mockAvailablePeriods,
modifier = Modifier.fillMaxWidth(),
onSelectedTimesChanged = { }
)
}
TimeEntity(date = date, times = times)
}
}
Loading
Loading