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

Implemented the selection behavior of the side tree

Browse Source
This commit is contained in:
Abdullah Alassaf
2025-01-30 04:03:54 +03:00
parent 2221d9ae7b
commit 43c17d1c18
14 changed files with 446 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
lib/pages/space_tree/view/community_tile.dart
View File

@ -1,35 +0,0 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/space_tree/view/custom_expansion.dart';
class CommunityTileSpaceTree extends StatelessWidget {
final String title;
final List<Widget>? children;
final bool isExpanded;
final bool isSelected;
final Function(String, bool) onExpansionChanged;
final Function() onItemSelected;
const CommunityTileSpaceTree({
super.key,
required this.title,
required this.isExpanded,
required this.onExpansionChanged,
required this.onItemSelected,
required this.isSelected,
this.children,
});
@override
Widget build(BuildContext context) {
return CustomExpansionTileSpaceTree(
title: title,
initiallyExpanded: isExpanded,
isSelected: isSelected,
onExpansionChanged: (bool expanded) {
onExpansionChanged(title, expanded);
},
onItemSelected: onItemSelected,
children: children ?? [],
);
}
}

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

@ -1,54 +1,26 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class CustomExpansionTileSpaceTree extends StatefulWidget {
class CustomExpansionTileSpaceTree extends StatelessWidget {
final String? spaceId;
final String title;
final List<Widget>? children;
final bool initiallyExpanded;
final bool isSelected; // Add this to track selection
final bool? isExpanded; // External control over expansion
final ValueChanged<bool>? onExpansionChanged; // Notify when expansion changes
final VoidCallback? onItemSelected; // Callback for selecting the item
final bool isSelected;
final bool isSoldCheck;
final bool isExpanded;
final Function? onExpansionChanged;
final Function? onItemSelected;
CustomExpansionTileSpaceTree({
required this.title,
this.children,
this.initiallyExpanded = false,
this.isExpanded, // Allow external control over expansion
this.onExpansionChanged, // Notify when expansion changes
this.onItemSelected, // Trigger item selection when name is tapped
required this.isSelected, // Add this to initialize selection state
});
@override
CustomExpansionTileState createState() => CustomExpansionTileState();
}
class CustomExpansionTileState extends State<CustomExpansionTileSpaceTree> {
bool _isExpanded = false; // Local expansion state
@override
void initState() {
super.initState();
_isExpanded = widget.initiallyExpanded;
}
@override
void didUpdateWidget(CustomExpansionTileSpaceTree oldWidget) {
super.didUpdateWidget(oldWidget);
// Sync local state with external control of expansion state
if (widget.isExpanded != null && widget.isExpanded != _isExpanded) {
setState(() {
_isExpanded = widget.isExpanded!;
});
}
}
// Utility function to capitalize the first letter of the title
String _capitalizeFirstLetter(String text) {
if (text.isEmpty) return text;
return text[0].toUpperCase() + text.substring(1);
}
const CustomExpansionTileSpaceTree(
{super.key,
this.spaceId,
required this.title,
this.children,
this.isExpanded = false,
this.onExpansionChanged,
this.onItemSelected,
required this.isSelected,
this.isSoldCheck = false});
@override
Widget build(BuildContext context) {
@ -56,14 +28,14 @@ class CustomExpansionTileState extends State<CustomExpansionTileSpaceTree> {
children: [
Row(
children: [
// Checkbox with independent state management
Checkbox(
value: widget.isSelected,
value: isSoldCheck ? null : isSelected,
onChanged: (bool? value) {
if (widget.onItemSelected != null) {
widget.onItemSelected!();
if (onItemSelected != null) {
onItemSelected!();
}
},
tristate: true,
side: WidgetStateBorderSide.resolveWith((states) {
return const BorderSide(color: ColorsManager.grayBorder);
}),
@ -76,52 +48,52 @@ class CustomExpansionTileState extends State<CustomExpansionTileSpaceTree> {
}),
checkColor: ColorsManager.whiteColors,
),
// Expand/collapse icon, now wrapped in a GestureDetector for specific onTap
if (widget.children != null && widget.children!.isNotEmpty)
GestureDetector(
if (children != null && children!.isNotEmpty)
InkWell(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
widget.onExpansionChanged?.call(_isExpanded);
});
if (onExpansionChanged != null) {
onExpansionChanged!();
}
},
child: Icon(
_isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
isExpanded ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_right,
color: ColorsManager.lightGrayColor,
size: 16.0, // Adjusted size for better alignment
size: 16.0,
),
),
// The title text, wrapped in GestureDetector to handle selection
Expanded(
child: GestureDetector(
onTap: () {
if (widget.onItemSelected != null) {
widget.onItemSelected!();
if (onItemSelected != null) {
onItemSelected!();
}
},
child: Text(
_capitalizeFirstLetter(widget.title),
style: TextStyle(
color: widget.isSelected
? ColorsManager.blackColor // Change color to black when selected
: ColorsManager.lightGrayColor, // Gray when not selected
fontWeight: FontWeight.w400,
),
_capitalizeFirstLetter(title),
style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: isSelected
? ColorsManager.blackColor // Change color to black when selected
: ColorsManager.lightGrayColor, // Gray when not selected
fontWeight: FontWeight.w400,
),
),
),
),
],
),
// The expanded section (children) that shows when the tile is expanded
if (_isExpanded && widget.children != null && widget.children!.isNotEmpty)
if (isExpanded && children != null && children!.isNotEmpty)
Padding(
padding: const EdgeInsets.only(left: 48.0), // Indented children
padding: const EdgeInsets.only(left: 48.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widget.children!,
children: children ?? [],
),
),
],
);
}
String _capitalizeFirstLetter(String text) {
if (text.isEmpty) return text;
return text[0].toUpperCase() + text.substring(1);
}
}

26
lib/pages/space_tree/view/side_spaces_view.dart
View File

@ -1,26 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
class SideSpacesView extends StatelessWidget {
final Function onSelectAction;
const SideSpacesView({required this.onSelectAction, super.key});
@override
Widget build(BuildContext context) {
return BlocConsumer<SpaceTreeBloc, SpaceTreeState>(
listener: (context, state) {},
builder: (context, state) {
return SpaceTreeView(
communities: state.spacesList,
selectedSpaceUuid: state.selectedSpace,
selectedCommunityId: state.selectedCommunity,
buildContext: context,
action: onSelectAction,
isLoading: state is SpaceTreeLoadingState,
);
});
}
}

120
lib/pages/space_tree/view/side_tree_view.dart Normal file
View File

@ -0,0 +1,120 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/common/widgets/search_bar.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_state.dart';
import 'package:syncrow_web/pages/space_tree/view/custom_expansion.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/style.dart';
class SideTreeView extends StatelessWidget {
const SideTreeView({super.key});
@override
Widget build(BuildContext context) {
return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
List<CommunityModel> list = state.isSearching ? state.filteredCommunity : state.communityList;
return Container(
height: MediaQuery.sizeOf(context).height,
decoration: subSectionContainerDecoration,
// padding: const EdgeInsets.all(16.0),
child: state is SpaceTreeLoadingState
? const Center(child: CircularProgressIndicator())
: Column(
children: [
CustomSearchBar(
onSearchChanged: (query) {
context.read<SpaceTreeBloc>().add(SearchQueryEvent(query));
},
),
const SizedBox(height: 16),
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));
},
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));
},
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(),
),
),
),
],
),
);
});
}
List<Widget> _buildNestedSpaces(
BuildContext context, SpaceTreeState state, SpaceModel space, String communityId) {
return space.children.map((child) {
return CustomExpansionTileSpaceTree(
isSelected:
state.selectedSpaces.contains(child.uuid) || state.soldCheck.contains(child.uuid),
isSoldCheck: state.soldCheck.contains(child.uuid),
title: child.name,
isExpanded: state.expandedSpaces.contains(child.uuid),
onItemSelected: () {
context
.read<SpaceTreeBloc>()
.add(OnSpaceSelected(communityId, child.uuid ?? '', child.children));
},
onExpansionChanged: () {
context.read<SpaceTreeBloc>().add(OnSpaceExpanded(communityId, child.uuid ?? ''));
},
children: _buildNestedSpaces(context, state, child, communityId),
);
}).toList();
}
}

52
lib/pages/space_tree/view/space_tile.dart
View File

@ -1,52 +0,0 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/space_tree/view/custom_expansion.dart';
class SpaceTileSpaceTree extends StatefulWidget {
final String title;
final bool isSelected;
final bool initiallyExpanded;
final ValueChanged<bool> onExpansionChanged;
final List<Widget>? children;
final Function() onItemSelected;
const SpaceTileSpaceTree({
super.key,
required this.title,
required this.initiallyExpanded,
required this.onExpansionChanged,
required this.onItemSelected,
required this.isSelected,
this.children,
});
@override
_SpaceTileState createState() => _SpaceTileState();
}
class _SpaceTileState extends State<SpaceTileSpaceTree> {
late bool _isExpanded;
@override
void initState() {
super.initState();
_isExpanded = widget.initiallyExpanded;
}
@override
Widget build(BuildContext context) {
return CustomExpansionTileSpaceTree(
isSelected: widget.isSelected,
title: widget.title,
initiallyExpanded: _isExpanded,
onItemSelected: widget.onItemSelected,
onExpansionChanged: (bool expanded) {
setState(() {
_isExpanded = expanded;
});
widget.onExpansionChanged(expanded);
},
children: widget.children ?? [],
);
}
}

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

@ -1,251 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/common/widgets/search_bar.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/view/community_tile.dart';
import 'package:syncrow_web/pages/space_tree/view/space_tile.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/style.dart';
class SpaceTreeView extends StatefulWidget {
final List<CommunityModel> communities;
final String? selectedCommunityId;
final String? selectedSpaceUuid;
final BuildContext buildContext;
final Function action;
final bool isLoading;
const SpaceTreeView(
{super.key,
this.selectedCommunityId,
required this.communities,
this.selectedSpaceUuid,
required this.buildContext,
required this.action,
required this.isLoading});
@override
State<SpaceTreeView> createState() => _SpaceTreeViewState();
}
class _SpaceTreeViewState extends State<SpaceTreeView> {
String _searchQuery = ''; // Track search query
String? _selectedSpaceUuid;
String? _selectedCommunityId;
String? _expandedId;
@override
void initState() {
super.initState();
// _selectedId = widget.selectedSpaceUuid; // Initialize with the passed selected space UUID
_selectedCommunityId = widget.selectedCommunityId;
_selectedSpaceUuid = widget.selectedSpaceUuid;
}
@override
void didUpdateWidget(covariant SpaceTreeView oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.selectedSpaceUuid != oldWidget.selectedSpaceUuid ||
widget.selectedCommunityId != oldWidget.selectedCommunityId) {
setState(() {
// _selectedId = widget.selectedSpaceUuid;
_selectedCommunityId = widget.selectedCommunityId;
_selectedSpaceUuid = widget.selectedSpaceUuid;
});
}
}
// Function to filter communities based on the search query
List<CommunityModel> _filterCommunities() {
_expandedId = null;
if (_searchQuery.isEmpty) {
// Reset the selected community and space UUIDs if there's no query
// _selectedSpaceUuid = null;
// _selectedCommunityId = null;
return widget.communities;
}
// Filter communities and expand only those that match the query
return widget.communities.where((community) {
final containsQueryInCommunity =
community.name.toLowerCase().contains(_searchQuery.toLowerCase());
final containsQueryInSpaces =
community.spaces.any((space) => _containsQuery(space, _searchQuery.toLowerCase()));
return containsQueryInCommunity || containsQueryInSpaces;
}).toList();
}
// Helper function to determine if any space or its children match the search query
bool _containsQuery(SpaceModel space, String query) {
final matchesSpace = space.name.toLowerCase().contains(query);
final matchesChildren =
space.children.any((child) => _containsQuery(child, query)); // Recursive check for children
// If the space or any of its children match the query, expand this space
if (matchesSpace || matchesChildren) {
_expandedId = space.uuid;
}
return matchesSpace || matchesChildren;
}
bool _isSpaceOrChildSelected(SpaceModel space) {
// Return true if the current space or any of its child spaces is selected
if (_expandedId == space.uuid) {
return true;
}
// Recursively check if any child spaces match the query
for (var child in space.children) {
if (_isSpaceOrChildSelected(child)) {
return true;
}
}
return false;
}
@override
Widget build(BuildContext context) {
final filteredCommunities = _filterCommunities();
return Container(
// width: MediaQuery.sizeOf(context).width * 0.25,
height: MediaQuery.sizeOf(context).height,
margin: const EdgeInsets.only(right: 24),
decoration: subSectionContainerDecoration,
child: widget.isLoading
? const Center(child: CircularProgressIndicator())
: Column(
mainAxisSize: MainAxisSize.min, // Ensures the Column only takes necessary height
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Communities title with the add button
Container(
decoration: subSectionContainerDecoration,
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Communities',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Colors.black,
)),
GestureDetector(
onTap: () => _navigateToBlank(context),
child: Container(
width: 30,
height: 30,
decoration: const BoxDecoration(
color: ColorsManager.whiteColors,
shape: BoxShape.circle,
),
child: Center(
child: SvgPicture.asset(
Assets.roundedAddIcon,
width: 24,
height: 24,
),
),
),
),
],
),
),
// Search bar
CustomSearchBar(
onSearchChanged: (query) {
setState(() {
_selectedSpaceUuid = null;
_searchQuery = query;
});
},
),
const SizedBox(height: 16),
// Community list
Expanded(
child: ListView(
children: filteredCommunities.map((community) {
return _buildCommunityTile(context, community);
}).toList(),
),
),
],
),
);
}
void _navigateToBlank(BuildContext context) {
setState(() {
// _selectedId = '';
_selectedSpaceUuid = '';
});
// context.read<SpaceManagementBloc>().add(
// NewCommunityEvent(communities: widget.communities),
// );
}
Widget _buildCommunityTile(BuildContext context, CommunityModel community) {
bool hasChildren = community.spaces.isNotEmpty;
return CommunityTileSpaceTree(
title: community.name,
key: ValueKey(community.uuid),
isSelected: _selectedCommunityId == community.uuid,
isExpanded: false,
onItemSelected: () {
setState(() {
_selectedCommunityId = community.uuid;
_selectedSpaceUuid = null;
});
widget.buildContext.read<SpaceTreeBloc>().add(
OnSelectSpaceEvent(community.uuid, ''),
);
widget.action(community.uuid, '');
},
onExpansionChanged: (String title, bool expanded) {
_handleExpansionChange(community.uuid, expanded);
},
children: hasChildren
? community.spaces.map((space) => _buildSpaceTile(space, community)).toList()
: null,
);
}
Widget _buildSpaceTile(SpaceModel space, CommunityModel community) {
return SpaceTileSpaceTree(
title: space.name,
key: ValueKey(space.uuid),
isSelected: _selectedSpaceUuid == space.uuid,
initiallyExpanded: _isSpaceOrChildSelected(space),
onExpansionChanged: (bool expanded) {
_handleExpansionChange(space.uuid ?? '', expanded);
},
onItemSelected: () {
setState(() {
_selectedSpaceUuid = space.uuid;
_selectedCommunityId = community.uuid;
});
widget.buildContext.read<SpaceTreeBloc>().add(
OnSelectSpaceEvent(community.uuid, space.uuid ?? ''),
);
widget.action(community.uuid, space.uuid);
},
children: space.children.isNotEmpty
? space.children.map((childSpace) => _buildSpaceTile(childSpace, community)).toList()
: [],
);
}
void _handleExpansionChange(String uuid, bool expanded) {}
}