chore: filter for select options

This commit is contained in:
appflowy 2022-05-01 15:10:40 +08:00
parent 2848ecb5ba
commit b66d8fc5aa
4 changed files with 33 additions and 4 deletions

View File

@ -25,7 +25,8 @@ class SelectOptionEditorBloc extends Bloc<SelectOptionEditorEvent, SelectOptionE
}, },
didReceiveOptions: (_DidReceiveOptions value) { didReceiveOptions: (_DidReceiveOptions value) {
emit(state.copyWith( emit(state.copyWith(
options: value.options, allOptions: value.options,
options: _makeOptions(state.filter, value.options),
selectedOptions: value.selectedOptions, selectedOptions: value.selectedOptions,
)); ));
}, },
@ -41,6 +42,9 @@ class SelectOptionEditorBloc extends Bloc<SelectOptionEditorEvent, SelectOptionE
selectOption: (_SelectOption value) { selectOption: (_SelectOption value) {
_onSelectOption(value.optionId); _onSelectOption(value.optionId);
}, },
filterOption: (_SelectOptionFilter value) {
_filterOption(value.optionName, emit);
},
); );
}, },
); );
@ -86,6 +90,16 @@ class SelectOptionEditorBloc extends Bloc<SelectOptionEditorEvent, SelectOptionE
} }
} }
void _filterOption(String optionName, Emitter<SelectOptionEditorState> emit) {
emit(state.copyWith(filter: optionName, options: _makeOptions(optionName, state.allOptions)));
}
List<SelectOption> _makeOptions(String filter, List<SelectOption> allOptions) {
final List<SelectOption> options = List.from(allOptions);
options.retainWhere((option) => option.name.contains(filter));
return options;
}
void _startListening() { void _startListening() {
_onCellChangedFn = cellContext.startListening( _onCellChangedFn = cellContext.startListening(
onCellChanged: ((selectOptionContext) { onCellChanged: ((selectOptionContext) {
@ -109,20 +123,25 @@ class SelectOptionEditorEvent with _$SelectOptionEditorEvent {
const factory SelectOptionEditorEvent.selectOption(String optionId) = _SelectOption; const factory SelectOptionEditorEvent.selectOption(String optionId) = _SelectOption;
const factory SelectOptionEditorEvent.updateOption(SelectOption option) = _UpdateOption; const factory SelectOptionEditorEvent.updateOption(SelectOption option) = _UpdateOption;
const factory SelectOptionEditorEvent.deleteOption(SelectOption option) = _DeleteOption; const factory SelectOptionEditorEvent.deleteOption(SelectOption option) = _DeleteOption;
const factory SelectOptionEditorEvent.filterOption(String optionName) = _SelectOptionFilter;
} }
@freezed @freezed
class SelectOptionEditorState with _$SelectOptionEditorState { class SelectOptionEditorState with _$SelectOptionEditorState {
const factory SelectOptionEditorState({ const factory SelectOptionEditorState({
required List<SelectOption> options, required List<SelectOption> options,
required List<SelectOption> allOptions,
required List<SelectOption> selectedOptions, required List<SelectOption> selectedOptions,
required String filter,
}) = _SelectOptionEditorState; }) = _SelectOptionEditorState;
factory SelectOptionEditorState.initial(GridSelectOptionCellContext context) { factory SelectOptionEditorState.initial(GridSelectOptionCellContext context) {
final data = context.getCellData(); final data = context.getCellData();
return SelectOptionEditorState( return SelectOptionEditorState(
options: data?.options ?? [], options: data?.options ?? [],
allOptions: data?.options ?? [],
selectedOptions: data?.selectOptions ?? [], selectedOptions: data?.selectOptions ?? [],
filter: "",
); );
} }
} }

View File

@ -9,8 +9,8 @@ class GridSize {
static double get leadingHeaderPadding => 50 * scale; static double get leadingHeaderPadding => 50 * scale;
static double get trailHeaderPadding => 140 * scale; static double get trailHeaderPadding => 140 * scale;
static double get headerContainerPadding => 0 * scale; static double get headerContainerPadding => 0 * scale;
static double get cellHPadding => 8 * scale; static double get cellHPadding => 10 * scale;
static double get cellVPadding => 8 * scale; static double get cellVPadding => 10 * scale;
static double get typeOptionItemHeight => 32 * scale; static double get typeOptionItemHeight => 32 * scale;
static double get typeOptionSeparatorHeight => 6 * scale; static double get typeOptionSeparatorHeight => 6 * scale;

View File

@ -144,6 +144,9 @@ class _TextField extends StatelessWidget {
selectedOptionMap: optionMap, selectedOptionMap: optionMap,
distanceToText: _editorPannelWidth * 0.7, distanceToText: _editorPannelWidth * 0.7,
tagController: _tagController, tagController: _tagController,
newText: (text) {
context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.filterOption(text));
},
onNewTag: (tagName) { onNewTag: (tagName) {
context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.newOption(tagName)); context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.newOption(tagName));
}, },

View File

@ -21,6 +21,7 @@ class SelectOptionTextField extends StatelessWidget {
final double distanceToText; final double distanceToText;
final Function(String) onNewTag; final Function(String) onNewTag;
final Function(String) newText;
SelectOptionTextField({ SelectOptionTextField({
required this.options, required this.options,
@ -28,6 +29,7 @@ class SelectOptionTextField extends StatelessWidget {
required this.distanceToText, required this.distanceToText,
required this.tagController, required this.tagController,
required this.onNewTag, required this.onNewTag,
required this.newText,
TextEditingController? controller, TextEditingController? controller,
FocusNode? focusNode, FocusNode? focusNode,
Key? key, Key? key,
@ -51,7 +53,12 @@ class SelectOptionTextField extends StatelessWidget {
autofocus: true, autofocus: true,
controller: editController, controller: editController,
focusNode: focusNode, focusNode: focusNode,
onChanged: onChanged, onChanged: (text) {
if (onChanged != null) {
onChanged(text);
}
newText(text);
},
onSubmitted: (text) { onSubmitted: (text) {
if (onSubmitted != null) { if (onSubmitted != null) {
onSubmitted(text); onSubmitted(text);