diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/GroupedTransactionsListItems.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/GroupedTransactionsListItems.kt new file mode 100644 index 0000000..64cb989 --- /dev/null +++ b/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, + userAccountsId: Map +) { + + 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")) + ) + } + } + } + } +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt b/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt index 7cd3a18..e5c8e36 100644 --- a/composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/transactions/TransactionsList.kt +++ b/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) { - derivedStateOf { transactionsToDisplay.groupBy { LocalDate(it.valueDate.year, it.valueDate.monthNumber, 1) } } - } + 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) 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) - 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")) - ) - } - } - } - } + GroupedTransactionsListItems(transactionsListModifier, transactionsToDisplay, userAccountsId) } }