AddUi done

2025-01-14 14:14:21 +01:00 · 2025-01-14 14:14:21 +01:00 · aef7c9cd6f
commit aef7c9cd6f
parent 0ac75cb6d2
3 changed files with 121 additions and 106 deletions
--- 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()) }
-
-    // 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()
-    )
+fun convertMillisToDate(millis: Long): String {
+    val formatter = SimpleDateFormat("DD.MM.yyyy", Locale.getDefault())
+    return formatter.format(Date(millis))
 }
+
+// endregion
--- 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") })
+        }
    }
 }
--- 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()