Reorder cards

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/analytics/hub/settings/AnalyticsHubSettingScreen.kt

@@ -1,8 +1,12 @@
 package com.woocommerce.android.ui.analytics.hub.settings
 
 import androidx.activity.compose.BackHandler
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.indication
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -11,6 +15,9 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Card
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Divider
 import androidx.compose.material.Icon
@@ -24,17 +31,23 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.DragHandle
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
 import com.woocommerce.android.model.AnalyticsCards
+import com.woocommerce.android.ui.compose.DraggableItem
 import com.woocommerce.android.ui.compose.component.AlertDialog
+import com.woocommerce.android.ui.compose.dragContainerForDragHandle
+import com.woocommerce.android.ui.compose.rememberDragDropState
 import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 import com.woocommerce.android.ui.orders.creation.configuration.SelectionCheck
 
@@ -71,6 +84,7 @@ fun AnalyticsHubSettingScreen(viewModel: AnalyticsHubSettingsViewModel) {
                     AnalyticsHubSettingScreen(
                         cards = state.cardsConfiguration,
                         onSelectionChange = viewModel::onSelectionChange,
+                        onOrderChange = viewModel::onOrderChange,
                         modifier = Modifier.padding(padding)
                     )
 
@@ -88,30 +102,62 @@ fun AnalyticsHubSettingScreen(viewModel: AnalyticsHubSettingsViewModel) {
     }
 }
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun AnalyticsHubSettingScreen(
     cards: List<AnalyticCardConfigurationUI>,
     onSelectionChange: (AnalyticsCards, Boolean) -> Unit,
+    onOrderChange: (fromIndex: Int, toIndex: Int) -> Unit,
     modifier: Modifier = Modifier
 ) {
+    val listState = rememberLazyListState()
+    val dragDropState = rememberDragDropState(listState) { fromIndex, toIndex -> onOrderChange(fromIndex, toIndex) }
+
     LazyColumn(
+        state = listState,
         modifier = modifier
             .fillMaxSize()
             .background(MaterialTheme.colors.surface)
     ) {
         itemsIndexed(items = cards, key = { _, card -> card.card }) { i, card ->
-            AnalyticCardItem(
-                showTopDivider = i == 0,
-                card = card.card,
-                title = card.title,
-                isSelected = card.isVisible,
-                isEnabled = card.isEnabled,
-                onSelectionChange = onSelectionChange
-            )
+            DraggableItem(dragDropState, i) { isDragging ->
+                val elevation by animateDpAsState(if (isDragging) 4.dp else 1.dp, label = "card_elevation")
+                val showDividers = when {
+                    isDragging -> ShowDividers.None
+                    i == 0 -> ShowDividers.All
+                    else -> ShowDividers.Bottom
+                }
+                AnalyticCardItem(
+                    showDividers = showDividers,
+                    card = card.card,
+                    title = card.title,
+                    isSelected = card.isVisible,
+                    isEnabled = card.isEnabled,
+                    onSelectionChange = onSelectionChange,
+                    elevation = elevation
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.DragHandle,
+                        contentDescription = stringResource(id = R.string.drag_handle),
+                        modifier = Modifier
+                            .dragContainerForDragHandle(
+                                dragDropState = dragDropState,
+                                key = card.card
+                            )
+                            .clickable(
+                                onClick = {},
+                                indication = null,
+                                interactionSource = remember { MutableInteractionSource() }
+                            )
+                    )
+                }
+            }
         }
     }
 }
 
+enum class ShowDividers { Bottom, All, None }
+
 @Composable
 fun AnalyticCardItem(
     card: AnalyticsCards,
@@ -120,38 +166,43 @@ fun AnalyticCardItem(
     isEnabled: Boolean,
     onSelectionChange: (AnalyticsCards, Boolean) -> Unit,
     modifier: Modifier = Modifier,
-    showTopDivider: Boolean = false
+    showDividers: ShowDividers = ShowDividers.Bottom,
+    elevation: Dp = 1.dp,
+    dragHandle: (@Composable () -> Unit)? = null
 ) {
-    Column {
-        if (showTopDivider) Divider()
-        val rowModifier = if (isEnabled) {
-            modifier
-                .clickable { onSelectionChange(card, !isSelected) }
-                .padding(16.dp)
-        } else {
-            modifier.padding(16.dp)
-        }
-        Row(
-            modifier = rowModifier,
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            SelectionCheck(
-                isSelected = isSelected,
-                isEnabled = isEnabled,
-                onSelectionChange = { onSelectionChange(card, !isSelected) }
-            )
-            Text(
-                text = title,
-                modifier
-                    .weight(2f)
-                    .padding(horizontal = 16.dp)
-            )
-            Icon(
-                imageVector = Icons.Filled.DragHandle,
-                contentDescription = stringResource(id = R.string.drag_handle)
-            )
+    Card(
+        modifier = modifier,
+        elevation = elevation,
+        shape = RoundedCornerShape(0.dp)
+    ) {
+        Column {
+            if (showDividers == ShowDividers.All) Divider()
+            val rowModifier = if (isEnabled) {
+                Modifier
+                    .clickable { onSelectionChange(card, !isSelected) }
+                    .padding(16.dp)
+            } else {
+                Modifier.padding(16.dp)
+            }
+            Row(
+                modifier = rowModifier,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                SelectionCheck(
+                    isSelected = isSelected,
+                    isEnabled = isEnabled,
+                    onSelectionChange = { onSelectionChange(card, !isSelected) }
+                )
+                Text(
+                    text = title,
+                    modifier
+                        .weight(2f)
+                        .padding(horizontal = 16.dp)
+                )
+                dragHandle?.let { dragHandle -> dragHandle() }
+            }
+            if (showDividers != ShowDividers.None) Divider()
         }
-        Divider()
     }
 }
 
@@ -203,7 +254,8 @@ fun AnalyticsHubSettingScreenPreview() {
             AnalyticCardConfigurationUI(AnalyticsCards.Orders, "Orders", true),
             AnalyticCardConfigurationUI(AnalyticsCards.Session, "Session", false)
         ),
-        onSelectionChange = { _, _ -> }
+        onSelectionChange = { _, _ -> },
+        onOrderChange = { _, _ -> }
     )
 }
 

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/analytics/hub/settings/AnalyticsHubSettingsViewModel.kt

@@ -111,6 +111,15 @@ class AnalyticsHubSettingsViewModel @Inject constructor(
             else card.copy(isEnabled = true)
         }
     }
+
+    fun onOrderChange(fromIndex: Int, toIndex: Int) {
+        draftConfiguration = draftConfiguration.toMutableList().apply { add(toIndex, removeAt(fromIndex)) }
+        viewState = AnalyticsHubSettingsViewState.CardsConfiguration(
+            cardsConfiguration = draftConfiguration,
+            showDiscardDialog = false,
+            isSaveButtonEnabled = hasChanges()
+        )
+    }
 }
 
 @Parcelize