Extracted GroupedTransactionsListItems

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/GroupedTransactionsListItems.kt

@@ -0,0 +1,91 @@
+package net.codinux.banking.ui.composables.transactions
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.Divider
+import androidx.compose.material.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlinx.datetime.LocalDate
+import net.codinux.banking.client.model.Amount
+import net.codinux.banking.dataaccess.entities.UserAccountEntity
+import net.codinux.banking.ui.config.Colors
+import net.codinux.banking.ui.config.DI
+import net.codinux.banking.ui.forms.RoundedCornersCard
+import net.codinux.banking.ui.model.AccountTransactionViewModel
+
+private val calculator = DI.calculator
+
+private val formatUtil = DI.formatUtil
+
+@Composable
+fun GroupedTransactionsListItems(
+    modifier: Modifier,
+    transactionsToDisplay: List<AccountTransactionViewModel>,
+    userAccountsId: Map<Long, UserAccountEntity>
+) {
+
+    val groupedByMonth by remember(transactionsToDisplay) {
+        derivedStateOf { transactionsToDisplay.groupBy { LocalDate(it.valueDate.year, it.valueDate.monthNumber, 1) } }
+    }
+
+    LazyColumn(modifier) {
+        items(groupedByMonth.keys.sortedDescending()) { month ->
+            Column(Modifier.fillMaxWidth()) {
+                Text(
+                    text = DI.formatUtil.formatMonth(month),
+                    fontSize = 16.sp,
+                    fontWeight = FontWeight.SemiBold,
+                    modifier = Modifier.padding(top = 8.dp, bottom = 2.dp),
+                )
+
+                Spacer(Modifier.height(4.dp))
+
+                val monthTransactions =
+                    groupedByMonth[month].orEmpty().sortedByDescending { it.valueDate }
+
+                RoundedCornersCard {
+                    Column(Modifier.background(Color.White)) { // LazyColumn inside LazyColumn is not allowed
+                        monthTransactions.forEachIndexed { index, transaction ->
+                            val backgroundColor = if (index % 2 == 1) Colors.Zinc100_50 else Color.Transparent
+                            TransactionListItem(userAccountsId[transaction.userAccountId], transaction, backgroundColor)
+
+                            if (index < monthTransactions.size - 1) {
+                                Divider(color = Colors.Zinc200, thickness = 1.dp)
+                            }
+                        }
+                    }
+                }
+
+                Column(
+                    Modifier.fillMaxWidth().padding(top = 10.dp),
+                    horizontalAlignment = Alignment.End
+                ) {
+                    Text(
+                        text = formatUtil.formatAmount(calculator.sumIncome(monthTransactions),
+                            calculator.getTransactionsCurrency(monthTransactions)),
+                        color = formatUtil.getColorForAmount(Amount.Zero)
+                    )
+                }
+
+                Column(
+                    Modifier.fillMaxWidth().padding(top = 2.dp, bottom = 16.dp),
+                    horizontalAlignment = Alignment.End
+                ) {
+                    Text(
+                        text = formatUtil.formatAmount(calculator.sumExpenses(monthTransactions),
+                            calculator.getTransactionsCurrency(monthTransactions)),
+                        color = formatUtil.getColorForAmount(Amount("-1"))
+                    )
+                }
+            }
+        }
+    }
+}

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt

@@ -2,23 +2,14 @@ package net.codinux.banking.ui.composables.transactions
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
-import androidx.compose.material.Divider
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import kotlinx.datetime.LocalDate
-import net.codinux.banking.client.model.Amount
 import net.codinux.banking.ui.config.Colors
 import net.codinux.banking.ui.config.DI
-import net.codinux.banking.ui.forms.RoundedCornersCard
 import net.codinux.banking.ui.state.UiState
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
@@ -43,9 +34,7 @@ fun TransactionsList(uiState: UiState) {
         derivedStateOf { filterService.filterAccounts(transactions, transactionsFilter) }
     }
 
-    val groupedByMonth by remember(transactionsToDisplay) {
+    val transactionsListModifier = Modifier.fillMaxSize().padding(bottom = 12.dp) // padding bottom = add the space the FAB sticks into the content area (= 26 - the 16 we add at the bottom of the expenses line)
-        derivedStateOf { transactionsToDisplay.groupBy { LocalDate(it.valueDate.year, it.valueDate.monthNumber, 1) } }
-    }
 
 
     Column(Modifier.fillMaxSize().padding(horizontal = 8.dp)) {
@@ -57,49 +46,7 @@ fun TransactionsList(uiState: UiState) {
             Text(formatUtil.formatAmount(balance, "EUR"), color = formatUtil.getColorForAmount(balance))
         }
 
-        LazyColumn(Modifier.fillMaxSize().padding(bottom = 12.dp)) { // padding bottom = add the space the FAB sticks into the content area (= 26 - the 16 we add at the bottom of the expenses line)
+        GroupedTransactionsListItems(transactionsListModifier, transactionsToDisplay, userAccountsId)
-            items(groupedByMonth.keys.sortedDescending()) { month ->
-                Column(Modifier.fillMaxWidth()) {
-                    Text(
-                        text = DI.formatUtil.formatMonth(month),
-                        fontSize = 16.sp,
-                        fontWeight = FontWeight.SemiBold,
-                        modifier = Modifier.padding(top = 8.dp, bottom = 2.dp),
-                    )
-
-                    Spacer(Modifier.height(4.dp))
-
-                    val monthTransactions = groupedByMonth[month].orEmpty().sortedByDescending { it.valueDate }
-
-                    RoundedCornersCard {
-                        Column(Modifier.background(Color.White)) { // LazyColumn inside LazyColumn is not allowed
-                            monthTransactions.forEachIndexed { index, transaction ->
-                                val backgroundColor = if (index % 2 == 1) Colors.Zinc100_50 else Color.Transparent
-                                TransactionListItem(userAccountsId[transaction.userAccountId], transaction, backgroundColor)
-
-                                if (index < monthTransactions.size - 1) {
-                                    Divider(color = Colors.Zinc200, thickness = 1.dp)
-                                }
-                            }
-                        }
-                    }
-
-                    Column(Modifier.fillMaxWidth().padding(top = 10.dp), horizontalAlignment = Alignment.End) {
-                        Text(
-                            text = formatUtil.formatAmount(calculator.sumIncome(monthTransactions), calculator.getTransactionsCurrency(monthTransactions)),
-                            color = formatUtil.getColorForAmount(Amount.Zero)
-                        )
-                    }
-
-                    Column(Modifier.fillMaxWidth().padding(top = 2.dp, bottom = 16.dp), horizontalAlignment = Alignment.End) {
-                        Text(
-                            text = formatUtil.formatAmount(calculator.sumExpenses(monthTransactions), calculator.getTransactionsCurrency(monthTransactions)),
-                            color = formatUtil.getColorForAmount(Amount("-1"))
-                        )
-                    }
-                }
-            }
-        }
     }
 }