From aef7c9cd6ffa042fdcdd9e97ebb2526bcd80ef94 Mon Sep 17 00:00:00 2001 From: Xaver Date: Tue, 14 Jan 2025 14:14:21 +0100 Subject: [PATCH] AddUi done --- .../main/java/at/xaxa/ledger/ui/LedgerUI.kt | 122 +++++++++--------- .../main/java/at/xaxa/ledger/ui/add/AddUI.kt | 101 +++++++++------ .../java/at/xaxa/ledger/ui/home/HomeUI.kt | 4 +- 3 files changed, 121 insertions(+), 106 deletions(-) diff --git a/Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt b/Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt index 4a519f0..48535ce 100644 --- a/Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt +++ b/Ledger/app/src/main/java/at/xaxa/ledger/ui/LedgerUI.kt @@ -2,21 +2,16 @@ package at.xaxa.ledger.ui import android.icu.text.SimpleDateFormat import androidx.compose.foundation.BorderStroke -import androidx.compose.foundation.gestures.awaitEachGesture -import androidx.compose.foundation.gestures.awaitFirstDown -import androidx.compose.foundation.gestures.waitForUpOrCancellation import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.requiredHeight -import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.layout.wrapContentWidth @@ -29,12 +24,12 @@ import androidx.compose.material3.DatePicker import androidx.compose.material3.DatePickerDialog import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TextButton -import androidx.compose.material3.TextField import androidx.compose.material3.rememberDatePickerState import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -46,18 +41,15 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.shadow import androidx.compose.ui.graphics.Color -import androidx.compose.ui.input.pointer.PointerEventPass -import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.intl.Locale import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.em import androidx.compose.ui.unit.sp -import java.time.LocalDate import java.util.Date +import java.util.Locale // region Header Card @Composable @@ -67,7 +59,6 @@ fun HeaderCard(modifier: Modifier = Modifier, balance: String) { color = Color(0xfff9f9f9), border = BorderStroke(1.dp, Color(0xffc6c6c6)), modifier = modifier - .padding(16.dp, 0.dp) .shadow( elevation = 8.dp, shape = RoundedCornerShape(12.dp), @@ -136,7 +127,6 @@ fun HorizontalCard(modifier: Modifier = Modifier, name: String, date: String, am color = Color(0xfff9f9f9), border = BorderStroke(1.dp, Color(0xffc6c6c6)), modifier = modifier - .padding(16.dp, 0.dp) .clip(shape = RoundedCornerShape(12.dp)) ) { Row( @@ -204,7 +194,9 @@ private fun HorizontalCardPreview() { } // endregion -// region Button Success +// region Buttons + +//Success @Composable fun ButtonSuccess(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) { CustomButton(modifier, text, onClick, Color(0xff61a483)) @@ -215,9 +207,8 @@ fun ButtonSuccess(modifier: Modifier = Modifier, text: String, onClick: () -> Un private fun ButtonSuccessPreview() { ButtonSuccess(Modifier, "Success", onClick = { println("success") }) } -// endregion -// region Button Danger +//Danger @Composable fun ButtonDanger(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) { CustomButton(modifier, text, onClick, Color(0xffc14d4d)) @@ -228,10 +219,7 @@ fun ButtonDanger(modifier: Modifier = Modifier, text: String, onClick: () -> Uni private fun ButtonDangerPreview() { ButtonDanger(Modifier, "Danger", onClick = { println("success") }) } -// endregion - -//Color(0xff61a483) @Composable private fun CustomButton(modifier: Modifier = Modifier, text: String, onClick: () -> Unit, color: Color){ Button( @@ -240,7 +228,6 @@ private fun CustomButton(modifier: Modifier = Modifier, text: String, onClick: ( colors = ButtonDefaults.buttonColors(containerColor = color), contentPadding = PaddingValues(horizontal = 24.dp, vertical = 10.dp), modifier = modifier - .padding(16.dp, 0.dp) .shadow( elevation = 8.dp, shape = RoundedCornerShape(12.dp), @@ -273,60 +260,71 @@ private fun CustomButton(modifier: Modifier = Modifier, text: String, onClick: ( } } +// endregion +// region Docked Date Picker - - - +@OptIn(ExperimentalMaterial3Api::class) @Composable -fun DatePicker( - onDateSelected: (LocalDate) -> Unit, - onDismiss: () -> Unit -) { - var selectedDate by remember { mutableStateOf(LocalDate.now()) } +fun DatePickerDocked() { + var showDatePicker by remember { mutableStateOf(false) } + val datePickerState = rememberDatePickerState() + val selectedDate = datePickerState.selectedDateMillis?.let { + convertMillisToDate(it) + } ?: "" - Column( - modifier = Modifier - .fillMaxWidth() + Box( + modifier = Modifier.fillMaxWidth() ) { - DatePickerDialog( - onDateSelected = { date -> - selectedDate = date + OutlinedTextField( + value = selectedDate, + onValueChange = { }, + label = { Text("Date") }, + readOnly = true, + trailingIcon = { + IconButton(onClick = { showDatePicker = !showDatePicker }) { + Icon( + imageVector = Icons.Default.DateRange, + contentDescription = "Select date" + ) + } }, - onDismiss = onDismiss - ) - Row( modifier = Modifier .fillMaxWidth() - .padding(top = 16.dp), - horizontalArrangement = Arrangement.End - ) { - TextButton(onClick = onDismiss) { - Text("Cancel") - } - Spacer(modifier = Modifier.width(8.dp)) - TextButton(onClick = { onDateSelected(selectedDate) }) { - Text("OK") + ) + + if (showDatePicker) { + DatePickerDialog( + onDismissRequest = { showDatePicker = false }, + confirmButton = { + TextButton( + onClick = { + showDatePicker = false + } + ) { + Text("OK") + } + }, + dismissButton = { + TextButton( + onClick = { showDatePicker = false } + ) { + Text("Cancel") + } + } + ) { + DatePicker( + state = datePickerState, + showModeToggle = false + ) } } } } -@Composable -fun DatePickerDialog( - onDateSelected: (LocalDate) -> Unit, - onDismiss: () -> Unit -) { - // Implement your date picker logic here - // For simplicity, we'll just use a simple date picker - var selectedDate by remember { mutableStateOf(LocalDate.now()) } +fun convertMillisToDate(millis: Long): String { + val formatter = SimpleDateFormat("DD.MM.yyyy", Locale.getDefault()) + return formatter.format(Date(millis)) +} - // You can use a library like `androidx.compose.material3.DatePicker` or a custom implementation - // For now, we'll just use a simple text input for demonstration purposes - OutlinedTextField( - value = selectedDate.toString(), - onValueChange = { }, - label = { Text("Date") }, - modifier = Modifier.fillMaxWidth() - ) -} \ No newline at end of file +// endregion \ No newline at end of file diff --git a/Ledger/app/src/main/java/at/xaxa/ledger/ui/add/AddUI.kt b/Ledger/app/src/main/java/at/xaxa/ledger/ui/add/AddUI.kt index 7cca35f..caa3d45 100644 --- a/Ledger/app/src/main/java/at/xaxa/ledger/ui/add/AddUI.kt +++ b/Ledger/app/src/main/java/at/xaxa/ledger/ui/add/AddUI.kt @@ -1,5 +1,6 @@ package at.xaxa.ledger.ui.add +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth @@ -10,83 +11,97 @@ import androidx.compose.material3.ExposedDropdownMenuBox import androidx.compose.material3.ExposedDropdownMenuDefaults import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text -import androidx.compose.material3.TextField import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue +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.DatePicker +import at.xaxa.ledger.ui.ButtonSuccess +import at.xaxa.ledger.ui.DatePickerDocked import at.xaxa.ledger.ui.home.HomeViewModel @OptIn(ExperimentalMaterial3Api::class) @Composable fun Add(modifier: Modifier = Modifier, onCardClick: (Int) -> Unit, HomeViewModel : HomeViewModel = viewModel(factory = AppViewModelProvider.Factory)) { + var name by remember { mutableStateOf("") } var spending by remember { mutableStateOf("") } var expanded by remember { mutableStateOf(false) } var selectedItem by remember { mutableStateOf("") } val categories = listOf("Option 1", "Option 2", "Option 3") - Column( modifier = modifier.fillMaxSize() - .padding(16.dp) + .padding(16.dp, 0.dp), + horizontalAlignment = Alignment.CenterHorizontally ) { - OutlinedTextField( - value = spending, - onValueChange = { spending = it }, - label = { Text("Spending") }, - modifier = Modifier - .fillMaxWidth() - ) - OutlinedTextField( - value = spending, - onValueChange = { spending = it }, - label = { Text("Spending") }, - modifier = Modifier - .fillMaxWidth() - ) - - ExposedDropdownMenuBox( - expanded = expanded, - onExpandedChange = { expanded = it } + Column( + Modifier.weight(1f) ) { - // TextField to display the selected item and trigger the dropdown OutlinedTextField( - value = selectedItem, - onValueChange = {}, - label = { Text("Category") }, - readOnly = true, - trailingIcon = { - ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) - }, + value = name, + onValueChange = { name = it }, + label = { Text("Name") }, + modifier = Modifier + .fillMaxWidth() + ) + OutlinedTextField( + value = spending, + onValueChange = { spending = it }, + label = { Text("Spending") }, modifier = Modifier - .menuAnchor() .fillMaxWidth() ) - // Dropdown menu - ExposedDropdownMenu( + ExposedDropdownMenuBox( expanded = expanded, - onDismissRequest = { expanded = false } + onExpandedChange = { expanded = it } ) { - categories.forEach { item -> - DropdownMenuItem( - text = { Text(text = item) }, - onClick = { - selectedItem = item - expanded = false - } - ) + // TextField to display the selected item and trigger the dropdown + OutlinedTextField( + value = selectedItem, + onValueChange = {}, + label = { Text("Category") }, + readOnly = true, + trailingIcon = { + ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) + }, + modifier = Modifier + .menuAnchor() + .fillMaxWidth() + ) + + // Dropdown menu + ExposedDropdownMenu( + expanded = expanded, + onDismissRequest = { expanded = false } + ) { + categories.forEach { item -> + DropdownMenuItem( + text = { Text(text = item) }, + onClick = { + selectedItem = item + expanded = false + } + ) + } } } + + DatePickerDocked() } - DatePicker(onDateSelected = { date -> println("Selected date in milliseconds: $date") }, onDismiss = { println("Dismissed") }) + Box( + modifier = Modifier + .fillMaxWidth(), + contentAlignment = Alignment.Center + ) { + ButtonSuccess(modifier = Modifier, "Add Transaction", onClick = { print("test") }) + } } } diff --git a/Ledger/app/src/main/java/at/xaxa/ledger/ui/home/HomeUI.kt b/Ledger/app/src/main/java/at/xaxa/ledger/ui/home/HomeUI.kt index 442832c..414040a 100644 --- a/Ledger/app/src/main/java/at/xaxa/ledger/ui/home/HomeUI.kt +++ b/Ledger/app/src/main/java/at/xaxa/ledger/ui/home/HomeUI.kt @@ -26,7 +26,9 @@ fun Home(modifier: Modifier = Modifier, onCardClick: (Int) -> Unit, onButtonClic val state by HomeViewModel.entryUIState.entry.collectAsState(initial = emptyList()) Column( - modifier = Modifier.fillMaxSize(), + modifier = Modifier + .fillMaxSize() + .padding(16.dp, 0.dp), horizontalAlignment = Alignment.CenterHorizontally ) { val items = (1..20).toList()