changed Category listings

This commit is contained in:
Xaver 2025-01-15 17:55:47 +01:00
parent 67fc41940f
commit 54de695413
6 changed files with 111 additions and 58 deletions

View File

@ -12,7 +12,8 @@ import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import at.xaxa.ledger.ui.add.Add
import at.xaxa.ledger.ui.category.add.addCategory
import at.xaxa.ledger.ui.category.CategoryOverview
import at.xaxa.ledger.ui.category.add.AddCategory
import at.xaxa.ledger.ui.category.edit.EditCategory
import at.xaxa.ledger.ui.edit.Edit
import at.xaxa.ledger.ui.home.Home
@ -22,6 +23,7 @@ enum class AppRoutes(val route: String) {
Add("add"),
Edit("edit/{entryId}"),
Category("category"),
AddCategory("category/add"),
EditCategory("categoryEdit/{categoryId}")
}
@ -84,10 +86,17 @@ fun LedgerApp(modifier: Modifier = Modifier){
}
)
}
composable(AppRoutes.Category.route){
addCategory(
composable(AppRoutes.AddCategory.route){
AddCategory(
onButtonClick = {
navController.navigate("home")
navController.navigate("gome")
}
)
}
composable(AppRoutes.Category.route){
CategoryOverview(
onButtonClick = {
navController.navigate("category/add")
},
onCardClick = {
navController.navigate("catEdit/$it")

View File

@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.filled.List
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.DatePicker
@ -55,7 +56,7 @@ import java.util.Locale
// region Header Card
@Composable
fun HeaderCard(modifier: Modifier = Modifier, balance: String) {
fun HeaderCard(modifier: Modifier = Modifier, balance: String, onCategoryButton: () -> Unit) {
Surface(
shape = RoundedCornerShape(12.dp),
color = Color(0xfff9f9f9),
@ -72,6 +73,17 @@ fun HeaderCard(modifier: Modifier = Modifier, balance: String) {
.fillMaxWidth()
.padding(16.dp)
) {
Column() {
IconButton(onClick = {
onCategoryButton()
}) {
Icon(
imageVector = Icons.Filled.List,
contentDescription = "Add to list", // Provide a meaningful description for accessibility
tint = MaterialTheme.colorScheme.onSurface // Optional: Adjust the tint as needed
)
}
}
LayoutMediaTextHeader(modifier, balance)
}
}
@ -116,7 +128,7 @@ fun LayoutMediaTextHeader(modifier: Modifier = Modifier, balance: String) {
@Preview()
@Composable
private fun HeaderCardPreview() {
HeaderCard(Modifier, "-4500627.98€")
HeaderCard(Modifier, "-4500627.98€", {})
}
// endregion

View File

@ -0,0 +1,63 @@
package at.xaxa.ledger.ui.category
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import at.xaxa.ledger.ui.AppViewModelProvider
import at.xaxa.ledger.ui.ButtonSuccess
import at.xaxa.ledger.ui.CategoryCard
@Composable
fun CategoryOverview(
onButtonClick: () -> Unit,
modifier: Modifier = Modifier,
onCardClick: (Int) -> Unit,
categoryViewModel: CategoryViewModel = viewModel(factory = AppViewModelProvider.Factory)
){
val categories by categoryViewModel.categoryUiState.categories.collectAsState(initial = emptyList())
Column(
modifier = modifier
.fillMaxSize()
.padding(16.dp, 0.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
LazyColumn(
Modifier.weight(1f)
) {
items(categories) { item ->
Column(
modifier = Modifier.padding(vertical = 4.dp)
) {
CategoryCard(
modifier = modifier,
name = item.categoryName,
icon = item.icon,
onClick = { onCardClick(item._id) }
)
}
}
}
// Sticky footer content
Box(
modifier = Modifier
.fillMaxWidth(),
contentAlignment = Alignment.Center
) {
ButtonSuccess(modifier = Modifier, "Add Category", onClick = { onButtonClick() })
}
}
}

View File

@ -5,8 +5,6 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
@ -23,15 +21,13 @@ import androidx.lifecycle.viewmodel.compose.viewModel
import at.xaxa.ledger.data.db.Category.CategoryEntity
import at.xaxa.ledger.ui.AppViewModelProvider
import at.xaxa.ledger.ui.ButtonSuccess
import at.xaxa.ledger.ui.CategoryCard
import at.xaxa.ledger.ui.category.CategoryViewModel
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun addCategory(
fun AddCategory(
onButtonClick: () -> Unit,
modifier: Modifier = Modifier,
onCardClick: (Int) -> Unit,
categoryViewModel: CategoryViewModel = viewModel(factory = AppViewModelProvider.Factory)
) {
var name by remember { mutableStateOf("") }
@ -41,27 +37,29 @@ fun addCategory(
val category = categoryViewModel.categoryUi.category
var expanded by remember { mutableStateOf(false) }
Column(
modifier = modifier
.fillMaxSize()
.padding(16.dp, 0.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
OutlinedTextField(
value = category.categoryName,
onValueChange = { name = it },
label = { Text("Name") },
modifier = Modifier
.fillMaxWidth()
)
OutlinedTextField(
value = category.icon.toString(),
onValueChange = { category.copy(icon = it.toInt()) },
label = { Text("Icon") },
modifier = Modifier
.fillMaxWidth()
)
Column(Modifier.weight(1f)) {
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Name") },
modifier = Modifier
.fillMaxWidth()
)
OutlinedTextField(
value = category.icon.toString(),
onValueChange = { category.copy(icon = it.toInt()) },
label = { Text("Icon") },
modifier = Modifier
.fillMaxWidth()
)
}
Box(
modifier = Modifier
.fillMaxWidth(),
@ -77,28 +75,13 @@ fun addCategory(
categoryName = name,
icon = icon
)
categoryViewModel.addCategory(newCategory)
onButtonClick()
}
}
)
}
LazyColumn(
Modifier.weight(1f)
) {
items(categories) { item ->
Column(
modifier = Modifier.padding(vertical = 4.dp)
) {
CategoryCard(
modifier = modifier,
name = category.categoryName,
icon = category.icon,
onClick = { onCardClick(category._id) }
)
}
}
}
}
}

View File

@ -28,7 +28,7 @@ import at.xaxa.ledger.ui.ButtonSuccess
import at.xaxa.ledger.ui.DatePickerDocked
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Composable
fun Edit(modifier: Modifier = Modifier, onCardClick: () -> Unit, editViewModel : EditViewModel = viewModel(factory = AppViewModelProvider.Factory), onValueChange: (Entry) -> Unit = {},
) {
val entry = editViewModel.editUiState.entry

View File

@ -39,21 +39,7 @@ fun Home(modifier: Modifier = Modifier, onCardClick: (Int) -> Unit, onButtonClic
.weight(1f)
) {
stickyHeader {
HeaderCard(modifier = modifier, "-13563.00€")
Box(
modifier = Modifier
.fillMaxWidth()
.padding(top = 8.dp), // Add slight padding from the header
contentAlignment = Alignment.TopStart // Align button to the top-left
) {
ButtonSuccess(
modifier = Modifier
.width(120.dp) // Make the button smaller
.padding(4.dp), // Add some padding for better touch area
text = "Add Category",
onClick = { onCatButtonClick() }
)
}
HeaderCard(modifier = modifier, "-13563.00€", onCatButtonClick)
}
items(state) { item ->
Column(