Adding Sections to Meds Page + Change Medication Status Colors + add …

…a key (#120) # *Adding Sections to Meds Page + Change Medication Status Colors + add a key* ## ♻️ Current situation & Problem 1. Patients wanted a different color scheme for their medication treatment progress 2. Patients wanted a more clear picture of what medications they are currently taking versus the ones they are not. ## ⚙️ Release Notes - Changed the colors of the different medications based on patient treatment status and added a key for those colors either to the top or bottom of the medications page. - Separated the page into two sections: medications the patient is taking vs the medications they are not taking ## 📝 Code of Conduct & Contributing Guidelines By submitting creating this pull request, you agree to follow our [Code of Conduct](https://github.com/StanfordSpezi/.github/blob/main/CODE_OF_CONDUCT.md) and [Contributing Guidelines](https://github.com/StanfordSpezi/.github/blob/main/CONTRIBUTING.md): - [x] I agree to follow the [Code of Conduct](https://github.com/StanfordSpezi/.github/blob/main/CODE_OF_CONDUCT.md) and [Contributing Guidelines](https://github.com/StanfordSpezi/.github/blob/main/CONTRIBUTING.md). --------- Signed-off-by: Basler182 <[email protected]>
StanfordSpezi · Oct 6, 2024 · bb47cd4 · bb47cd4
1 parent 33d0893
commit bb47cd4
Show file tree

Hide file tree

Showing 15 changed files with 516 additions and 81 deletions.
diff --git a/app/src/androidTest/kotlin/edu/stanford/bdh/engagehf/medication/ui/MedicationScreenTest.kt b/app/src/androidTest/kotlin/edu/stanford/bdh/engagehf/medication/ui/MedicationScreenTest.kt
@@ -13,7 +13,19 @@ class MedicationScreenTest {
 
     @Test
     fun `it should display the success correctly`() {
-        setUiState(MedicationUiState.Success(getMedicationCardUiModels()))
+        setUiState(
+            MedicationUiState.Success(
+                medicationsTaking = Medications(
+                    medications = getMedicationCardUiModels(),
+                    expanded = true
+                ),
+                medicationsThatMayHelp = Medications(
+                    medications = getMedicationCardUiModels(),
+                    expanded = true
+                ),
+                colorKeyExpanded = true,
+            )
+        )
         medicationScreen {
             assertSuccessIsDisplayed()
         }
@@ -81,7 +93,7 @@ class MedicationScreenTest {
                 progress = 0.234f,
             ),
             isExpanded = true,
-            statusColor = MedicationColor.GREY,
+            statusColor = MedicationColor.BLUE,
             statusIconResId = R.drawable.ic_check,
             videoPath = "/videoSections/1/videos/1"
         )

diff --git a/app/src/main/kotlin/edu/stanford/bdh/engagehf/medication/components/ColorKey.kt b/app/src/main/kotlin/edu/stanford/bdh/engagehf/medication/components/ColorKey.kt
@@ -0,0 +1,81 @@
+package edu.stanford.bdh.engagehf.medication.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import edu.stanford.bdh.engagehf.R
+import edu.stanford.bdh.engagehf.medication.ui.MedicationColor
+import edu.stanford.spezi.core.design.component.DefaultElevatedCard
+import edu.stanford.spezi.core.design.theme.Sizes
+import edu.stanford.spezi.core.design.theme.Spacings
+import edu.stanford.spezi.core.design.theme.SpeziTheme
+import edu.stanford.spezi.core.design.theme.ThemePreviews
+
+@Composable
+fun ColorKey(
+    modifier: Modifier = Modifier,
+) {
+    DefaultElevatedCard(
+        modifier = modifier
+            .padding(bottom = Spacings.medium),
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(Spacings.medium),
+            verticalArrangement = Arrangement.spacedBy(Spacings.small),
+        ) {
+            MedicationColor.entries.forEach {
+                ColorKeyRow(color = it)
+            }
+        }
+    }
+}
+
+@Composable
+fun ColorKeyRow(color: MedicationColor) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier = Modifier
+                .size(Sizes.Icon.medium)
+                .background(
+                    color.value.copy(alpha = MEDICATION_ICON_ALPHA_COLOR_FACTOR),
+                    shape = CircleShape
+                )
+                .padding(Spacings.small),
+        )
+        Spacer(modifier = Modifier.width(Spacings.small))
+        Text(
+            text = when (color) {
+                MedicationColor.GREEN_SUCCESS -> stringResource(R.string.on_target_dose_that_best_helps_your_heart)
+                MedicationColor.YELLOW -> stringResource(R.string.on_medication_but_may_benefit_from_a_higher_dose)
+                MedicationColor.BLUE -> stringResource(R.string.not_on_this_medication_that_may_help_your_heart)
+            },
+            overflow = TextOverflow.Clip,
+        )
+    }
+}
+
+@ThemePreviews
+@Composable
+private fun ColorKeyPreview() {
+    SpeziTheme(isPreview = true) {
+        ColorKey()
+    }
+}
diff --git a/app/src/main/kotlin/edu/stanford/bdh/engagehf/medication/components/MedicationCard.kt b/app/src/main/kotlin/edu/stanford/bdh/engagehf/medication/components/MedicationCard.kt
@@ -38,6 +38,8 @@ import edu.stanford.spezi.core.design.theme.TextStyles
 import edu.stanford.spezi.core.design.theme.ThemePreviews
 import edu.stanford.spezi.core.utils.extensions.testIdentifier
 
+private const val LOADING_ITEM_COUNT = 3
+
 @Composable
 fun MedicationCard(
     modifier: Modifier = Modifier,
@@ -144,33 +146,52 @@ fun MedicationCard(
 }
 
 @Composable
-fun LoadingMedicationCard() {
-    DefaultElevatedCard(modifier = Modifier.padding(bottom = Spacings.medium)) {
-        Row(
+fun LoadingMedicationSection() {
+    Column {
+        RectangleShimmerEffect(
             modifier = Modifier
-                .fillMaxWidth()
-                .padding(Spacings.medium),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            CircleShimmerEffect(modifier = Modifier.size(Sizes.Icon.medium))
+                .padding(vertical = Spacings.medium)
+                .fillMaxWidth(fraction = 0.7f)
+                .height(textStyle = TextStyles.titleMedium) // section header, same height as the text style
+        )
 
-            Column(modifier = Modifier.padding(Spacings.small)) {
-                RectangleShimmerEffect(
-                    modifier = Modifier
-                        .fillMaxWidth(fraction = 0.8f)
-                        .height(textStyle = TextStyles.titleLarge)
-                )
-                VerticalSpacer()
-                RectangleShimmerEffect(
+        repeat(LOADING_ITEM_COUNT) {
+            DefaultElevatedCard(modifier = Modifier.padding(bottom = Spacings.medium)) {
+                Row(
                     modifier = Modifier
-                        .fillMaxWidth(fraction = 0.5f)
-                        .height(textStyle = TextStyles.titleSmall)
-                )
+                        .fillMaxWidth()
+                        .padding(Spacings.medium),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    CircleShimmerEffect(modifier = Modifier.size(Sizes.Icon.medium))
+
+                    Column(modifier = Modifier.padding(Spacings.small)) {
+                        RectangleShimmerEffect(
+                            modifier = Modifier
+                                .fillMaxWidth(fraction = 0.8f)
+                                .height(textStyle = TextStyles.titleLarge)
+                        )
+                        VerticalSpacer()
+                        RectangleShimmerEffect(
+                            modifier = Modifier
+                                .fillMaxWidth(fraction = 0.5f)
+                                .height(textStyle = TextStyles.titleSmall)
+                        )
+                    }
+                }
             }
         }
     }
 }
 
+@ThemePreviews
+@Composable
+private fun LoadingMedicationSectionPreview() {
+    SpeziTheme(isPreview = true) {
+        LoadingMedicationSection()
+    }
+}
+
 @ThemePreviews
 @Composable
 private fun MedicationCardPreview(

diff --git a/...in/kotlin/edu/stanford/bdh/engagehf/medication/components/MedicationCardModelsProvider.kt b/...in/kotlin/edu/stanford/bdh/engagehf/medication/components/MedicationCardModelsProvider.kt
@@ -12,7 +12,7 @@ class MedicationCardModelsProvider : PreviewParameterProvider<MedicationCardUiMo
         getMedicationCardUiModel(MedicationColor.GREEN_SUCCESS, isExpanded = true),
         getMedicationCardUiModel(color = MedicationColor.GREEN_SUCCESS),
         getMedicationCardUiModel(color = MedicationColor.YELLOW),
-        getMedicationCardUiModel(color = MedicationColor.GREY),
+        getMedicationCardUiModel(color = MedicationColor.BLUE),
     )
 }
 

diff --git a/app/src/main/kotlin/edu/stanford/bdh/engagehf/medication/components/MedicationList.kt b/app/src/main/kotlin/edu/stanford/bdh/engagehf/medication/components/MedicationList.kt
@@ -1,14 +1,24 @@
 package edu.stanford.bdh.engagehf.medication.components
 
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListScope
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import edu.stanford.bdh.engagehf.R
 import edu.stanford.bdh.engagehf.medication.ui.MedicationCardUiModel
 import edu.stanford.bdh.engagehf.medication.ui.MedicationUiState
 import edu.stanford.bdh.engagehf.medication.ui.MedicationViewModel
+import edu.stanford.bdh.engagehf.medication.ui.Medications
+import edu.stanford.spezi.core.design.component.CenteredBoxContent
+import edu.stanford.spezi.core.design.component.DefaultElevatedCard
+import edu.stanford.spezi.core.design.theme.Spacings
 import edu.stanford.spezi.core.design.theme.SpeziTheme
+import edu.stanford.spezi.core.design.theme.TextStyles
 import edu.stanford.spezi.core.design.theme.ThemePreviews
 
 @Composable
@@ -18,18 +28,82 @@ fun MedicationList(
     onAction: (MedicationViewModel.Action) -> Unit,
 ) {
     LazyColumn(modifier = modifier) {
-        items(uiState.uiModels) {
-            MedicationCard(model = it, onAction = onAction)
+        item {
+            SectionHeader(
+                title = stringResource(R.string.medication_you_are_taking),
+                onToggleExpand = {
+                    onAction(MedicationViewModel.Action.ToggleSectionExpand(MedicationViewModel.Section.MEDICATIONS_TAKING))
+                }
+            )
+        }
+        medicationItems(
+            isExpanded = uiState.medicationsTaking.expanded,
+            medications = uiState.medicationsTaking.medications,
+            onAction = onAction,
+        )
+        item {
+            SectionHeader(
+                title = stringResource(R.string.medications_that_may_help),
+                onToggleExpand = {
+                    onAction(MedicationViewModel.Action.ToggleSectionExpand(MedicationViewModel.Section.MEDICATIONS_THAT_MAY_HELP))
+                }
+            )
+        }
+        medicationItems(
+            isExpanded = uiState.medicationsThatMayHelp.expanded,
+            medications = uiState.medicationsThatMayHelp.medications,
+            onAction = onAction,
+        )
+        item {
+            SectionHeader(
+                title = stringResource(R.string.color_key),
+                onToggleExpand = {
+                    onAction(MedicationViewModel.Action.ToggleSectionExpand(MedicationViewModel.Section.COLOR_KEY))
+                }
+            )
+        }
+        if (uiState.colorKeyExpanded) {
+            item { ColorKey() }
+        }
+    }
+}
+
+fun LazyListScope.medicationItems(
+    isExpanded: Boolean,
+    medications: List<MedicationCardUiModel>,
+    onAction: (MedicationViewModel.Action) -> Unit,
+) {
+    if (isExpanded) {
+        if (medications.isEmpty()) {
+            item {
+                DefaultElevatedCard {
+                    CenteredBoxContent {
+                        Text(
+                            modifier = Modifier.padding(Spacings.medium),
+                            text = stringResource(R.string.no_medications_to_show),
+                            style = TextStyles.bodyMedium,
+                        )
+                    }
+                }
+            }
+        } else {
+            items(medications) { model ->
+                MedicationCard(model = model, onAction = onAction)
+            }
         }
     }
 }
 
 @ThemePreviews
 @Composable
 private fun MedicationListPreview(
-    @PreviewParameter(MedicationCardModelsProvider::class) uiModels: List<MedicationCardUiModel>,
+    @PreviewParameter(MedicationCardModelsProvider::class) uiModels: MedicationCardUiModel,
 ) {
-    val uiState = MedicationUiState.Success(uiModels = uiModels)
+    val uiState = MedicationUiState.Success(
+        medicationsTaking = Medications(listOf(uiModels), true),
+        medicationsThatMayHelp = Medications(emptyList(), true),
+        colorKeyExpanded = true,
+    )
     SpeziTheme {
         MedicationList(uiState = uiState, onAction = { })
     }

diff --git a/app/src/main/kotlin/edu/stanford/bdh/engagehf/medication/components/MedicationProgressBar.kt b/app/src/main/kotlin/edu/stanford/bdh/engagehf/medication/components/MedicationProgressBar.kt
@@ -17,13 +17,15 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import edu.stanford.bdh.engagehf.R
-import edu.stanford.bdh.engagehf.medication.ui.MedicationColor
 import edu.stanford.spezi.core.design.component.VerticalSpacer
 import edu.stanford.spezi.core.design.theme.Sizes
 import edu.stanford.spezi.core.design.theme.Spacings
 import edu.stanford.spezi.core.design.theme.SpeziTheme
 import edu.stanford.spezi.core.design.theme.ThemePreviews
 
+private const val PROGRESS_GREEN_HEX = 0xFF00796B
+private val PROGRESS_GREEN = Color(PROGRESS_GREEN_HEX)
+
 @Composable
 fun MedicationProgressBar(progress: Float) {
     Column {
@@ -37,7 +39,7 @@ fun MedicationProgressBar(progress: Float) {
                 modifier = Modifier
                     .fillMaxHeight()
                     .fillMaxWidth(progress)
-                    .background(MedicationColor.GREEN_PROGRESS.value, RoundedCornerShape(Sizes.RoundedCorner.large))
+                    .background(PROGRESS_GREEN, RoundedCornerShape(Sizes.RoundedCorner.large))
             )
         }
         VerticalSpacer(height = Spacings.extraSmall)
@@ -47,11 +49,11 @@ fun MedicationProgressBar(progress: Float) {
         ) {
             Text(
                 text = stringResource(R.string.medication_progress_bar_current),
-                color = MedicationColor.GREEN_PROGRESS.value,
+                color = PROGRESS_GREEN,
             )
             Text(
                 text = stringResource(R.string.medication_progress_bar_target),
-                color = MedicationColor.GREY.value,
+                color = Color.LightGray,
             )
         }
     }