Dashboard big screen support with staggered grid layout for cards

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/dashboard/DashboardContainer.kt

@@ -5,21 +5,33 @@
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 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.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.items
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material.pullrefresh.PullRefreshIndicator
+import androidx.compose.material.pullrefresh.pullRefresh
+import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
@@ -28,11 +40,17 @@
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
+import com.woocommerce.android.extensions.WindowSizeClass
 import com.woocommerce.android.model.DashboardWidget
 import com.woocommerce.android.ui.blaze.creation.BlazeCampaignCreationDispatcher
 import com.woocommerce.android.ui.compose.component.WCColoredButton
 import com.woocommerce.android.ui.compose.component.WCOutlinedButton
 import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardEvent.OpenRangePicker
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.ConfigurableWidget
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.FeedbackWidget
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard
+import com.woocommerce.android.ui.dashboard.DashboardViewModel.DashboardWidgetUiModel.ShareStoreWidget
 import com.woocommerce.android.ui.dashboard.blaze.DashboardBlazeCard
 import com.woocommerce.android.ui.dashboard.coupons.DashboardCouponsCard
 import com.woocommerce.android.ui.dashboard.google.DashboardGoogleAdsCard
@@ -45,75 +63,132 @@
 import com.woocommerce.android.ui.dashboard.topperformers.DashboardTopPerformersWidgetCard
 import com.woocommerce.android.ui.main.MainActivityViewModel
 
+@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun DashboardContainer(
     mainActivityViewModel: MainActivityViewModel,
     dashboardViewModel: DashboardViewModel,
-    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher
+    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
+    windowSizeClass: WindowSizeClass,
 ) {
-    dashboardViewModel.dashboardWidgets.observeAsState().value?.let { widgets ->
-        WidgetList(
-            widgetUiModels = widgets,
-            mainActivityViewModel = mainActivityViewModel,
-            dashboardViewModel = dashboardViewModel,
-            blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher
-        )
+    dashboardViewModel.dashboardCardsState.observeAsState().value?.let { state ->
+
+        val pullRefreshState = rememberPullRefreshState(state.isRefreshing, dashboardViewModel::onPullToRefresh)
+        Box(Modifier.pullRefresh(pullRefreshState)) {
+            DashboardWidgets(
+                widgetUiModels = state.widgets,
+                mainActivityViewModel = mainActivityViewModel,
+                dashboardViewModel = dashboardViewModel,
+                blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(MaterialTheme.colors.surface)
+                    .padding(vertical = dimensionResource(id = R.dimen.major_100)),
+                numberOfColumns = if (windowSizeClass != WindowSizeClass.Compact) 2 else 1
+            )
+
+            PullRefreshIndicator(
+                refreshing = state.isRefreshing,
+                state = pullRefreshState,
+                modifier = Modifier.align(Alignment.TopCenter),
+                contentColor = MaterialTheme.colors.primary,
+            )
+        }
     }
 }
 
 @Composable
-private fun WidgetList(
+private fun DashboardWidgets(
     widgetUiModels: List<DashboardViewModel.DashboardWidgetUiModel>,
     mainActivityViewModel: MainActivityViewModel,
     dashboardViewModel: DashboardViewModel,
-    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher
+    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
+    modifier: Modifier = Modifier,
+    numberOfColumns: Int = 1
 ) {
-    Column(
-        verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.major_100)),
-        modifier = Modifier
-            .fillMaxSize()
-            .background(MaterialTheme.colors.surface)
-            .padding(vertical = dimensionResource(id = R.dimen.major_100))
-    ) {
-        val widgetModifier = Modifier
-            .fillMaxWidth()
-            .padding(horizontal = 16.dp)
-        widgetUiModels.forEach {
-            AnimatedVisibility(it.isVisible) {
-                when (it) {
-                    is DashboardViewModel.DashboardWidgetUiModel.ConfigurableWidget -> {
-                        ConfigurableWidgetCard(
-                            widgetUiModel = it,
-                            mainActivityViewModel = mainActivityViewModel,
-                            dashboardViewModel = dashboardViewModel,
-                            blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
-                            modifier = widgetModifier
-                        )
-                    }
-
-                    is DashboardViewModel.DashboardWidgetUiModel.ShareStoreWidget -> {
-                        ShareStoreCard(
-                            onShareClicked = it.onShareClicked,
-                            modifier = widgetModifier
-                        )
-                    }
-
-                    is DashboardViewModel.DashboardWidgetUiModel.FeedbackWidget -> {
-                        FeedbackCard(
-                            widget = it,
-                            modifier = widgetModifier
-                        )
-                    }
+    val widgetModifier = Modifier
+        .fillMaxWidth()
+        .padding(horizontal = 16.dp)
+    val nestedScrollInterop = rememberNestedScrollInteropConnection()
 
-                    is DashboardViewModel.DashboardWidgetUiModel.NewWidgetsCard -> {
-                        NewWidgetsCard(
-                            state = it,
-                            modifier = widgetModifier
-                        )
-                    }
+    if (numberOfColumns == 1) {
+        LazyColumn(
+            modifier = modifier.nestedScroll(nestedScrollInterop),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            items(widgetUiModels) { widget ->
+                AnimatedVisibility(widget.isVisible) {
+                    DashboardWidgetCard(
+                        widget,
+                        mainActivityViewModel,
+                        dashboardViewModel,
+                        blazeCampaignCreationDispatcher,
+                        widgetModifier
+                    )
                 }
             }
         }
+    } else {
+        LazyVerticalStaggeredGrid(
+            modifier = modifier.nestedScroll(nestedScrollInterop),
+            columns = StaggeredGridCells.Adaptive(400.dp),
+            verticalItemSpacing = 16.dp,
+            horizontalArrangement = Arrangement.SpaceEvenly,
+        ) {
+            items(widgetUiModels) { widget ->
+                AnimatedVisibility(widget.isVisible) {
+                    DashboardWidgetCard(
+                        widget,
+                        mainActivityViewModel,
+                        dashboardViewModel,
+                        blazeCampaignCreationDispatcher,
+                        widgetModifier
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun DashboardWidgetCard(
+    it: DashboardWidgetUiModel,
+    mainActivityViewModel: MainActivityViewModel,
+    dashboardViewModel: DashboardViewModel,
+    blazeCampaignCreationDispatcher: BlazeCampaignCreationDispatcher,
+    widgetModifier: Modifier
+) {
+    when (it) {
+        is ConfigurableWidget -> {
+            ConfigurableWidgetCard(
+                widgetUiModel = it,
+                mainActivityViewModel = mainActivityViewModel,
+                dashboardViewModel = dashboardViewModel,
+                blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
+                modifier = widgetModifier
+            )
+        }
+
+        is ShareStoreWidget -> {
+            ShareStoreCard(
+                onShareClicked = it.onShareClicked,
+                modifier = widgetModifier
+            )
+        }
+
+        is FeedbackWidget -> {
+            FeedbackCard(
+                widget = it,
+                modifier = widgetModifier
+            )
+        }
+
+        is NewWidgetsCard -> {
+            NewWidgetsCard(
+                state = it,
+                modifier = widgetModifier
+            )
+        }
     }
 }
 

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/dashboard/DashboardFragment.kt

@@ -34,6 +34,7 @@ import com.woocommerce.android.extensions.scrollStartEvents
 import com.woocommerce.android.extensions.showDateRangePicker
 import com.woocommerce.android.extensions.startHelpActivity
 import com.woocommerce.android.extensions.verticalOffsetChanges
+import com.woocommerce.android.extensions.windowSizeClass
 import com.woocommerce.android.model.DashboardWidget
 import com.woocommerce.android.support.help.HelpOrigin
 import com.woocommerce.android.tools.SelectedSite
@@ -137,7 +138,8 @@ class DashboardFragment :
                     DashboardContainer(
                         mainActivityViewModel = mainActivityViewModel,
                         dashboardViewModel = dashboardViewModel,
-                        blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher
+                        blazeCampaignCreationDispatcher = blazeCampaignCreationDispatcher,
+                        windowSizeClass = requireContext().windowSizeClass
                     )
                 }
             }
@@ -197,10 +199,10 @@ class DashboardFragment :
         dashboardViewModel.jetpackBenefitsBannerState.observe(viewLifecycleOwner) { jetpackBenefitsBanner ->
             onVisitorStatsUnavailable(jetpackBenefitsBanner)
         }
-        dashboardViewModel.dashboardWidgets.observe(viewLifecycleOwner) { widgets ->
+        dashboardViewModel.dashboardCardsState.observe(viewLifecycleOwner) { state ->
             // Show banners only if onboarding list is NOT displayed
             if (
-                widgets.none {
+                state.widgets.none {
                     (it as? DashboardWidgetUiModel.ConfigurableWidget)?.widget?.type == DashboardWidget.Type.ONBOARDING
                 }
             ) {
@@ -210,9 +212,6 @@ class DashboardFragment :
         dashboardViewModel.hasNewWidgets.observe(viewLifecycleOwner) { hasNewWidgets ->
             editButtonBadge.isVisible = hasNewWidgets
         }
-        dashboardViewModel.isRefreshingOnBackground.observe(viewLifecycleOwner) { isRefreshing ->
-            binding.myStoreRefreshLayout.isRefreshing = isRefreshing
-        }
     }
 
     private fun setupResultHandlers() {

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/dashboard/DashboardViewModel.kt

@@ -105,19 +105,32 @@ class DashboardViewModel @Inject constructor(
         feedbackPrefs.userFeedbackIsDueObservable
     ) { configurableWidgets, hasNewWidgets, userFeedbackIsDue ->
         mapWidgetsToUiModels(configurableWidgets, hasNewWidgets, userFeedbackIsDue)
-    }.asLiveData()
+    }
 
     val hasNewWidgets = dashboardRepository.hasNewWidgets.asLiveData()
 
     private val refreshingOnBackground = MutableStateFlow(-1)
 
     val isRefreshingOnBackground = refreshingOnBackground.map { it > -1 }.asLiveData()
-    fun displayRefreshingIndicator() { refreshingOnBackground.value += 1 }
+    fun displayRefreshingIndicator() {
+        refreshingOnBackground.value += 1
+    }
+
     fun hideRefreshingIndicator() {
         val value = (refreshingOnBackground.value - 1).coerceAtLeast(-1)
         refreshingOnBackground.value = value
     }
 
+    val dashboardCardsState = combine(
+        dashboardWidgets,
+        refreshingOnBackground.map { it > -1 }
+    ) { widgets, isRefreshing ->
+        DashboardCardsState(
+            widgets = widgets,
+            isRefreshing = isRefreshing
+        )
+    }.asLiveData()
+
     init {
         ConnectionChangeReceiver.getEventBus().register(this)
 
@@ -364,4 +377,9 @@ class DashboardViewModel @Inject constructor(
             action = action
         )
     }
+
+    data class DashboardCardsState(
+        val widgets: List<DashboardWidgetUiModel>,
+        val isRefreshing: Boolean
+    )
 }

WooCommerce/src/main/res/layout/fragment_dashboard.xml

@@ -13,6 +13,31 @@
         android:layout_height="wrap_content"
         android:orientation="vertical">
 
+        <LinearLayout
+            android:id="@+id/my_store_stats_container"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:animateLayoutChanges="true"
+            android:descendantFocusability="blocksDescendants"
+            android:orientation="vertical">
+
+            <androidx.fragment.app.FragmentContainerView
+                android:id="@+id/jitmFragment"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="@dimen/minor_100" />
+
+            <!-- Dynamic dashboard container -->
+            <androidx.compose.ui.platform.ComposeView
+                android:id="@+id/dashboard_container"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+
+            <include
+                android:id="@+id/jetpack_benefits_banner"
+                layout="@layout/view_jetpack_benefits_bottom_banner" />
+        </LinearLayout>
+
         <com.woocommerce.android.widgets.ScrollChildSwipeRefreshLayout
             android:id="@+id/my_store_refresh_layout"
             android:layout_width="match_parent"
@@ -26,32 +51,9 @@
                 android:layout_height="match_parent"
                 android:transitionGroup="true">
 
-                <LinearLayout
-                    android:id="@+id/my_store_stats_container"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:animateLayoutChanges="true"
-                    android:descendantFocusability="blocksDescendants"
-                    android:orientation="vertical">
-
-                    <androidx.fragment.app.FragmentContainerView
-                        android:id="@+id/jitmFragment"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:layout_marginBottom="@dimen/minor_100" />
-
-                    <!-- Dynamic dashboard container -->
-                    <androidx.compose.ui.platform.ComposeView
-                        android:id="@+id/dashboard_container"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content" />
-                </LinearLayout>
             </androidx.core.widget.NestedScrollView>
 
         </com.woocommerce.android.widgets.ScrollChildSwipeRefreshLayout>
 
-        <include
-            android:id="@+id/jetpack_benefits_banner"
-            layout="@layout/view_jetpack_benefits_bottom_banner" />
     </androidx.appcompat.widget.LinearLayoutCompat>
 </RelativeLayout>