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

Implemented Multiselect for Project

This commit is contained in:
Gianfranco Gasbarri 2019-10-23 21:04:14 +01:00
parent a476b4860c
commit 53e7da33bc
7 changed files with 294 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/main.dart
View File

@ -41,6 +41,7 @@ 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/payment/payment_screen_vm.dart';
import 'package:invoiceninja_flutter/ui/product/product_screen_vm.dart';
import 'package:invoiceninja_flutter/ui/project/project_screen_vm.dart';
import 'package:invoiceninja_flutter/ui/settings/buy_now_buttons_vm.dart';
import 'package:invoiceninja_flutter/ui/settings/client_portal_vm.dart';
import 'package:invoiceninja_flutter/ui/settings/company_details_vm.dart';
@ -324,7 +325,7 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
TaskScreen.route: (context) => TaskScreen(),
TaskViewScreen.route: (context) => TaskViewScreen(),
TaskEditScreen.route: (context) => TaskEditScreen(),
ProjectScreen.route: (context) => ProjectScreen(),
ProjectScreen.route: (context) => ProjectScreenBuilder(),
ProjectViewScreen.route: (context) => ProjectViewScreen(),
ProjectEditScreen.route: (context) => ProjectEditScreen(),
PaymentScreen.route: (context) => PaymentScreenBuilder(),

57
lib/redux/project/project_actions.dart
View File

@ -244,10 +244,20 @@ class FilterProjectsByEntity implements PersistUI {
void handleProjectAction(
BuildContext context, List<ProjectEntity> projects, EntityAction action) {
assert(
[
EntityAction.restore,
EntityAction.archive,
EntityAction.delete,
EntityAction.toggleMultiselect
].contains(action) ||
projects.length == 1,
'Cannot perform this action on more than one project');
final store = StoreProvider.of<AppState>(context);
final state = store.state;
final CompanyEntity company = state.selectedCompany;
final project = projects[0];
final project = projects.first;
switch (action) {
case EntityAction.edit:
@ -292,5 +302,50 @@ void handleProjectAction(
context, AppLocalization.of(context).deletedProject),
project.id));
break;
case EntityAction.toggleMultiselect:
if (!store.state.projectListState.isInMultiselect()) {
store.dispatch(StartProjectMultiselect(context: context));
}
if (projects.isEmpty) {
break;
}
for (final project in projects) {
if (!store.state.projectListState.isSelected(project)) {
store.dispatch(
AddToProjectMultiselect(context: context, entity: project));
} else {
store.dispatch(
RemoveFromProjectMultiselect(context: context, entity: project));
}
}
break;
}
}
class StartProjectMultiselect {
StartProjectMultiselect({@required this.context});
final BuildContext context;
}
class AddToProjectMultiselect {
AddToProjectMultiselect({@required this.context, @required this.entity});
final BuildContext context;
final BaseEntity entity;
}
class RemoveFromProjectMultiselect {
RemoveFromProjectMultiselect({@required this.context, @required this.entity});
final BuildContext context;
final BaseEntity entity;
}
class ClearProjectMultiselect {
ClearProjectMultiselect({@required this.context});
final BuildContext context;
}

27
lib/redux/project/project_reducer.dart
View File

@ -67,6 +67,11 @@ final projectListReducer = combineReducers<ListUIState>([
TypedReducer<ListUIState, FilterProjectsByCustom1>(_filterProjectsByCustom1),
TypedReducer<ListUIState, FilterProjectsByCustom2>(_filterProjectsByCustom2),
TypedReducer<ListUIState, FilterProjectsByEntity>(_filterProjectsByClient),
TypedReducer<ListUIState, StartProjectMultiselect>(_startListMultiselect),
TypedReducer<ListUIState, AddToProjectMultiselect>(_addToListMultiselect),
TypedReducer<ListUIState, RemoveFromProjectMultiselect>(
_removeFromListMultiselect),
TypedReducer<ListUIState, ClearProjectMultiselect>(_clearListMultiselect),
]);
ListUIState _filterProjectsByClient(
@ -121,6 +126,28 @@ ListUIState _sortProjects(ListUIState projectListState, SortProjects action) {
..sortField = action.field);
}
ListUIState _startListMultiselect(
ListUIState projectListState, StartProjectMultiselect action) {
return projectListState.rebuild((b) => b..selectedEntities = <BaseEntity>[]);
}
ListUIState _addToListMultiselect(
ListUIState projectListState, AddToProjectMultiselect action) {
return projectListState
.rebuild((b) => b..selectedEntities.add(action.entity));
}
ListUIState _removeFromListMultiselect(
ListUIState projectListState, RemoveFromProjectMultiselect action) {
return projectListState
.rebuild((b) => b..selectedEntities.remove(action.entity));
}
ListUIState _clearListMultiselect(
ListUIState projectListState, ClearProjectMultiselect action) {
return projectListState.rebuild((b) => b..selectedEntities = null);
}
final projectsReducer = combineReducers<ProjectState>([
TypedReducer<ProjectState, SaveProjectSuccess>(_updateProject),
TypedReducer<ProjectState, AddProjectSuccess>(_addProject),

18
lib/ui/project/project_list.dart
View File

@ -1,6 +1,8 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.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/ui/app/entities/entity_actions_dialog.dart';
import 'package:invoiceninja_flutter/ui/app/help_text.dart';
import 'package:invoiceninja_flutter/ui/app/lists/list_divider.dart';
@ -19,11 +21,13 @@ class ProjectList extends StatelessWidget {
@override
Widget build(BuildContext context) {
final store = StoreProvider.of<AppState>(context);
final localization = AppLocalization.of(context);
final listState = viewModel.listState;
final filteredClientId = listState.filterEntityId;
final filteredClient =
filteredClientId != null ? viewModel.clientMap[filteredClientId] : null;
final isInMultiselect = listState.isInMultiselect();
return Column(
children: <Widget>[
@ -98,7 +102,19 @@ class ProjectList extends StatelessWidget {
context, [project], action);
}
},
onLongPress: () => showDialog(),
onLongPress: () async {
final longPressIsSelection = store.state.uiState
.longPressSelectionIsDefault ??
true;
if (longPressIsSelection && !isInMultiselect) {
viewModel.onEntityAction(context, [project],
EntityAction.toggleMultiselect);
} else {
showDialog();
}
},
isChecked: isInMultiselect &&
listState.isSelected(project),
);
},
),

90
lib/ui/project/project_list_item.dart
View File

@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/ui/app/dismissible_entity.dart';
class ProjectListItem extends StatelessWidget {
class ProjectListItem extends StatefulWidget {
const ProjectListItem({
@required this.userCompany,
@required this.onEntityAction,
@ -17,12 +17,16 @@ class ProjectListItem extends StatelessWidget {
@required this.project,
@required this.filter,
@required this.client,
this.onCheckboxChanged,
this.isChecked = false,
});
final UserCompanyEntity userCompany;
final Function(EntityAction) onEntityAction;
final GestureTapCallback onTap;
final GestureTapCallback onLongPress;
final Function(bool) onCheckboxChanged;
final bool isChecked;
//final ValueChanged<bool> onCheckboxChanged;
final ProjectEntity project;
@ -31,50 +35,72 @@ class ProjectListItem extends StatelessWidget {
static final projectItemKey = (int id) => Key('__project_item_${id}__');
@override
_ProjectListItemState createState() => _ProjectListItemState();
}
class _ProjectListItemState extends State<ProjectListItem>
with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
final store = StoreProvider.of<AppState>(context);
final uiState = store.state.uiState;
final projectUIState = uiState.projectUIState;
final listUIState = projectUIState.listUIState;
final isInMultiselect = listUIState.isInMultiselect();
final showCheckbox = widget.onCheckboxChanged != null || isInMultiselect;
final filterMatch = filter != null && filter.isNotEmpty
? project.matchesFilterValue(filter)
if (isInMultiselect) {
_multiselectCheckboxAnimController.forward();
} else {
_multiselectCheckboxAnimController.animateBack(0.0);
}
final filterMatch = widget.filter != null && widget.filter.isNotEmpty
? widget.project.matchesFilterValue(widget.filter)
: null;
final subtitle = filterMatch ?? client.displayName;
final subtitle = filterMatch ?? widget.client.displayName;
return DismissibleEntity(
isSelected: project.id ==
isSelected: widget.project.id ==
(uiState.isEditing
? projectUIState.editing.id
: projectUIState.selectedId),
userCompany: userCompany,
entity: project,
onEntityAction: onEntityAction,
userCompany: widget.userCompany,
entity: widget.project,
onEntityAction: widget.onEntityAction,
child: ListTile(
onTap: onTap,
onLongPress: onLongPress,
/*
leading: Checkbox(
//key: NinjaKeys.projectItemCheckbox(project.id),
value: true,
//onChanged: onCheckboxChanged,
onChanged: (value) {
return true;
},
),
*/
onTap: isInMultiselect
? () => widget.onEntityAction(EntityAction.toggleMultiselect)
: widget.onTap,
onLongPress: widget.onLongPress,
leading: showCheckbox
? FadeTransition(
opacity: _multiselectCheckboxAnim,
child: IgnorePointer(
ignoring: listUIState.isInMultiselect(),
child: Checkbox(
//key: NinjaKeys.productItemCheckbox(task.id),
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(
project.name,
widget.project.name,
//key: NinjaKeys.clientItemClientKey(client.id),
style: Theme.of(context).textTheme.title,
),
),
Text(formatNumber(project.listDisplayAmount, context),
Text(formatNumber(widget.project.listDisplayAmount, context),
style: Theme.of(context).textTheme.title),
],
),
@ -89,10 +115,28 @@ class ProjectListItem extends StatelessWidget {
overflow: TextOverflow.ellipsis,
)
: Container(),
EntityStateLabel(project),
EntityStateLabel(widget.project),
],
),
),
);
}
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();
}
}

68
lib/ui/project/project_screen.dart
View File

@ -1,8 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.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/ui/project/project_screen_vm.dart';
import 'package:invoiceninja_flutter/utils/localization.dart';
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
@ -11,16 +13,38 @@ import 'package:invoiceninja_flutter/redux/project/project_actions.dart';
import 'package:invoiceninja_flutter/ui/app/app_bottom_bar.dart';
class ProjectScreen extends StatelessWidget {
const ProjectScreen({
Key key,
@required this.viewModel,
}) : super(key: key);
static const String route = '/project';
final ProjectScreenVM viewModel;
@override
Widget build(BuildContext context) {
final store = StoreProvider.of<AppState>(context);
final state = store.state;
final company = store.state.selectedCompany;
final userCompany = store.state.userCompany;
final localization = AppLocalization.of(context);
final listUIState = state.uiState.projectUIState.listUIState;
final isInMultiselect = listUIState.isInMultiselect();
return AppScaffold(
isChecked: isInMultiselect &&
listUIState.selectedEntities.length == viewModel.projectList.length,
showCheckbox: isInMultiselect,
onCheckboxChanged: (value) {
final projects = viewModel.projectList
.map<ProjectEntity>((projectId) => viewModel.projectMap[projectId])
.where((project) => value != listUIState.isSelected(project))
.toList();
viewModel.onEntityAction(
context, projects, EntityAction.toggleMultiselect);
},
appBarTitle: ListFilter(
key: ValueKey(store.state.projectListState.filterClearedAt),
entityType: EntityType.project,
@ -29,12 +53,44 @@ class ProjectScreen extends StatelessWidget {
},
),
appBarActions: [
ListFilterButton(
entityType: EntityType.project,
onFilterPressed: (String value) {
store.dispatch(FilterProjects(value));
},
),
if (!viewModel.isInMultiselect)
ListFilterButton(
entityType: EntityType.project,
onFilterPressed: (String value) {
store.dispatch(FilterProjects(value));
},
),
if (viewModel.isInMultiselect)
FlatButton(
key: key,
child: Text(
localization.cancel,
style: TextStyle(color: Colors.white),
),
onPressed: () {
store.dispatch(ClearProjectMultiselect(context: context));
},
),
if (viewModel.isInMultiselect)
FlatButton(
key: key,
textColor: Colors.white,
disabledTextColor: Colors.white54,
child: Text(
localization.done,
),
onPressed: state.projectListState.selectedEntities.isEmpty
? null
: () async {
await showEntityActionsDialog(
entities: state.projectListState.selectedEntities,
userCompany: userCompany,
context: context,
onEntityAction: viewModel.onEntityAction,
multiselect: true);
store.dispatch(ClearProjectMultiselect(context: context));
},
),
],
body: ProjectListBuilder(),
bottomNavigationBar: AppBottomBar(

63
lib/ui/project/project_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/project/project_actions.dart';
import 'package:invoiceninja_flutter/redux/project/project_selectors.dart';
import 'package:redux/redux.dart';
import 'project_screen.dart';
class ProjectScreenBuilder extends StatelessWidget {
const ProjectScreenBuilder({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return StoreConnector<AppState, ProjectScreenVM>(
//rebuildOnChange: true,
converter: ProjectScreenVM.fromStore,
builder: (context, vm) {
return ProjectScreen(
viewModel: vm,
);
},
);
}
}
class ProjectScreenVM {
ProjectScreenVM({
@required this.isInMultiselect,
@required this.projectList,
@required this.userCompany,
@required this.onEntityAction,
@required this.projectMap,
});
final bool isInMultiselect;
final UserCompanyEntity userCompany;
final List<String> projectList;
final Function(BuildContext, List<BaseEntity>, EntityAction) onEntityAction;
final BuiltMap<String, ProjectEntity> projectMap;
static ProjectScreenVM fromStore(Store<AppState> store) {
final state = store.state;
return ProjectScreenVM(
projectMap: state.projectState.map,
projectList: memoizedFilteredProjectList(
state.projectState.map,
state.projectState.list,
state.projectListState,
state.clientState.map),
userCompany: state.userCompany,
isInMultiselect: state.projectListState.isInMultiselect(),
onEntityAction: (BuildContext context, List<BaseEntity> projects,
EntityAction action) =>
handleProjectAction(context, projects, action),
);
}
}