Added pagination and search logic in space tree

This commit is contained in:
Abdullah Alassaf
2025-04-06 01:14:16 +03:00
parent 77a9aa2f19
commit ab3f268f29
9 changed files with 284 additions and 140 deletions

View File

@ -1,7 +1,10 @@
import 'dart:async';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/common/bloc/project_manager.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/model/pagination_model.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/services/space_mana_api.dart';
@ -18,7 +21,10 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
on<ClearCachedData>(_clearCachedData);
on<OnCommunityAdded>(_onCommunityAdded);
on<OnCommunityUpdated>(_onCommunityUpdate);
on<PaginationEvent>(_fetchPaginationSpaces);
on<DebouncedSearchEvent>(_onDebouncedSearch);
}
Timer _timer = Timer(const Duration(microseconds: 0), () {});
void _onCommunityUpdate(
OnCommunityUpdated event,
@ -37,7 +43,7 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
updatedCommunities[index] = updatedCommunity;
emit(state.copyWith(communitiesList: updatedCommunities));
} else {
emit(SpaceTreeErrorState('Community not found in the list.'));
emit(const SpaceTreeErrorState('Community not found in the list.'));
}
} catch (e) {
emit(SpaceTreeErrorState('Error updating community: $e'));
@ -49,8 +55,8 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
try {
final projectUuid = await ProjectManager.getProjectUUID() ?? '';
List<CommunityModel> communities =
await CommunitySpaceManagementApi().fetchCommunities(projectUuid, includeSpaces: true);
PaginationModel paginationModel = await CommunitySpaceManagementApi()
.fetchCommunitiesAndSpaces(projectId: projectUuid, page: 1);
// List<CommunityModel> updatedCommunities = await Future.wait(
// communities.map((community) async {
@ -69,12 +75,38 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
// }).toList(),
// );
emit(state.copyWith(communitiesList: communities, expandedCommunity: [], expandedSpaces: []));
emit(state.copyWith(
communitiesList: paginationModel.communities,
expandedCommunity: [],
expandedSpaces: [],
paginationModel: paginationModel));
} catch (e) {
emit(SpaceTreeErrorState('Error loading communities and spaces: $e'));
}
}
_fetchPaginationSpaces(PaginationEvent event, Emitter<SpaceTreeState> emit) async {
emit(state.copyWith(paginationIsLoading: true));
PaginationModel paginationModel = event.paginationModel;
List<CommunityModel> communities = List<CommunityModel>.from(event.communities);
try {
if (paginationModel.hasNext && state.searchQuery.isEmpty) {
final projectUuid = await ProjectManager.getProjectUUID() ?? '';
paginationModel = await CommunitySpaceManagementApi().fetchCommunitiesAndSpaces(
projectId: projectUuid, page: paginationModel.pageNum, search: state.searchQuery);
communities.addAll(paginationModel.communities);
}
} catch (e) {
emit(SpaceTreeErrorState('Error loading communities and spaces: $e'));
}
emit(state.copyWith(
communitiesList: communities,
paginationModel: paginationModel,
paginationIsLoading: false));
}
void _onCommunityAdded(OnCommunityAdded event, Emitter<SpaceTreeState> emit) async {
final updatedCommunities = List<CommunityModel>.from(state.communityList);
updatedCommunities.add(event.newCommunity);
@ -264,28 +296,52 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
_onSearch(SearchQueryEvent event, Emitter<SpaceTreeState> emit) async {
try {
List<CommunityModel> communities = List.from(state.communityList);
List<CommunityModel> filteredCommunity = [];
const duration = Duration(seconds: 1);
if (_timer.isActive) {
_timer.cancel(); // clear timer
}
_timer = Timer(duration, () async => add(DebouncedSearchEvent(event.searchQuery)));
// List<CommunityModel> communities = List.from(state.communityList);
// List<CommunityModel> filteredCommunity = [];
// Filter communities and expand only those that match the query
filteredCommunity = communities.where((community) {
final containsQueryInCommunity =
community.name.toLowerCase().contains(event.searchQuery.toLowerCase());
final containsQueryInSpaces =
community.spaces.any((space) => _containsQuery(space, event.searchQuery.toLowerCase()));
// filteredCommunity = communities.where((community) {
// final containsQueryInCommunity =
// community.name.toLowerCase().contains(event.searchQuery.toLowerCase());
// final containsQueryInSpaces =
// community.spaces.any((space) => _containsQuery(space, event.searchQuery.toLowerCase()));
return containsQueryInCommunity || containsQueryInSpaces;
}).toList();
// return containsQueryInCommunity || containsQueryInSpaces;
// }).toList();
emit(state.copyWith(
filteredCommunity: filteredCommunity,
isSearching: event.searchQuery.isNotEmpty,
searchQuery: event.searchQuery));
// emit(state.copyWith(
// filteredCommunity: filteredCommunity,
// isSearching: event.searchQuery.isNotEmpty,
// searchQuery: event.searchQuery));
} catch (e) {
emit(const SpaceTreeErrorState('Something went wrong'));
}
}
_onDebouncedSearch(DebouncedSearchEvent event, Emitter<SpaceTreeState> emit) async {
emit(state.copyWith(
isSearching: true,
));
PaginationModel paginationModel = const PaginationModel.emptyConstructor();
try {
final projectUuid = await ProjectManager.getProjectUUID() ?? '';
paginationModel = await CommunitySpaceManagementApi()
.fetchCommunitiesAndSpaces(projectId: projectUuid, page: 1, search: event.searchQuery);
} catch (_) {}
emit(state.copyWith(
filteredCommunity: paginationModel.communities,
isSearching: false,
searchQuery: event.searchQuery));
}
_clearAllData(ClearAllData event, Emitter<SpaceTreeState> emit) async {
try {
emit(state.copyWith(
@ -323,13 +379,13 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
}
// 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
// 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
return matchesSpace || matchesChildren;
}
// return matchesSpace || matchesChildren;
// }
List<String> _getAllChildIds(List<SpaceModel> spaces) {
List<String> ids = [];
@ -403,6 +459,7 @@ class SpaceTreeBloc extends Bloc<SpaceTreeEvent, SpaceTreeState> {
@override
Future<void> close() async {
_timer.cancel();
super.close();
}
}

View File

@ -1,4 +1,5 @@
import 'package:equatable/equatable.dart';
import 'package:syncrow_web/pages/space_tree/model/pagination_model.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';
@ -11,6 +12,16 @@ class SpaceTreeEvent extends Equatable {
class InitialEvent extends SpaceTreeEvent {}
class PaginationEvent extends SpaceTreeEvent {
final PaginationModel paginationModel;
final List<CommunityModel> communities;
const PaginationEvent(this.paginationModel, this.communities);
@override
List<Object> get props => [paginationModel, communities];
}
class SearchForSpace extends SpaceTreeEvent {
final String searchQuery;
@ -69,6 +80,15 @@ class SearchQueryEvent extends SpaceTreeEvent {
List<Object> get props => [searchQuery];
}
class DebouncedSearchEvent extends SpaceTreeEvent {
final String searchQuery;
const DebouncedSearchEvent(this.searchQuery);
@override
List<Object> get props => [searchQuery];
}
class OnCommunityAdded extends SpaceTreeEvent {
final CommunityModel newCommunity;
const OnCommunityAdded(this.newCommunity);
@ -85,7 +105,6 @@ class OnCommunityUpdated extends SpaceTreeEvent {
List<Object> get props => [updatedCommunity];
}
class ClearAllData extends SpaceTreeEvent {}
class ClearCachedData extends SpaceTreeEvent {}

View File

@ -1,4 +1,5 @@
import 'package:equatable/equatable.dart';
import 'package:syncrow_web/pages/space_tree/model/pagination_model.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
class SpaceTreeState extends Equatable {
@ -12,6 +13,8 @@ class SpaceTreeState extends Equatable {
final List<String> soldCheck;
final bool isSearching;
final String searchQuery;
final PaginationModel paginationModel;
final bool paginationIsLoading;
const SpaceTreeState(
{this.communityList = const [],
@ -23,7 +26,9 @@ class SpaceTreeState extends Equatable {
this.soldCheck = const [],
this.isSearching = false,
this.selectedCommunityAndSpaces = const {},
this.searchQuery = ''});
this.searchQuery = '',
this.paginationModel = const PaginationModel.emptyConstructor(),
this.paginationIsLoading = false});
SpaceTreeState copyWith(
{List<CommunityModel>? communitiesList,
@ -35,7 +40,9 @@ class SpaceTreeState extends Equatable {
List<String>? soldCheck,
bool? isSearching,
Map<String, List<String>>? selectedCommunityAndSpaces,
String? searchQuery}) {
String? searchQuery,
PaginationModel? paginationModel,
bool? paginationIsLoading}) {
return SpaceTreeState(
communityList: communitiesList ?? this.communityList,
filteredCommunity: filteredCommunity ?? this.filteredCommunity,
@ -46,7 +53,9 @@ class SpaceTreeState extends Equatable {
soldCheck: soldCheck ?? this.soldCheck,
isSearching: isSearching ?? this.isSearching,
selectedCommunityAndSpaces: selectedCommunityAndSpaces ?? this.selectedCommunityAndSpaces,
searchQuery: searchQuery ?? this.searchQuery);
searchQuery: searchQuery ?? this.searchQuery,
paginationModel: paginationModel ?? this.paginationModel,
paginationIsLoading: paginationIsLoading ?? this.paginationIsLoading);
}
@override
@ -60,7 +69,9 @@ class SpaceTreeState extends Equatable {
soldCheck,
isSearching,
selectedCommunityAndSpaces,
searchQuery
searchQuery,
paginationModel,
paginationIsLoading
];
}

View File

@ -0,0 +1,20 @@
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
class PaginationModel {
final int pageNum;
final bool hasNext;
final int size;
final List<CommunityModel> communities;
const PaginationModel(
{required this.pageNum,
required this.hasNext,
required this.size,
required this.communities});
const PaginationModel.emptyConstructor()
: pageNum = 1,
hasNext = true,
size = 10,
communities = const [];
}

View File

@ -34,7 +34,8 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
@override
Widget build(BuildContext context) {
return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
List<CommunityModel> list = state.isSearching ? state.filteredCommunity : state.communityList;
List<CommunityModel> list =
state.searchQuery.isNotEmpty ? state.filteredCommunity : state.communityList;
return Container(
height: MediaQuery.sizeOf(context).height,
decoration: widget.isSide == true
@ -61,7 +62,8 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
borderRadius: const BorderRadius.all(Radius.circular(20)),
border: Border.all(color: ColorsManager.grayBorder)),
child: TextFormField(
style: const TextStyle(color: Colors.black),
style: context.textTheme.bodyMedium
?.copyWith(color: ColorsManager.blackColor),
onChanged: (value) {
context.read<SpaceTreeBloc>().add(SearchQueryEvent(value));
},
@ -94,88 +96,101 @@ class _SpaceTreeViewState extends State<SpaceTreeView> {
),
const SizedBox(height: 16),
Expanded(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
Container(
width: MediaQuery.sizeOf(context).width * 0.5,
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,
fontWeight: FontWeight.w400,
child: state.isSearching
? const Center(child: CircularProgressIndicator())
: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
Container(
width: MediaQuery.sizeOf(context).width * 0.5,
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,
fontWeight: FontWeight.w400,
),
),
),
)
: Scrollbar(
scrollbarOrientation: ScrollbarOrientation.left,
thumbVisibility: true,
controller: _scrollController,
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: ListView(
controller: _scrollController,
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));
widget.onSelect();
},
children: community.spaces.map((space) {
return CustomExpansionTileSpaceTree(
title: space.name,
isExpanded:
state.expandedSpaces.contains(space.uuid),
onItemSelected: () {
context.read<SpaceTreeBloc>().add(
OnSpaceSelected(community, space.uuid ?? '',
space.children));
widget.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),
);
}).toList(),
),
)
.toList(),
),
),
),
),
],
),
)
: Scrollbar(
scrollbarOrientation: ScrollbarOrientation.left,
thumbVisibility: true,
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(),
);
}),
),
),
),
),
],
),
),
if (state.paginationIsLoading) const CircularProgressIndicator(),
// Expanded(
// child: Padding(
// padding: const EdgeInsets.all(8.0),