ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-09 14:47:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #145 from SyncrowIOT/SP-1330-FE-Side-tree-text-breaks-incorrectly-causing-layout-issues

Browse Source 
Sp 1330 fe side tree text breaks incorrectly causing layout issues
This commit is contained in:
Faris Armoush
2025-04-17 09:49:33 +03:00
committed by GitHub
parent 7ef6020dd8 01d5cb48cc
commit a8430a7d3d
5 changed files with 299 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
lib/common/widgets/empty_search_result_widget.dart Normal file
View File

@ -0,0 +1,26 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class EmptySearchResultWidget extends StatelessWidget {
const EmptySearchResultWidget({
this.message = 'No results found',
super.key,
});
final String message;
@override
Widget build(BuildContext context) {
return Center(
child: Text(
message,
textAlign: TextAlign.center,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.lightGreyColor,
fontWeight: FontWeight.w400,
),
),
);
}
}

53
lib/common/widgets/sidebar_communities_list.dart Normal file
View File

@ -0,0 +1,53 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class SidebarCommunitiesList extends StatelessWidget {
const SidebarCommunitiesList({
required this.communities,
required this.itemBuilder,
required this.scrollController,
required this.onScrollToEnd,
super.key,
});
final List<CommunityModel> communities;
final Widget Function(BuildContext context, int index) itemBuilder;
final ScrollController scrollController;
final void Function() onScrollToEnd;
bool _onNotification(ScrollEndNotification notification) {
final hasReachedEnd = notification.metrics.extentAfter == 0;
if (hasReachedEnd) {
onScrollToEnd.call();
return true;
}
return false;
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
width: context.screenWidth * 0.5,
child: Scrollbar(
scrollbarOrientation: ScrollbarOrientation.left,
thumbVisibility: true,
controller: scrollController,
child: NotificationListener<ScrollEndNotification>(
onNotification: _onNotification,
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsetsDirectional.only(start: 16),
itemCount: communities.length,
controller: scrollController,
itemBuilder: itemBuilder,
),
),
),
),
);
}
}

79
lib/pages/space_tree/view/custom_expansion.dart
View File

@ -8,19 +8,20 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
final bool isSelected; final bool isSelected;
final bool isSoldCheck; final bool isSoldCheck;
final bool isExpanded; final bool isExpanded;
final Function? onExpansionChanged; final void Function()? onExpansionChanged;
final Function? onItemSelected; final void Function()? onItemSelected;
const CustomExpansionTileSpaceTree( const CustomExpansionTileSpaceTree({
{super.key, required this.isSelected,
this.spaceId, required this.title,
required this.title, this.spaceId,
this.children, this.children,
this.isExpanded = false, this.onExpansionChanged,
this.onExpansionChanged, this.onItemSelected,
this.onItemSelected, this.isExpanded = false,
required this.isSelected, this.isSoldCheck = false,
this.isSoldCheck = false}); super.key,
});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -30,50 +31,30 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
children: [ children: [
Checkbox( Checkbox(
value: isSoldCheck ? null : isSelected, value: isSoldCheck ? null : isSelected,
onChanged: (bool? value) { onChanged: (value) => onItemSelected ?? () {},
if (onItemSelected != null) {
onItemSelected!();
}
},
tristate: true, tristate: true,
side: WidgetStateBorderSide.resolveWith((states) { side: WidgetStateBorderSide.resolveWith(
return const BorderSide(color: ColorsManager.grayBorder); (states) => const BorderSide(color: ColorsManager.grayBorder),
}), ),
fillColor: WidgetStateProperty.resolveWith((states) { fillColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) { if (states.contains(WidgetState.selected)) {
return ColorsManager.blue1; return ColorsManager.blue1;
} else {
return ColorsManager.checkBoxFillColor;
} }
return ColorsManager.checkBoxFillColor;
}), }),
checkColor: ColorsManager.whiteColors, checkColor: ColorsManager.whiteColors,
), ),
if (children != null && children!.isNotEmpty) _buildExpansionIcon(),
InkWell(
onTap: () {
if (onExpansionChanged != null) {
onExpansionChanged!();
}
},
child: Icon(
isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
color: ColorsManager.lightGrayColor,
size: 16.0,
),
),
Expanded( Expanded(
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: onItemSelected,
if (onItemSelected != null) {
onItemSelected!();
}
},
child: Text( child: Text(
_capitalizeFirstLetter(title), _capitalizeFirstLetter(title),
style: Theme.of(context).textTheme.bodySmall!.copyWith( style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: isSelected color: isSelected
? ColorsManager.blackColor // Change color to black when selected ? ColorsManager.blackColor
: ColorsManager.lightGrayColor, // Gray when not selected : ColorsManager.lightGrayColor,
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400,
), ),
), ),
@ -92,6 +73,20 @@ class CustomExpansionTileSpaceTree extends StatelessWidget {
); );
} }
Widget _buildExpansionIcon() {
return Visibility(
visible: children != null && children!.isNotEmpty,
child: InkWell(
onTap: onExpansionChanged,
child: Icon(
isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
color: ColorsManager.lightGrayColor,
size: 16.0,
),
),
);
}
String _capitalizeFirstLetter(String text) { String _capitalizeFirstLetter(String text) {
if (text.isEmpty) return text; if (text.isEmpty) return text;
return text[0].toUpperCase() + text.substring(1); return text[0].toUpperCase() + text.substring(1);

353
lib/pages/space_tree/view/space_tree_view.dart
View File

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart'; import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/common/widgets/search_bar.dart'; import 'package:syncrow_web/common/widgets/search_bar.dart';
import 'package:syncrow_web/common/widgets/sidebar_communities_list.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart'; import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart'; import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart'; import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
@ -23,7 +24,13 @@ class SpaceTreeView extends StatefulWidget {
} }
class _SpaceTreeViewState extends State<SpaceTreeView> { class _SpaceTreeViewState extends State<SpaceTreeView> {
final ScrollController _scrollController = ScrollController(); late final ScrollController _scrollController;
@override
void initState() {
_scrollController = ScrollController();
super.initState();
}
@override @override
void dispose() { void dispose() {
@ -34,225 +41,161 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) { return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
List<CommunityModel> list = final communities = state.searchQuery.isNotEmpty
state.searchQuery.isNotEmpty ? state.filteredCommunity : state.communityList; ? state.filteredCommunity
: state.communityList;
return Container( return Container(
height: MediaQuery.sizeOf(context).height, height: MediaQuery.sizeOf(context).height,
decoration: widget.isSide == true decoration: widget.isSide == true
? subSectionContainerDecoration.copyWith(color: ColorsManager.whiteColors) ? subSectionContainerDecoration.copyWith(
color: ColorsManager.whiteColors)
: const BoxDecoration(color: ColorsManager.whiteColors), : const BoxDecoration(color: ColorsManager.whiteColors),
child: state is SpaceTreeLoadingState child: state is SpaceTreeLoadingState
? const Center(child: CircularProgressIndicator()) ? const Center(child: CircularProgressIndicator())
: Column( : Column(
children: [ children: [
widget.isSide == true if (widget.isSide == true)
? Container( Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
color: ColorsManager.circleRolesBackground, color: ColorsManager.circleRolesBackground,
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
topRight: Radius.circular(20), topLeft: Radius.circular(20)), topRight: Radius.circular(20),
), topLeft: Radius.circular(20),
child: Padding( ),
padding: const EdgeInsets.all(8.0), ),
child: Row( child: Padding(
children: [ padding: const EdgeInsets.all(8.0),
Expanded( child: Row(
child: Container( children: [
decoration: BoxDecoration( Expanded(
borderRadius: const BorderRadius.all(Radius.circular(20)), child: Container(
border: Border.all(color: ColorsManager.grayBorder)), decoration: BoxDecoration(
child: TextFormField( borderRadius: const BorderRadius.all(
style: context.textTheme.bodyMedium Radius.circular(20),
?.copyWith(color: ColorsManager.blackColor), ),
onChanged: (value) { border: Border.all(
context.read<SpaceTreeBloc>().add(SearchQueryEvent(value)); color: ColorsManager.grayBorder,
}, ),
decoration: textBoxDecoration(radios: 20)!.copyWith( ),
fillColor: Colors.white, child: TextFormField(
suffixIcon: Padding( style: context.textTheme.bodyMedium?.copyWith(
padding: const EdgeInsets.only(right: 16), color: ColorsManager.blackColor,
child: SvgPicture.asset( ),
Assets.textFieldSearch, onChanged: (value) =>
width: 24, context.read<SpaceTreeBloc>().add(
height: 24, SearchQueryEvent(value),
), ),
), decoration:
hintStyle: context.textTheme.bodyMedium?.copyWith( textBoxDecoration(radios: 20)?.copyWith(
fontWeight: FontWeight.w400, fillColor: Colors.white,
fontSize: 12, suffixIcon: Padding(
color: ColorsManager.textGray), padding: const EdgeInsets.only(right: 16),
child: SvgPicture.asset(
Assets.textFieldSearch,
width: 24,
height: 24,
), ),
), ),
hintStyle:
context.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.w400,
fontSize: 12,
color: ColorsManager.textGray,
),
), ),
), ),
], ),
), ),
), ],
)
: CustomSearchBar(
onSearchChanged: (query) {
context.read<SpaceTreeBloc>().add(SearchQueryEvent(query));
},
), ),
),
)
else
CustomSearchBar(
onSearchChanged: (query) => context.read<SpaceTreeBloc>().add(
SearchQueryEvent(query),
),
),
const SizedBox(height: 16), const SizedBox(height: 16),
Expanded( Expanded(
child: state.isSearching child: state.isSearching
? const Center(child: CircularProgressIndicator()) ? const Center(child: CircularProgressIndicator())
: ListView( : SidebarCommunitiesList(
shrinkWrap: true, onScrollToEnd: () => context.read<SpaceTreeBloc>().add(
scrollDirection: Axis.horizontal, PaginationEvent(
children: [ state.paginationModel,
Container( state.communityList,
width: MediaQuery.sizeOf(context).width * 0.5, ),
padding: const EdgeInsets.all(8.0), ),
child: list.isEmpty scrollController: _scrollController,
? Center( communities: communities,
child: Text( itemBuilder: (context, index) {
'No results found', return CustomExpansionTileSpaceTree(
style: Theme.of(context).textTheme.bodySmall!.copyWith( title: communities[index].name,
color: ColorsManager.lightGrayColor, isSelected: state.selectedCommunities
fontWeight: FontWeight.w400, .contains(communities[index].uuid),
), isSoldCheck: state.selectedCommunities
), .contains(communities[index].uuid),
) onExpansionChanged: () =>
: Scrollbar( context.read<SpaceTreeBloc>().add(
scrollbarOrientation: ScrollbarOrientation.left, OnCommunityExpanded(
thumbVisibility: true, communities[index].uuid,
controller: _scrollController,
child: NotificationListener(
onNotification: (notification) {
if (notification is ScrollEndNotification &&
notification.metrics.extentAfter == 0) {
// If the user has reached the end of the list Load more data
context.read<SpaceTreeBloc>().add(PaginationEvent(
state.paginationModel, state.communityList));
}
return false;
},
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: ListView.builder(
shrinkWrap: true,
itemCount: list.length,
controller: _scrollController,
itemBuilder: (context, index) {
return CustomExpansionTileSpaceTree(
title: list[index].name,
isSelected: state.selectedCommunities
.contains(list[index].uuid),
isSoldCheck: state.selectedCommunities
.contains(list[index].uuid),
onExpansionChanged: () {
context.read<SpaceTreeBloc>().add(
OnCommunityExpanded(list[index].uuid));
},
isExpanded: state.expandedCommunities
.contains(list[index].uuid),
onItemSelected: () {
context.read<SpaceTreeBloc>().add(
OnCommunitySelected(list[index].uuid,
list[index].spaces));
widget.onSelect();
},
children: list[index].spaces.map((space) {
return CustomExpansionTileSpaceTree(
title: space.name,
isExpanded: state.expandedSpaces
.contains(space.uuid),
onItemSelected: () {
context.read<SpaceTreeBloc>().add(
OnSpaceSelected(
list[index],
space.uuid ?? '',
space.children));
widget.onSelect();
},
onExpansionChanged: () {
context.read<SpaceTreeBloc>().add(
OnSpaceExpanded(list[index].uuid,
space.uuid ?? ''));
},
isSelected: state.selectedSpaces
.contains(space.uuid) ||
state.soldCheck.contains(space.uuid),
isSoldCheck:
state.soldCheck.contains(space.uuid),
children: _buildNestedSpaces(
context, state, space, list[index]),
);
}).toList(),
);
}),
), ),
), ),
isExpanded: state.expandedCommunities.contains(
communities[index].uuid,
),
onItemSelected: () {
context.read<SpaceTreeBloc>().add(
OnCommunitySelected(
communities[index].uuid,
communities[index].spaces,
),
);
widget.onSelect();
},
children: communities[index].spaces.map(
(space) {
return CustomExpansionTileSpaceTree(
title: space.name,
isExpanded:
state.expandedSpaces.contains(space.uuid),
onItemSelected: () {
context.read<SpaceTreeBloc>().add(
OnSpaceSelected(
communities[index],
space.uuid ?? '',
space.children,
),
);
widget.onSelect();
},
onExpansionChanged: () =>
context.read<SpaceTreeBloc>().add(
OnSpaceExpanded(
communities[index].uuid,
space.uuid ?? '',
),
),
isSelected: state.selectedSpaces
.contains(space.uuid) ||
state.soldCheck.contains(space.uuid),
isSoldCheck:
state.soldCheck.contains(space.uuid),
children: _buildNestedSpaces(
context,
state,
space,
communities[index],
), ),
), );
], },
).toList(),
);
},
), ),
), ),
if (state.paginationIsLoading) const CircularProgressIndicator(), if (state.paginationIsLoading) const CircularProgressIndicator(),
// Expanded(
// child: Padding(
// padding: const EdgeInsets.all(8.0),
// child: list.isEmpty
// ? Center(
// child: Text(
// 'No results found',
// style: Theme.of(context).textTheme.bodySmall!.copyWith(
// color: ColorsManager.lightGrayColor, // Gray when not selected
// fontWeight: FontWeight.w400,
// ),
// ),
// )
// : ListView(
// shrinkWrap: true,
// children: list
// .map(
// (community) => CustomExpansionTileSpaceTree(
// title: community.name,
// isSelected:
// state.selectedCommunities.contains(community.uuid),
// isSoldCheck:
// state.selectedCommunities.contains(community.uuid),
// onExpansionChanged: () {
// context
// .read<SpaceTreeBloc>()
// .add(OnCommunityExpanded(community.uuid));
// },
// isExpanded:
// state.expandedCommunities.contains(community.uuid),
// onItemSelected: () {
// context.read<SpaceTreeBloc>().add(
// OnCommunitySelected(community.uuid, community.spaces));
// onSelect();
// },
// children: community.spaces.map((space) {
// return CustomExpansionTileSpaceTree(
// title: space.name,
// isExpanded: state.expandedSpaces.contains(space.uuid),
// onItemSelected: () {
// context.read<SpaceTreeBloc>().add(OnSpaceSelected(
// community.uuid, space.uuid ?? '', space.children));
// onSelect();
// },
// onExpansionChanged: () {
// context.read<SpaceTreeBloc>().add(
// OnSpaceExpanded(community.uuid, space.uuid ?? ''));
// },
// isSelected: state.selectedSpaces.contains(space.uuid) ||
// state.soldCheck.contains(space.uuid),
// isSoldCheck: state.soldCheck.contains(space.uuid),
// children: _buildNestedSpaces(
// context, state, space, community.uuid),
// );
// }).toList(),
// ),
// )
// .toList(),
// ),
// ),
// ),
], ],
), ),
); );
@ -260,22 +203,28 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
} }
List<Widget> _buildNestedSpaces( List<Widget> _buildNestedSpaces(
BuildContext context, SpaceTreeState state, SpaceModel space, CommunityModel community) { BuildContext context,
SpaceTreeState state,
SpaceModel space,
CommunityModel community,
) {
return space.children.map((child) { return space.children.map((child) {
return CustomExpansionTileSpaceTree( return CustomExpansionTileSpaceTree(
isSelected: isSelected: state.selectedSpaces.contains(child.uuid) ||
state.selectedSpaces.contains(child.uuid) || state.soldCheck.contains(child.uuid), state.soldCheck.contains(child.uuid),
isSoldCheck: state.soldCheck.contains(child.uuid), isSoldCheck: state.soldCheck.contains(child.uuid),
title: child.name, title: child.name,
isExpanded: state.expandedSpaces.contains(child.uuid), isExpanded: state.expandedSpaces.contains(child.uuid),
onItemSelected: () { onItemSelected: () {
context context.read<SpaceTreeBloc>().add(
.read<SpaceTreeBloc>() OnSpaceSelected(community, child.uuid ?? '', child.children),
.add(OnSpaceSelected(community, child.uuid ?? '', child.children)); );
widget.onSelect(); widget.onSelect();
}, },
onExpansionChanged: () { onExpansionChanged: () {
context.read<SpaceTreeBloc>().add(OnSpaceExpanded(community.uuid, child.uuid ?? '')); context.read<SpaceTreeBloc>().add(
OnSpaceExpanded(community.uuid, child.uuid ?? ''),
);
}, },
children: _buildNestedSpaces(context, state, child, community), children: _buildNestedSpaces(context, state, child, community),
); );

42
lib/pages/spaces_management/all_spaces/widgets/sidebar_widget.dart
View File

@ -1,6 +1,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/common/widgets/empty_search_result_widget.dart';
import 'package:syncrow_web/common/widgets/search_bar.dart'; import 'package:syncrow_web/common/widgets/search_bar.dart';
import 'package:syncrow_web/common/widgets/sidebar_communities_list.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart'; import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart'; import 'package:syncrow_web/pages/spaces_management/all_spaces/bloc/space_management_event.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart'; import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
@ -30,6 +32,8 @@ class SidebarWidget extends StatefulWidget {
} }
class _SidebarWidgetState extends State<SidebarWidget> { class _SidebarWidgetState extends State<SidebarWidget> {
late final ScrollController _scrollController;
String _searchQuery = ''; String _searchQuery = '';
String? _selectedSpaceUuid; String? _selectedSpaceUuid;
String? _selectedId; String? _selectedId;
@ -37,9 +41,16 @@ class _SidebarWidgetState extends State<SidebarWidget> {
@override @override
void initState() { void initState() {
_selectedId = widget.selectedSpaceUuid; _selectedId = widget.selectedSpaceUuid;
_scrollController = ScrollController();
super.initState(); super.initState();
} }
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override @override
void didUpdateWidget(covariant SidebarWidget oldWidget) { void didUpdateWidget(covariant SidebarWidget oldWidget) {
if (widget.selectedSpaceUuid != oldWidget.selectedSpaceUuid) { if (widget.selectedSpaceUuid != oldWidget.selectedSpaceUuid) {
@ -86,12 +97,14 @@ class _SidebarWidgetState extends State<SidebarWidget> {
return isSpaceSelected || anySubSpaceIsSelected; return isSpaceSelected || anySubSpaceIsSelected;
} }
static const _width = 300.0;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final filteredCommunities = _filteredCommunities(); final filteredCommunities = _filteredCommunities();
return Container( return Container(
width: 300, width: _width,
decoration: subSectionContainerDecoration, decoration: subSectionContainerDecoration,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -103,10 +116,18 @@ class _SidebarWidgetState extends State<SidebarWidget> {
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
Expanded( Expanded(
child: ListView( child: Visibility(
children: filteredCommunities visible: filteredCommunities.isNotEmpty,
.map((community) => _buildCommunityTile(context, community)) replacement: const EmptySearchResultWidget(),
.toList(), child: SidebarCommunitiesList(
scrollController: _scrollController,
onScrollToEnd: () {},
communities: filteredCommunities,
itemBuilder: (context, index) => _buildCommunityTile(
context,
filteredCommunities[index],
),
),
), ),
), ),
], ],
@ -134,11 +155,12 @@ class _SidebarWidgetState extends State<SidebarWidget> {
}, },
onExpansionChanged: (title, expanded) {}, onExpansionChanged: (title, expanded) {},
children: community.spaces children: community.spaces
.where((space) { .where(
final isDeleted = space.status != SpaceStatus.deleted; (space) => {
final isParentDeleted = space.status != SpaceStatus.parentDeleted; SpaceStatus.deleted,
return (isDeleted || isParentDeleted); SpaceStatus.parentDeleted,
}) }.contains(space.status),
)
.map((space) => _buildSpaceTile(space: space, community: community)) .map((space) => _buildSpaceTile(space: space, community: community))
.toList(), .toList(),
); );