Migrate clinical decision support alert to Jetpack Compose (#5461)

https://app.shortcut.com/simpledotorg/story/15921/migrate-cdss-alert-container-to-jetpack-compose

---------

Co-authored-by: sagarwal <[email protected]>

Author: siddh1004

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Migrate assigned facility view to Jetpack Compose
 - Migrate next appointment view to Jetpack Compose
 - Migrate patient status view to Jetpack Compose
+- Migrate clinical decision support alert to Jetpack Compose
 
 ## 2025.05.20
 

app/src/main/java/org/simple/clinic/summary/PatientSummaryScreen.kt

@@ -20,10 +20,6 @@ import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import androidx.dynamicanimation.animation.DynamicAnimation
-import androidx.transition.AutoTransition
-import androidx.transition.Transition
-import androidx.transition.TransitionManager
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.jakewharton.rxbinding3.view.clicks
 import com.spotify.mobius.Init
@@ -67,6 +63,7 @@ import org.simple.clinic.scheduleappointment.ScheduleAppointmentSheet
 import org.simple.clinic.scheduleappointment.facilityselection.FacilitySelectionScreen
 import org.simple.clinic.summary.addcholesterol.CholesterolEntrySheet
 import org.simple.clinic.summary.addphone.AddPhoneNumberDialog
+import org.simple.clinic.summary.clinicaldecisionsupport.ui.ClinicalDecisionHighBpAlert
 import org.simple.clinic.summary.compose.StatinNudge
 import org.simple.clinic.summary.linkId.LinkIdWithPatientSheet.LinkIdWithPatientSheetKey
 import org.simple.clinic.summary.teleconsultation.contactdoctor.ContactDoctorSheet
@@ -83,7 +80,6 @@ import org.simple.clinic.widgets.UiEvent
 import org.simple.clinic.widgets.compose.PatientStatusView
 import org.simple.clinic.widgets.hideKeyboard
 import org.simple.clinic.widgets.scrollToChild
-import org.simple.clinic.widgets.spring
 import java.time.format.DateTimeFormatter
 import java.util.UUID
 import java.util.concurrent.TimeUnit
@@ -154,9 +150,6 @@ class PatientSummaryScreen :
   private val nextAppointmentFacilityView
     get() = binding.nextAppointmentFacilityView
 
-  private val clinicalDecisionSupportAlertView
-    get() = binding.clinicalDecisionSupportBpHighAlert.rootView
-
   private val composeView
     get() = binding.composeView
 
@@ -200,6 +193,9 @@ class PatientSummaryScreen :
 
   private var showPatientDiedStatusView by mutableStateOf(false)
 
+  private var showClinicalDecisionAlert by mutableStateOf(false)
+  private var animateClinicalDecisionSupportAlert by mutableStateOf(false)
+
   override fun defaultModel(): PatientSummaryModel {
     return PatientSummaryModel.from(screenKey.intention, screenKey.patientUuid)
   }
@@ -302,6 +298,16 @@ class PatientSummaryScreen :
       setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
       setContent {
         SimpleTheme {
+          ClinicalDecisionHighBpAlert(
+              showAlert = showClinicalDecisionAlert,
+              animateExit = animateClinicalDecisionSupportAlert,
+              modifier = Modifier.padding(
+                  start = dimensionResource(R.dimen.spacing_8),
+                  end = dimensionResource(R.dimen.spacing_8),
+                  top = dimensionResource(R.dimen.spacing_8),
+              ),
+          )
+
           StatinNudge(
               statinInfo = statinInfo,
               modifier = Modifier.padding(start = 8.dp, end = 8.dp, top = 8.dp),
@@ -743,82 +749,23 @@ class PatientSummaryScreen :
   }
 
   override fun showClinicalDecisionSupportAlert() {
-    showWithAnimation(clinicalDecisionSupportAlertView)
+    showClinicalDecisionAlert = true
   }
 
   override fun hideClinicalDecisionSupportAlert() {
-    hideWithAnimation(clinicalDecisionSupportAlertView, R.id.tag_clinical_decision_pending_end_listener)
+    showClinicalDecisionAlert = false
+    animateClinicalDecisionSupportAlert = true
   }
 
   override fun hideClinicalDecisionSupportAlertWithoutAnimation() {
-    clinicalDecisionSupportAlertView.visibility = GONE
+    showClinicalDecisionAlert = false
+    animateClinicalDecisionSupportAlert = false
   }
 
   override fun updateStatinAlert(statinInfo: StatinInfo) {
     this.statinInfo = statinInfo
   }
 
-  private fun showWithAnimation(view: View) {
-    view.translationY = view.height.unaryMinus().toFloat()
-
-    val spring = view.spring(DynamicAnimation.TRANSLATION_Y)
-
-    val transition = AutoTransition().apply {
-      excludeChildren(view, true)
-      // We are doing this to wait for the router transitions to be done before we start this.
-      startDelay = 500
-    }
-    val transitionListener = object : Transition.TransitionListener {
-      override fun onTransitionStart(transition: Transition) {
-      }
-
-      override fun onTransitionEnd(transition: Transition) {
-        transition.removeListener(this)
-        spring.animateToFinalPosition(0f)
-      }
-
-      override fun onTransitionCancel(transition: Transition) {
-      }
-
-      override fun onTransitionPause(transition: Transition) {
-      }
-
-      override fun onTransitionResume(transition: Transition) {
-      }
-    }
-    transition.addListener(transitionListener)
-    TransitionManager.beginDelayedTransition(summaryViewsContainer, transition)
-
-    view.visibility = VISIBLE
-  }
-
-  private fun hideWithAnimation(view: View, tag: Int) {
-    if (view.visibility != VISIBLE) return
-
-    val spring = view.spring(DynamicAnimation.TRANSLATION_Y)
-    (view.getTag(tag) as?
-        DynamicAnimation.OnAnimationEndListener)?.let {
-      spring.removeEndListener(it)
-    }
-
-    val listener = object : DynamicAnimation.OnAnimationEndListener {
-      override fun onAnimationEnd(animation: DynamicAnimation<*>?, canceled: Boolean, value: Float, velocity: Float) {
-        spring.removeEndListener(this)
-        view.visibility = GONE
-      }
-    }
-    spring.addEndListener(listener)
-    view.setTag(tag, listener)
-
-    val transition = AutoTransition().apply {
-      excludeChildren(view, true)
-    }
-    TransitionManager.beginDelayedTransition(summaryViewsContainer, transition)
-
-    spring.animateToFinalPosition(view.height.unaryMinus().toFloat())
-  }
-
-
   override fun showReassignPatientWarningSheet(
       patientUuid: UUID,
       currentFacility: Facility,

app/src/main/java/org/simple/clinic/summary/clinicaldecisionsupport/ui/ClinicalDecisionHighBpAlert.kt

@@ -0,0 +1,85 @@
+package org.simple.clinic.summary.clinicaldecisionsupport.ui
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Card
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import org.simple.clinic.R
+import org.simple.clinic.common.ui.theme.SimpleTheme
+
+@Composable
+fun ClinicalDecisionHighBpAlert(
+    showAlert: Boolean,
+    animateExit: Boolean,
+    modifier: Modifier = Modifier
+) {
+    AnimatedVisibility(
+        visible = showAlert,
+        enter = expandVertically(
+            animationSpec = tween(500),
+            expandFrom = Alignment.Top
+        ),
+        exit = if (animateExit) shrinkVertically(animationSpec = tween(500)) else ExitTransition.None
+    ) {
+        Card(
+            modifier = modifier,
+            elevation = dimensionResource(R.dimen.spacing_0),
+            backgroundColor = colorResource(R.color.simple_red_100_alpha_50),
+            border = BorderStroke(
+                width = dimensionResource(id = R.dimen.spacing_1),
+                color = colorResource(id = R.color.simple_red_600)
+            ),
+
+            ) {
+            Row(
+                modifier = Modifier.padding(dimensionResource(id = R.dimen.spacing_8)),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.spacing_8))
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_clinical_decision_warning),
+                    contentDescription = null,
+                )
+                Column {
+                    Text(
+                        text = stringResource(id = R.string.clinical_decision_support_alert_bp_high_title),
+                        style = SimpleTheme.typography.subtitle1Medium,
+                        color = colorResource(id = R.color.simple_red_600)
+                    )
+                    Text(
+                        modifier = Modifier.padding(top = dimensionResource(R.dimen.spacing_2)),
+                        text = stringResource(id = R.string.clinical_decision_support_alert_bp_high_subtitle),
+                        style = MaterialTheme.typography.body1,
+                        color = colorResource(id = R.color.simple_red_600_alpha_80)
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ClinicalDecisionHighBpAlertPreview() {
+    SimpleTheme {
+        ClinicalDecisionHighBpAlert(showAlert = true, animateExit = false)
+    }
+}

app/src/main/res/drawable/background_clinical_decision_alert.xml

@@ -43,10 +43,6 @@
       android:clipToPadding="false"
       android:orientation="vertical">
 
-      <include
-        android:id="@+id/clinicalDecisionSupportBpHighAlert"
-        layout="@layout/view_clinical_decision_support_bp_high" />
-
       <androidx.compose.ui.platform.ComposeView
         android:id="@+id/compose_view"
         android:layout_width="match_parent"

app/src/main/res/layout/screen_patient_summary.xml

@@ -14,5 +14,4 @@
   <item name="spring_animation_alpha" type="id" />
   <item name="spring_animation_scrollx" type="id" />
   <item name="spring_animation_scrollY" type="id" />
-  <item name="tag_clinical_decision_pending_end_listener" type="id" />
 </resources>