feat: Fixed lists items height, added pagination, added "view all" item

openedx · May 2, 2024 · 3b4677d · 3b4677d
1 parent 0ca7094
commit 3b4677d
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 10 deletions.
diff --git a/core/src/main/java/org/openedx/core/data/api/CourseApi.kt b/core/src/main/java/org/openedx/core/data/api/CourseApi.kt
@@ -72,6 +72,7 @@ interface CourseApi {
     suspend fun getUserCourses(
         @Path("username") username: String,
         @Query("page") page: Int = 1,
+        @Query("page_size") pageSize: Int = 9,
         @Query("status") status: String? = null,
         @Query("requested_fields") fields: List<String> = emptyList()
     ): CourseEnrollments

diff --git a/dashboard/src/main/java/org/openedx/courses/presentation/AllEnrolledCoursesFragment.kt b/dashboard/src/main/java/org/openedx/courses/presentation/AllEnrolledCoursesFragment.kt
@@ -62,8 +62,10 @@ import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.platform.testTag
@@ -327,6 +329,10 @@ private fun AllEnrolledCoursesScreen(
                             }
 
                             is AllEnrolledCoursesUIState.Courses -> {
+                                val density = LocalDensity.current
+                                var itemHeight by rememberSaveable {
+                                    mutableStateOf(0f)
+                                }
                                 Box(
                                     modifier = Modifier.fillMaxSize(),
                                     contentAlignment = Alignment.Center
@@ -347,8 +353,12 @@ private fun AllEnrolledCoursesScreen(
                                             content = {
                                                 items(state.courses) { course ->
                                                     CourseItem(
-                                                        course,
-                                                        apiHostUrl,
+                                                        modifier = Modifier
+                                                            .onSizeChanged {
+                                                                itemHeight = it.height.toFloat()
+                                                            },
+                                                        course = course,
+                                                        apiHostUrl = apiHostUrl,
                                                         onClick = {
                                                             onAction(AllEnrolledCoursesAction.OpenCourse(it))
                                                         }
@@ -359,10 +369,12 @@ private fun AllEnrolledCoursesScreen(
                                                         Box(
                                                             modifier = Modifier
                                                                 .fillMaxWidth()
-                                                                .padding(vertical = 16.dp),
+                                                                .height(with(density) { itemHeight.toDp() }),
                                                             contentAlignment = Alignment.Center
                                                         ) {
-                                                            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                                                            CircularProgressIndicator(
+                                                                color = MaterialTheme.appColors.primary
+                                                            )
                                                         }
                                                     }
                                                 }
@@ -420,13 +432,15 @@ private fun AllEnrolledCoursesScreen(
 
 @Composable
 private fun CourseItem(
+    modifier: Modifier = Modifier,
     course: EnrolledCourse,
     apiHostUrl: String,
     onClick: (EnrolledCourse) -> Unit,
 ) {
     Card(
-        modifier = Modifier
+        modifier = modifier
             .width(170.dp)
+            .height(180.dp)
             .clickable {
                 onClick(course)
             },
@@ -456,13 +470,17 @@ private fun CourseItem(
                     color = MaterialTheme.appColors.primary,
                     backgroundColor = MaterialTheme.appColors.divider
                 )
+
                 Text(
                     modifier = Modifier
                         .fillMaxWidth()
                         .padding(horizontal = 8.dp)
                         .padding(top = 4.dp),
                     style = MaterialTheme.appTypography.labelMedium,
                     color = MaterialTheme.appColors.textFieldHint,
+                    overflow = TextOverflow.Ellipsis,
+                    minLines = 1,
+                    maxLines = 2,
                     text = stringResource(
                         R.string.dashboard_course_date,
                         TimeUtils.getCourseFormattedDate(
@@ -483,7 +501,7 @@ private fun CourseItem(
                     style = MaterialTheme.appTypography.titleSmall,
                     color = MaterialTheme.appColors.textDark,
                     overflow = TextOverflow.Ellipsis,
-                    minLines = 2,
+                    minLines = 1,
                     maxLines = 2
                 )
             }

diff --git a/dashboard/src/main/java/org/openedx/courses/presentation/UserCoursesScreen.kt b/dashboard/src/main/java/org/openedx/courses/presentation/UserCoursesScreen.kt
@@ -288,6 +288,7 @@ private fun SecondaryCourses(
     onCourseClick: (EnrolledCourse) -> Unit,
     onViewAllClick: () -> Unit
 ) {
+    val items = courses.take(5)
     Column(
         modifier = Modifier
             .fillMaxWidth()
@@ -296,7 +297,7 @@ private fun SecondaryCourses(
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         TextIcon(
-            text = stringResource(R.string.dashboard_view_all, courses.size),
+            text = stringResource(R.string.dashboard_view_all_with_count, courses.size),
             textStyle = MaterialTheme.appTypography.titleSmall,
             icon = Icons.Default.ChevronRight,
             color = MaterialTheme.appColors.textDark,
@@ -305,13 +306,58 @@ private fun SecondaryCourses(
             onClick = onViewAllClick
         )
         LazyRow {
-            items(courses) {
+            items(items) {
                 CourseListItem(
                     course = it,
                     apiHostUrl = apiHostUrl,
                     onCourseClick = onCourseClick
                 )
             }
+            item {
+                ViewAllItem(
+                    onViewAllClick = onViewAllClick
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun ViewAllItem(
+    onViewAllClick: () -> Unit
+) {
+    Card(
+        modifier = Modifier
+            .width(140.dp)
+            .height(152.dp)
+            .padding(4.dp)
+            .clickable(
+                onClickLabel = stringResource(id = R.string.dashboard_view_all),
+                onClick = {
+                    onViewAllClick()
+                }
+            ),
+        backgroundColor = MaterialTheme.appColors.cardViewBackground,
+        shape = MaterialTheme.appShapes.courseImageShape,
+        elevation = 2.dp,
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Icon(
+                modifier = Modifier.size(48.dp),
+                painter = painterResource(id = R.drawable.dashboard_ic_book),
+                tint = MaterialTheme.appColors.textFieldBorder,
+                contentDescription = null
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+            Text(
+                text = stringResource(id = R.string.dashboard_view_all),
+                style = MaterialTheme.appTypography.titleSmall,
+                color = MaterialTheme.appColors.textDark
+            )
         }
     }
 }
@@ -325,6 +371,7 @@ private fun CourseListItem(
     Card(
         modifier = Modifier
             .width(140.dp)
+            .height(152.dp)
             .padding(4.dp)
             .clickable {
                 onCourseClick(course)
@@ -720,3 +767,13 @@ private fun UsersCourseScreenPreview() {
         )
     }
 }
+
+@Preview
+@Composable
+private fun ViewAllItemPreview() {
+    OpenEdXTheme {
+        ViewAllItem(
+            onViewAllClick = {}
+        )
+    }
+}
diff --git a/dashboard/src/main/java/org/openedx/learn/presentation/LearnFragment.kt b/dashboard/src/main/java/org/openedx/learn/presentation/LearnFragment.kt
@@ -107,7 +107,6 @@ private fun LearnScreen(
         backgroundColor = MaterialTheme.appColors.background
     ) { paddingValues ->
 
-
         Column(
             modifier = Modifier
                 .padding(paddingValues)

diff --git a/dashboard/src/main/res/drawable/dashboard_ic_book.xml b/dashboard/src/main/res/drawable/dashboard_ic_book.xml
@@ -0,0 +1,44 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="97dp"
+    android:height="96dp"
+    android:viewportWidth="97"
+    android:viewportHeight="96">
+    <group>
+        <clip-path android:pathData="M0.5,0h96v96h-96z" />
+        <path
+            android:pathData="M12.5,76C17.973,72.84 24.181,71.177 30.5,71.177C36.819,71.177 43.027,72.84 48.5,76C53.973,72.84 60.181,71.177 66.5,71.177C72.819,71.177 79.027,72.84 84.5,76"
+            android:strokeLineJoin="round"
+            android:strokeWidth="7"
+            android:fillColor="#00000000"
+            android:strokeColor="#8E9BAE"
+            android:strokeLineCap="round" />
+        <path
+            android:pathData="M12.5,24C17.973,20.84 24.181,19.177 30.5,19.177C36.819,19.177 43.027,20.84 48.5,24C53.973,20.84 60.181,19.177 66.5,19.177C72.819,19.177 79.027,20.84 84.5,24"
+            android:strokeLineJoin="round"
+            android:strokeWidth="7"
+            android:fillColor="#00000000"
+            android:strokeColor="#8E9BAE"
+            android:strokeLineCap="round" />
+        <path
+            android:pathData="M12.5,24V76"
+            android:strokeLineJoin="round"
+            android:strokeWidth="7"
+            android:fillColor="#00000000"
+            android:strokeColor="#8E9BAE"
+            android:strokeLineCap="round" />
+        <path
+            android:pathData="M48.5,24V76"
+            android:strokeLineJoin="round"
+            android:strokeWidth="7"
+            android:fillColor="#00000000"
+            android:strokeColor="#8E9BAE"
+            android:strokeLineCap="round" />
+        <path
+            android:pathData="M84.5,24V76"
+            android:strokeLineJoin="round"
+            android:strokeWidth="7"
+            android:fillColor="#00000000"
+            android:strokeColor="#8E9BAE"
+            android:strokeLineCap="round" />
+    </group>
+</vector>
diff --git a/dashboard/src/main/res/values/strings.xml b/dashboard/src/main/res/values/strings.xml
@@ -10,7 +10,8 @@
     <string name="dashboard_start_course">Start course</string>
     <string name="dashboard_resume_course">Resume Course</string>
     <string name="dashboard_past_due_assignment">%1$d Past Due Assignment</string>
-    <string name="dashboard_view_all">View All (%1$d)</string>
+    <string name="dashboard_view_all_with_count">View All (%1$d)</string>
+    <string name="dashboard_view_all">View All</string>
     <string name="dashboard_assignment_due_in_days">%1$s Due in %2$s</string>
     <string name="dashboard_course_filter_all">All</string>
     <string name="dashboard_course_filter_in_progress">In Progress</string>