Improved UI and enhanced expense creation
Updated the UI across all screens (Login, Dashboard, Account Selection, Expense Details, and Creation) with a more modern, card-based design and improved layouts. Expense creation now includes: - Real-time split validation to ensure shares match the total amount. - An "Equal Split" shortcut for quick allocation. - Support for optional descriptions and multiple file attachments. - Strict save validation. The `MainActivity` now supports edge-to-edge display, and the `AccountDao` includes a new query to fetch accounts by ID. Added `material-icons-extended` dependency for enhanced iconography.
This commit is contained in:
@@ -61,6 +61,7 @@ dependencies {
|
||||
|
||||
//Manually added
|
||||
implementation("androidx.datastore:datastore-preferences:1.2.0")
|
||||
implementation("androidx.compose.material:material-icons-extended:1.6.0")
|
||||
|
||||
val room_version = "2.8.4"
|
||||
implementation("androidx.room:room-runtime:$room_version")
|
||||
|
||||
@@ -4,6 +4,7 @@ import android.os.Bundle
|
||||
import androidx.activity.ComponentActivity
|
||||
import androidx.activity.compose.BackHandler
|
||||
import androidx.activity.compose.setContent
|
||||
import androidx.activity.enableEdgeToEdge
|
||||
import androidx.compose.runtime.collectAsState
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
@@ -21,6 +22,7 @@ import de.miaurizius.shap_planner.viewmodels.MainViewModel
|
||||
|
||||
class MainActivity : ComponentActivity() {
|
||||
override fun onCreate(savedInstanceState: Bundle?) {
|
||||
enableEdgeToEdge()
|
||||
super.onCreate(savedInstanceState)
|
||||
|
||||
val prefs = UserPreferences(this)
|
||||
|
||||
@@ -25,6 +25,9 @@ interface AccountDao {
|
||||
@Query("SELECT * FROM accounts")
|
||||
fun getAllAccounts(): Flow<List<Account>>
|
||||
|
||||
@Query("SELECT * FROM accounts WHERE id = :userId")
|
||||
fun getAccountById(userId: UUID): Flow<Account?>
|
||||
|
||||
@Insert(onConflict = OnConflictStrategy.REPLACE)
|
||||
suspend fun insertAccount(account: Account)
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
package de.miaurizius.shap_planner.repository
|
||||
|
||||
import de.miaurizius.shap_planner.entities.Expense
|
||||
import de.miaurizius.shap_planner.entities.ExpenseShare
|
||||
import de.miaurizius.shap_planner.entities.ExpenseShareDao
|
||||
import de.miaurizius.shap_planner.network.APIService
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
package de.miaurizius.shap_planner.ui
|
||||
|
||||
import androidx.activity.compose.BackHandler
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
@@ -55,7 +53,7 @@ fun AppContent(
|
||||
account = selectedAccount!!,
|
||||
viewModel = creationViewModel,
|
||||
onBack = { showAddExpenseScreen = false },
|
||||
onSaved = { showAddExpenseScreen = false }
|
||||
onSaved = { showAddExpenseScreen = false },
|
||||
)
|
||||
}
|
||||
selectedExpense != null -> {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
package de.miaurizius.shap_planner.ui.screens
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
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.fillMaxSize
|
||||
@@ -13,59 +13,176 @@ import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.navigationBarsPadding
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.statusBarsPadding
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
|
||||
import androidx.compose.material.icons.filled.Add
|
||||
import androidx.compose.material.icons.filled.Home
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.CardDefaults
|
||||
import androidx.compose.material3.CenterAlignedTopAppBar
|
||||
import androidx.compose.material3.ElevatedCard
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
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.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import de.miaurizius.shap_planner.entities.Account
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun AccountSelectionScreen(accounts: List<Account>, onAccountClick: (Account) -> Unit, onAddAccountClick: () -> Unit) {
|
||||
LazyColumn(
|
||||
fun AccountSelectionScreen(
|
||||
accounts: List<Account>,
|
||||
onAccountClick: (Account) -> Unit,
|
||||
onAddAccountClick: () -> Unit
|
||||
) {
|
||||
Scaffold(
|
||||
topBar = {
|
||||
CenterAlignedTopAppBar(
|
||||
title = { Text("ShAp-Planner", fontWeight = FontWeight.Black) }
|
||||
)
|
||||
},
|
||||
bottomBar = {
|
||||
Surface(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
tonalElevation = 2.dp
|
||||
) {
|
||||
Button(
|
||||
onClick = onAddAccountClick,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(20.dp)
|
||||
.navigationBarsPadding()
|
||||
.height(56.dp),
|
||||
shape = MaterialTheme.shapes.medium
|
||||
) {
|
||||
Icon(Icons.Default.Add, contentDescription = null)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Text("Add New Account", style = MaterialTheme.typography.titleMedium)
|
||||
}
|
||||
}
|
||||
}
|
||||
) { padding ->
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(16.dp)
|
||||
.statusBarsPadding()
|
||||
.navigationBarsPadding(),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp)
|
||||
.padding(padding)
|
||||
.padding(horizontal = 20.dp)
|
||||
) {
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
Text(
|
||||
text = "Welcome back!",
|
||||
style = MaterialTheme.typography.headlineLarge,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
Text(
|
||||
text = "Select an account to continue",
|
||||
style = MaterialTheme.typography.bodyLarge,
|
||||
color = MaterialTheme.colorScheme.secondary,
|
||||
modifier = Modifier.padding(bottom = 16.dp)
|
||||
)
|
||||
|
||||
LazyColumn(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
contentPadding = PaddingValues(bottom = 16.dp)
|
||||
) {
|
||||
if (accounts.isEmpty()) {
|
||||
item {
|
||||
Text("Choose an account", style = MaterialTheme.typography.headlineSmall)
|
||||
Box(
|
||||
modifier = Modifier.fillParentMaxHeight(0.6f).fillMaxWidth(),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Text(
|
||||
"No accounts yet.\nTap 'Add New Account' to start.",
|
||||
textAlign = TextAlign.Center,
|
||||
color = Color.Gray
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
items(accounts) { account ->
|
||||
Card(modifier = Modifier.fillMaxWidth().clickable{ onAccountClick(account) }) {
|
||||
Row(modifier = Modifier.padding(16.dp), verticalAlignment = Alignment.CenterVertically) {
|
||||
Box(modifier = Modifier.size(40.dp).background(Color.Gray, shape = CircleShape))
|
||||
Spacer(modifier = Modifier.width(16.dp))
|
||||
Column {
|
||||
Text(text = account.name, fontWeight = FontWeight.Bold)
|
||||
Text(text = account.wgName, style = MaterialTheme.typography.bodyMedium)
|
||||
AccountItem(account = account, onClick = { onAccountClick(account) })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
item {
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Button(
|
||||
onClick = onAddAccountClick,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Text("Add account")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun AccountItem(account: Account, onClick: () -> Unit) {
|
||||
ElevatedCard(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.clickable { onClick() },
|
||||
shape = MaterialTheme.shapes.large,
|
||||
colors = CardDefaults.elevatedCardColors(
|
||||
containerColor = MaterialTheme.colorScheme.surface
|
||||
)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.padding(16.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
// Stylized Avatar with Initial
|
||||
Surface(
|
||||
modifier = Modifier.size(52.dp),
|
||||
shape = CircleShape,
|
||||
color = MaterialTheme.colorScheme.primaryContainer
|
||||
) {
|
||||
Box(contentAlignment = Alignment.Center) {
|
||||
Text(
|
||||
text = account.name.take(1).uppercase(),
|
||||
style = MaterialTheme.typography.titleLarge,
|
||||
fontWeight = FontWeight.Bold,
|
||||
color = MaterialTheme.colorScheme.onPrimaryContainer
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.width(16.dp))
|
||||
|
||||
Column(modifier = Modifier.weight(1f)) {
|
||||
Text(
|
||||
text = account.name,
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Icon(
|
||||
Icons.Default.Home,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(14.dp),
|
||||
tint = MaterialTheme.colorScheme.secondary
|
||||
)
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
Text(
|
||||
text = account.wgName,
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
color = MaterialTheme.colorScheme.secondary
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Trailing Chevron
|
||||
Icon(
|
||||
Icons.AutoMirrored.Filled.KeyboardArrowRight,
|
||||
contentDescription = null,
|
||||
tint = MaterialTheme.colorScheme.outline
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
package de.miaurizius.shap_planner.ui.screens
|
||||
|
||||
import android.annotation.SuppressLint
|
||||
import androidx.activity.compose.BackHandler
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
@@ -13,25 +12,30 @@ import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.navigationBarsPadding
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.statusBarsPadding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Add
|
||||
import androidx.compose.material.icons.filled.Delete
|
||||
import androidx.compose.material.icons.filled.Refresh
|
||||
import androidx.compose.material3.CircularProgressIndicator
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TopAppBar
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.collectAsState
|
||||
import androidx.compose.runtime.getValue
|
||||
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 de.miaurizius.shap_planner.entities.Account
|
||||
@@ -43,98 +47,89 @@ import de.miaurizius.shap_planner.viewmodels.MainViewModel
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun DashboardScreen(
|
||||
// Data and regarding Methods
|
||||
account: Account,
|
||||
onExpenseClick: (Expense) -> Unit,
|
||||
onAddExpenseClick: () -> Unit,
|
||||
|
||||
// Default Methods
|
||||
mainViewModel: MainViewModel,
|
||||
onBack: () -> Unit,
|
||||
onDelete: () -> Unit,
|
||||
sessionState: SessionState,
|
||||
onValidate: () -> Unit,
|
||||
onSessionInvalid: () -> Unit) {
|
||||
|
||||
onSessionInvalid: () -> Unit
|
||||
) {
|
||||
val expenseResource by mainViewModel.expenseResource.collectAsState()
|
||||
|
||||
LaunchedEffect(Unit) { onValidate() }
|
||||
LaunchedEffect(account) { mainViewModel.loadExpenses(account, forceRefresh = false) }
|
||||
when (sessionState) {
|
||||
SessionState.Loading -> {
|
||||
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
|
||||
CircularProgressIndicator()
|
||||
}
|
||||
|
||||
if (sessionState == SessionState.Invalid) {
|
||||
LaunchedEffect(Unit) { onSessionInvalid() }
|
||||
return
|
||||
}
|
||||
|
||||
SessionState.Valid -> {
|
||||
BackHandler {
|
||||
onBack()
|
||||
Scaffold(
|
||||
topBar = {
|
||||
TopAppBar(
|
||||
title = {
|
||||
Column {
|
||||
Text(account.wgName, style = MaterialTheme.typography.titleLarge)
|
||||
Text("Household", style = MaterialTheme.typography.labelSmall)
|
||||
}
|
||||
Scaffold(floatingActionButton = {
|
||||
},
|
||||
actions = {
|
||||
IconButton(onClick = onBack) {
|
||||
Icon(Icons.Default.Refresh, "Switch")
|
||||
}
|
||||
IconButton(onClick = onDelete) {
|
||||
Icon(Icons.Default.Delete, "Delete", tint = MaterialTheme.colorScheme.error)
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
floatingActionButton = {
|
||||
androidx.compose.material3.FloatingActionButton(
|
||||
onClick = onAddExpenseClick,
|
||||
containerColor = MaterialTheme.colorScheme.primary,
|
||||
contentColor = MaterialTheme.colorScheme.onPrimary
|
||||
) {
|
||||
Text("+", style = MaterialTheme.typography.headlineSmall)
|
||||
Icon(Icons.Default.Add, "Neu")
|
||||
}
|
||||
}) { paddingValues ->
|
||||
}
|
||||
) { paddingValues ->
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(paddingValues)
|
||||
.padding(16.dp)
|
||||
.statusBarsPadding()
|
||||
.navigationBarsPadding()
|
||||
.background(MaterialTheme.colorScheme.surface)
|
||||
) {
|
||||
// Header
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Column {
|
||||
Column(modifier = Modifier.padding(16.dp)) {
|
||||
Text(
|
||||
text = "Hello, ${account.name}!",
|
||||
style = MaterialTheme.typography.headlineMedium
|
||||
style = MaterialTheme.typography.headlineMedium,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
SummaryCard(expenses = expenseResource.data ?: emptyList())
|
||||
}
|
||||
|
||||
Text(
|
||||
text = "Household: ${account.wgName}",
|
||||
style = MaterialTheme.typography.bodyLarge,
|
||||
color = Color.Gray
|
||||
text = "Latest expenses",
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
|
||||
color = MaterialTheme.colorScheme.secondary
|
||||
)
|
||||
}
|
||||
Button(onClick = onBack) {
|
||||
Text("Switch")
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(5.dp))
|
||||
|
||||
Button(onClick = onDelete) {
|
||||
Text("Delete")
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(10.dp))
|
||||
|
||||
Text("Costs", style = MaterialTheme.typography.titleLarge)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
if(expenseResource is Resource.Loading && expenseResource.data?.isEmpty() == true) {
|
||||
CircularProgressIndicator(modifier = Modifier.align(Alignment.CenterHorizontally))
|
||||
}
|
||||
|
||||
if(expenseResource is Resource.Error) {
|
||||
Text("Error: ${expenseResource.message}", color = Color.Red)
|
||||
Box(modifier = Modifier.fillMaxSize()) {
|
||||
if (expenseResource is Resource.Loading && expenseResource.data?.isEmpty() == true) {
|
||||
CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
|
||||
}
|
||||
|
||||
LazyColumn(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(MaterialTheme.colorScheme.surfaceVariant, shape = MaterialTheme.shapes.medium),
|
||||
contentPadding = PaddingValues(8.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
contentPadding = PaddingValues(16.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp)
|
||||
) {
|
||||
items(expenseResource.data ?: emptyList()) { expense ->
|
||||
ExpenseItem(expense = expense, onClick = { onExpenseClick(expense) })
|
||||
@@ -143,15 +138,25 @@ fun DashboardScreen(
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SessionState.Invalid -> {
|
||||
LaunchedEffect(Unit) {
|
||||
onSessionInvalid()
|
||||
}
|
||||
}
|
||||
|
||||
is SessionState.Error -> {
|
||||
Text("Server error")
|
||||
@SuppressLint("DefaultLocale")
|
||||
@Composable
|
||||
fun SummaryCard(expenses: List<Expense>) {
|
||||
val total = expenses.sumOf { it.amount } / 100.0
|
||||
androidx.compose.material3.Card(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
colors = androidx.compose.material3.CardDefaults.cardColors(
|
||||
containerColor = MaterialTheme.colorScheme.primaryContainer
|
||||
)
|
||||
) {
|
||||
Column(modifier = Modifier.padding(20.dp)) {
|
||||
Text("Total expenditure", style = MaterialTheme.typography.labelMedium)
|
||||
Text(
|
||||
text = String.format("%.2f €", total),
|
||||
style = MaterialTheme.typography.displaySmall,
|
||||
fontWeight = FontWeight.Black
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -159,14 +164,54 @@ fun DashboardScreen(
|
||||
@SuppressLint("DefaultLocale")
|
||||
@Composable
|
||||
fun ExpenseItem(expense: Expense, onClick: () -> Unit) {
|
||||
Surface(modifier = Modifier
|
||||
androidx.compose.material3.ElevatedCard(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.clickable{onClick()},
|
||||
shape = MaterialTheme.shapes.small,
|
||||
color = MaterialTheme.colorScheme.surface) {
|
||||
Row(modifier = Modifier.padding(16.dp), horizontalArrangement = Arrangement.SpaceBetween) {
|
||||
Text(text = expense.title, style = MaterialTheme.typography.bodyLarge)
|
||||
Text(text = String.format("%.2f€", expense.amount / 100.0), style = MaterialTheme.typography.bodyLarge, fontWeight = FontWeight.Bold)
|
||||
.clickable { onClick() },
|
||||
shape = MaterialTheme.shapes.medium,
|
||||
colors = androidx.compose.material3.CardDefaults.elevatedCardColors(
|
||||
containerColor = MaterialTheme.colorScheme.surface
|
||||
)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.padding(16.dp)
|
||||
.fillMaxWidth(),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Surface(
|
||||
shape = androidx.compose.foundation.shape.CircleShape,
|
||||
color = MaterialTheme.colorScheme.primaryContainer,
|
||||
modifier = Modifier.size(40.dp)
|
||||
) {
|
||||
Box(contentAlignment = Alignment.Center) {
|
||||
Text(
|
||||
text = expense.title.take(1).uppercase(),
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
color = MaterialTheme.colorScheme.onPrimaryContainer
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.width(16.dp))
|
||||
|
||||
Column {
|
||||
Text(
|
||||
text = expense.title,
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Text(
|
||||
text = String.format("%.2f €", expense.amount / 100.0),
|
||||
style = MaterialTheme.typography.titleLarge,
|
||||
fontWeight = FontWeight.ExtraBold,
|
||||
color = MaterialTheme.colorScheme.primary
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,28 @@
|
||||
package de.miaurizius.shap_planner.ui.screens
|
||||
|
||||
import android.annotation.SuppressLint
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.foundation.text.KeyboardOptions
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.automirrored.filled.ArrowBack
|
||||
import androidx.compose.material.icons.filled.Delete
|
||||
import androidx.compose.material.icons.filled.Description
|
||||
import androidx.compose.material3.*
|
||||
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.text.input.KeyboardType
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
import de.miaurizius.shap_planner.entities.Account
|
||||
import de.miaurizius.shap_planner.viewmodels.ExpenseCreationViewModel
|
||||
import java.util.UUID
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
|
||||
@SuppressLint("DefaultLocale")
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun ExpenseCreationScreen(
|
||||
account: Account,
|
||||
@@ -20,68 +31,219 @@ fun ExpenseCreationScreen(
|
||||
onBack: () -> Unit
|
||||
) {
|
||||
var title by remember { mutableStateOf("") }
|
||||
var amountStr by remember { mutableStateOf("") }
|
||||
var description by remember { mutableStateOf("") }
|
||||
var totalAmountStr by remember { mutableStateOf("") }
|
||||
val attachmentUris = remember { mutableStateListOf<android.net.Uri>() }
|
||||
val userShares = remember { mutableStateMapOf<java.util.UUID, String>() }
|
||||
val users by viewModel.users.collectAsState()
|
||||
val selectedUsers = remember { mutableStateListOf<UUID>() }
|
||||
|
||||
// Real-time calculation logic
|
||||
val totalCents = (totalAmountStr.replace(",", ".").toDoubleOrNull() ?: 0.0) * 100
|
||||
val distributedCents = userShares.values.sumOf {
|
||||
(it.replace(",", ".").toDoubleOrNull() ?: 0.0) * 100
|
||||
}.toLong()
|
||||
|
||||
val diff = totalCents.toLong() - distributedCents
|
||||
val isAmountMatched = totalCents > 0 && diff == 0L
|
||||
|
||||
// File Picker for multiple files (Images & PDFs)
|
||||
val launcher = androidx.activity.compose.rememberLauncherForActivityResult(
|
||||
contract = androidx.activity.result.contract.ActivityResultContracts.GetMultipleContents()
|
||||
) { uris ->
|
||||
attachmentUris.addAll(uris)
|
||||
}
|
||||
|
||||
LaunchedEffect(Unit) { viewModel.loadUsers() }
|
||||
|
||||
Scaffold(
|
||||
topBar = {
|
||||
TopAppBar(title = { Text("New Expense") })
|
||||
TopAppBar(
|
||||
title = { Text("New Expense") },
|
||||
navigationIcon = { IconButton(onClick = onBack) {
|
||||
Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
|
||||
} }
|
||||
)
|
||||
}
|
||||
) { padding ->
|
||||
Column(modifier = Modifier.padding(padding).padding(16.dp)) {
|
||||
LazyColumn(
|
||||
modifier = Modifier.fillMaxSize().padding(padding).padding(horizontal = 16.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(16.dp)
|
||||
) {
|
||||
// Header Info
|
||||
item {
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
ElevatedCard(modifier = Modifier.fillMaxWidth()) {
|
||||
Column(modifier = Modifier.padding(16.dp)) {
|
||||
OutlinedTextField(
|
||||
value = title,
|
||||
onValueChange = { title = it },
|
||||
label = { Text("What was bought?") },
|
||||
label = { Text("Title *") },
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
OutlinedTextField(
|
||||
value = amountStr,
|
||||
onValueChange = { amountStr = it },
|
||||
label = { Text("Amount in €") },
|
||||
value = totalAmountStr,
|
||||
onValueChange = { totalAmountStr = it },
|
||||
label = { Text("Total Amount (€) *") },
|
||||
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Optional Description & Multi-File Attachments
|
||||
item {
|
||||
Text("Additional Info", style = MaterialTheme.typography.titleMedium)
|
||||
ElevatedCard(modifier = Modifier.fillMaxWidth()) {
|
||||
Column(modifier = Modifier.padding(16.dp)) {
|
||||
OutlinedTextField(
|
||||
value = description,
|
||||
onValueChange = { description = it },
|
||||
label = { Text("Description (Optional)") },
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
minLines = 2
|
||||
)
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
Text("Who participated?", style = MaterialTheme.typography.titleMedium)
|
||||
|
||||
FlowRow(modifier = Modifier.padding(vertical = 8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
users.forEach { user ->
|
||||
FilterChip(
|
||||
selected = selectedUsers.contains(user.id),
|
||||
onClick = {
|
||||
if (selectedUsers.contains(user.id)) selectedUsers.remove(user.id)
|
||||
else selectedUsers.add(user.id)
|
||||
},
|
||||
label = { Text(user.name) }
|
||||
Text("Attachments (${attachmentUris.size})", style = MaterialTheme.typography.labelLarge)
|
||||
attachmentUris.forEach { uri ->
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Icon(Icons.Default.Description, "File", modifier = Modifier.size(20.dp))
|
||||
Text(" Document attached", modifier = Modifier.weight(1f), style = MaterialTheme.typography.bodySmall)
|
||||
IconButton(onClick = { attachmentUris.remove(uri) }) {
|
||||
Icon(Icons.Default.Delete, "Remove", tint = Color.Red)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button(onClick = { launcher.launch("*/*") }) {
|
||||
Text("Select Files (Images, PDF)")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Split Details & Validation Message
|
||||
item {
|
||||
Column {
|
||||
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically) {
|
||||
Text("Split Details *", style = MaterialTheme.typography.titleMedium)
|
||||
TextButton(onClick = {
|
||||
if (totalCents > 0) {
|
||||
val share = String.format("%.2f", (totalCents / users.size) / 100.0)
|
||||
users.forEach { userShares[it.id] = share }
|
||||
}
|
||||
}) { Text("Split Equally") }
|
||||
}
|
||||
|
||||
// VALIDATION MESSAGE
|
||||
if (totalCents > 0) {
|
||||
val statusText = when {
|
||||
diff > 0 -> "Remaining: ${String.format("%.2f", diff / 100.0)} €"
|
||||
diff < 0 -> "Over-allocated: ${String.format("%.2f", Math.abs(diff) / 100.0)} €"
|
||||
else -> "Amount matched! ✓"
|
||||
}
|
||||
val statusColor = if (diff == 0L) Color(0xFF2E7D32) else MaterialTheme.colorScheme.error
|
||||
|
||||
Surface(
|
||||
color = statusColor.copy(alpha = 0.1f),
|
||||
shape = MaterialTheme.shapes.small,
|
||||
modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp)
|
||||
) {
|
||||
Text(
|
||||
text = statusText,
|
||||
color = statusColor,
|
||||
modifier = Modifier.padding(8.dp),
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
fontWeight = FontWeight.Bold,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
items(users) { user ->
|
||||
UserShareInputItem(
|
||||
userName = user.name,
|
||||
amount = userShares[user.id] ?: "",
|
||||
onAmountChange = { userShares[user.id] = it }
|
||||
)
|
||||
}
|
||||
|
||||
// Save Actions
|
||||
item {
|
||||
Button(
|
||||
onClick = {
|
||||
val cents = (amountStr.replace(",", ".").toDoubleOrNull() ?: 0.0) * 100
|
||||
viewModel.saveExpense(account, title, cents.toInt(), selectedUsers.toList())
|
||||
viewModel.saveExpense(
|
||||
account = account,
|
||||
title = title,
|
||||
description = description,
|
||||
amountCents = totalCents.toInt(),
|
||||
shares = userShares.mapValues { (it.value.replace(",",".").toDoubleOrNull() ?: 0.0).toInt() * 100 }.filter { it.value > 0 },
|
||||
attachments = attachmentUris.map { it.toString() }
|
||||
)
|
||||
onSaved()
|
||||
},
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
enabled = title.isNotBlank() && amountStr.isNotBlank() && selectedUsers.isNotEmpty()
|
||||
modifier = Modifier.fillMaxWidth().height(56.dp),
|
||||
enabled = title.isNotBlank() && isAmountMatched // STRICT VALIDATION
|
||||
) {
|
||||
Text("Save")
|
||||
Text("Save Expense")
|
||||
}
|
||||
|
||||
if (totalAmountStr.isNotBlank() && !isAmountMatched) {
|
||||
Text(
|
||||
"Sum of shares must equal total amount to save.",
|
||||
style = MaterialTheme.typography.labelSmall,
|
||||
color = MaterialTheme.colorScheme.error,
|
||||
modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
}
|
||||
|
||||
TextButton(onClick = onBack, modifier = Modifier.fillMaxWidth()) {
|
||||
Text("Cancel")
|
||||
}
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun UserShareInputItem(userName: String, amount: String, onAmountChange: (String) -> Unit) {
|
||||
Card(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.3f))
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.padding(12.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Surface(
|
||||
shape = androidx.compose.foundation.shape.CircleShape,
|
||||
color = MaterialTheme.colorScheme.primaryContainer,
|
||||
modifier = Modifier.size(32.dp)
|
||||
) {
|
||||
Box(contentAlignment = Alignment.Center) {
|
||||
Text(userName.take(1).uppercase(), style = MaterialTheme.typography.bodySmall)
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.width(12.dp))
|
||||
Text(userName, modifier = Modifier.weight(1f), style = MaterialTheme.typography.bodyLarge)
|
||||
|
||||
OutlinedTextField(
|
||||
value = amount,
|
||||
onValueChange = onAmountChange,
|
||||
modifier = Modifier.width(100.dp),
|
||||
placeholder = { Text("0.00") },
|
||||
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
|
||||
singleLine = true,
|
||||
textStyle = MaterialTheme.typography.bodyMedium.copy(textAlign = TextAlign.End)
|
||||
)
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
Text("€")
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,24 +2,26 @@ package de.miaurizius.shap_planner.ui.screens
|
||||
|
||||
import android.annotation.SuppressLint
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.automirrored.filled.ArrowBack
|
||||
import androidx.compose.material3.Card
|
||||
import androidx.compose.material3.DividerDefaults
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TopAppBar
|
||||
import androidx.compose.runtime.Composable
|
||||
@@ -54,32 +56,81 @@ fun ExpenseDetailScreen(
|
||||
Scaffold(
|
||||
topBar = {
|
||||
TopAppBar(
|
||||
title = { Text(expense.title) },
|
||||
navigationIcon = { IconButton(onClick = onBack) {
|
||||
Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
|
||||
} }
|
||||
title = { Text("Expense Details") },
|
||||
navigationIcon = {
|
||||
IconButton(onClick = onBack) {
|
||||
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
) { padding ->
|
||||
Column(modifier = Modifier.padding(padding).padding(16.dp)) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(padding)
|
||||
.padding(16.dp)
|
||||
) {
|
||||
// Hero Section: Amount & Title
|
||||
Column(
|
||||
modifier = Modifier.fillMaxWidth().padding(bottom = 24.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
Text(
|
||||
text = String.format("%.2f€", expense.amount / 100.0),
|
||||
text = "Total Amount",
|
||||
style = MaterialTheme.typography.labelLarge,
|
||||
color = MaterialTheme.colorScheme.secondary
|
||||
)
|
||||
Text(
|
||||
text = String.format("%.2f €", expense.amount / 100.0),
|
||||
style = MaterialTheme.typography.displayMedium,
|
||||
fontWeight = FontWeight.Bold,
|
||||
fontWeight = FontWeight.Black,
|
||||
color = MaterialTheme.colorScheme.primary
|
||||
)
|
||||
Text(expense.description, style = MaterialTheme.typography.bodyLarge)
|
||||
Text(
|
||||
text = expense.title,
|
||||
style = MaterialTheme.typography.headlineSmall,
|
||||
fontWeight = FontWeight.Bold,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
HorizontalDivider(Modifier, DividerDefaults.Thickness, DividerDefaults.color)
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
// Description Card (only shown if not empty)
|
||||
if (expense.description.isNotBlank()) {
|
||||
androidx.compose.material3.ElevatedCard(
|
||||
modifier = Modifier.fillMaxWidth().padding(bottom = 24.dp),
|
||||
colors = androidx.compose.material3.CardDefaults.elevatedCardColors(
|
||||
containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f)
|
||||
)
|
||||
) {
|
||||
Column(modifier = Modifier.padding(16.dp)) {
|
||||
Text(
|
||||
text = "Description",
|
||||
style = MaterialTheme.typography.labelMedium,
|
||||
color = MaterialTheme.colorScheme.primary
|
||||
)
|
||||
Spacer(modifier = Modifier.height(4.dp))
|
||||
Text(text = expense.description, style = MaterialTheme.typography.bodyLarge)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text("Cost Allocation", style = MaterialTheme.typography.titleLarge)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Text(
|
||||
text = "Cost Distribution",
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier.padding(bottom = 12.dp)
|
||||
)
|
||||
|
||||
LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
LazyColumn(
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
modifier = Modifier.fillMaxSize()
|
||||
) {
|
||||
items(shares) { item ->
|
||||
ShareItem(item.user?.name ?: "Unknown User", item.share.share_cents)
|
||||
ShareItem(
|
||||
name = item.user?.name ?: "Unknown User",
|
||||
amountCents = item.share.share_cents
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -89,20 +140,49 @@ fun ExpenseDetailScreen(
|
||||
@SuppressLint("DefaultLocale")
|
||||
@Composable
|
||||
fun ShareItem(name: String, amountCents: Int) {
|
||||
Card(modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(vertical = 4.dp)
|
||||
androidx.compose.material3.OutlinedCard(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
shape = MaterialTheme.shapes.medium,
|
||||
colors = androidx.compose.material3.CardDefaults.outlinedCardColors(
|
||||
containerColor = MaterialTheme.colorScheme.surface
|
||||
)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth().padding(16.dp),
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(12.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Text(name, fontWeight = FontWeight.Medium, modifier = Modifier.weight(1f))
|
||||
// User Avatar Circle
|
||||
Surface(
|
||||
shape = androidx.compose.foundation.shape.CircleShape,
|
||||
color = MaterialTheme.colorScheme.secondaryContainer,
|
||||
modifier = Modifier.size(36.dp)
|
||||
) {
|
||||
Box(contentAlignment = Alignment.Center) {
|
||||
Text(
|
||||
text = String.format("%.2f€", amountCents / 100.0),
|
||||
color = if (amountCents > 0) Color(0xFF4CAF50) else Color.Gray,
|
||||
text = name.take(1).uppercase(),
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
fontWeight = FontWeight.Bold,
|
||||
style = MaterialTheme.typography.bodyLarge
|
||||
color = MaterialTheme.colorScheme.onSecondaryContainer
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.width(12.dp))
|
||||
|
||||
Text(
|
||||
text = name,
|
||||
style = MaterialTheme.typography.bodyLarge,
|
||||
fontWeight = FontWeight.Medium,
|
||||
modifier = Modifier.weight(1f)
|
||||
)
|
||||
|
||||
Text(
|
||||
text = String.format("%.2f €", amountCents / 100.0),
|
||||
style = MaterialTheme.typography.bodyLarge,
|
||||
fontWeight = FontWeight.Bold,
|
||||
color = if (amountCents > 0) Color(0xFF2E7D32) else Color.Gray
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,70 +3,174 @@ package de.miaurizius.shap_planner.ui.screens
|
||||
import androidx.activity.compose.BackHandler
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.navigationBarsPadding
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.statusBarsPadding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.text.KeyboardOptions
|
||||
import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.automirrored.filled.ArrowBack
|
||||
import androidx.compose.material.icons.filled.Cloud
|
||||
import androidx.compose.material.icons.filled.Lock
|
||||
import androidx.compose.material.icons.filled.Person
|
||||
import androidx.compose.material.icons.filled.Visibility
|
||||
import androidx.compose.material.icons.filled.VisibilityOff
|
||||
import androidx.compose.material.icons.filled.VpnKey
|
||||
import androidx.compose.material3.Button
|
||||
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.Scaffold
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TextField
|
||||
import androidx.compose.material3.TextButton
|
||||
import androidx.compose.material3.TopAppBar
|
||||
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.text.font.FontWeight
|
||||
import androidx.compose.ui.text.input.ImeAction
|
||||
import androidx.compose.ui.text.input.KeyboardType
|
||||
import androidx.compose.ui.text.input.PasswordVisualTransformation
|
||||
import androidx.compose.ui.text.input.VisualTransformation
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun LoginScreen(onLogin: (String, String, String) -> Unit, onBack: (() -> Unit)? = null) {
|
||||
|
||||
fun LoginScreen(
|
||||
onLogin: (String, String, String) -> Unit,
|
||||
onBack: (() -> Unit)? = null
|
||||
) {
|
||||
if (onBack != null) {
|
||||
BackHandler {
|
||||
onBack()
|
||||
}
|
||||
BackHandler { onBack() }
|
||||
}
|
||||
|
||||
var serverUrl by remember { mutableStateOf("") }
|
||||
var username by remember { mutableStateOf("") }
|
||||
var password by remember { mutableStateOf("") }
|
||||
var passwordVisible by remember { mutableStateOf(false) }
|
||||
|
||||
Column(modifier = Modifier.padding(16.dp).statusBarsPadding().navigationBarsPadding()) {
|
||||
Text("Bitte anmelden")
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Scaffold(
|
||||
topBar = {
|
||||
TopAppBar(
|
||||
title = { Text("Add Account", fontWeight = FontWeight.Bold) },
|
||||
navigationIcon = {
|
||||
if (onBack != null) {
|
||||
IconButton(onClick = onBack) {
|
||||
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
) { padding ->
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(padding)
|
||||
.padding(24.dp)
|
||||
.verticalScroll(rememberScrollState()), // Scrollbar, falls die Tastatur den Platz wegnimmt
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
// App Icon or Welcome Text
|
||||
Icon(
|
||||
imageVector = Icons.Default.Lock,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(64.dp),
|
||||
tint = MaterialTheme.colorScheme.primary
|
||||
)
|
||||
|
||||
//Home-Server
|
||||
TextField(
|
||||
Text(
|
||||
text = "Connect to Server",
|
||||
style = MaterialTheme.typography.headlineMedium,
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier.padding(top = 16.dp)
|
||||
)
|
||||
|
||||
Text(
|
||||
text = "Enter your credentials to link your account",
|
||||
style = MaterialTheme.typography.bodyMedium,
|
||||
color = MaterialTheme.colorScheme.secondary,
|
||||
textAlign = TextAlign.Center,
|
||||
modifier = Modifier.padding(bottom = 32.dp)
|
||||
)
|
||||
|
||||
// Server URL Field
|
||||
OutlinedTextField(
|
||||
value = serverUrl,
|
||||
onValueChange = { serverUrl = it },
|
||||
label = { Text("Server-Domain") }
|
||||
label = { Text("Server URL") },
|
||||
placeholder = { Text("your-server.com") },
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
singleLine = true,
|
||||
leadingIcon = { Icon(Icons.Default.Cloud, contentDescription = null) },
|
||||
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Uri, imeAction = ImeAction.Next)
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
//Username
|
||||
TextField(
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
// Username Field
|
||||
OutlinedTextField(
|
||||
value = username,
|
||||
onValueChange = { username = it },
|
||||
label = { Text("Nutzername") }
|
||||
label = { Text("Username") },
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
singleLine = true,
|
||||
leadingIcon = { Icon(Icons.Default.Person, contentDescription = null) },
|
||||
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next)
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
//Password
|
||||
TextField(
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
// Password Field
|
||||
OutlinedTextField(
|
||||
value = password,
|
||||
onValueChange = { password = it },
|
||||
label = { Text("Passwort") }
|
||||
label = { Text("Password") },
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
singleLine = true,
|
||||
leadingIcon = { Icon(Icons.Default.VpnKey, contentDescription = null) },
|
||||
visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
|
||||
keyboardOptions = KeyboardOptions(
|
||||
keyboardType = KeyboardType.Password,
|
||||
imeAction = ImeAction.Done
|
||||
),
|
||||
trailingIcon = {
|
||||
val image = if (passwordVisible) Icons.Default.Visibility else Icons.Default.VisibilityOff
|
||||
IconButton(onClick = { passwordVisible = !passwordVisible }) {
|
||||
Icon(imageVector = image, contentDescription = "Toggle password visibility")
|
||||
}
|
||||
}
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
Button(onClick = { if(serverUrl.isNotEmpty() && username.isNotEmpty() && password.isNotEmpty()) onLogin(
|
||||
serverUrl,
|
||||
username,
|
||||
password
|
||||
) }) {
|
||||
Text("Login")
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
|
||||
// Login Button
|
||||
Button(
|
||||
onClick = { onLogin(serverUrl, username, password) },
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(56.dp),
|
||||
enabled = serverUrl.isNotBlank() && username.isNotBlank() && password.isNotBlank(),
|
||||
shape = MaterialTheme.shapes.medium
|
||||
) {
|
||||
Text("Connect Account", style = MaterialTheme.typography.titleMedium)
|
||||
}
|
||||
|
||||
if (onBack != null) {
|
||||
TextButton(onClick = onBack, modifier = Modifier.padding(top = 8.dp)) {
|
||||
Text("Cancel", color = MaterialTheme.colorScheme.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -30,35 +30,37 @@ class ExpenseCreationViewModel(
|
||||
}
|
||||
}
|
||||
|
||||
fun saveExpense(account: Account, title: String, amountCents: Int, selectedUserIds: List<UUID>) {
|
||||
viewModelScope.launch {
|
||||
val expenseId = UUID.randomUUID() //TODO: Backend has to generate UUID
|
||||
val newExpense = Expense(
|
||||
id = expenseId,
|
||||
payer_id = account.id,
|
||||
amount = amountCents,
|
||||
title = title,
|
||||
description = "",
|
||||
attachments = null,
|
||||
created_at = (System.currentTimeMillis() / 1000).toInt(),
|
||||
last_updated_at = 0
|
||||
)
|
||||
|
||||
expenseDao.insertExpense(newExpense)
|
||||
|
||||
val shareAmount = amountCents / selectedUserIds.size
|
||||
selectedUserIds.forEach { userId ->
|
||||
shareDao.insertShare(
|
||||
ExpenseShare(
|
||||
UUID.randomUUID(), //TODO: Backend has to generate UUID
|
||||
expenseId,
|
||||
userId,
|
||||
shareAmount
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
// API Calls
|
||||
}
|
||||
fun saveExpense(
|
||||
account: Account,
|
||||
title: String,
|
||||
description: String,
|
||||
amountCents: Int,
|
||||
shares: Map<UUID, Int>,
|
||||
attachments: List<String>
|
||||
) {
|
||||
// viewModelScope.launch {
|
||||
// val expenseId = UUID.randomUUID()
|
||||
// val newExpense = Expense(
|
||||
// id = expenseId,
|
||||
// payer_id = account.id,
|
||||
// amount = amountCents,
|
||||
// title = title,
|
||||
// description = description,
|
||||
// attachments = if (attachments.isEmpty()) null else attachments,
|
||||
// created_at = (System.currentTimeMillis() / 1000).toInt(),
|
||||
// last_updated_at = 0
|
||||
// )
|
||||
//
|
||||
// expenseDao.insertExpense(newExpense)
|
||||
//
|
||||
// shares.forEach { (userId, shareCents) ->
|
||||
// shareDao.insertShare(
|
||||
// ExpenseShare(UUID.randomUUID(), expenseId, userId, shareCents)
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// // API POST Request
|
||||
//
|
||||
// }
|
||||
}
|
||||
}
|
||||
@@ -82,10 +82,6 @@ class MainViewModel(
|
||||
|
||||
sessionState = SessionState.Valid
|
||||
|
||||
// Fetch data
|
||||
// loadExpenses(account)
|
||||
println("All data fetched")
|
||||
|
||||
return@launch
|
||||
} else {
|
||||
sessionState = SessionState.Invalid
|
||||
|
||||
Reference in New Issue
Block a user