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

Enhanced the side tree design

Browse Source
This commit is contained in:
Abdullah Alassaf
2025-02-05 11:52:44 +03:00
parent 572520eed5
commit 132cafcaa2
3 changed files with 202 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/pages/device_managment/all_devices/widgets/device_managment_body.dart
View File

@ -69,7 +69,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
}, },
)), )),
Expanded( Expanded(
flex: 3, flex: 4,
child: state is DeviceManagementLoading child: state is DeviceManagementLoading
? const Center(child: CircularProgressIndicator()) ? const Center(child: CircularProgressIndicator())
: Column( : Column(

23
lib/pages/routines/view/routines_view.dart
View File

@ -33,24 +33,16 @@ class _RoutinesViewState extends State<RoutinesView> {
return Row( return Row(
children: [ children: [
Expanded( Expanded(
child: child: SpaceTreeView(
// SideSpacesView(
// onSelectAction: (String communityId, String spaceId) {
// // context.read<RoutineBloc>()
// // ..add(LoadScenes(spaceId, communityId))
// // ..add(LoadAutomation(spaceId));
// },
// )
SpaceTreeView(
onSelect: () {}, onSelect: () {},
)), )),
Expanded( Expanded(
flex: 3, flex: 4,
child: Padding( child: ListView(children: [
Container(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Row( height: MediaQuery.sizeOf(context).height,
children: [ child: Column(
Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
@ -88,9 +80,8 @@ class _RoutinesViewState extends State<RoutinesView> {
const Expanded(child: FetchRoutineScenesAutomation()), const Expanded(child: FetchRoutineScenesAutomation()),
], ],
), ),
],
),
), ),
]),
), ),
], ],
); );

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

@ -10,10 +10,23 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/style.dart'; import 'package:syncrow_web/utils/style.dart';
class SpaceTreeView extends StatelessWidget { class SpaceTreeView extends StatefulWidget {
final Function onSelect; final Function onSelect;
const SpaceTreeView({required this.onSelect, super.key}); const SpaceTreeView({required this.onSelect, super.key});
@override
State<SpaceTreeView> createState() => _SpaceTreeViewState();
}
class _SpaceTreeViewState extends State<SpaceTreeView> {
final ScrollController _scrollController = ScrollController();
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) { return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
@ -21,7 +34,6 @@ class SpaceTreeView extends StatelessWidget {
return Container( return Container(
height: MediaQuery.sizeOf(context).height, height: MediaQuery.sizeOf(context).height,
decoration: subSectionContainerDecoration, decoration: subSectionContainerDecoration,
// padding: const EdgeInsets.all(16.0),
child: state is SpaceTreeLoadingState child: state is SpaceTreeLoadingState
? const Center(child: CircularProgressIndicator()) ? const Center(child: CircularProgressIndicator())
: Column( : Column(
@ -33,55 +45,71 @@ class SpaceTreeView extends StatelessWidget {
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
Expanded( Expanded(
child: Padding( child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
Container(
width: MediaQuery.sizeOf(context).width * 0.5,
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: list.isEmpty child: list.isEmpty
? Center( ? Center(
child: Text( child: Text(
'No results found', 'No results found',
style: Theme.of(context).textTheme.bodySmall!.copyWith( style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: ColorsManager.lightGrayColor, // Gray when not selected color: ColorsManager.lightGrayColor,
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400,
), ),
), ),
) )
: ListView( : Scrollbar(
scrollbarOrientation: ScrollbarOrientation.left,
thumbVisibility: true,
controller: _scrollController,
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: ListView(
controller: _scrollController,
shrinkWrap: true, shrinkWrap: true,
children: list children: list
.map( .map(
(community) => CustomExpansionTileSpaceTree( (community) => CustomExpansionTileSpaceTree(
title: community.name, title: community.name,
isSelected: isSelected: state.selectedCommunities
state.selectedCommunities.contains(community.uuid), .contains(community.uuid),
isSoldCheck: isSoldCheck: state.selectedCommunities
state.selectedCommunities.contains(community.uuid), .contains(community.uuid),
onExpansionChanged: () { onExpansionChanged: () {
context context
.read<SpaceTreeBloc>() .read<SpaceTreeBloc>()
.add(OnCommunityExpanded(community.uuid)); .add(OnCommunityExpanded(community.uuid));
}, },
isExpanded: isExpanded: state.expandedCommunities
state.expandedCommunities.contains(community.uuid), .contains(community.uuid),
onItemSelected: () { onItemSelected: () {
context.read<SpaceTreeBloc>().add( context.read<SpaceTreeBloc>().add(
OnCommunitySelected(community.uuid, community.spaces)); OnCommunitySelected(
community.uuid, community.spaces));
onSelect(); widget.onSelect();
}, },
children: community.spaces.map((space) { children: community.spaces.map((space) {
return CustomExpansionTileSpaceTree( return CustomExpansionTileSpaceTree(
title: space.name, title: space.name,
isExpanded: state.expandedSpaces.contains(space.uuid), isExpanded:
state.expandedSpaces.contains(space.uuid),
onItemSelected: () { onItemSelected: () {
context.read<SpaceTreeBloc>().add(OnSpaceSelected( context.read<SpaceTreeBloc>().add(
community.uuid, space.uuid ?? '', space.children)); OnSpaceSelected(community.uuid,
onSelect(); space.uuid ?? '', space.children));
widget.onSelect();
}, },
onExpansionChanged: () { onExpansionChanged: () {
context.read<SpaceTreeBloc>().add( context.read<SpaceTreeBloc>().add(
OnSpaceExpanded(community.uuid, space.uuid ?? '')); OnSpaceExpanded(
community.uuid, space.uuid ?? ''));
}, },
isSelected: state.selectedSpaces.contains(space.uuid) || isSelected:
state.selectedSpaces.contains(space.uuid) ||
state.soldCheck.contains(space.uuid), state.soldCheck.contains(space.uuid),
isSoldCheck: state.soldCheck.contains(space.uuid), isSoldCheck: state.soldCheck.contains(space.uuid),
children: _buildNestedSpaces( children: _buildNestedSpaces(
@ -94,6 +122,73 @@ class SpaceTreeView extends StatelessWidget {
), ),
), ),
), ),
),
],
),
),
// 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(),
// ),
// ),
// ),
], ],
), ),
); );
@ -113,7 +208,7 @@ class SpaceTreeView extends StatelessWidget {
context context
.read<SpaceTreeBloc>() .read<SpaceTreeBloc>()
.add(OnSpaceSelected(communityId, child.uuid ?? '', child.children)); .add(OnSpaceSelected(communityId, child.uuid ?? '', child.children));
onSelect(); widget.onSelect();
}, },
onExpansionChanged: () { onExpansionChanged: () {
context.read<SpaceTreeBloc>().add(OnSpaceExpanded(communityId, child.uuid ?? '')); context.read<SpaceTreeBloc>().add(OnSpaceExpanded(communityId, child.uuid ?? ''));