Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: filter UI bugs (#1489)

Browse Source 
* chore: remove the add filter button if there is no filters can not be added

* fix: update field info after filter was changed

* chore: update filter choicechip ui

* chore: insert and delete one by one to keep the delete/insert index is right

* chore: show filter after creating the default filter

* chore: update textfield_tags version to calm the warnings

* chore: try to fix potential fails on backend test

Co-authored-by: nathan <nathan@appflowy.io>
This commit is contained in:
Nathan.fooo
2022-11-27 14:47:11 +08:00
committed by GitHub
parent 149c2a2725
commit 182bfae5ad
23 changed files with 251 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app_flowy/lib/plugins/grid/application/field/field_controller.dart
View File

@ -142,6 +142,9 @@ class GridFieldController {
filters.retainWhere(
(element) => !deleteFilterIds.contains(element.filter.id),
);
_filterPBByFieldId.removeWhere(
(key, value) => deleteFilterIds.contains(value.id));
}
// Inserts the new filter if it's not exist
@ -151,6 +154,7 @@ class GridFieldController {
if (filterIndex == -1) {
final fieldInfo = _findFieldInfoForFilter(fieldInfos, newFilter);
if (fieldInfo != null) {
_filterPBByFieldId[fieldInfo.id] = newFilter;
filters.add(FilterInfo(gridId, newFilter, fieldInfo));
}
}
@ -187,10 +191,9 @@ class GridFieldController {
}
_filterPBByFieldId[fieldInfo.id] = updatedFilter.filter;
}
_updateFieldInfos();
}
}
_updateFieldInfos();
_filterNotifier?.filters = filters;
},
(err) => Log.error(err),
@ -345,7 +348,6 @@ class GridFieldController {
}
_filterCallbacks[onFilters] = callback;
callback();
_filterNotifier?.addListener(callback);
}
}

2
frontend/app_flowy/lib/plugins/grid/application/filter/filter_create_bloc.dart
View File

@ -77,7 +77,7 @@ class GridCreateFilterBloc
void _startListening() {
_onFieldFn = (fields) {
fields.retainWhere((field) => field.hasFilter == false);
fields.retainWhere((field) => field.canCreateFilter);
add(GridCreateFilterEvent.didReceiveFields(fields));
};
fieldController.addListener(onFields: _onFieldFn);

35
frontend/app_flowy/lib/plugins/grid/application/filter/filter_menu_bloc.dart
View File

@ -11,6 +11,7 @@ class GridFilterMenuBloc
final String viewId;
final GridFieldController fieldController;
void Function(List<FilterInfo>)? _onFilterFn;
void Function(List<FieldInfo>)? _onFieldFn;
GridFilterMenuBloc({required this.viewId, required this.fieldController})
: super(GridFilterMenuState.initial(
@ -32,7 +33,12 @@ class GridFilterMenuBloc
emit(state.copyWith(isVisible: isVisible));
},
didReceiveFields: (List<FieldInfo> fields) {
emit(state.copyWith(fields: fields));
emit(
state.copyWith(
fields: fields,
creatableFields: getCreatableFilter(fields),
),
);
},
);
},
@ -44,9 +50,18 @@ class GridFilterMenuBloc
add(GridFilterMenuEvent.didReceiveFilters(filters));
};
fieldController.addListener(onFilters: (filters) {
_onFilterFn?.call(filters);
});
_onFieldFn = (fields) {
add(GridFilterMenuEvent.didReceiveFields(fields));
};
fieldController.addListener(
onFilters: (filters) {
_onFilterFn?.call(filters);
},
onFields: (fields) {
_onFieldFn?.call(fields);
},
);
}
@override
@ -55,6 +70,10 @@ class GridFilterMenuBloc
fieldController.removeListener(onFiltersListener: _onFilterFn!);
_onFilterFn = null;
}
if (_onFieldFn != null) {
fieldController.removeListener(onFieldsListener: _onFieldFn!);
_onFieldFn = null;
}
return super.close();
}
}
@ -75,6 +94,7 @@ class GridFilterMenuState with _$GridFilterMenuState {
required String viewId,
required List<FilterInfo> filters,
required List<FieldInfo> fields,
required List<FieldInfo> creatableFields,
required bool isVisible,
}) = _GridFilterMenuState;
@ -87,6 +107,13 @@ class GridFilterMenuState with _$GridFilterMenuState {
viewId: viewId,
filters: filterInfos,
fields: fields,
creatableFields: getCreatableFilter(fields),
isVisible: false,
);
}
List<FieldInfo> getCreatableFilter(List<FieldInfo> fieldInfos) {
final List<FieldInfo> creatableFields = List.from(fieldInfos);
creatableFields.retainWhere((element) => element.canCreateFilter);
return creatableFields;
}

34
frontend/app_flowy/lib/plugins/grid/application/filter/text_filter_editor_bloc.dart
View File

@ -1,5 +1,4 @@
import 'package:app_flowy/plugins/grid/presentation/widgets/filter/filter_info.dart';
import 'package:flowy_sdk/log.dart';
import 'package:flowy_sdk/protobuf/flowy-grid/text_filter.pbserver.dart';
import 'package:flowy_sdk/protobuf/flowy-grid/util.pb.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
@ -30,26 +29,20 @@ class TextFilterEditorBloc
_startListening();
},
updateCondition: (TextFilterCondition condition) {
final textFilter = filterInfo.textFilter()!;
_ffiService.insertTextFilter(
filterId: filterInfo.filter.id,
fieldId: filterInfo.field.id,
condition: condition,
content: textFilter.content,
content: state.filter.content,
);
},
updateContent: (content) {
final textFilter = filterInfo.textFilter();
if (textFilter != null) {
_ffiService.insertTextFilter(
filterId: filterInfo.filter.id,
fieldId: filterInfo.field.id,
condition: textFilter.condition,
content: content,
);
} else {
Log.error("Invalid text filter");
}
_ffiService.insertTextFilter(
filterId: filterInfo.filter.id,
fieldId: filterInfo.field.id,
condition: state.filter.condition,
content: content,
);
},
delete: () {
_ffiService.deleteFilter(
@ -60,7 +53,11 @@ class TextFilterEditorBloc
},
didReceiveFilter: (FilterPB filter) {
final filterInfo = state.filterInfo.copyWith(filter: filter);
emit(state.copyWith(filterInfo: filterInfo));
final textFilter = filterInfo.textFilter()!;
emit(state.copyWith(
filterInfo: filterInfo,
filter: textFilter,
));
},
);
},
@ -99,12 +96,15 @@ class TextFilterEditorEvent with _$TextFilterEditorEvent {
@freezed
class TextFilterEditorState with _$TextFilterEditorState {
const factory TextFilterEditorState({required FilterInfo filterInfo}) =
_GridFilterState;
const factory TextFilterEditorState({
required FilterInfo filterInfo,
required TextFilterPB filter,
}) = _GridFilterState;
factory TextFilterEditorState.initial(FilterInfo filterInfo) {
return TextFilterEditorState(
filterInfo: filterInfo,
filter: filterInfo.textFilter()!,
);
}
}

52
frontend/app_flowy/lib/plugins/grid/application/row/row_cache.dart
View File

@ -78,22 +78,23 @@ class GridRowCache {
_showRows(changeset.visibleRows);
}
void _deleteRows(List<String> deletedRows) {
if (deletedRows.isEmpty) return;
final deletedIndex = _rowList.removeRows(deletedRows);
if (deletedIndex.isNotEmpty) {
_rowChangeReasonNotifier.receive(RowsChangedReason.delete(deletedIndex));
void _deleteRows(List<String> deletedRowIds) {
for (final rowId in deletedRowIds) {
final deletedRow = _rowList.remove(rowId);
if (deletedRow != null) {
_rowChangeReasonNotifier.receive(RowsChangedReason.delete(deletedRow));
}
}
}
void _insertRows(List<InsertedRowPB> insertRows) {
if (insertRows.isEmpty) return;
InsertedIndexs insertIndexs =
_rowList.insertRows(insertRows, (rowPB) => buildGridRow(rowPB));
if (insertIndexs.isNotEmpty) {
_rowChangeReasonNotifier.receive(RowsChangedReason.insert(insertIndexs));
for (final insertedRow in insertRows) {
final insertedIndex =
_rowList.insert(insertedRow.index, buildGridRow(insertedRow.row));
if (insertedIndex != null) {
_rowChangeReasonNotifier
.receive(RowsChangedReason.insert(insertedIndex));
}
}
}
@ -108,21 +109,22 @@ class GridRowCache {
}
void _hideRows(List<String> invisibleRows) {
if (invisibleRows.isEmpty) return;
final List<DeletedIndex> deletedRows = _rowList.removeRows(invisibleRows);
if (deletedRows.isNotEmpty) {
_rowChangeReasonNotifier.receive(RowsChangedReason.delete(deletedRows));
for (final rowId in invisibleRows) {
final deletedRow = _rowList.remove(rowId);
if (deletedRow != null) {
_rowChangeReasonNotifier.receive(RowsChangedReason.delete(deletedRow));
}
}
}
void _showRows(List<InsertedRowPB> visibleRows) {
if (visibleRows.isEmpty) return;
final List<InsertedIndex> insertedRows =
_rowList.insertRows(visibleRows, (rowPB) => buildGridRow(rowPB));
if (insertedRows.isNotEmpty) {
_rowChangeReasonNotifier.receive(RowsChangedReason.insert(insertedRows));
for (final insertedRow in visibleRows) {
final insertedIndex =
_rowList.insert(insertedRow.index, buildGridRow(insertedRow.row));
if (insertedIndex != null) {
_rowChangeReasonNotifier
.receive(RowsChangedReason.insert(insertedIndex));
}
}
}
@ -274,8 +276,8 @@ typedef UpdatedIndexMap = LinkedHashMap<String, UpdatedIndex>;
@freezed
class RowsChangedReason with _$RowsChangedReason {
const factory RowsChangedReason.insert(InsertedIndexs items) = _Insert;
const factory RowsChangedReason.delete(DeletedIndexs items) = _Delete;
const factory RowsChangedReason.insert(InsertedIndex item) = _Insert;
const factory RowsChangedReason.delete(DeletedIndex item) = _Delete;
const factory RowsChangedReason.update(UpdatedIndexMap indexs) = _Update;
const factory RowsChangedReason.fieldDidChange() = _FieldDidChange;
const factory RowsChangedReason.initial() = InitialListState;

15
frontend/app_flowy/lib/plugins/grid/application/row/row_list.dart
View File

@ -39,10 +39,10 @@ class RowList {
_rowInfoByRowId[rowId] = rowInfo;
}
void insert(int index, RowInfo rowInfo) {
InsertedIndex? insert(int index, RowInfo rowInfo) {
final rowId = rowInfo.rowPB.id;
var insertedIndex = index;
if (_rowInfos.length < insertedIndex) {
if (_rowInfos.length <= insertedIndex) {
insertedIndex = _rowInfos.length;
}
@ -50,13 +50,16 @@ class RowList {
if (oldRowInfo != null) {
_rowInfos.insert(insertedIndex, rowInfo);
_rowInfos.remove(oldRowInfo);
_rowInfoByRowId[rowId] = rowInfo;
return null;
} else {
_rowInfos.insert(insertedIndex, rowInfo);
_rowInfoByRowId[rowId] = rowInfo;
return InsertedIndex(index: insertedIndex, rowId: rowId);
}
_rowInfoByRowId[rowId] = rowInfo;
}
RowInfo? remove(String rowId) {
DeletedIndex? remove(String rowId) {
final rowInfo = _rowInfoByRowId[rowId];
if (rowInfo != null) {
final index = _rowInfos.indexOf(rowInfo);
@ -64,8 +67,10 @@ class RowList {
_rowInfoByRowId.remove(rowInfo.rowPB.id);
_rowInfos.remove(rowInfo);
}
return DeletedIndex(index: index, rowInfo: rowInfo);
} else {
return null;
}
return rowInfo;
}
InsertedIndexs insertRows(

22
frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart
View File

@ -207,20 +207,16 @@ class _GridRowsState extends State<_GridRows> {
return BlocConsumer<GridBloc, GridState>(
listenWhen: (previous, current) => previous.reason != current.reason,
listener: (context, state) {
state.reason.mapOrNull(
insert: (value) {
for (final item in value.items) {
_key.currentState?.insertItem(item.index);
}
state.reason.whenOrNull(
insert: (item) {
_key.currentState?.insertItem(item.index);
},
delete: (value) {
for (final item in value.items) {
_key.currentState?.removeItem(
item.index,
(context, animation) =>
_renderRow(context, item.rowInfo, animation),
);
}
delete: (item) {
_key.currentState?.removeItem(
item.index,
(context, animation) =>
_renderRow(context, item.rowInfo, animation),
);
},
);
},

31
frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/choicechip/choicechip.dart
View File

@ -10,19 +10,17 @@ import 'dart:math' as math;
class ChoiceChipButton extends StatelessWidget {
final FilterInfo filterInfo;
final VoidCallback? onTap;
final String filterDesc;
const ChoiceChipButton({
Key? key,
required this.filterInfo,
this.filterDesc = '',
this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final arrow = Transform.rotate(
angle: -math.pi / 2,
child: svgWidget("home/arrow_left"),
);
final borderSide = BorderSide(
color: AFThemeExtension.of(context).toggleOffFill,
width: 1.0,
@ -46,10 +44,33 @@ class ChoiceChipButton extends StatelessWidget {
filterInfo.field.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
),
rightIcon: arrow,
rightIcon: _ChoicechipFilterDesc(filterDesc: filterDesc),
hoverColor: AFThemeExtension.of(context).lightGreyHover,
onTap: onTap,
),
);
}
}
class _ChoicechipFilterDesc extends StatelessWidget {
final String filterDesc;
const _ChoicechipFilterDesc({this.filterDesc = '', Key? key})
: super(key: key);
@override
Widget build(BuildContext context) {
final arrow = Transform.rotate(
angle: -math.pi / 2,
child: svgWidget("home/arrow_left"),
);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: Row(
children: [
if (filterDesc.isNotEmpty) FlowyText(': $filterDesc'),
arrow,
],
),
);
}
}

106
frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/choicechip/text.dart
View File

@ -26,27 +26,62 @@ class TextFilterChoicechip extends StatefulWidget {
}
class _TextFilterChoicechipState extends State<TextFilterChoicechip> {
late TextFilterEditorBloc bloc;
@override
void initState() {
bloc = TextFilterEditorBloc(filterInfo: widget.filterInfo)
..add(const TextFilterEditorEvent.initial());
super.initState();
}
@override
void dispose() {
bloc.close();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AppFlowyPopover(
controller: PopoverController(),
constraints: BoxConstraints.loose(const Size(200, 76)),
direction: PopoverDirection.bottomWithCenterAligned,
popupBuilder: (BuildContext context) {
return TextFilterEditor(filterInfo: widget.filterInfo);
},
child: ChoiceChipButton(
filterInfo: widget.filterInfo,
onTap: () {},
return BlocProvider.value(
value: bloc,
child: BlocBuilder<TextFilterEditorBloc, TextFilterEditorState>(
builder: (blocContext, state) {
return AppFlowyPopover(
controller: PopoverController(),
constraints: BoxConstraints.loose(const Size(200, 76)),
direction: PopoverDirection.bottomWithCenterAligned,
popupBuilder: (BuildContext context) {
return TextFilterEditor(bloc: bloc);
},
child: ChoiceChipButton(
filterInfo: widget.filterInfo,
filterDesc: _makeFilterDesc(state),
),
);
},
),
);
}
String _makeFilterDesc(TextFilterEditorState state) {
String filterDesc = state.filter.condition.choicechipPrefix;
if (state.filter.condition == TextFilterCondition.TextIsEmpty ||
state.filter.condition == TextFilterCondition.TextIsNotEmpty) {
return filterDesc;
}
if (state.filter.content.isNotEmpty) {
filterDesc += " ${state.filter.content}";
}
return filterDesc;
}
}
class TextFilterEditor extends StatefulWidget {
final FilterInfo filterInfo;
const TextFilterEditor({required this.filterInfo, Key? key})
: super(key: key);
final TextFilterEditorBloc bloc;
const TextFilterEditor({required this.bloc, Key? key}) : super(key: key);
@override
State<TextFilterEditor> createState() => _TextFilterEditorState();
@ -57,20 +92,23 @@ class _TextFilterEditorState extends State<TextFilterEditor> {
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => TextFilterEditorBloc(filterInfo: widget.filterInfo)
..add(const TextFilterEditorEvent.initial()),
return BlocProvider.value(
value: widget.bloc,
child: BlocBuilder<TextFilterEditorBloc, TextFilterEditorState>(
builder: (context, state) {
final List<Widget> children = [
_buildFilterPannel(context, state),
];
if (state.filter.condition != TextFilterCondition.TextIsEmpty &&
state.filter.condition != TextFilterCondition.TextIsNotEmpty) {
children.add(const VSpace(4));
children.add(_buildFilterTextField(context, state));
}
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
child: Column(
children: [
_buildFilterPannel(context, state),
const VSpace(4),
_buildFilterTextField(context, state),
],
),
child: IntrinsicHeight(child: Column(children: children)),
);
},
),
@ -113,9 +151,8 @@ class _TextFilterEditorState extends State<TextFilterEditor> {
Widget _buildFilterTextField(
BuildContext context, TextFilterEditorState state) {
final textFilter = state.filterInfo.textFilter()!;
return FilterTextField(
text: textFilter.content,
text: state.filter.content,
hintText: LocaleKeys.grid_settings_typeAValue.tr(),
autoFucous: false,
onSubmitted: (text) {
@ -209,4 +246,23 @@ extension TextFilterConditionExtension on TextFilterCondition {
return "";
}
}
String get choicechipPrefix {
switch (this) {
case TextFilterCondition.DoesNotContain:
return LocaleKeys.grid_textFilter_choicechipPrefix_isNot.tr();
case TextFilterCondition.EndsWith:
return LocaleKeys.grid_textFilter_choicechipPrefix_endWith.tr();
case TextFilterCondition.IsNot:
return LocaleKeys.grid_textFilter_choicechipPrefix_isNot.tr();
case TextFilterCondition.StartsWith:
return LocaleKeys.grid_textFilter_choicechipPrefix_startWith.tr();
case TextFilterCondition.TextIsEmpty:
return LocaleKeys.grid_textFilter_choicechipPrefix_isEmpty.tr();
case TextFilterCondition.TextIsNotEmpty:
return LocaleKeys.grid_textFilter_choicechipPrefix_isNotEmpty.tr();
default:
return "";
}
}
}

3
frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/create_filter_list.dart
View File

@ -17,11 +17,13 @@ class GridCreateFilterList extends StatefulWidget {
final String viewId;
final GridFieldController fieldController;
final VoidCallback onClosed;
final VoidCallback? onCreateFilter;
const GridCreateFilterList({
required this.viewId,
required this.fieldController,
required this.onClosed,
this.onCreateFilter,
Key? key,
}) : super(key: key);
@ -102,6 +104,7 @@ class _GridCreateFilterListState extends State<GridCreateFilterList> {
void createFilter(FieldInfo field) {
editBloc.add(GridCreateFilterEvent.createDefaultFilter(field));
widget.onCreateFilter?.call();
}
}

13
frontend/app_flowy/lib/plugins/grid/presentation/widgets/filter/menu.dart
View File

@ -13,7 +13,6 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'create_filter_list.dart';
import 'filter_info.dart';
import 'menu_item.dart';
class GridFilterMenu extends StatelessWidget {
@ -28,7 +27,7 @@ class GridFilterMenu extends StatelessWidget {
children: [
buildDivider(context),
const VSpace(6),
buildFilterItems(state.viewId, state.filters),
buildFilterItems(state.viewId, state),
],
));
} else {
@ -55,8 +54,8 @@ class GridFilterMenu extends StatelessWidget {
);
}
Widget buildFilterItems(String viewId, List<FilterInfo> filters) {
final List<Widget> children = filters
Widget buildFilterItems(String viewId, GridFilterMenuState state) {
final List<Widget> children = state.filters
.map((filterInfo) => FilterMenuItem(filterInfo: filterInfo))
.toList();
return Row(
@ -70,7 +69,7 @@ class GridFilterMenu extends StatelessWidget {
),
),
const HSpace(4),
AddFilterButton(viewId: viewId),
if (state.creatableFields.isNotEmpty) AddFilterButton(viewId: viewId),
],
);
}
@ -110,9 +109,7 @@ class _AddFilterButtonState extends State<AddFilterButton> {
"home/add",
color: Theme.of(context).colorScheme.onSurface,
),
onTap: () {
popoverController.show();
},
onTap: () => popoverController.show(),
),
),
);

5
frontend/app_flowy/lib/plugins/grid/presentation/widgets/toolbar/filter_button.dart
View File

@ -69,6 +69,11 @@ class _FilterButtonState extends State<FilterButton> {
viewId: bloc.viewId,
fieldController: bloc.fieldController,
onClosed: () => _popoverController.close(),
onCreateFilter: () {
if (!bloc.state.isVisible) {
bloc.add(const GridFilterMenuEvent.toggleMenu());
}
},
);
},
);