Improved layout, fixed transaction popup

This commit is contained in:
2024-02-11 17:28:21 +01:00
parent 44f6d433d1
commit cbaf94d866
21 changed files with 378 additions and 204 deletions

View File

@@ -1,75 +0,0 @@
import 'package:flutter/material.dart';
class AutocompleteInput extends StatelessWidget {
final List<String> options;
final String hintText;
final String? errorText;
final String? initialValue;
final ValueChanged<String>? onChanged;
const AutocompleteInput({
super.key,
required this.options,
required this.hintText,
required this.errorText,
required this.initialValue,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
return RawAutocomplete<String>(
initialValue: TextEditingValue(text: initialValue ?? ''),
optionsBuilder: (TextEditingValue textEditingValue) => options.where((String option) =>option.contains(textEditingValue.text.toLowerCase())),
fieldViewBuilder: (
BuildContext context,
TextEditingController textEditingController,
FocusNode focusNode,
VoidCallback onFieldSubmitted,
) {
return TextFormField(
controller: textEditingController,
focusNode: focusNode,
decoration: InputDecoration(
hintText: hintText,
errorText: errorText
),
onFieldSubmitted: (String value) {
onFieldSubmitted();
},
onChanged: onChanged,
);
},
optionsViewBuilder: (
BuildContext context,
AutocompleteOnSelected<String> onSelected,
Iterable<String> options,
) {
return Align(
alignment: Alignment.topLeft,
child: Material(
elevation: 4.0,
child: SizedBox(
height: 200.0,
child: ListView.builder(
padding: const EdgeInsets.all(8.0),
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final String option = options.elementAt(index);
return GestureDetector(
onTap: () {
onSelected(option);
},
child: ListTile(
title: Text(option),
),
);
},
),
),
),
);
},
);
}
}

View File

@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:tunas/domains/account/account_bloc.dart';
import 'package:tunas/domains/category/category_bloc.dart';
import 'package:tunas/domains/transaction/transaction_bloc.dart';
import 'package:tunas/pages/transactions/widgets/transaction_form.dart';
@@ -18,6 +19,7 @@ class TransactionAddDialog extends StatelessWidget {
providers: [
BlocProvider.value(value: BlocProvider.of<TransactionBloc>(context)),
BlocProvider.value(value: BlocProvider.of<CategoryBloc>(context)),
BlocProvider.value(value: BlocProvider.of<AccountBloc>(context)),
],
child: const TransactionAddDialog()
)
@@ -55,10 +57,7 @@ class TransactionAddDialog extends StatelessWidget {
builder: (context, state) => AlertDialog(
title: Text(state.currentTransaction == null ? 'Add Transaction' : 'Edit Transaction'),
actions: _computeActions(context, state.currentTransaction),
content: const SizedBox(
height: 400,
child: TransactionForm(),
)
content: const TransactionForm()
)
);
}

View File

@@ -1,11 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import 'package:tunas/domains/account/account_bloc.dart';
import 'package:tunas/domains/category/category_bloc.dart';
import 'package:tunas/domains/transaction/transaction_bloc.dart';
import 'autocomplete_input.dart';
class TransactionForm extends StatelessWidget {
const TransactionForm({super.key});
@@ -13,11 +12,16 @@ class TransactionForm extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
_TransactionDateInput(),
const SizedBox(height: 10,),
_TransactionCategoryInput(),
const SizedBox(height: 10,),
_TransactionDescriptionInput(),
const SizedBox(height: 10,),
_TransactionAccountInput(),
const SizedBox(height: 10,),
_TransactionValueInput()
],
);
@@ -41,11 +45,19 @@ class _TransactionDateInput extends StatelessWidget {
context: context,
firstDate: DateTime.fromMicrosecondsSinceEpoch(0),
lastDate: DateTime.now()
).then((value) => context.read<TransactionBloc>().add(TransactionDateChange(value)));
).then((value) {
if (value != null) {
context.read<TransactionBloc>().add(TransactionDateChange(value));
}
});
},
decoration: InputDecoration(
icon: const Icon(Icons.calendar_month),
hintText: 'Date',
errorText: state.transactionDate.isNotValid ? state.transactionDate.error?.message : null
errorText: state.transactionDate.isNotValid ? state.transactionDate.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
)
)
@@ -61,12 +73,18 @@ class _TransactionCategoryInput extends StatelessWidget {
buildWhen: (previous, current) => previous.transactionCategory != current.transactionCategory,
builder: (context, state) => SizedBox(
width: 500,
child: AutocompleteInput(
options: categoryState.categories.map((e) => e.label).toList(),
hintText: 'Category',
initialValue: state.transactionCategory.value,
errorText: state.transactionCategory.isNotValid ? state.transactionCategory.error?.message : null,
onChanged: (value) => context.read<TransactionBloc>().add(TransactionCategoryChange(value)),
child: DropdownButtonFormField<String>(
value: state.transactionCategory.value.toString() == '' ? null : state.transactionCategory.value.toString(),
onChanged: (value) => context.read<TransactionBloc>().add(TransactionCategoryChange(value!)),
items: categoryState.categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
decoration: InputDecoration(
icon: const Icon(Icons.category),
hintText: 'Category',
errorText: state.transactionCategory.isNotValid ? state.transactionCategory.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
),
),
);
@@ -80,11 +98,16 @@ class _TransactionDescriptionInput extends StatelessWidget {
buildWhen: (previous, current) => previous.transactionDescription != current.transactionDescription,
builder: (context, state) => SizedBox(
width: 500,
child: TextField(
child: TextFormField(
decoration: InputDecoration(
icon: const Icon(Icons.description),
hintText: 'Description',
errorText: state.transactionDescription.isNotValid ? state.transactionDescription.error?.message : null
errorText: state.transactionDescription.isNotValid ? state.transactionDescription.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
initialValue: state.transactionDescription.value,
onChanged: (value) => context.read<TransactionBloc>().add(TransactionDescriptionChange(value))
)
),
@@ -95,16 +118,23 @@ class _TransactionDescriptionInput extends StatelessWidget {
class _TransactionAccountInput extends StatelessWidget {
@override
Widget build(BuildContext context) {
final accountState = context.watch<AccountBloc>().state;
return BlocBuilder<TransactionBloc, TransactionState>(
buildWhen: (previous, current) => previous.transactionAccount != current.transactionAccount,
builder: (context, state) => SizedBox(
width: 500,
child: AutocompleteInput(
options: state.accountsTotals.keys.toList(),
hintText: 'Account',
initialValue: state.transactionAccount.value,
errorText: state.transactionAccount.isNotValid ? state.transactionAccount.error?.message : null,
onChanged: (value) => context.read<TransactionBloc>().add(TransactionAccountChange(value)),
child: DropdownButtonFormField<String>(
value: state.transactionAccount.value.toString() == '' ? null : state.transactionAccount.value.toString(),
onChanged: (value) => context.read<TransactionBloc>().add(TransactionAccountChange(value!)),
items: accountState.subAccounts.map((e) => DropdownMenuItem(value: e, child: Text(e))).toList(),
decoration: InputDecoration(
icon: const Icon(Icons.account_box),
hintText: 'Account',
errorText: state.transactionAccount.isNotValid ? state.transactionAccount.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
),
),
);
@@ -118,12 +148,17 @@ class _TransactionValueInput extends StatelessWidget {
buildWhen: (previous, current) => previous.transactionValue != current.transactionValue,
builder: (context, state) => SizedBox(
width: 500,
child: TextField(
child: TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
icon: const Icon(Icons.euro),
hintText: '\$\$\$',
errorText: state.transactionValue.isNotValid ? state.transactionValue.error?.message : null
errorText: state.transactionValue.isNotValid ? state.transactionValue.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
initialValue: state.transactionValue.value.toString(),
onChanged: (value) => context.read<TransactionBloc>().add(TransactionValueChange(value))
)
),