-
Notifications
You must be signed in to change notification settings - Fork 133
[WOOMOB-1516] - Booking attendance status #14778
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
base: trunk
Are you sure you want to change the base?
Changes from all commits
6f4456d
b4e25d2
893bcb8
ceacf4f
01c9678
dde00b5
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,24 +8,35 @@ import androidx.compose.foundation.layout.Column | |
import androidx.compose.foundation.layout.Row | ||
import androidx.compose.foundation.layout.fillMaxWidth | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.layout.size | ||
import androidx.compose.material3.HorizontalDivider | ||
import androidx.compose.material3.Icon | ||
import androidx.compose.material3.MaterialTheme | ||
import androidx.compose.material3.Text | ||
import androidx.compose.runtime.Composable | ||
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.layout.onSizeChanged | ||
import androidx.compose.ui.platform.LocalDensity | ||
import androidx.compose.ui.res.painterResource | ||
import androidx.compose.ui.res.stringResource | ||
import androidx.compose.ui.text.style.TextOverflow | ||
import androidx.compose.ui.unit.DpSize | ||
import androidx.compose.ui.unit.dp | ||
import com.woocommerce.android.R | ||
import com.woocommerce.android.ui.bookings.details.AttendanceUpdateStatus | ||
import com.woocommerce.android.ui.compose.animations.SkeletonView | ||
import com.woocommerce.android.ui.compose.preview.LightDarkThemePreviews | ||
import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground | ||
|
||
@Composable | ||
fun BookingAttendanceSection( | ||
status: BookingAttendanceStatus, | ||
attendanceUpdateStatus: AttendanceUpdateStatus, | ||
onClick: () -> Unit, | ||
modifier: Modifier = Modifier, | ||
) { | ||
|
@@ -37,8 +48,11 @@ fun BookingAttendanceSection( | |
HorizontalDivider(thickness = 0.5.dp) | ||
AttendanceRow( | ||
label = R.string.booking_attendance_label_status, | ||
attendanceUpdateStatus = attendanceUpdateStatus, | ||
value = status.text(), | ||
modifier = Modifier.clickable { onClick() } | ||
modifier = Modifier.clickable { | ||
if (attendanceUpdateStatus == AttendanceUpdateStatus.Idle) onClick() | ||
} | ||
) | ||
HorizontalDivider(thickness = 0.5.dp) | ||
} | ||
|
@@ -54,9 +68,12 @@ fun BookingAttendanceSection( | |
@Composable | ||
private fun AttendanceRow( | ||
@StringRes label: Int, | ||
attendanceUpdateStatus: AttendanceUpdateStatus, | ||
value: String, | ||
modifier: Modifier = Modifier, | ||
) { | ||
val density = LocalDensity.current | ||
var skeletonSize by remember { mutableStateOf(DpSize.Zero) } | ||
Column(modifier = modifier) { | ||
Row( | ||
verticalAlignment = Alignment.CenterVertically, | ||
|
@@ -66,20 +83,39 @@ private fun AttendanceRow( | |
.padding(horizontal = 16.dp, vertical = 12.dp) | ||
) { | ||
BookingDetailsLabel(label) | ||
Row(verticalAlignment = Alignment.CenterVertically) { | ||
Text( | ||
text = value, | ||
style = MaterialTheme.typography.labelLarge, | ||
color = MaterialTheme.colorScheme.onSurfaceVariant, | ||
maxLines = 1, | ||
overflow = TextOverflow.Ellipsis | ||
) | ||
Icon( | ||
painter = painterResource(id = R.drawable.ic_arrow_right), | ||
contentDescription = null, | ||
tint = MaterialTheme.colorScheme.surfaceVariant, | ||
modifier = Modifier.padding(start = 8.dp) | ||
) | ||
when (attendanceUpdateStatus) { | ||
AttendanceUpdateStatus.InProgress -> { | ||
SkeletonView( | ||
modifier = Modifier | ||
.size(skeletonSize) | ||
) | ||
} | ||
|
||
AttendanceUpdateStatus.Idle -> { | ||
Row( | ||
verticalAlignment = Alignment.CenterVertically, | ||
modifier = Modifier | ||
.onSizeChanged { | ||
with(density) { | ||
skeletonSize = DpSize(it.width.toDp(), it.height.toDp()) | ||
} | ||
} | ||
) { | ||
Text( | ||
text = value, | ||
style = MaterialTheme.typography.labelLarge, | ||
Comment on lines
+86
to
+106
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Skeleton uses size(skeletonSize) with no minimums; on first render in InProgress state, it will render at 0×0. Add a fallback size (e.g., sizeIn(minWidth = 80.dp, minHeight = 20.dp)) or conditionally use a default when skeletonSize == DpSize.Zero so loading is visible. Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||
color = MaterialTheme.colorScheme.onSurfaceVariant, | ||
maxLines = 1, | ||
overflow = TextOverflow.Ellipsis | ||
) | ||
Icon( | ||
painter = painterResource(id = R.drawable.ic_arrow_right), | ||
contentDescription = null, | ||
tint = MaterialTheme.colorScheme.surfaceVariant, | ||
modifier = Modifier.padding(start = 8.dp) | ||
) | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
@@ -90,7 +126,21 @@ private fun AttendanceRow( | |
private fun BookingAttendanceSectionPreview() { | ||
WooThemeWithBackground { | ||
BookingAttendanceSection( | ||
status = BookingAttendanceStatus.BOOKED, | ||
status = BookingAttendanceStatus.Booked, | ||
attendanceUpdateStatus = AttendanceUpdateStatus.Idle, | ||
onClick = {}, | ||
modifier = Modifier.fillMaxWidth() | ||
) | ||
} | ||
} | ||
|
||
@LightDarkThemePreviews | ||
@Composable | ||
private fun BookingAttendanceSectionInProgressPreview() { | ||
WooThemeWithBackground { | ||
BookingAttendanceSection( | ||
status = BookingAttendanceStatus.Booked, | ||
attendanceUpdateStatus = AttendanceUpdateStatus.InProgress, | ||
onClick = {}, | ||
modifier = Modifier.fillMaxWidth() | ||
) | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As you can see, there's no
Cancelled
here - not sure yet how we will determine such attendance status.