board_page.dart 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. // ignore_for_file: unused_field
  2. import 'dart:collection';
  3. import 'package:app_flowy/plugins/board/application/card/card_data_controller.dart';
  4. import 'package:app_flowy/plugins/grid/application/row/row_cache.dart';
  5. import 'package:app_flowy/plugins/grid/application/field/field_cache.dart';
  6. import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
  7. import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.dart';
  8. import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_detail.dart';
  9. import 'package:appflowy_board/appflowy_board.dart';
  10. import 'package:flowy_infra/image.dart';
  11. import 'package:flowy_infra/theme.dart';
  12. import 'package:flowy_infra_ui/style_widget/text.dart';
  13. import 'package:flowy_infra_ui/widget/error_page.dart';
  14. import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
  15. import 'package:flowy_sdk/protobuf/flowy-grid/block_entities.pb.dart';
  16. import 'package:flutter/material.dart';
  17. import 'package:flutter_bloc/flutter_bloc.dart';
  18. import '../../grid/application/row/row_cache.dart';
  19. import '../application/board_bloc.dart';
  20. import 'card/card.dart';
  21. import 'card/card_cell_builder.dart';
  22. class BoardPage extends StatelessWidget {
  23. final ViewPB view;
  24. BoardPage({required this.view, Key? key}) : super(key: ValueKey(view.id));
  25. @override
  26. Widget build(BuildContext context) {
  27. return BlocProvider(
  28. create: (context) =>
  29. BoardBloc(view: view)..add(const BoardEvent.initial()),
  30. child: BlocBuilder<BoardBloc, BoardState>(
  31. builder: (context, state) {
  32. return state.loadingState.map(
  33. loading: (_) =>
  34. const Center(child: CircularProgressIndicator.adaptive()),
  35. finish: (result) {
  36. return result.successOrFail.fold(
  37. (_) => BoardContent(),
  38. (err) => FlowyErrorPage(err.toString()),
  39. );
  40. },
  41. );
  42. },
  43. ),
  44. );
  45. }
  46. }
  47. class BoardContent extends StatelessWidget {
  48. final config = AFBoardConfig(
  49. columnBackgroundColor: HexColor.fromHex('#F7F8FC'),
  50. );
  51. BoardContent({Key? key}) : super(key: key);
  52. @override
  53. Widget build(BuildContext context) {
  54. return BlocBuilder<BoardBloc, BoardState>(
  55. builder: (context, state) {
  56. return Container(
  57. color: Colors.white,
  58. child: Padding(
  59. padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
  60. child: AFBoard(
  61. scrollController: ScrollController(),
  62. dataController: context.read<BoardBloc>().boardController,
  63. headerBuilder: _buildHeader,
  64. footBuilder: _buildFooter,
  65. cardBuilder: (_, data) => _buildCard(context, data),
  66. columnConstraints: const BoxConstraints.tightFor(width: 240),
  67. config: AFBoardConfig(
  68. columnBackgroundColor: HexColor.fromHex('#F7F8FC'),
  69. ),
  70. ),
  71. ),
  72. );
  73. },
  74. );
  75. }
  76. Widget _buildHeader(
  77. BuildContext context, AFBoardColumnHeaderData headerData) {
  78. return AppFlowyColumnHeader(
  79. // icon: const Icon(Icons.lightbulb_circle),
  80. title: Flexible(
  81. fit: FlexFit.tight,
  82. child: FlowyText.medium(
  83. headerData.columnName,
  84. fontSize: 14,
  85. overflow: TextOverflow.clip,
  86. color: context.read<AppTheme>().textColor,
  87. ),
  88. ),
  89. // addIcon: const Icon(Icons.add, size: 20),
  90. moreIcon: SizedBox(
  91. width: 20,
  92. height: 20,
  93. child: svgWidget(
  94. 'grid/details',
  95. color: context.read<AppTheme>().iconColor,
  96. ),
  97. ),
  98. height: 50,
  99. margin: config.headerPadding,
  100. );
  101. }
  102. Widget _buildFooter(BuildContext context, AFBoardColumnData columnData) {
  103. return AppFlowyColumnFooter(
  104. icon: SizedBox(
  105. height: 20,
  106. width: 20,
  107. child: svgWidget(
  108. "home/add",
  109. color: context.read<AppTheme>().iconColor,
  110. ),
  111. ),
  112. title: FlowyText.medium(
  113. "New",
  114. fontSize: 14,
  115. color: context.read<AppTheme>().textColor,
  116. ),
  117. height: 50,
  118. margin: config.footerPadding,
  119. onAddButtonClick: () {
  120. context.read<BoardBloc>().add(BoardEvent.createRow(columnData.id));
  121. });
  122. }
  123. Widget _buildCard(BuildContext context, AFColumnItem item) {
  124. final rowPB = (item as BoardColumnItem).row;
  125. final rowCache = context.read<BoardBloc>().getRowCache(rowPB.blockId);
  126. /// Return placeholder widget if the rowCache is null.
  127. if (rowCache == null) return SizedBox(key: ObjectKey(item));
  128. final fieldCache = context.read<BoardBloc>().fieldCache;
  129. final gridId = context.read<BoardBloc>().gridId;
  130. final cardController = CardDataController(
  131. fieldCache: fieldCache,
  132. rowCache: rowCache,
  133. rowPB: rowPB,
  134. );
  135. final cellBuilder = BoardCellBuilder(cardController);
  136. final isEditing = context.read<BoardBloc>().state.editingRow.fold(
  137. () => false,
  138. (editingRow) => editingRow.id == rowPB.id,
  139. );
  140. return AppFlowyColumnItemCard(
  141. key: ObjectKey(item),
  142. margin: config.cardPadding,
  143. decoration: _makeBoxDecoration(context),
  144. child: BoardCard(
  145. gridId: gridId,
  146. isEditing: isEditing,
  147. cellBuilder: cellBuilder,
  148. dataController: cardController,
  149. onEditEditing: (rowId) {
  150. context.read<BoardBloc>().add(BoardEvent.endEditRow(rowId));
  151. },
  152. openCard: (context) => _openCard(
  153. gridId,
  154. fieldCache,
  155. rowPB,
  156. rowCache,
  157. context,
  158. ),
  159. ),
  160. );
  161. }
  162. BoxDecoration _makeBoxDecoration(BuildContext context) {
  163. final theme = context.read<AppTheme>();
  164. final borderSide = BorderSide(color: theme.shader6, width: 1.0);
  165. return BoxDecoration(
  166. color: theme.surface,
  167. border: Border.fromBorderSide(borderSide),
  168. borderRadius: const BorderRadius.all(Radius.circular(6)),
  169. );
  170. }
  171. void _openCard(String gridId, GridFieldCache fieldCache, RowPB rowPB,
  172. GridRowCache rowCache, BuildContext context) {
  173. final rowInfo = RowInfo(
  174. gridId: gridId,
  175. fields: UnmodifiableListView(fieldCache.fields),
  176. rowPB: rowPB,
  177. );
  178. final dataController = GridRowDataController(
  179. rowInfo: rowInfo,
  180. fieldCache: fieldCache,
  181. rowCache: rowCache,
  182. );
  183. RowDetailPage(
  184. cellBuilder: GridCellBuilder(delegate: dataController),
  185. dataController: dataController,
  186. ).show(context);
  187. }
  188. }
  189. extension HexColor on Color {
  190. static Color fromHex(String hexString) {
  191. final buffer = StringBuffer();
  192. if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
  193. buffer.write(hexString.replaceFirst('#', ''));
  194. return Color(int.parse(buffer.toString(), radix: 16));
  195. }
  196. }