prototype complete
This commit is contained in:
94
lib/screens/history/history_controller.dart
Normal file
94
lib/screens/history/history_controller.dart
Normal file
@@ -0,0 +1,94 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:qpay/http/http.dart';
|
||||
|
||||
class HistoryModel {
|
||||
List<Map<String, dynamic>> transactions = [];
|
||||
bool isLoading = false;
|
||||
String? errorMessage;
|
||||
}
|
||||
|
||||
class HistoryController extends ChangeNotifier {
|
||||
final HistoryModel model = HistoryModel();
|
||||
final Http http = Http();
|
||||
BuildContext context;
|
||||
|
||||
HistoryController(this.context);
|
||||
|
||||
void _showErrorSnackBar(String? message) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(message.toString()),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
backgroundColor: Colors.deepOrange,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> getTransactions(Map<String, String> params) async {
|
||||
model.isLoading = true;
|
||||
model.transactions = getFakeTransactions();
|
||||
notifyListeners();
|
||||
|
||||
try {
|
||||
params['type'] = 'REQUEST';
|
||||
List<dynamic> response = await http.get(
|
||||
'/transaction?${buildQueryParameters(params)}',
|
||||
);
|
||||
model.transactions =
|
||||
response.map((e) => e as Map<String, dynamic>).toList();
|
||||
} catch (e) {
|
||||
logger.e(e);
|
||||
_showErrorSnackBar(
|
||||
"Problem fetching transactions, are you connected to the internet?",
|
||||
);
|
||||
model.errorMessage = e.toString();
|
||||
model.transactions = [];
|
||||
} finally {
|
||||
model.isLoading = false;
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
|
||||
String buildQueryParameters(Map<String, String> params) {
|
||||
if (params.isEmpty) {
|
||||
return '';
|
||||
}
|
||||
|
||||
String query = '';
|
||||
params.forEach((key, value) {
|
||||
query += '$key=$value&';
|
||||
});
|
||||
return query.substring(0, query.length - 1);
|
||||
}
|
||||
|
||||
List<Map<String, dynamic>> getFakeTransactions() {
|
||||
return [
|
||||
{
|
||||
"id": "77b2c479-b803-49fc-b5c3-acbf52cba633",
|
||||
"trace": "22a3044b-8f53-4e43-b4f5-c77dcec48d2d",
|
||||
"amount": 25.0,
|
||||
"charge": 0.0,
|
||||
"gatewayCharge": 0.25,
|
||||
"tax": 0.5,
|
||||
"totalAmount": 25.75,
|
||||
"reference": "c838136c-c015-4a0b-9c7c-52f127c8c109",
|
||||
"paymentProcessorLabel": "MPGS",
|
||||
"paymentProcessorImage": "visa-mastercard.png",
|
||||
"debitPhone": "",
|
||||
"debitAccount": "",
|
||||
"debitCurrency": "USD",
|
||||
"debitRef": "peak",
|
||||
"creditPhone": "",
|
||||
"creditAccount": "07088597534",
|
||||
"billClientId": "powertel_zesa",
|
||||
"billName": "Zesa",
|
||||
"type": "REQUEST",
|
||||
"authType": "WEB",
|
||||
"errorMessage": "",
|
||||
"responseCode": "00",
|
||||
"status": "SUCCESS",
|
||||
"sdkActionId": "0aa0d90d-6132-48a7-a5d8-e796f757c73f",
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
271
lib/screens/history/history_screen.dart
Normal file
271
lib/screens/history/history_screen.dart
Normal file
@@ -0,0 +1,271 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:qpay/screens/transaction_controller.dart';
|
||||
import 'package:skeletonizer/skeletonizer.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
import 'package:qpay/screens/history/history_controller.dart';
|
||||
import 'package:timeago/timeago.dart' as timeago;
|
||||
|
||||
class HistoryScreen extends StatefulWidget {
|
||||
const HistoryScreen({super.key});
|
||||
|
||||
@override
|
||||
State<HistoryScreen> createState() => _HistoryScreenState();
|
||||
}
|
||||
|
||||
class _HistoryScreenState extends State<HistoryScreen>
|
||||
with TickerProviderStateMixin {
|
||||
late HistoryController controller;
|
||||
late SharedPreferences prefs;
|
||||
late AnimationController _controller;
|
||||
late TransactionController transactionController;
|
||||
|
||||
final TextEditingController _searchController = TextEditingController();
|
||||
final Map<String, String> _queryParams = {};
|
||||
final List<Animation<Offset>> _alignListAnimations = [];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
controller = HistoryController(context);
|
||||
setupData();
|
||||
|
||||
transactionController = Provider.of<TransactionController>(
|
||||
context,
|
||||
listen: false,
|
||||
);
|
||||
|
||||
_controller = AnimationController(
|
||||
duration: const Duration(milliseconds: 600),
|
||||
vsync: this,
|
||||
)..forward();
|
||||
|
||||
List tranListIndices = [0, 1];
|
||||
for (int i = 0; i < tranListIndices.length; i++) {
|
||||
_alignListAnimations.add(
|
||||
Tween<Offset>(begin: Offset(0, -0.25), end: Offset.zero).animate(
|
||||
CurvedAnimation(
|
||||
parent: _controller,
|
||||
curve: Interval(0.075 * i, 1.0, curve: Curves.easeOut),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
void setupData() async {
|
||||
prefs = await SharedPreferences.getInstance();
|
||||
|
||||
await controller.getTransactions({'userId': prefs.getString("userId")!});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
title: Text(
|
||||
'History',
|
||||
style: TextStyle(fontSize: 20, color: Colors.black),
|
||||
),
|
||||
centerTitle: true,
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: ListenableBuilder(
|
||||
listenable: controller,
|
||||
builder: (context, child) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildSearchField(controller),
|
||||
if (controller.model.transactions.isEmpty)
|
||||
Column(
|
||||
children: [
|
||||
SizedBox(height: 30),
|
||||
Text(
|
||||
'No transactions yet. Make a payment to see your recent activity.',
|
||||
style: TextStyle(fontSize: 16),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
if (controller.model.transactions.isNotEmpty)
|
||||
ListView(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
children: [
|
||||
...controller.model.transactions.map(
|
||||
(e) => _buildTransactionItem(e, context),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSearchField(HistoryController controller) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextFormField(
|
||||
textInputAction: TextInputAction.search,
|
||||
onFieldSubmitted: (value) {
|
||||
_queryParams.clear();
|
||||
setState(() {
|
||||
_queryParams['creditAccount'] = _searchController.text;
|
||||
_queryParams['creditEmail'] = _searchController.text;
|
||||
_queryParams['creditPhone'] = _searchController.text;
|
||||
_queryParams['creditName'] = _searchController.text;
|
||||
_queryParams['billName'] = _searchController.text;
|
||||
_queryParams['amount'] = _searchController.text;
|
||||
_queryParams['userId'] = prefs.getString("userId")!;
|
||||
|
||||
controller.getTransactions(_queryParams);
|
||||
});
|
||||
},
|
||||
controller: _searchController,
|
||||
keyboardType: TextInputType.text,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Search by name, account, email, phone',
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(
|
||||
color: Theme.of(context).colorScheme.secondary,
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.primary.withOpacity(0.2),
|
||||
),
|
||||
),
|
||||
suffixIcon:
|
||||
_searchController.text.isNotEmpty
|
||||
? IconButton(
|
||||
onPressed: () {
|
||||
_searchController.clear();
|
||||
_queryParams.clear();
|
||||
controller.getTransactions({
|
||||
'userId': prefs.getString("userId")!,
|
||||
});
|
||||
},
|
||||
icon: Icon(Icons.clear),
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
onChanged: (value) {
|
||||
// controller.updateCreditAccount(value);
|
||||
},
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'Please enter an amount';
|
||||
}
|
||||
if (double.tryParse(value) == null) {
|
||||
return 'Please enter a valid amount';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTransactionItem(Map<String, dynamic> e, BuildContext context) {
|
||||
return SlideTransition(
|
||||
position: _alignListAnimations[0],
|
||||
child: Skeletonizer(
|
||||
enabled: controller.model.isLoading,
|
||||
child: InkWell(
|
||||
customBorder: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
onTap: () {
|
||||
transactionController.updateReceiptData(e);
|
||||
context.push("/receipt");
|
||||
},
|
||||
child: ListTile(
|
||||
leading: Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.primary.withValues(alpha: 0.1),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Image(
|
||||
image: AssetImage("assets/${e['paymentProcessorImage']}"),
|
||||
),
|
||||
),
|
||||
title: Row(
|
||||
children: [
|
||||
Text(
|
||||
e['billName'],
|
||||
style: TextStyle(fontWeight: FontWeight.bold),
|
||||
),
|
||||
SizedBox(width: 10),
|
||||
Icon(
|
||||
e['status'] == 'SUCCESS'
|
||||
? Icons.check_circle
|
||||
: e['status'] == 'PENDING'
|
||||
? Icons.pending
|
||||
: Icons.cancel,
|
||||
size: 16,
|
||||
color:
|
||||
e['status'] == 'SUCCESS'
|
||||
? Colors.green
|
||||
: e['status'] == 'PENDING'
|
||||
? Colors.orange
|
||||
: Colors.red,
|
||||
),
|
||||
],
|
||||
),
|
||||
subtitle: Text(
|
||||
e['createdAt'] != null
|
||||
? timeago.format(DateTime.parse(e['createdAt']))
|
||||
: '',
|
||||
style: TextStyle(fontSize: 12),
|
||||
),
|
||||
trailing: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
e['amount'].toStringAsFixed(2),
|
||||
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
|
||||
),
|
||||
Text(
|
||||
e['totalAmount'].toStringAsFixed(2),
|
||||
style: TextStyle(fontSize: 12),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user