add pagination

This commit is contained in:
Sai Naw Wun
2020-11-13 02:38:16 +06:30
parent 08c90fce74
commit ca21f48dab
7 changed files with 412 additions and 190 deletions

View File

@@ -20,6 +20,10 @@ abstract class BaseModel extends ChangeNotifier {
this.setting = setting; this.setting = setting;
} }
void notify() {
notifyListeners();
}
void logout() {} void logout() {}
// request makes http request // request makes http request

View File

@@ -8,116 +8,126 @@ import 'package:fcs/domain/entities/package.dart';
import 'package:fcs/domain/entities/user.dart'; import 'package:fcs/domain/entities/user.dart';
import 'package:fcs/domain/vo/delivery_address.dart'; import 'package:fcs/domain/vo/delivery_address.dart';
import 'package:fcs/helpers/firebase_helper.dart'; import 'package:fcs/helpers/firebase_helper.dart';
import 'package:fcs/helpers/paginator.dart';
import 'package:fcs/pages/main/model/base_model.dart'; import 'package:fcs/pages/main/model/base_model.dart';
import 'package:fcs/pagination/paginator_listener.dart';
import 'package:logging/logging.dart'; import 'package:logging/logging.dart';
import 'package:path/path.dart' as Path; import 'package:path/path.dart' as Path;
class PackageModel extends BaseModel { class PackageModel extends BaseModel {
final log = Logger('PackageModel'); final log = Logger('PackageModel');
StreamSubscription<QuerySnapshot> listener; PaginatorListener packages;
PaginatorListener customerPackages;
PaginatorListener activePackages;
List<Package> get packages => _menuSelectedIndex == 1
? _packages
: List<Package>.from(_delivered.values);
List<Package> _packages = [];
Paginator _delivered;
bool isLoading = false; bool isLoading = false;
int _menuSelectedIndex = 1; int _menuSelectedIndex = 1;
set menuSelectedIndex(int index) { set menuSelectedIndex(int index) {
_menuSelectedIndex = index; _menuSelectedIndex = index;
_loadPackages(_menuSelectedIndex == 2);
_loadCustomerPackages(_menuSelectedIndex == 2);
notifyListeners(); notifyListeners();
} }
get menuSelectedIndex => _menuSelectedIndex; get menuSelectedIndex => _menuSelectedIndex;
initData(bool forCustomer) { void privilegeChanged() {
if (user != null) {
_initData();
}
}
Future<void> _initData() async {
logout(); logout();
_menuSelectedIndex = 1; _menuSelectedIndex = 1;
_loadPackages(forCustomer); packages = PaginatorListener<Package>(
_delivered = _getDelivered(forCustomer); (data, id) => Package.fromMap(data, id), onChange: () {
_delivered.load(); notifyListeners();
}, rowPerLoad: 30, insertNewByListener: true);
customerPackages = PaginatorListener<Package>(
(data, id) => Package.fromMap(data, id), onChange: () {
notifyListeners();
}, rowPerLoad: 30, insertNewByListener: true);
activePackages = PaginatorListener<Package>(
(data, id) => Package.fromMap(data, id), onChange: () {
notifyListeners();
}, rowPerLoad: 30, insertNewByListener: true);
_loadPackages(_menuSelectedIndex == 2);
_loadCustomerPackages(_menuSelectedIndex == 2);
_loadActivePackages();
} }
@override @override
logout() async { logout() async {
if (_delivered != null) _delivered.close(); if (customerPackages != null) customerPackages.close();
if (listener != null) await listener.cancel(); if (packages != null) packages.close();
_packages = []; if (activePackages != null) activePackages.close();
} }
Future<void> loadMore({bool isCustomer}) async { Future<void> _loadPackages(bool isDelivered) async {
if (_delivered.ended || menuSelectedIndex == 1)
return; // when delivered menu is not selected return
isLoading = true;
notifyListeners();
await _delivered.load(onFinished: () {
isLoading = false;
notifyListeners();
});
}
Future<void> refresh({bool isCustomer}) async {
if (menuSelectedIndex == 1)
return; // when delivered menu is not selected return
await _delivered.refresh(onFinished: () {
notifyListeners();
});
}
Paginator _getDelivered(bool isCustomer) {
if (!isCustomer) {
if (user == null ||
!((user.hasPackages() ||
user.hasReceiving() ||
user.hasProcessing()))) throw "No privilege";
}
var pageQuery = Firestore.instance
.collection("/$packages_collection")
.where("is_delivered", isEqualTo: true)
.where("is_deleted", isEqualTo: false);
if (isCustomer) {
pageQuery = pageQuery.where("user_id", isEqualTo: user.id);
}
pageQuery = pageQuery.orderBy("status_date", descending: true);
var paginator = new Paginator(pageQuery, rowPerLoad: 20, toObj: (data, id) {
return Package.fromMap(data, id);
});
return paginator;
}
Future<void> _loadPackages(bool forCustomer) async {
if (user == null) return; if (user == null) return;
if (!forCustomer && if (!((user.hasPackages() || user.hasReceiving() || user.hasProcessing())))
!((user.hasPackages() || user.hasReceiving() || user.hasProcessing())))
return; return;
String path = "/$packages_collection"; String path = "/$packages_collection";
if (listener != null) listener.cancel();
_packages = [];
try { try {
var q = Firestore.instance Query listenerQuery = Firestore.instance
.collection("$path") .collection(path)
.where("is_delivered", isEqualTo: false) .where("is_delivered", isEqualTo: isDelivered);
.where("is_deleted", isEqualTo: false); Query pageQuery = Firestore.instance
.collection(path)
.where("is_delivered", isEqualTo: isDelivered);
if (forCustomer) { pageQuery = pageQuery.orderBy("update_time", descending: true);
q = q.where("user_id", isEqualTo: user.id); packages.refresh(listeningQuery: listenerQuery, pageQuery: pageQuery);
} catch (e) {
log.warning("Error!! $e");
} }
q = q.orderBy("update_time", descending: true); }
listener = q.snapshots().listen((QuerySnapshot snapshot) {
_packages.clear(); Future<void> _loadCustomerPackages(bool isDelivered) async {
_packages = snapshot.documents.map((documentSnapshot) { if (user == null) return;
var package = Package.fromMap( String path = "/$packages_collection";
documentSnapshot.data, documentSnapshot.documentID);
return package; try {
}).toList(); Query listenerQuery = Firestore.instance
notifyListeners(); .collection(path)
}); .where("is_delivered", isEqualTo: isDelivered)
.where("user_id", isEqualTo: user.id);
Query pageQuery = Firestore.instance
.collection(path)
.where("is_delivered", isEqualTo: isDelivered)
.where("user_id", isEqualTo: user.id)
.orderBy("update_time", descending: true);
customerPackages.refresh(
listeningQuery: listenerQuery, pageQuery: pageQuery);
} catch (e) {
log.warning("Error!! $e");
}
}
Future<void> _loadActivePackages() async {
if (user == null) return;
if (!((user.hasPackages() || user.hasReceiving() || user.hasProcessing())))
return;
String path = "/$packages_collection";
try {
Query listenerQuery = Firestore.instance
.collection(path)
.where("is_delivered", isEqualTo: false);
Query pageQuery = Firestore.instance
.collection(path)
.where("is_delivered", isEqualTo: false);
pageQuery = pageQuery.orderBy("update_time", descending: true);
activePackages.refresh(
listeningQuery: listenerQuery, pageQuery: pageQuery);
} catch (e) { } catch (e) {
log.warning("Error!! $e"); log.warning("Error!! $e");
} }

View File

@@ -8,6 +8,7 @@ import 'package:fcs/pages/widgets/local_popup_menu_button.dart';
import 'package:fcs/pages/widgets/local_popupmenu.dart'; import 'package:fcs/pages/widgets/local_popupmenu.dart';
import 'package:fcs/pages/widgets/local_text.dart'; import 'package:fcs/pages/widgets/local_text.dart';
import 'package:fcs/pages/widgets/progress.dart'; import 'package:fcs/pages/widgets/progress.dart';
import 'package:fcs/pagination/paginator_listview.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@@ -22,26 +23,18 @@ class PackageList extends StatefulWidget {
class _PackageListState extends State<PackageList> { class _PackageListState extends State<PackageList> {
bool _isLoading = false; bool _isLoading = false;
var _controller = ScrollController();
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_controller.addListener(() async {
if (_controller.position.pixels == _controller.position.maxScrollExtent) {
Provider.of<PackageModel>(context, listen: false)
.loadMore(isCustomer: widget.forCustomer);
}
});
Provider.of<PackageModel>(context, listen: false)
.initData(widget.forCustomer);
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var packageModel = Provider.of<PackageModel>(context); var packageModel = Provider.of<PackageModel>(context);
var packages = packageModel.packages; var packages = widget.forCustomer
? packageModel.customerPackages
: packageModel.packages;
final popupMenu = LocalPopupMenuButton( final popupMenu = LocalPopupMenuButton(
popmenus: [ popmenus: [
@@ -90,43 +83,14 @@ class _PackageListState extends State<PackageList> {
popupMenu popupMenu
], ],
), ),
body: Column( body: PaginatorListView<Package>(
children: [ paginatorListener: packages,
Expanded( rowBuilder: (p) => PackageListRow(
child: RefreshIndicator( key: ValueKey(p.id),
child: ListView.separated( package: p,
controller: _controller,
separatorBuilder: (context, index) => Divider(
color: Colors.grey,
height: 1,
),
scrollDirection: Axis.vertical,
itemCount: packages.length,
itemBuilder: (BuildContext context, int index) {
return PackageListRow(
key: ValueKey(packages[index].id),
package: packages[index],
isCustomer: widget.forCustomer, isCustomer: widget.forCustomer,
);
}),
onRefresh: () =>
packageModel.refresh(isCustomer: widget.forCustomer),
), ),
),
packageModel.isLoading
? Container(
padding: EdgeInsets.all(8),
color: primaryColor, color: primaryColor,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Loading...",
style: TextStyle(color: Colors.white)),
],
),
)
: Container(),
],
)), )),
); );
} }

View File

@@ -5,6 +5,7 @@ import 'package:fcs/pages/package/model/package_model.dart';
import 'package:fcs/pages/package_search/package_serach.dart'; import 'package:fcs/pages/package_search/package_serach.dart';
import 'package:fcs/pages/widgets/local_text.dart'; import 'package:fcs/pages/widgets/local_text.dart';
import 'package:fcs/pages/widgets/progress.dart'; import 'package:fcs/pages/widgets/progress.dart';
import 'package:fcs/pagination/paginator_listview.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@@ -33,7 +34,7 @@ class _ProcessingListState extends State<ProcessingList> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var packageModel = Provider.of<PackageModel>(context); var packageModel = Provider.of<PackageModel>(context);
bool isCustomer = context.select((MainModel m) => m.isCustomer()); var packages = packageModel.activePackages;
return LocalProgress( return LocalProgress(
inAsyncCall: _isLoading, inAsyncCall: _isLoading,
@@ -52,9 +53,7 @@ class _ProcessingListState extends State<ProcessingList> {
color: Colors.white, color: Colors.white,
), ),
actions: <Widget>[ actions: <Widget>[
isCustomer IconButton(
? Container()
: IconButton(
icon: Icon( icon: Icon(
Icons.search, Icons.search,
color: Colors.white, color: Colors.white,
@@ -65,20 +64,14 @@ class _ProcessingListState extends State<ProcessingList> {
), ),
], ],
), ),
body: new ListView.separated( body: PaginatorListView<Package>(
separatorBuilder: (context, index) => Divider( paginatorListener: packages,
color: Colors.black, rowBuilder: (p) => ProcessingListRow(
height: 1, key: ValueKey(p.id),
package: p,
), ),
scrollDirection: Axis.vertical, color: primaryColor,
shrinkWrap: true, )),
itemCount: packageModel.packages.length,
itemBuilder: (BuildContext context, int index) {
return ProcessingListRow(
key: ValueKey(packageModel.packages[index].id),
package: packageModel.packages[index],
);
})),
); );
} }

View File

@@ -6,6 +6,7 @@ import 'package:fcs/pages/package_search/package_serach.dart';
import 'package:fcs/pages/widgets/bottom_up_page_route.dart'; import 'package:fcs/pages/widgets/bottom_up_page_route.dart';
import 'package:fcs/pages/widgets/local_text.dart'; import 'package:fcs/pages/widgets/local_text.dart';
import 'package:fcs/pages/widgets/progress.dart'; import 'package:fcs/pages/widgets/progress.dart';
import 'package:fcs/pagination/paginator_listview.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@@ -25,7 +26,6 @@ class _ReceivingListState extends State<ReceivingList> {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
Provider.of<PackageModel>(context, listen: false).initData(false);
} }
@override @override
@@ -36,7 +36,7 @@ class _ReceivingListState extends State<ReceivingList> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var packageModel = Provider.of<PackageModel>(context); var packageModel = Provider.of<PackageModel>(context);
bool isCustomer = context.select((MainModel m) => m.isCustomer()); var packages = packageModel.activePackages;
return LocalProgress( return LocalProgress(
inAsyncCall: _isLoading, inAsyncCall: _isLoading,
@@ -55,9 +55,7 @@ class _ReceivingListState extends State<ReceivingList> {
color: Colors.white, color: Colors.white,
), ),
actions: <Widget>[ actions: <Widget>[
isCustomer IconButton(
? Container()
: IconButton(
icon: Icon( icon: Icon(
Icons.search, Icons.search,
color: Colors.white, color: Colors.white,
@@ -68,31 +66,22 @@ class _ReceivingListState extends State<ReceivingList> {
), ),
], ],
), ),
floatingActionButton: isCustomer floatingActionButton: FloatingActionButton.extended(
? Container()
: FloatingActionButton.extended(
onPressed: () { onPressed: () {
_newReceiving(); _newReceiving();
}, },
icon: Icon(Icons.add), icon: Icon(Icons.add),
label: label: LocalText(context, "receiving.new", color: Colors.white),
LocalText(context, "receiving.new", color: Colors.white),
backgroundColor: primaryColor, backgroundColor: primaryColor,
), ),
body: new ListView.separated( body: PaginatorListView<Package>(
separatorBuilder: (context, index) => Divider( paginatorListener: packages,
color: Colors.black, rowBuilder: (p) => ReceivingListRow(
height: 1, key: ValueKey(p.id),
package: p,
), ),
scrollDirection: Axis.vertical, color: primaryColor,
shrinkWrap: true, )),
itemCount: packageModel.packages.length,
itemBuilder: (BuildContext context, int index) {
return ReceivingListRow(
key: ValueKey(packageModel.packages[index].id),
package: packageModel.packages[index],
);
})),
); );
} }

View File

@@ -0,0 +1,163 @@
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:fcs/pages/widgets/callbacks.dart';
import 'package:logging/logging.dart';
typedef ToObj = Function(Map<String, dynamic> data, String id);
/*
* PaginatorListener load data in page
* and listen to document change based on 'update_time' and 'delete_time' fields
* of the document
*/
class PaginatorListener<T> {
final log = Logger('PaginatorListener');
List<String> ids = [];
List<T> data = [];
DocumentSnapshot prev;
int rowPerLoad = 10;
bool ended = false;
bool isLoading = false;
bool insertNewByListener = false;
ToObj toObj;
CallBack onChange;
StreamSubscription<QuerySnapshot> listener;
Query listeningQuery;
Query pageQuery;
PaginatorListener(this.toObj,
{this.onChange, this.rowPerLoad = 10, this.insertNewByListener = false});
Future<bool> refresh({Query listeningQuery, Query pageQuery}) {
this.listeningQuery = listeningQuery ?? this.listeningQuery;
this.pageQuery = pageQuery ?? this.pageQuery;
_clearState();
_initListener();
return _load();
}
void _clearState() {
prev = null;
ids = [];
data = [];
ended = false;
isLoading = false;
if (listener != null) listener.cancel();
listener = null;
}
void close() {
_clearState();
}
final String updateTimeField = 'update_time';
final String deleteTimeField = 'delete_time';
final String isDeletedField = 'is_deleted';
void _initListener() {
Query _query =
listeningQuery.orderBy(updateTimeField, descending: true).limit(1);
_query.getDocuments(source: Source.server).then((QuerySnapshot snapshot) {
int count = snapshot.documents.length;
int updateTime = 0;
if (count == 1) {
updateTime = snapshot.documents[0].data[updateTimeField];
}
Query _queryListener = listeningQuery
.where(updateTimeField, isGreaterThan: updateTime)
.orderBy(updateTimeField, descending: true);
if (listener != null) listener.cancel();
listener =
_queryListener.snapshots(includeMetadataChanges: true).listen((qs) {
qs.documentChanges.forEach((c) {
switch (c.type) {
case DocumentChangeType.added:
_update(c.document.documentID, c.document.data);
break;
case DocumentChangeType.modified:
_update(c.document.documentID, c.document.data);
break;
case DocumentChangeType.removed:
_remove(c.document.documentID, c.document.data);
break;
default:
}
if (onChange != null) onChange();
});
});
});
}
void _update(String id, Map<String, dynamic> map) {
T t = toObj(map, id);
if (ids.contains(id)) {
var deleted = map[deleteTimeField];
var isDeleted = map[isDeletedField];
if ((deleted ?? 0) > 0 || (isDeleted ?? false)) {
data.removeAt(ids.indexOf(id));
ids.remove(id);
} else {
data.removeAt(ids.indexOf(id));
data.insert(ids.indexOf(id), t);
}
} else if (insertNewByListener) {
data.insert(0, t);
ids.insert(0, id);
}
}
void _add(String id, Map<String, dynamic> map) {
T t = toObj(map, id);
if (!ids.contains(id)) {
data.add(t);
ids.add(id);
}
}
void _remove(String id, Map<String, dynamic> map) {
if (ids.contains(id)) {
data.removeAt(ids.indexOf(id));
ids.remove(id);
}
}
Future<bool> loadMore() {
return this._load();
}
Future<bool> _load({CallBack onStarted, CallBack onFinished}) async {
if (ended) return ended;
Query _query =
prev != null ? pageQuery.startAfterDocument(prev) : pageQuery;
try {
isLoading = true;
if (onStarted != null) {
onStarted();
}
if (onChange != null) onChange();
await _query
.where(isDeletedField, isEqualTo: false)
.limit(rowPerLoad)
.getDocuments(source: Source.server)
.then((QuerySnapshot snapshot) {
int count = snapshot.documents.length;
ended = count < rowPerLoad;
prev = count > 0 ? snapshot.documents[count - 1] : prev;
snapshot.documents.forEach((e) {
_add(e.documentID, e.data);
});
});
} catch (e) {
log.warning("Error!! $e");
} finally {
isLoading = false;
if (onFinished != null) onFinished();
if (onChange != null) onChange();
}
return ended;
}
}

View File

@@ -0,0 +1,99 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'paginator_listener.dart';
typedef RowBuilder = Widget Function(dynamic);
typedef OnScroll = void Function(bool down);
class PaginatorListView<T> extends StatelessWidget {
final PaginatorListener<T> paginatorListener;
final RowBuilder rowBuilder;
final OnScroll onScroll;
final ScrollController _scrollController;
final Color color;
PaginatorListView(
{Key key,
this.paginatorListener,
this.rowBuilder,
this.onScroll,
this.color = Colors.blueAccent})
: _scrollController = ScrollController(),
assert(paginatorListener != null),
assert(rowBuilder != null),
super(key: key) {
_scrollController.addListener(() async {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
paginatorListener.loadMore();
}
if (onScroll != null) {
var down = _scrollController.position.userScrollDirection ==
ScrollDirection.forward;
onScroll(down);
}
});
}
@override
Widget build(BuildContext context) {
bool ended = paginatorListener.ended;
int count = paginatorListener.data.length;
if (ended) count++;
return Column(
children: [
Expanded(
child: RefreshIndicator(
onRefresh: () {
return paginatorListener.refresh();
},
child: ListView.separated(
separatorBuilder: (context, index) =>
Divider(height: 1, color: Colors.black),
controller: _scrollController,
scrollDirection: Axis.vertical,
physics: const AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: count,
itemBuilder: (BuildContext context, int index) {
if (ended && index == count - 1) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Center(child: Text("No more data")),
);
}
T t = paginatorListener.data[index];
return rowBuilder(t);
}),
),
),
paginatorListener.isLoading ? _loadingRow() : Container()
],
);
}
Widget _loadingRow() {
return Container(
padding: EdgeInsets.all(8),
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(color)),
Text(
"Loading...",
style: TextStyle(color: color),
)
],
),
],
),
);
}
}