Sultan
/
invoice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Implemented Multiselect for Invoice

This commit is contained in:
Gianfranco Gasbarri 2019-10-23 10:48:23 +01:00
parent 08380b89c1
commit 2ae0777135
8 changed files with 304 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/main.dart
View File

@ -38,6 +38,7 @@ import 'package:invoiceninja_flutter/ui/group/edit/group_edit_vm.dart';
import 'package:invoiceninja_flutter/ui/group/group_screen.dart';
import 'package:invoiceninja_flutter/ui/group/group_screen_vm.dart';
import 'package:invoiceninja_flutter/ui/group/view/group_view_vm.dart';
import 'package:invoiceninja_flutter/ui/invoice/invoice_screen_vm.dart';
import 'package:invoiceninja_flutter/ui/product/product_screen_vm.dart';
import 'package:invoiceninja_flutter/ui/settings/buy_now_buttons_vm.dart';
import 'package:invoiceninja_flutter/ui/settings/client_portal_vm.dart';
@ -306,7 +307,7 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
ClientScreen.route: (context) => ClientScreenBuilder(),
ClientViewScreen.route: (context) => ClientViewScreen(),
ClientEditScreen.route: (context) => ClientEditScreen(),
InvoiceScreen.route: (context) => InvoiceScreen(),
InvoiceScreen.route: (context) => InvoiceScreenBuilder(),
InvoiceViewScreen.route: (context) => InvoiceViewScreen(),
InvoiceEditScreen.route: (context) => InvoiceEditScreen(),
InvoiceEmailScreen.route: (context) => InvoiceEmailScreen(),

56
lib/redux/invoice/invoice_actions.dart
View File

@ -321,11 +321,20 @@ class FilterInvoicesByCustom2 implements PersistUI {
void handleInvoiceAction(BuildContext context, List<InvoiceEntity> invoices,
EntityAction action) async {
assert(
[
EntityAction.restore,
EntityAction.archive,
EntityAction.delete,
EntityAction.toggleMultiselect
].contains(action) ||
invoices.length == 1,
'Cannot perform this action on more than one invoice');
final store = StoreProvider.of<AppState>(context);
final state = store.state;
final CompanyEntity company = state.selectedCompany;
final localization = AppLocalization.of(context);
final invoice = invoices[0];
final invoice = invoices.first;
switch (action) {
case EntityAction.edit:
@ -376,5 +385,50 @@ void handleInvoiceAction(BuildContext context, List<InvoiceEntity> invoices,
store.dispatch(DeleteInvoiceRequest(
snackBarCompleter(context, localization.deletedInvoice), invoice.id));
break;
case EntityAction.toggleMultiselect:
if (!store.state.invoiceListState.isInMultiselect()) {
store.dispatch(StartInvoiceMultiselect(context: context));
}
if (invoices.isEmpty) {
break;
}
for (final invoice in invoices) {
if (!store.state.invoiceListState.isSelected(invoice)) {
store.dispatch(
AddToInvoiceMultiselect(context: context, entity: invoice));
} else {
store.dispatch(
RemoveFromInvoiceMultiselect(context: context, entity: invoice));
}
}
break;
}
}
class StartInvoiceMultiselect {
StartInvoiceMultiselect({@required this.context});
final BuildContext context;
}
class AddToInvoiceMultiselect {
AddToInvoiceMultiselect({@required this.context, @required this.entity});
final BuildContext context;
final BaseEntity entity;
}
class RemoveFromInvoiceMultiselect {
RemoveFromInvoiceMultiselect({@required this.context, @required this.entity});
final BuildContext context;
final BaseEntity entity;
}
class ClearInvoiceMultiselect {
ClearInvoiceMultiselect({@required this.context});
final BuildContext context;
}

28
lib/redux/invoice/invoice_reducer.dart
View File

@ -1,3 +1,4 @@
import 'package:invoiceninja_flutter/data/models/entities.dart';
import 'package:invoiceninja_flutter/data/models/invoice_model.dart';
import 'package:invoiceninja_flutter/redux/app/app_actions.dart';
import 'package:invoiceninja_flutter/redux/company/company_actions.dart';
@ -112,6 +113,11 @@ final invoiceListReducer = combineReducers<ListUIState>([
TypedReducer<ListUIState, FilterInvoices>(_filterInvoices),
TypedReducer<ListUIState, FilterInvoicesByCustom1>(_filterInvoicesByCustom1),
TypedReducer<ListUIState, FilterInvoicesByCustom2>(_filterInvoicesByCustom2),
TypedReducer<ListUIState, StartInvoiceMultiselect>(_startListMultiselect),
TypedReducer<ListUIState, AddToInvoiceMultiselect>(_addToListMultiselect),
TypedReducer<ListUIState, RemoveFromInvoiceMultiselect>(
_removeFromListMultiselect),
TypedReducer<ListUIState, ClearInvoiceMultiselect>(_clearListMultiselect),
]);
ListUIState _filterInvoicesByCustom1(
@ -176,6 +182,28 @@ ListUIState _sortInvoices(ListUIState invoiceListState, SortInvoices action) {
..sortField = action.field);
}
ListUIState _startListMultiselect(
ListUIState invoiceListState, StartInvoiceMultiselect action) {
return invoiceListState.rebuild((b) => b..selectedEntities = <BaseEntity>[]);
}
ListUIState _addToListMultiselect(
ListUIState invoiceListState, AddToInvoiceMultiselect action) {
return invoiceListState
.rebuild((b) => b..selectedEntities.add(action.entity));
}
ListUIState _removeFromListMultiselect(
ListUIState invoiceListState, RemoveFromInvoiceMultiselect action) {
return invoiceListState
.rebuild((b) => b..selectedEntities.remove(action.entity));
}
ListUIState _clearListMultiselect(
ListUIState invoiceListState, ClearInvoiceMultiselect action) {
return invoiceListState.rebuild((b) => b..selectedEntities = null);
}
final invoicesReducer = combineReducers<InvoiceState>([
TypedReducer<InvoiceState, SaveInvoiceSuccess>(_updateInvoice),
TypedReducer<InvoiceState, AddInvoiceSuccess>(_addInvoice),

2
lib/ui/company_gateway/company_gateway_list_item.dart
View File

@ -49,7 +49,7 @@ class _CompanyGatewayListItemState extends State<CompanyGatewayListItem>
? widget.companyGateway.matchesFilterValue(widget.filter)
: null;
final subtitle = filterMatch;
final listUIState = uiState.companyGatewayUIState.listUIState;
final listUIState = state.uiState.companyGatewayUIState.listUIState;
final isInMultiselect = listUIState.isInMultiselect();
final showCheckbox = widget.onCheckboxChanged != null || isInMultiselect;

15
lib/ui/invoice/invoice_list.dart
View File

@ -26,6 +26,7 @@ class InvoiceList extends StatelessWidget {
final filteredClientId = listState.filterEntityId;
final filteredClient =
filteredClientId != null ? viewModel.clientMap[filteredClientId] : null;
final isInMultiselect = listState.isInMultiselect();
final documentMap = memoizedEntityDocumentMap(
EntityType.invoice, state.documentState.map, state.expenseState.map);
@ -104,7 +105,19 @@ class InvoiceList extends StatelessWidget {
context, [invoice], action);
}
},
onLongPress: () => showDialog(),
onLongPress: () async {
final longPressIsSelection =
state.uiState.longPressSelectionIsDefault ??
true;
if (longPressIsSelection && !isInMultiselect) {
viewModel.onEntityAction(context, [invoice],
EntityAction.toggleMultiselect);
} else {
showDialog();
}
},
isChecked: isInMultiselect &&
listState.isSelected(invoice),
);
},
),

99
lib/ui/invoice/invoice_list_item.dart
View File

@ -9,7 +9,7 @@ import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/ui/app/dismissible_entity.dart';
import 'package:invoiceninja_flutter/utils/localization.dart';
class InvoiceListItem extends StatelessWidget {
class InvoiceListItem extends StatefulWidget {
const InvoiceListItem({
@required this.user,
@required this.onEntityAction,
@ -19,6 +19,8 @@ class InvoiceListItem extends StatelessWidget {
@required this.client,
@required this.filter,
@required this.hasDocuments,
this.onCheckboxChanged,
this.isChecked = false,
});
final UserEntity user;
@ -29,49 +31,84 @@ class InvoiceListItem extends StatelessWidget {
final ClientEntity client;
final String filter;
final bool hasDocuments;
final Function(bool) onCheckboxChanged;
final bool isChecked;
@override
_InvoiceListItemState createState() => _InvoiceListItemState();
}
class _InvoiceListItemState extends State<InvoiceListItem>
with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
final state = StoreProvider.of<AppState>(context).state;
final uiState = state.uiState;
final invoiceUIState = uiState.invoiceUIState;
final listUIState = invoiceUIState.listUIState;
final isInMultiselect = listUIState.isInMultiselect();
final showCheckbox = widget.onCheckboxChanged != null || isInMultiselect;
final localization = AppLocalization.of(context);
final filterMatch = filter != null && filter.isNotEmpty
? (invoice.matchesFilterValue(filter) ??
client.matchesFilterValue(filter))
final filterMatch = widget.filter != null && widget.filter.isNotEmpty
? (widget.invoice.matchesFilterValue(widget.filter) ??
widget.client.matchesFilterValue(widget.filter))
: null;
final invoiceStatusId = (invoice.quoteInvoiceId ?? '').isNotEmpty
final invoiceStatusId = (widget.invoice.quoteInvoiceId ?? '').isNotEmpty
? kInvoiceStatusApproved
: invoice.invoiceStatusId;
: widget.invoice.invoiceStatusId;
if (isInMultiselect) {
_multiselectCheckboxAnimController.forward();
} else {
_multiselectCheckboxAnimController.animateBack(0.0);
}
return DismissibleEntity(
isSelected: invoice.id ==
isSelected: widget.invoice.id ==
(uiState.isEditing
? invoiceUIState.editing.id
: invoiceUIState.selectedId),
userCompany: state.userCompany,
entity: invoice,
onEntityAction: onEntityAction,
entity: widget.invoice,
onEntityAction: widget.onEntityAction,
child: ListTile(
onTap: onTap,
onLongPress: onLongPress,
onTap: isInMultiselect
? () => widget.onEntityAction(EntityAction.toggleMultiselect)
: widget.onTap,
onLongPress: widget.onLongPress,
leading: showCheckbox
? FadeTransition(
opacity: _multiselectCheckboxAnim,
child: IgnorePointer(
ignoring: listUIState.isInMultiselect(),
child: Checkbox(
value: widget.isChecked,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onChanged: (value) => widget.onCheckboxChanged(value),
activeColor: Theme.of(context).accentColor,
),
),
)
: null,
title: Container(
width: MediaQuery.of(context).size.width,
child: Row(
children: <Widget>[
Expanded(
child: Text(
client.displayName,
widget.client.displayName,
style: Theme.of(context).textTheme.title,
),
),
Text(
formatNumber(
invoice.balance > 0 ? invoice.balance : invoice.amount,
widget.invoice.balance > 0
? widget.invoice.balance
: widget.invoice.amount,
context,
clientId: invoice.clientId),
clientId: widget.invoice.clientId),
style: Theme.of(context).textTheme.title),
],
),
@ -83,14 +120,14 @@ class InvoiceListItem extends StatelessWidget {
children: <Widget>[
Expanded(
child: filterMatch == null
? Text((invoice.invoiceNumber +
? Text((widget.invoice.invoiceNumber +
' • ' +
formatDate(
invoice.dueDate.isNotEmpty
? invoice.dueDate
: invoice.invoiceDate,
widget.invoice.dueDate.isNotEmpty
? widget.invoice.dueDate
: widget.invoice.invoiceDate,
context) +
(hasDocuments ? ' 📎' : ''))
(widget.hasDocuments ? ' 📎' : ''))
.trim())
: Text(
filterMatch,
@ -99,21 +136,39 @@ class InvoiceListItem extends StatelessWidget {
),
),
Text(
invoice.isPastDue
widget.invoice.isPastDue
? localization.pastDue
: localization
.lookup('invoice_status_$invoiceStatusId'),
style: TextStyle(
color: invoice.isPastDue
color: widget.invoice.isPastDue
? Colors.red
: InvoiceStatusColors.colors[invoiceStatusId],
)),
],
),
EntityStateLabel(invoice),
EntityStateLabel(widget.invoice),
],
),
),
);
}
Animation _multiselectCheckboxAnim;
AnimationController _multiselectCheckboxAnimController;
@override
void initState() {
super.initState();
_multiselectCheckboxAnimController =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_multiselectCheckboxAnim = Tween<double>(begin: 0.0, end: 1.0)
.animate(_multiselectCheckboxAnimController);
}
@override
void dispose() {
_multiselectCheckboxAnimController.dispose();
super.dispose();
}
}

71
lib/ui/invoice/invoice_screen.dart
View File

@ -1,5 +1,6 @@
import 'package:invoiceninja_flutter/constants.dart';
import 'package:invoiceninja_flutter/ui/app/app_scaffold.dart';
import 'package:invoiceninja_flutter/ui/app/entities/entity_actions_dialog.dart';
import 'package:invoiceninja_flutter/ui/app/list_filter.dart';
import 'package:invoiceninja_flutter/ui/app/list_filter_button.dart';
import 'package:invoiceninja_flutter/utils/localization.dart';
@ -11,17 +12,41 @@ import 'package:flutter_redux/flutter_redux.dart';
import 'package:invoiceninja_flutter/redux/invoice/invoice_actions.dart';
import 'package:invoiceninja_flutter/ui/app/app_bottom_bar.dart';
import 'invoice_screen_vm.dart';
class InvoiceScreen extends StatelessWidget {
const InvoiceScreen({
Key key,
@required this.viewModel,
}) : super(key: key);
static const String route = '/invoice';
final InvoiceScreenVM viewModel;
@override
Widget build(BuildContext context) {
final store = StoreProvider.of<AppState>(context);
final company = store.state.selectedCompany;
final state = store.state;
final company = state.selectedCompany;
final userCompany = store.state.userCompany;
final localization = AppLocalization.of(context);
final listUIState = store.state.uiState.invoiceUIState.listUIState;
final isInMultiselect = listUIState.isInMultiselect();
return AppScaffold(
isChecked: isInMultiselect &&
listUIState.selectedEntities.length == viewModel.invoiceList.length,
showCheckbox: isInMultiselect,
onCheckboxChanged: (value) {
final invoices = viewModel.invoiceList
.map<InvoiceEntity>((invoiceId) => viewModel.invoiceMap[invoiceId])
.where((invoice) => value != listUIState.isSelected(invoice))
.toList();
viewModel.onEntityAction(
context, invoices, EntityAction.toggleMultiselect);
},
appBarTitle: ListFilter(
key: ValueKey(store.state.invoiceListState.filterClearedAt),
entityType: EntityType.invoice,
@ -30,12 +55,44 @@ class InvoiceScreen extends StatelessWidget {
},
),
appBarActions: [
ListFilterButton(
entityType: EntityType.invoice,
onFilterPressed: (String value) {
store.dispatch(FilterInvoices(value));
},
),
if (!viewModel.isInMultiselect)
ListFilterButton(
entityType: EntityType.invoice,
onFilterPressed: (String value) {
store.dispatch(FilterInvoices(value));
},
),
if (viewModel.isInMultiselect)
FlatButton(
key: key,
child: Text(
localization.cancel,
style: TextStyle(color: Colors.white),
),
onPressed: () {
store.dispatch(ClearInvoiceMultiselect(context: context));
},
),
if (viewModel.isInMultiselect)
FlatButton(
key: key,
textColor: Colors.white,
disabledTextColor: Colors.white54,
child: Text(
localization.done,
),
onPressed: state.invoiceListState.selectedEntities.isEmpty
? null
: () async {
await showEntityActionsDialog(
entities: state.invoiceListState.selectedEntities,
userCompany: userCompany,
context: context,
onEntityAction: viewModel.onEntityAction,
multiselect: true);
store.dispatch(ClearInvoiceMultiselect(context: context));
},
),
],
body: InvoiceListBuilder(),
bottomNavigationBar: AppBottomBar(

63
lib/ui/invoice/invoice_screen_vm.dart Normal file
View File

@ -0,0 +1,63 @@
import 'package:built_collection/built_collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
import 'package:invoiceninja_flutter/redux/invoice/invoice_actions.dart';
import 'package:invoiceninja_flutter/redux/invoice/invoice_selectors.dart';
import 'package:redux/redux.dart';
import 'invoice_screen.dart';
class InvoiceScreenBuilder extends StatelessWidget {
const InvoiceScreenBuilder({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return StoreConnector<AppState, InvoiceScreenVM>(
//rebuildOnChange: true,
converter: InvoiceScreenVM.fromStore,
builder: (context, vm) {
return InvoiceScreen(
viewModel: vm,
);
},
);
}
}
class InvoiceScreenVM {
InvoiceScreenVM({
@required this.isInMultiselect,
@required this.invoiceList,
@required this.userCompany,
@required this.onEntityAction,
@required this.invoiceMap,
});
final bool isInMultiselect;
final UserCompanyEntity userCompany;
final List<String> invoiceList;
final Function(BuildContext, List<BaseEntity>, EntityAction) onEntityAction;
final BuiltMap<String, InvoiceEntity> invoiceMap;
static InvoiceScreenVM fromStore(Store<AppState> store) {
final state = store.state;
return InvoiceScreenVM(
invoiceMap: state.invoiceState.map,
invoiceList: memoizedFilteredInvoiceList(
state.invoiceState.map,
state.invoiceState.list,
state.clientState.map,
state.invoiceListState),
userCompany: state.userCompany,
isInMultiselect: state.invoiceListState.isInMultiselect(),
onEntityAction: (BuildContext context, List<BaseEntity> invoices,
EntityAction action) =>
handleInvoiceAction(context, invoices, action),
);
}
}