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

feat: allow hiding ungrouped stack (#3752)

Browse Source 
* feat: allow hiding ungrouped stack

* chore: add notifications and listeners

* chore: implement UI

* fix: field info update

* chore: more responsive notification

* chore: read the right configurations

* feat: add ungrouped button

* fix: new board not getting isGroupField

* feat: refresh the counter

* fix: item count update

* chore: apply code suggestions from Mathias

* chore: yolo through tests

* chore: UI fix

* chore: code cleanup

* chore: ungrouped item count fix

* chore: same as above
This commit is contained in:
Richard Shiue
2023-10-26 11:48:58 +08:00
committed by GitHub
parent 1883dd6d7c
commit 8c3984d21a
31 changed files with 895 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/appflowy_flutter/lib/plugins/database_view/application/database_controller.dart
View File

@ -1,5 +1,6 @@
import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
import 'package:appflowy/plugins/database_view/application/view/view_cache.dart';
import 'package:appflowy_backend/dispatch/dispatch.dart';
import 'package:appflowy_backend/log.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/calendar_entities.pb.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/database_entities.pb.dart';
@ -23,18 +24,21 @@ import 'row/row_cache.dart';
import 'group/group_listener.dart';
import 'row/row_service.dart';
typedef OnGroupConfigurationChanged = void Function(List<GroupSettingPB>);
typedef OnGroupByField = void Function(List<GroupPB>);
typedef OnUpdateGroup = void Function(List<GroupPB>);
typedef OnDeleteGroup = void Function(List<String>);
typedef OnInsertGroup = void Function(InsertedGroupPB);
class GroupCallbacks {
final OnGroupConfigurationChanged? onGroupConfigurationChanged;
final OnGroupByField? onGroupByField;
final OnUpdateGroup? onUpdateGroup;
final OnDeleteGroup? onDeleteGroup;
final OnInsertGroup? onInsertGroup;
GroupCallbacks({
this.onGroupConfigurationChanged,
this.onGroupByField,
this.onUpdateGroup,
this.onDeleteGroup,
@ -237,6 +241,15 @@ class DatabaseController {
});
}
void updateGroupConfiguration(bool hideUngrouped) async {
final payload = GroupSettingChangesetPB(
viewId: viewId,
groupConfigurationId: "",
hideUngrouped: hideUngrouped,
);
DatabaseEventUpdateGroupConfiguration(payload).send();
}
Future<void> dispose() async {
await _databaseViewBackendSvc.closeView();
await fieldController.dispose();
@ -248,16 +261,17 @@ class DatabaseController {
}
Future<void> _loadGroups() async {
final result = await _databaseViewBackendSvc.loadGroups();
return Future(
() => result.fold(
(groups) {
for (final callback in _groupCallbacks) {
callback.onGroupByField?.call(groups.items);
}
},
(err) => Log.error(err),
),
final configResult = await loadGroupConfigurations(viewId: viewId);
_handleGroupConfigurationChanged(configResult);
final groupsResult = await _databaseViewBackendSvc.loadGroups();
groupsResult.fold(
(groups) {
for (final callback in _groupCallbacks) {
callback.onGroupByField?.call(groups.items);
}
},
(err) => Log.error(err),
);
}
@ -325,6 +339,7 @@ class DatabaseController {
void _listenOnGroupChanged() {
_groupListener.start(
onGroupConfigurationChanged: _handleGroupConfigurationChanged,
onNumOfGroupsChanged: (result) {
result.fold(
(changeset) {
@ -379,6 +394,29 @@ class DatabaseController {
},
);
}
Future<Either<List<GroupSettingPB>, FlowyError>> loadGroupConfigurations({
required String viewId,
}) {
final payload = DatabaseViewIdPB(value: viewId);
return DatabaseEventGetGroupConfigurations(payload).send().then((result) {
return result.fold((l) => left(l.items), (r) => right(r));
});
}
void _handleGroupConfigurationChanged(
Either<List<GroupSettingPB>, FlowyError> result,
) {
result.fold(
(configurations) {
for (final callback in _groupCallbacks) {
callback.onGroupConfigurationChanged?.call(configurations);
}
},
(r) => Log.error(r),
);
}
}
class RowDataBuilder {

18
frontend/appflowy_flutter/lib/plugins/database_view/application/field/field_controller.dart
View File

@ -22,6 +22,7 @@ import 'package:collection/collection.dart';
import 'package:dartz/dartz.dart';
import 'package:flutter/foundation.dart';
import '../setting/setting_service.dart';
import 'field_info.dart';
import 'field_listener.dart';
@ -558,6 +559,7 @@ class FieldController {
_loadFilters(),
_loadSorts(),
_loadAllFieldSettings(),
_loadSettings(),
]);
_updateFieldInfos();
@ -608,6 +610,22 @@ class FieldController {
});
}
Future<Either<Unit, FlowyError>> _loadSettings() async {
return SettingBackendService(viewId: viewId).getSetting().then(
(result) => result.fold(
(setting) {
_groupConfigurationByFieldId.clear();
for (final configuration in setting.groupSettings.items) {
_groupConfigurationByFieldId[configuration.fieldId] =
configuration;
}
return left(unit);
},
(err) => right(err),
),
);
}
/// Attach corresponding `FieldInfo`s to the `FilterPB`s
List<FilterInfo> _filterInfoListFromPBs(List<FilterPB> filterPBs) {
FilterInfo? getFilterInfo(FilterPB filterPB) {

18
frontend/appflowy_flutter/lib/plugins/database_view/application/group/group_listener.dart
View File

@ -8,11 +8,15 @@ import 'package:dartz/dartz.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/group.pb.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/group_changeset.pb.dart';
typedef GroupConfigurationUpdateValue
= Either<List<GroupSettingPB>, FlowyError>;
typedef GroupUpdateValue = Either<GroupChangesPB, FlowyError>;
typedef GroupByNewFieldValue = Either<List<GroupPB>, FlowyError>;
class DatabaseGroupListener {
final String viewId;
PublishNotifier<GroupConfigurationUpdateValue>? _groupConfigurationNotifier =
PublishNotifier();
PublishNotifier<GroupUpdateValue>? _numOfGroupsNotifier = PublishNotifier();
PublishNotifier<GroupByNewFieldValue>? _groupByFieldNotifier =
PublishNotifier();
@ -20,9 +24,13 @@ class DatabaseGroupListener {
DatabaseGroupListener(this.viewId);
void start({
required void Function(GroupConfigurationUpdateValue)
onGroupConfigurationChanged,
required void Function(GroupUpdateValue) onNumOfGroupsChanged,
required void Function(GroupByNewFieldValue) onGroupByNewField,
}) {
_groupConfigurationNotifier
?.addPublishListener(onGroupConfigurationChanged);
_numOfGroupsNotifier?.addPublishListener(onNumOfGroupsChanged);
_groupByFieldNotifier?.addPublishListener(onGroupByNewField);
_listener = DatabaseNotificationListener(
@ -36,6 +44,13 @@ class DatabaseGroupListener {
Either<Uint8List, FlowyError> result,
) {
switch (ty) {
case DatabaseNotification.DidUpdateGroupConfiguration:
result.fold(
(payload) => _groupConfigurationNotifier?.value =
left(RepeatedGroupSettingPB.fromBuffer(payload).items),
(error) => _groupConfigurationNotifier?.value = right(error),
);
break;
case DatabaseNotification.DidUpdateNumOfGroups:
result.fold(
(payload) => _numOfGroupsNotifier?.value =
@ -57,6 +72,9 @@ class DatabaseGroupListener {
Future<void> stop() async {
await _listener?.stop();
_groupConfigurationNotifier?.dispose();
_groupConfigurationNotifier = null;
_numOfGroupsNotifier?.dispose();
_numOfGroupsNotifier = null;

58
frontend/appflowy_flutter/lib/plugins/database_view/application/setting/group_bloc.dart
View File

@ -1,4 +1,4 @@
import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
import 'package:appflowy/plugins/database_view/application/database_controller.dart';
import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
import 'package:appflowy_backend/log.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';
@ -11,20 +11,27 @@ import '../group/group_service.dart';
part 'group_bloc.freezed.dart';
class DatabaseGroupBloc extends Bloc<DatabaseGroupEvent, DatabaseGroupState> {
final FieldController _fieldController;
final DatabaseController _databaseController;
final GroupBackendService _groupBackendSvc;
Function(List<FieldInfo>)? _onFieldsFn;
GroupCallbacks? _groupCallbacks;
DatabaseGroupBloc({
required String viewId,
required FieldController fieldController,
}) : _fieldController = fieldController,
required DatabaseController databaseController,
}) : _databaseController = databaseController,
_groupBackendSvc = GroupBackendService(viewId),
super(DatabaseGroupState.initial(viewId, fieldController.fieldInfos)) {
super(
DatabaseGroupState.initial(
viewId,
databaseController.fieldController.fieldInfos,
),
) {
on<DatabaseGroupEvent>(
(event, emit) async {
event.when(
initial: () {
_loadGroupConfigurations();
_startListening();
},
didReceiveFieldUpdate: (fieldInfos) {
@ -36,6 +43,9 @@ class DatabaseGroupBloc extends Bloc<DatabaseGroupEvent, DatabaseGroupState> {
);
result.fold((l) => null, (err) => Log.error(err));
},
didUpdateHideUngrouped: (bool hideUngrouped) {
emit(state.copyWith(hideUngrouped: hideUngrouped));
},
);
},
);
@ -44,19 +54,49 @@ class DatabaseGroupBloc extends Bloc<DatabaseGroupEvent, DatabaseGroupState> {
@override
Future<void> close() async {
if (_onFieldsFn != null) {
_fieldController.removeListener(onFieldsListener: _onFieldsFn!);
_databaseController.fieldController
.removeListener(onFieldsListener: _onFieldsFn!);
_onFieldsFn = null;
}
_groupCallbacks = null;
return super.close();
}
void _startListening() {
_onFieldsFn = (fieldInfos) =>
add(DatabaseGroupEvent.didReceiveFieldUpdate(fieldInfos));
_fieldController.addListener(
_databaseController.fieldController.addListener(
onReceiveFields: _onFieldsFn,
listenWhen: () => !isClosed,
);
_groupCallbacks = GroupCallbacks(
onGroupConfigurationChanged: (configurations) {
if (isClosed) {
return;
}
final configuration = configurations.first;
add(
DatabaseGroupEvent.didUpdateHideUngrouped(
configuration.hideUngrouped,
),
);
},
);
_databaseController.addListener(onGroupChanged: _groupCallbacks);
}
void _loadGroupConfigurations() async {
final configResult = await _databaseController.loadGroupConfigurations(
viewId: _databaseController.viewId,
);
configResult.fold(
(configurations) {
final hideUngrouped = configurations.first.hideUngrouped;
add(DatabaseGroupEvent.didUpdateHideUngrouped(hideUngrouped));
},
(err) => Log.error(err),
);
}
}
@ -70,6 +110,8 @@ class DatabaseGroupEvent with _$DatabaseGroupEvent {
const factory DatabaseGroupEvent.didReceiveFieldUpdate(
List<FieldInfo> fields,
) = _DidReceiveFieldUpdate;
const factory DatabaseGroupEvent.didUpdateHideUngrouped(bool hideUngrouped) =
_DidUpdateHideUngrouped;
}
@freezed
@ -77,6 +119,7 @@ class DatabaseGroupState with _$DatabaseGroupState {
const factory DatabaseGroupState({
required String viewId,
required List<FieldInfo> fieldInfos,
required bool hideUngrouped,
}) = _DatabaseGroupState;
factory DatabaseGroupState.initial(
@ -86,5 +129,6 @@ class DatabaseGroupState with _$DatabaseGroupState {
DatabaseGroupState(
viewId: viewId,
fieldInfos: fieldInfos,
hideUngrouped: true,
);
}

34
frontend/appflowy_flutter/lib/plugins/database_view/board/application/board_bloc.dart
View File

@ -6,6 +6,7 @@ import 'package:appflowy/plugins/database_view/application/field/field_info.dart
import 'package:appflowy/plugins/database_view/application/group/group_service.dart';
import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
import 'package:appflowy_board/appflowy_board.dart';
import 'package:collection/collection.dart';
import 'package:dartz/dartz.dart';
import 'package:equatable/equatable.dart';
import 'package:appflowy_backend/log.dart';
@ -29,6 +30,7 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
late final AppFlowyBoardController boardController;
final LinkedHashMap<String, GroupController> groupControllers =
LinkedHashMap();
GroupPB? ungroupedGroup;
FieldController get fieldController => databaseController.fieldController;
String get viewId => databaseController.viewId;
@ -144,6 +146,9 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
),
);
},
didUpdateHideUngrouped: (bool hideUngrouped) {
emit(state.copyWith(hideUngrouped: hideUngrouped));
},
startEditingHeader: (String groupId) {
emit(
state.copyWith(isEditingHeader: true, editingHeaderId: groupId),
@ -188,6 +193,17 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
groupControllers.clear();
boardController.clear();
final ungroupedGroupIndex =
groups.indexWhere((group) => group.groupId == group.fieldId);
if (ungroupedGroupIndex != -1) {
ungroupedGroup = groups[ungroupedGroupIndex];
final group = groups.removeAt(ungroupedGroupIndex);
if (!state.hideUngrouped) {
groups.add(group);
}
}
boardController.addGroups(
groups
.where((group) => fieldController.getField(group.fieldId) != null)
@ -214,8 +230,22 @@ class BoardBloc extends Bloc<BoardEvent, BoardState> {
},
);
final onGroupChanged = GroupCallbacks(
onGroupConfigurationChanged: (configurations) {
if (isClosed) return;
final config = configurations.first;
if (config.hideUngrouped) {
boardController.removeGroup(config.fieldId);
} else if (ungroupedGroup != null) {
final newGroup = initializeGroupData(ungroupedGroup!);
final controller = initializeGroupController(ungroupedGroup!);
groupControllers[controller.group.groupId] = (controller);
boardController.addGroup(newGroup);
}
add(BoardEvent.didUpdateHideUngrouped(config.hideUngrouped));
},
onGroupByField: (groups) {
if (isClosed) return;
ungroupedGroup = null;
initializeGroups(groups);
add(BoardEvent.didReceiveGroups(groups));
},
@ -329,6 +359,8 @@ class BoardEvent with _$BoardEvent {
) = _DidReceiveGridUpdate;
const factory BoardEvent.didReceiveGroups(List<GroupPB> groups) =
_DidReceiveGroups;
const factory BoardEvent.didUpdateHideUngrouped(bool hideUngrouped) =
_DidUpdateHideUngrouped;
}
@freezed
@ -343,6 +375,7 @@ class BoardState with _$BoardState {
BoardEditingRow? editingRow,
required LoadingState loadingState,
required Option<FlowyError> noneOrError,
required bool hideUngrouped,
}) = _BoardState;
factory BoardState.initial(String viewId) => BoardState(
@ -353,6 +386,7 @@ class BoardState with _$BoardState {
isEditingRow: false,
noneOrError: none(),
loadingState: const LoadingState.loading(),
hideUngrouped: false,
);
}

112
frontend/appflowy_flutter/lib/plugins/database_view/board/application/ungrouped_items_bloc.dart Normal file
View File

@ -0,0 +1,112 @@
import 'package:appflowy_backend/log.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
import 'package:bloc/bloc.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'group_controller.dart';
part 'ungrouped_items_bloc.freezed.dart';
class UngroupedItemsBloc
extends Bloc<UngroupedItemsEvent, UngroupedItemsState> {
UngroupedItemsListener? listener;
UngroupedItemsBloc({required GroupPB group})
: super(UngroupedItemsState(ungroupedItems: group.rows)) {
on<UngroupedItemsEvent>(
(event, emit) {
event.when(
initial: () {
listener = UngroupedItemsListener(
initialGroup: group,
onGroupChanged: (ungroupedItems) {
if (isClosed) return;
add(
UngroupedItemsEvent.updateGroup(
ungroupedItems: ungroupedItems,
),
);
},
)..startListening();
},
updateGroup: (newItems) =>
emit(UngroupedItemsState(ungroupedItems: newItems)),
);
},
);
}
}
@freezed
class UngroupedItemsEvent with _$UngroupedItemsEvent {
const factory UngroupedItemsEvent.initial() = _Initial;
const factory UngroupedItemsEvent.updateGroup({
required List<RowMetaPB> ungroupedItems,
}) = _UpdateGroup;
}
@freezed
class UngroupedItemsState with _$UngroupedItemsState {
const factory UngroupedItemsState({
required List<RowMetaPB> ungroupedItems,
}) = _UngroupedItemsState;
}
class UngroupedItemsListener {
List<RowMetaPB> _ungroupedItems;
final SingleGroupListener _listener;
final void Function(List<RowMetaPB> items) onGroupChanged;
UngroupedItemsListener({
required GroupPB initialGroup,
required this.onGroupChanged,
}) : _ungroupedItems = List<RowMetaPB>.from(initialGroup.rows),
_listener = SingleGroupListener(initialGroup);
void startListening() {
_listener.start(
onGroupChanged: (result) {
result.fold(
(GroupRowsNotificationPB changeset) {
final newItems = List<RowMetaPB>.from(_ungroupedItems);
for (final deletedRow in changeset.deletedRows) {
newItems.removeWhere((rowPB) => rowPB.id == deletedRow);
}
for (final insertedRow in changeset.insertedRows) {
final index = newItems.indexWhere(
(rowPB) => rowPB.id == insertedRow.rowMeta.id,
);
if (index != -1) {
continue;
}
if (insertedRow.hasIndex() &&
newItems.length > insertedRow.index) {
newItems.insert(insertedRow.index, insertedRow.rowMeta);
} else {
newItems.add(insertedRow.rowMeta);
}
}
for (final updatedRow in changeset.updatedRows) {
final index = newItems.indexWhere(
(rowPB) => rowPB.id == updatedRow.id,
);
if (index != -1) {
newItems[index] = updatedRow;
}
}
onGroupChanged.call(newItems);
_ungroupedItems = newItems;
},
(err) => Log.error(err),
);
},
);
}
Future<void> dispose() async {
_listener.stop();
}
}

72
frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/board_page.dart
View File

@ -20,6 +20,7 @@ import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/error_page.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flutter/material.dart' hide Card;
import 'package:flutter_bloc/flutter_bloc.dart';
@ -29,6 +30,7 @@ import '../../widgets/row/cell_builder.dart';
import '../application/board_bloc.dart';
import '../../widgets/card/card.dart';
import 'toolbar/board_setting_bar.dart';
import 'ungrouped_items_button.dart';
class BoardPageTabBarBuilderImpl implements DatabaseTabBarItemBuilder {
@override
@ -157,33 +159,42 @@ class _BoardContentState extends State<BoardContent> {
widget.onEditStateChanged?.call();
},
child: BlocBuilder<BoardBloc, BoardState>(
// Only rebuild when groups are added/removed/rearranged
buildWhen: (previous, current) => previous.groupIds != current.groupIds,
builder: (context, state) {
return Padding(
padding: GridSize.contentInsets,
child: AppFlowyBoard(
boardScrollController: scrollManager,
scrollController: ScrollController(),
controller: context.read<BoardBloc>().boardController,
headerBuilder: (_, groupData) => BlocProvider<BoardBloc>.value(
value: context.read<BoardBloc>(),
child: BoardColumnHeader(
groupData: groupData,
margin: config.headerPadding,
),
),
footerBuilder: _buildFooter,
cardBuilder: (_, column, columnItem) => _buildCard(
context,
column,
columnItem,
),
groupConstraints: const BoxConstraints.tightFor(width: 300),
config: AppFlowyBoardConfig(
groupBackgroundColor:
Theme.of(context).colorScheme.surfaceVariant,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
const VSpace(8.0),
if (state.hideUngrouped) _buildBoardHeader(context),
Expanded(
child: AppFlowyBoard(
boardScrollController: scrollManager,
scrollController: ScrollController(),
controller: context.read<BoardBloc>().boardController,
headerBuilder: (_, groupData) =>
BlocProvider<BoardBloc>.value(
value: context.read<BoardBloc>(),
child: BoardColumnHeader(
groupData: groupData,
margin: config.headerPadding,
),
),
footerBuilder: _buildFooter,
cardBuilder: (_, column, columnItem) => _buildCard(
context,
column,
columnItem,
),
groupConstraints: const BoxConstraints.tightFor(width: 300),
config: AppFlowyBoardConfig(
groupBackgroundColor:
Theme.of(context).colorScheme.surfaceVariant,
),
),
)
],
),
);
},
@ -191,6 +202,19 @@ class _BoardContentState extends State<BoardContent> {
);
}
Widget _buildBoardHeader(BuildContext context) {
return const Padding(
padding: EdgeInsets.only(bottom: 8.0),
child: SizedBox(
height: 24,
child: Align(
alignment: AlignmentDirectional.centerEnd,
child: UngroupedItemsButton(),
),
),
);
}
void _handleEditStateChanged(BoardState state, BuildContext context) {
if (state.isEditingRow && state.editingRow != null) {
WidgetsBinding.instance.addPostFrameCallback((_) {

230
frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/ungrouped_items_button.dart Normal file
View File

@ -0,0 +1,230 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/database_view/application/cell/cell_service.dart';
import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
import 'package:appflowy/plugins/database_view/application/row/row_cache.dart';
import 'package:appflowy/plugins/database_view/application/row/row_controller.dart';
import 'package:appflowy/plugins/database_view/board/application/board_bloc.dart';
import 'package:appflowy/plugins/database_view/board/application/ungrouped_items_bloc.dart';
import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
import 'package:appflowy/plugins/database_view/widgets/card/card_cell_builder.dart';
import 'package:appflowy/plugins/database_view/widgets/card/cells/card_cell.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cells/text_cell/text_cell_bloc.dart';
import 'package:appflowy/plugins/database_view/widgets/row/row_detail.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/row_entities.pb.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:collection/collection.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class UngroupedItemsButton extends StatefulWidget {
const UngroupedItemsButton({super.key});
@override
State<UngroupedItemsButton> createState() => _UnscheduledEventsButtonState();
}
class _UnscheduledEventsButtonState extends State<UngroupedItemsButton> {
late final PopoverController _popoverController;
@override
void initState() {
super.initState();
_popoverController = PopoverController();
}
@override
Widget build(BuildContext context) {
return BlocBuilder<BoardBloc, BoardState>(
builder: (context, boardState) {
final ungroupedGroup = context.watch<BoardBloc>().ungroupedGroup;
final databaseController = context.read<BoardBloc>().databaseController;
final primaryField = databaseController.fieldController.fieldInfos
.firstWhereOrNull((element) => element.isPrimary)!;
if (ungroupedGroup == null) {
return const SizedBox.shrink();
}
return BlocProvider<UngroupedItemsBloc>(
create: (_) => UngroupedItemsBloc(group: ungroupedGroup)
..add(const UngroupedItemsEvent.initial()),
child: BlocBuilder<UngroupedItemsBloc, UngroupedItemsState>(
builder: (context, state) {
return AppFlowyPopover(
direction: PopoverDirection.bottomWithCenterAligned,
triggerActions: PopoverTriggerFlags.none,
controller: _popoverController,
offset: const Offset(0, 8),
constraints:
const BoxConstraints(maxWidth: 282, maxHeight: 600),
child: OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Theme.of(context).dividerColor,
width: 1,
),
borderRadius: Corners.s6Border,
),
side: BorderSide(
color: Theme.of(context).dividerColor,
width: 1,
),
padding:
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
visualDensity: VisualDensity.compact,
),
onPressed: () {
if (state.ungroupedItems.isNotEmpty) {
_popoverController.show();
}
},
child: FlowyText.regular(
"${LocaleKeys.board_ungroupedButtonText.tr()} (${state.ungroupedItems.length})",
fontSize: 10,
),
),
popupBuilder: (context) {
return UngroupedItemList(
viewId: databaseController.viewId,
primaryField: primaryField,
rowCache: databaseController.rowCache,
ungroupedItems: state.ungroupedItems,
);
},
);
},
),
);
},
);
}
}
class UngroupedItemList extends StatelessWidget {
final String viewId;
final FieldInfo primaryField;
final RowCache rowCache;
final List<RowMetaPB> ungroupedItems;
const UngroupedItemList({
required this.viewId,
required this.primaryField,
required this.ungroupedItems,
required this.rowCache,
super.key,
});
@override
Widget build(BuildContext context) {
final cells = <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
child: FlowyText.medium(
LocaleKeys.board_ungroupedItemsTitle.tr(),
fontSize: 10,
color: Theme.of(context).hintColor,
overflow: TextOverflow.ellipsis,
),
),
...ungroupedItems.map(
(item) {
final rowController = RowController(
rowMeta: item,
viewId: viewId,
rowCache: rowCache,
);
final renderHook = RowCardRenderHook<String>();
renderHook.addTextCellHook((cellData, _, __) {
return BlocBuilder<TextCellBloc, TextCellState>(
builder: (context, state) {
final text = cellData.isEmpty
? LocaleKeys.grid_row_titlePlaceholder.tr()
: cellData;
if (text.isEmpty) {
return const SizedBox.shrink();
}
return Align(
alignment: Alignment.centerLeft,
child: FlowyText.medium(
text,
textAlign: TextAlign.left,
fontSize: 11,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
);
},
);
});
return UngroupedItem(
cellContext: rowCache.loadCells(item)[primaryField.id]!,
primaryField: primaryField,
rowController: rowController,
cellBuilder: CardCellBuilder<String>(rowController.cellCache),
renderHook: renderHook,
onPressed: () {
FlowyOverlay.show(
context: context,
builder: (BuildContext context) {
return RowDetailPage(
cellBuilder:
GridCellBuilder(cellCache: rowController.cellCache),
rowController: rowController,
);
},
);
PopoverContainer.of(context).close();
},
);
},
)
];
return ListView.separated(
itemBuilder: (context, index) => cells[index],
itemCount: cells.length,
separatorBuilder: (context, index) =>
VSpace(GridSize.typeOptionSeparatorHeight),
shrinkWrap: true,
);
}
}
class UngroupedItem extends StatelessWidget {
final DatabaseCellContext cellContext;
final FieldInfo primaryField;
final RowController rowController;
final CardCellBuilder cellBuilder;
final RowCardRenderHook<String> renderHook;
final VoidCallback onPressed;
const UngroupedItem({
super.key,
required this.cellContext,
required this.onPressed,
required this.cellBuilder,
required this.rowController,
required this.primaryField,
required this.renderHook,
});
@override
Widget build(BuildContext context) {
return SizedBox(
height: 26,
child: FlowyButton(
margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
text: cellBuilder.buildCell(
cellContext: cellContext,
renderHook: renderHook,
),
onTap: onPressed,
),
);
}
}

4
frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/toolbar/calendar_layout_setting.dart
View File

@ -231,7 +231,7 @@ class LayoutDateField extends StatelessWidget {
triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
constraints: BoxConstraints.loose(const Size(300, 400)),
mutex: popoverMutex,
offset: const Offset(-16, 0),
offset: const Offset(-14, 0),
popupBuilder: (context) {
return BlocProvider(
create: (context) => getIt<DatabasePropertyBloc>(
@ -349,7 +349,7 @@ class FirstDayOfWeek extends StatelessWidget {
constraints: BoxConstraints.loose(const Size(300, 400)),
triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
mutex: popoverMutex,
offset: const Offset(-16, 0),
offset: const Offset(-14, 0),
popupBuilder: (context) {
final symbols =
DateFormat.EEEE(context.locale.toLanguageTag()).dateSymbols;

127
frontend/appflowy_flutter/lib/plugins/database_view/widgets/group/database_group.dart
View File

@ -1,9 +1,15 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/plugins/database_view/application/field/field_controller.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/database_view/application/database_controller.dart';
import 'package:appflowy/plugins/database_view/application/field/field_info.dart';
import 'package:appflowy/plugins/database_view/application/setting/group_bloc.dart';
import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
import 'package:appflowy/plugins/database_view/grid/presentation/widgets/common/type_option_separator.dart';
import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_extension.dart';
import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
import 'package:appflowy/workspace/presentation/widgets/toggle/toggle_style.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
@ -15,11 +21,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
class DatabaseGroupList extends StatelessWidget {
final String viewId;
final FieldController fieldController;
final DatabaseController databaseController;
final VoidCallback onDismissed;
const DatabaseGroupList({
required this.viewId,
required this.fieldController,
required this.databaseController,
required this.onDismissed,
Key? key,
}) : super(key: key);
@ -29,31 +35,71 @@ class DatabaseGroupList extends StatelessWidget {
return BlocProvider(
create: (context) => DatabaseGroupBloc(
viewId: viewId,
fieldController: fieldController,
databaseController: databaseController,
)..add(const DatabaseGroupEvent.initial()),
child: BlocBuilder<DatabaseGroupBloc, DatabaseGroupState>(
buildWhen: (previous, current) => true,
builder: (context, state) {
final cells = state.fieldInfos.map((fieldInfo) {
Widget cell = _GridGroupCell(
fieldInfo: fieldInfo,
onSelected: () => onDismissed(),
key: ValueKey(fieldInfo.id),
);
if (!fieldInfo.canBeGroup) {
cell = IgnorePointer(child: Opacity(opacity: 0.3, child: cell));
}
return cell;
}).toList();
final showHideUngroupedToggle = state.fieldInfos.any(
(field) =>
field.canBeGroup &&
field.isGroupField &&
field.fieldType != FieldType.Checkbox,
);
final children = [
if (showHideUngroupedToggle) ...[
SizedBox(
height: GridSize.popoverItemHeight,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: Row(
children: [
Expanded(
child: FlowyText.medium(
LocaleKeys.board_showUngrouped.tr(),
),
),
Toggle(
value: !state.hideUngrouped,
onChanged: (value) =>
databaseController.updateGroupConfiguration(value),
style: ToggleStyle.big,
padding: EdgeInsets.zero,
),
],
),
),
),
const TypeOptionSeparator(spacing: 0),
],
SizedBox(
height: GridSize.popoverItemHeight,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: FlowyText.medium(
LocaleKeys.board_groupBy.tr(),
textAlign: TextAlign.left,
color: Theme.of(context).hintColor,
),
),
),
...state.fieldInfos.where((fieldInfo) => fieldInfo.canBeGroup).map(
(fieldInfo) => _GridGroupCell(
fieldInfo: fieldInfo,
onSelected: onDismissed,
key: ValueKey(fieldInfo.id),
),
),
];
return ListView.separated(
shrinkWrap: true,
itemCount: cells.length,
itemBuilder: (BuildContext context, int index) => cells[index],
itemCount: children.length,
itemBuilder: (BuildContext context, int index) => children[index],
separatorBuilder: (BuildContext context, int index) =>
VSpace(GridSize.typeOptionSeparatorHeight),
padding: const EdgeInsets.all(6.0),
padding: const EdgeInsets.symmetric(vertical: 6.0),
);
},
),
@ -82,26 +128,29 @@ class _GridGroupCell extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
fieldInfo.name,
color: AFThemeExtension.of(context).textColor,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
fieldInfo.name,
color: AFThemeExtension.of(context).textColor,
),
leftIcon: FlowySvg(
fieldInfo.fieldType.icon(),
color: Theme.of(context).iconTheme.color,
),
rightIcon: rightIcon,
onTap: () {
context.read<DatabaseGroupBloc>().add(
DatabaseGroupEvent.setGroupByField(
fieldInfo.id,
fieldInfo.fieldType,
),
);
onSelected();
},
),
leftIcon: FlowySvg(
fieldInfo.fieldType.icon(),
color: Theme.of(context).iconTheme.color,
),
rightIcon: rightIcon,
onTap: () {
context.read<DatabaseGroupBloc>().add(
DatabaseGroupEvent.setGroupByField(
fieldInfo.id,
fieldInfo.fieldType,
),
);
onSelected();
},
),
);
}

4
frontend/appflowy_flutter/lib/plugins/database_view/widgets/setting/setting_button.dart
View File

@ -170,7 +170,7 @@ extension DatabaseSettingActionExtension on DatabaseSettingAction {
),
DatabaseSettingAction.showGroup => DatabaseGroupList(
viewId: databaseController.viewId,
fieldController: databaseController.fieldController,
databaseController: databaseController,
onDismissed: () {},
),
DatabaseSettingAction.showProperties => DatabasePropertyList(
@ -191,7 +191,7 @@ extension DatabaseSettingActionExtension on DatabaseSettingAction {
direction: PopoverDirection.leftWithTopAligned,
mutex: popoverMutex,
margin: EdgeInsets.zero,
offset: const Offset(-16, 0),
offset: const Offset(-14, 0),
child: SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(