Added working edit transaction
This commit is contained in:
Nathan Anderson
@@ -0,0 +1,265 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:helpers/helpers/misc_build/build_media.dart';
|
||||
import 'package:helpers/helpers/print.dart';
|
||||
import 'package:rluv/global/styles.dart';
|
||||
import 'package:rluv/models/budget.dart';
|
||||
import 'package:rluv/models/budget_category_model.dart';
|
||||
|
||||
import '../../../global/api.dart';
|
||||
import '../../../global/store.dart';
|
||||
|
||||
class AddBudgetCategoryDialog extends ConsumerStatefulWidget {
|
||||
const AddBudgetCategoryDialog({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<AddBudgetCategoryDialog> createState() =>
|
||||
_AddBudgetCategoryDialogState();
|
||||
}
|
||||
|
||||
class _AddBudgetCategoryDialogState
|
||||
extends ConsumerState<AddBudgetCategoryDialog> {
|
||||
bool loading = false;
|
||||
bool complete = false;
|
||||
late final Budget? budget;
|
||||
final categoryNameController = TextEditingController();
|
||||
final amountController = TextEditingController();
|
||||
|
||||
final categoryFocusNode = FocusNode();
|
||||
final amountFocusNode = FocusNode();
|
||||
|
||||
final colors = Styles.curatedColors;
|
||||
int selectedColorIndex = -1;
|
||||
|
||||
final formKey = GlobalKey<FormState>();
|
||||
@override
|
||||
void initState() {
|
||||
budget = ref.read(Store().budgetProvider);
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
categoryFocusNode.requestFocus();
|
||||
});
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (budget == null) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
Navigator.pop(context);
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Could not get your budget'),
|
||||
),
|
||||
);
|
||||
});
|
||||
return Container();
|
||||
} else if (complete) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
Navigator.pop(context);
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Budget Category Added!'),
|
||||
),
|
||||
);
|
||||
});
|
||||
return Container();
|
||||
}
|
||||
return SizedBox(
|
||||
width: BuildMedia(context).width * Styles.dialogScreenWidthFactor,
|
||||
child: Stack(
|
||||
children: [
|
||||
Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(vertical: 18.0, horizontal: 32.0),
|
||||
child: Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Padding(
|
||||
padding: EdgeInsets.only(bottom: 18.0),
|
||||
child: Text('Add Category:'),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
const Text('Name:'),
|
||||
const SizedBox(width: 30),
|
||||
Container(
|
||||
width: 120,
|
||||
height: 30,
|
||||
decoration: Styles.boxLavenderBubble,
|
||||
child: TextFormField(
|
||||
validator: (text) {
|
||||
if (text == null || text.length < 3) {
|
||||
return 'Invalid Category';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
focusNode: categoryFocusNode,
|
||||
textAlign: TextAlign.center,
|
||||
cursorColor: Styles.blushingPink,
|
||||
controller: categoryNameController,
|
||||
decoration: Styles.inputLavenderBubble(),
|
||||
onFieldSubmitted: (_) {
|
||||
amountFocusNode.requestFocus();
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
Row(
|
||||
children: [
|
||||
const Text('Amount:'),
|
||||
const SizedBox(width: 30),
|
||||
Container(
|
||||
width: 80,
|
||||
height: 30,
|
||||
decoration: Styles.boxLavenderBubble,
|
||||
child: TextFormField(
|
||||
validator: (text) {
|
||||
try {
|
||||
if (text == null || text.isEmpty) {
|
||||
return 'Invalid Amount';
|
||||
}
|
||||
final amount = double.tryParse(text);
|
||||
if (amount == null) {
|
||||
return 'Not A Number';
|
||||
}
|
||||
if (amount < 0) {
|
||||
return 'Not Positive';
|
||||
}
|
||||
return null;
|
||||
} catch (err) {
|
||||
return 'Invalid input';
|
||||
}
|
||||
},
|
||||
focusNode: amountFocusNode,
|
||||
keyboardType: TextInputType.number,
|
||||
textAlign: TextAlign.center,
|
||||
cursorColor: Styles.blushingPink,
|
||||
controller: amountController,
|
||||
decoration: Styles.inputLavenderBubble(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 6.0, horizontal: 16.0),
|
||||
child: SizedBox(
|
||||
height: 76,
|
||||
child: ListView.builder(
|
||||
itemCount: colors.length,
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
if (selectedColorIndex != index) {
|
||||
setState(() => selectedColorIndex = index);
|
||||
} else {
|
||||
setState(() => selectedColorIndex = -1);
|
||||
}
|
||||
printBlue(selectedColorIndex);
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: AnimatedContainer(
|
||||
decoration: selectedColorIndex == index
|
||||
? BoxDecoration(
|
||||
borderRadius:
|
||||
BorderRadius.circular(15.0),
|
||||
border: Border.all(
|
||||
color: Styles.washedStone,
|
||||
width: 2.0,
|
||||
),
|
||||
)
|
||||
: BoxDecoration(
|
||||
borderRadius:
|
||||
BorderRadius.circular(5.0),
|
||||
border: Border.all(
|
||||
color: Colors.transparent,
|
||||
width: 2.0,
|
||||
),
|
||||
),
|
||||
duration: const Duration(milliseconds: 400),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Container(
|
||||
height: 40,
|
||||
width: 40,
|
||||
decoration: const BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
height: 40,
|
||||
width: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: colors[index],
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: Colors.black, width: 1.5),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: () => submitCategory(colors[selectedColorIndex]),
|
||||
child: const Text('SAVE'),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: () => Navigator.pop(context),
|
||||
),
|
||||
if (loading) const Center(child: CircularProgressIndicator()),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future submitCategory(Color categoryColor) async {
|
||||
if (formKey.currentState != null && !formKey.currentState!.validate()) {
|
||||
printPink('Failed validation');
|
||||
return;
|
||||
}
|
||||
setState(
|
||||
() => loading = true,
|
||||
);
|
||||
final newBudget = BudgetCategory(
|
||||
id: null,
|
||||
amount: double.parse(amountController.text),
|
||||
budgetId: budget!.id!,
|
||||
color: categoryColor,
|
||||
name: categoryNameController.text,
|
||||
);
|
||||
|
||||
final budgetData =
|
||||
await Api().post(path: 'budget_category', data: newBudget.toJson());
|
||||
final success = budgetData != null ? budgetData['success'] as bool : false;
|
||||
if (success) {
|
||||
ref
|
||||
.read(Store().dashboardProvider.notifier)
|
||||
.add({'budget_categories': budgetData});
|
||||
}
|
||||
complete = true;
|
||||
setState(() {
|
||||
loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:helpers/helpers/misc_build/build_media.dart';
|
||||
|
||||
import '../../../global/api.dart';
|
||||
import '../../../global/store.dart';
|
||||
@@ -9,7 +10,9 @@ import '../../../models/budget_category_model.dart';
|
||||
import '../../../models/transaction_model.dart';
|
||||
|
||||
class AddTransactionDialog extends ConsumerStatefulWidget {
|
||||
const AddTransactionDialog({super.key});
|
||||
const AddTransactionDialog({super.key, this.transaction});
|
||||
|
||||
final Transaction? transaction;
|
||||
|
||||
@override
|
||||
ConsumerState<AddTransactionDialog> createState() =>
|
||||
@@ -17,146 +20,310 @@ class AddTransactionDialog extends ConsumerStatefulWidget {
|
||||
}
|
||||
|
||||
class _AddTransactionDialogState extends ConsumerState<AddTransactionDialog> {
|
||||
final amountController = TextEditingController();
|
||||
bool loading = false;
|
||||
bool complete = false;
|
||||
late final TextEditingController amountController;
|
||||
late final TextEditingController memoController;
|
||||
|
||||
final amountFocusNode = FocusNode();
|
||||
final memoFocusNode = FocusNode();
|
||||
|
||||
TransactionType transactionType = TransactionType.expense;
|
||||
late BudgetCategory selectedBudgetCategory;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
if (widget.transaction != null) {
|
||||
amountController =
|
||||
TextEditingController(text: widget.transaction!.amount.toString());
|
||||
memoController = TextEditingController(text: widget.transaction!.memo);
|
||||
transactionType = widget.transaction!.type;
|
||||
} else {
|
||||
amountController = TextEditingController();
|
||||
memoController = TextEditingController();
|
||||
}
|
||||
final categories = ref.read(Store().budgetCategoriesProvider);
|
||||
if (categories.isNotEmpty) {
|
||||
selectedBudgetCategory = categories.first;
|
||||
}
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final List<BudgetCategory> budgetCategories =
|
||||
ref.read(Store().budgetCategoriesProvider).requireValue;
|
||||
return Dialog(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
side: const BorderSide(color: Styles.purpleNurple, width: 5.0),
|
||||
),
|
||||
child: StatefulBuilder(builder: (context, setState) {
|
||||
TransactionType transactionType = TransactionType.expense;
|
||||
BudgetCategory selectedBudgetCategory = budgetCategories.first;
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
color: Styles.purpleNurple,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(children: [
|
||||
InkWell(
|
||||
onTap: transactionType == TransactionType.expense
|
||||
? null
|
||||
: () {
|
||||
setState(() =>
|
||||
transactionType = TransactionType.expense);
|
||||
},
|
||||
child: AnimatedContainer(
|
||||
height: 30,
|
||||
width: 70,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(8.0),
|
||||
topRight: Radius.circular(8.0)),
|
||||
color: transactionType == TransactionType.expense
|
||||
? Styles.lavender
|
||||
: Styles.sand),
|
||||
duration: const Duration(milliseconds: 300),
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text('Expense'),
|
||||
),
|
||||
),
|
||||
),
|
||||
InkWell(
|
||||
onTap: transactionType == TransactionType.income
|
||||
? null
|
||||
: () {
|
||||
setState(
|
||||
() => transactionType = TransactionType.income);
|
||||
},
|
||||
child: AnimatedContainer(
|
||||
height: 30,
|
||||
width: 70,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(8.0),
|
||||
topRight: Radius.circular(8.0)),
|
||||
color: transactionType == TransactionType.income
|
||||
? Styles.lavender
|
||||
: Styles.sand),
|
||||
duration: const Duration(milliseconds: 300),
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text('Income'),
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
Row(
|
||||
children: [
|
||||
const Text('Amount:'),
|
||||
SizedBox(
|
||||
width: 80,
|
||||
child: TextField(
|
||||
controller: amountController,
|
||||
decoration: InputDecoration(
|
||||
fillColor: Styles.lavender,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
borderSide:
|
||||
const BorderSide(color: Colors.transparent),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
const Padding(
|
||||
padding: EdgeInsets.only(right: 28.0),
|
||||
child: Text('Category:'),
|
||||
),
|
||||
DropdownButton<BudgetCategory>(
|
||||
value: selectedBudgetCategory,
|
||||
items: budgetCategories
|
||||
.map(
|
||||
(e) => DropdownMenuItem(
|
||||
value: e,
|
||||
child: Text(e.name),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
onChanged: (BudgetCategory? value) {
|
||||
if (value != null) {
|
||||
if (kDebugMode) {
|
||||
print('${value.name} selected');
|
||||
}
|
||||
setState(() => selectedBudgetCategory = value);
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
ElevatedButton(
|
||||
child: const Text('Add'),
|
||||
onPressed: () {
|
||||
Api().put(
|
||||
path: 'transactions',
|
||||
data: Transaction(
|
||||
amount: double.parse(amountController.text),
|
||||
addedByUserId: 1,
|
||||
budgetCategoryId: 1,
|
||||
budgetId: 1,
|
||||
date: DateTime.now(),
|
||||
transactionType: transactionType));
|
||||
Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
if (complete) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
Navigator.pop(context);
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(widget.transaction != null
|
||||
? 'Transaction updated!'
|
||||
: 'Transaction added!'),
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
});
|
||||
return Container();
|
||||
}
|
||||
final List<BudgetCategory> budgetCategories =
|
||||
ref.read(Store().budgetCategoriesProvider);
|
||||
return SizedBox(
|
||||
width: BuildMedia(context).width * Styles.dialogScreenWidthFactor,
|
||||
child: budgetCategories.isEmpty
|
||||
? const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text(
|
||||
'Add budget categories to sort your transactions',
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: const EdgeInsets.all(18.0),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (widget.transaction == null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8.0, left: 8.0),
|
||||
child: Row(children: [
|
||||
if (budgetCategories.isNotEmpty)
|
||||
InkWell(
|
||||
onTap: transactionType == TransactionType.expense
|
||||
? null
|
||||
: () {
|
||||
setState(() => transactionType =
|
||||
TransactionType.expense);
|
||||
},
|
||||
child: AnimatedContainer(
|
||||
height: 38,
|
||||
width: 80,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(8.0),
|
||||
topRight: Radius.circular(8.0)),
|
||||
color: transactionType ==
|
||||
TransactionType.expense
|
||||
? Styles.lavender
|
||||
: Styles.washedStone),
|
||||
duration: const Duration(milliseconds: 300),
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text('Expense',
|
||||
style: TextStyle(fontSize: 16)),
|
||||
),
|
||||
),
|
||||
),
|
||||
InkWell(
|
||||
onTap: transactionType == TransactionType.income
|
||||
? null
|
||||
: () {
|
||||
setState(() => transactionType =
|
||||
TransactionType.income);
|
||||
},
|
||||
child: AnimatedContainer(
|
||||
height: 38,
|
||||
width: 80,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(8.0),
|
||||
topRight: Radius.circular(8.0)),
|
||||
color:
|
||||
transactionType == TransactionType.income
|
||||
? Styles.lavender
|
||||
: Styles.washedStone),
|
||||
duration: const Duration(milliseconds: 300),
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text('Income',
|
||||
style: TextStyle(fontSize: 16)),
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text(
|
||||
'Amount:',
|
||||
style: TextStyle(fontSize: 18.0),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: 120,
|
||||
height: 40,
|
||||
decoration: Styles.boxLavenderBubble,
|
||||
child: TextFormField(
|
||||
keyboardType: TextInputType.number,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(fontSize: 18.0),
|
||||
cursorColor: Styles.blushingPink,
|
||||
decoration: Styles.inputLavenderBubble(),
|
||||
focusNode: amountFocusNode,
|
||||
controller: amountController,
|
||||
onFieldSubmitted: (_) {
|
||||
memoFocusNode.requestFocus();
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (budgetCategories.isEmpty)
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(18.0),
|
||||
child: Text(
|
||||
'Add budget categories to sort your transactions',
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
if (budgetCategories.isNotEmpty)
|
||||
AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
child: transactionType == TransactionType.income
|
||||
? const SizedBox(height: 12.5)
|
||||
: Padding(
|
||||
padding: const EdgeInsets.only(left: 8.0),
|
||||
child: Row(
|
||||
children: [
|
||||
const Padding(
|
||||
padding: EdgeInsets.only(right: 28.0),
|
||||
child: Text(
|
||||
'Category:',
|
||||
style: TextStyle(fontSize: 18.0),
|
||||
),
|
||||
),
|
||||
DropdownButton<BudgetCategory>(
|
||||
dropdownColor: Styles.lavender,
|
||||
value: selectedBudgetCategory,
|
||||
items: budgetCategories
|
||||
.map(
|
||||
(e) => DropdownMenuItem(
|
||||
value: e,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
height: 18,
|
||||
width: 18,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: Colors.black,
|
||||
width: 1.5),
|
||||
color: e.color,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(e.name),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
onChanged: (BudgetCategory? value) {
|
||||
if (value != null) {
|
||||
if (kDebugMode) {
|
||||
print('${value.name} selected');
|
||||
}
|
||||
setState(() =>
|
||||
selectedBudgetCategory = value);
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
'Memo',
|
||||
style: TextStyle(fontSize: 18.0),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: BuildMedia(context).width * 0.65,
|
||||
height: 100,
|
||||
decoration: Styles.boxLavenderBubble,
|
||||
child: TextFormField(
|
||||
style: const TextStyle(fontSize: 18.0),
|
||||
maxLines: 4,
|
||||
focusNode: memoFocusNode,
|
||||
textAlign: TextAlign.left,
|
||||
cursorColor: Styles.blushingPink,
|
||||
controller: memoController,
|
||||
decoration: Styles.inputLavenderBubble(),
|
||||
onFieldSubmitted: (_) {},
|
||||
),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: loading ? null : () => submitTransaction(),
|
||||
child: const Text('Add'),
|
||||
),
|
||||
],
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
Future submitTransaction() async {
|
||||
setState(() {
|
||||
loading = true;
|
||||
});
|
||||
Map<String, dynamic>? data;
|
||||
if (widget.transaction != null) {
|
||||
data = await Api().put(
|
||||
path: 'transactions',
|
||||
data: Transaction.copyWith(widget.transaction!, {
|
||||
'memo': memoController.text.isNotEmpty ? memoController.text : null,
|
||||
'amount': double.parse(amountController.text),
|
||||
'budget_category_id': transactionType == TransactionType.income
|
||||
? null
|
||||
: selectedBudgetCategory.id,
|
||||
}).toJson());
|
||||
} else {
|
||||
data = await Api().post(
|
||||
path: 'transactions',
|
||||
data: Transaction(
|
||||
amount: double.parse(amountController.text),
|
||||
addedByUserId: 1,
|
||||
budgetCategoryId: transactionType == TransactionType.income
|
||||
? null
|
||||
: selectedBudgetCategory.id,
|
||||
budgetId: 1,
|
||||
date: DateTime.now(),
|
||||
type: transactionType,
|
||||
memo: memoController.text.isNotEmpty
|
||||
? memoController.text
|
||||
: null)
|
||||
.toJson());
|
||||
}
|
||||
final success = data != null ? data['success'] as bool : false;
|
||||
if (success) {
|
||||
if (widget.transaction != null) {
|
||||
ref
|
||||
.read(Store().dashboardProvider.notifier)
|
||||
.update({'transactions': data});
|
||||
} else {
|
||||
ref
|
||||
.read(Store().dashboardProvider.notifier)
|
||||
.add({'transactions': data});
|
||||
}
|
||||
complete = true;
|
||||
} else {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(widget.transaction != null
|
||||
? 'Failed to edit transaction'
|
||||
: 'Failed to add transaction'),
|
||||
),
|
||||
);
|
||||
}
|
||||
setState(() {
|
||||
loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:helpers/helpers/print.dart';
|
||||
import 'package:rluv/global/utils.dart';
|
||||
import 'package:rluv/models/budget_category_model.dart';
|
||||
|
||||
import '../../../global/styles.dart';
|
||||
|
||||
class BudgetCategoryBar extends StatefulWidget {
|
||||
const BudgetCategoryBar(
|
||||
{super.key,
|
||||
required this.budgetCategory,
|
||||
required this.currentAmount,
|
||||
required this.index,
|
||||
this.height = 32,
|
||||
this.innerPadding = 1.5});
|
||||
|
||||
final int index;
|
||||
final double currentAmount;
|
||||
final BudgetCategory budgetCategory;
|
||||
final double height;
|
||||
final double innerPadding;
|
||||
@override
|
||||
State<BudgetCategoryBar> createState() => _BudgetCategoryBarState();
|
||||
}
|
||||
|
||||
class _BudgetCategoryBarState extends State<BudgetCategoryBar> {
|
||||
double percentSpent = 0.0;
|
||||
@override
|
||||
void initState() {
|
||||
Future.delayed(Duration(milliseconds: min(1600, 200 * widget.index)), () {
|
||||
setState(() =>
|
||||
percentSpent = (widget.currentAmount / widget.budgetCategory.amount));
|
||||
});
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final innerHeight = widget.height - widget.innerPadding * 2;
|
||||
final isBright =
|
||||
getBrightness(widget.budgetCategory.color) == Brightness.light;
|
||||
final textStyle = TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: widget.currentAmount > widget.budgetCategory.amount
|
||||
? Styles.expensesRed
|
||||
: isBright
|
||||
? Colors.black87
|
||||
: Colors.white);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: SizedBox(
|
||||
width: 90,
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
formatBudgetName(widget.budgetCategory.name),
|
||||
style: const TextStyle(fontSize: 18.0),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(right: 18.0),
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
height: widget.height,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black,
|
||||
borderRadius: BorderRadius.circular(14.0),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.all(widget.innerPadding),
|
||||
child: Container(
|
||||
height: innerHeight,
|
||||
decoration: BoxDecoration(
|
||||
color: Styles.emptyBarGrey,
|
||||
borderRadius: BorderRadius.circular(12.0),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.all(widget.innerPadding),
|
||||
child: SizedBox(
|
||||
height: innerHeight,
|
||||
child: AnimatedFractionallySizedBox(
|
||||
curve: Curves.easeOutSine,
|
||||
heightFactor: 1.0,
|
||||
widthFactor: min(1.0, max(0.08, percentSpent)),
|
||||
duration: const Duration(milliseconds: 350),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: widget.budgetCategory.color,
|
||||
borderRadius: BorderRadius.circular(12.0),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: widget.height,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 8.0),
|
||||
child: Text(
|
||||
'${widget.currentAmount.currency()} / ${widget.budgetCategory.amount.currency()}',
|
||||
style: textStyle),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
))
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String formatBudgetName(String name) {
|
||||
if (name.length < 12) {
|
||||
return name;
|
||||
}
|
||||
if (!name.contains(' ') || name.indexOf(' ') == name.length - 1) {
|
||||
return name;
|
||||
}
|
||||
printLime('here');
|
||||
final words = name.split(' ');
|
||||
int index = 0;
|
||||
String firstLine = words[index];
|
||||
while (true) {
|
||||
index += 1;
|
||||
if (index == words.length) {
|
||||
return '$firstLine\n${words.sublist(index).join(' ')}';
|
||||
}
|
||||
if (firstLine.length + words[index].length > 12) {
|
||||
return '$firstLine\n${words.sublist(index).join(' ')}';
|
||||
}
|
||||
firstLine += ' ${words[index]}';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:helpers/helpers.dart';
|
||||
import 'package:rluv/global/styles.dart';
|
||||
import 'package:rluv/global/utils.dart';
|
||||
|
||||
class BudgetNetBar extends StatelessWidget {
|
||||
const BudgetNetBar({super.key, required this.isPositive, required this.net});
|
||||
@@ -28,7 +29,7 @@ class BudgetNetBar extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'\$$net',
|
||||
net.currency(),
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
color: isPositive ? Styles.incomeGreen : Styles.expensesRed),
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:helpers/helpers/misc_build/build_media.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:rluv/features/budget/widgets/add_transaction_dialog.dart';
|
||||
import 'package:rluv/global/utils.dart';
|
||||
import 'package:rluv/models/transaction_model.dart';
|
||||
|
||||
import '../../../global/store.dart';
|
||||
import '../../../global/styles.dart';
|
||||
import '../../../global/widgets/budget_color_circle.dart';
|
||||
import '../../../models/budget_category_model.dart';
|
||||
|
||||
class TransactionListItem extends ConsumerStatefulWidget {
|
||||
const TransactionListItem({super.key, required this.index});
|
||||
|
||||
final int index;
|
||||
|
||||
@override
|
||||
ConsumerState<TransactionListItem> createState() =>
|
||||
_TransactionListItemState();
|
||||
}
|
||||
|
||||
class _TransactionListItemState extends ConsumerState<TransactionListItem> {
|
||||
bool showDetails = false;
|
||||
double cardHeight = 70.0;
|
||||
|
||||
BudgetCategory? budgetCategory;
|
||||
late final Transaction transaction;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final transaction = ref.watch(Store().transactionsProvider)[widget.index];
|
||||
final budgetCategories = ref.read(Store().budgetCategoriesProvider);
|
||||
if (transaction.type == TransactionType.expense) {
|
||||
budgetCategory = budgetCategories.singleWhere(
|
||||
(category) => category.id == transaction.budgetCategoryId,
|
||||
);
|
||||
}
|
||||
return GestureDetector(
|
||||
onTap: () => toggleDetails(),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 8.0, left: 8.0, bottom: 8.0),
|
||||
child: ClipRRect(
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(10.0),
|
||||
bottomLeft: Radius.circular(10.0)),
|
||||
child: AnimatedContainer(
|
||||
curve: Curves.easeOut,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
height: cardHeight,
|
||||
decoration: const BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(10.0),
|
||||
bottomLeft: Radius.circular(10.0)),
|
||||
color: Styles.washedStone,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
AnimatedContainer(
|
||||
curve: Curves.easeOut,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
height: cardHeight,
|
||||
width: 6,
|
||||
color: transaction.type == TransactionType.income
|
||||
? Styles.incomeBlue
|
||||
: Styles.expensesOrange),
|
||||
SizedBox(
|
||||
width: BuildMedia(context).width * 0.65,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 8.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(DateFormat('EEE MMM d, h:mm a')
|
||||
.format(transaction.date)),
|
||||
Row(
|
||||
children: [
|
||||
const SizedBox(
|
||||
width: 6,
|
||||
),
|
||||
if (budgetCategory != null) ...[
|
||||
BudgetColorCircle(
|
||||
color: budgetCategory!.color,
|
||||
),
|
||||
const SizedBox(
|
||||
width: 8,
|
||||
),
|
||||
],
|
||||
Text(
|
||||
transaction.type == TransactionType.income
|
||||
? 'Income'
|
||||
: budgetCategory!.name,
|
||||
style: const TextStyle(fontSize: 20),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (showDetails)
|
||||
Text(
|
||||
transaction.memo ?? '',
|
||||
style: const TextStyle(fontSize: 16),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
Text(
|
||||
transaction.amount.currency(),
|
||||
style: TextStyle(
|
||||
fontSize: 24,
|
||||
color: transaction.type == TransactionType.income
|
||||
? Styles.incomeGreen
|
||||
: Styles.expensesRed),
|
||||
),
|
||||
if (showDetails)
|
||||
IconButton(
|
||||
icon: const Icon(
|
||||
Icons.edit_rounded,
|
||||
),
|
||||
onPressed: () {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => Dialog(
|
||||
backgroundColor: Styles.dialogColor,
|
||||
shape: Styles.dialogShape,
|
||||
child: AddTransactionDialog(
|
||||
transaction: transaction),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
width: 14,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void toggleDetails() {
|
||||
if (showDetails) {
|
||||
setState(() {
|
||||
showDetails = false;
|
||||
cardHeight = 70;
|
||||
});
|
||||
} else {
|
||||
setState(() {
|
||||
showDetails = true;
|
||||
cardHeight = 120;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user