mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 07:07:19 +00:00
Enhanced the side tree design
This commit is contained in:
Abdullah Alassaf
@ -69,7 +69,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
|
||||
},
|
||||
)),
|
||||
Expanded(
|
||||
flex: 3,
|
||||
flex: 4,
|
||||
child: state is DeviceManagementLoading
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
: Column(
|
||||
|
||||
@ -33,64 +33,55 @@ class _RoutinesViewState extends State<RoutinesView> {
|
||||
return Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child:
|
||||
// SideSpacesView(
|
||||
// onSelectAction: (String communityId, String spaceId) {
|
||||
// // context.read<RoutineBloc>()
|
||||
// // ..add(LoadScenes(spaceId, communityId))
|
||||
// // ..add(LoadAutomation(spaceId));
|
||||
// },
|
||||
// )
|
||||
SpaceTreeView(
|
||||
child: SpaceTreeView(
|
||||
onSelect: () {},
|
||||
)),
|
||||
Expanded(
|
||||
flex: 3,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Row(
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Create New Routines",
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
||||
color: ColorsManager.grayColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
RoutineViewCard(
|
||||
onTap: () {
|
||||
if (context.read<SpaceTreeBloc>().selectedCommunityId.isNotEmpty &&
|
||||
context.read<SpaceTreeBloc>().selectedSpaceId.isNotEmpty) {
|
||||
context.read<RoutineBloc>().add(
|
||||
(ResetRoutineState()),
|
||||
);
|
||||
BlocProvider.of<RoutineBloc>(context).add(
|
||||
const CreateNewRoutineViewEvent(createRoutineView: true),
|
||||
);
|
||||
} else {
|
||||
CustomSnackBar.redSnackBar('Please select a space');
|
||||
}
|
||||
},
|
||||
icon: Icons.add,
|
||||
textString: '',
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
const Expanded(child: FetchRoutineScenesAutomation()),
|
||||
],
|
||||
),
|
||||
],
|
||||
flex: 4,
|
||||
child: ListView(children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
height: MediaQuery.sizeOf(context).height,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Create New Routines",
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
||||
color: ColorsManager.grayColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
RoutineViewCard(
|
||||
onTap: () {
|
||||
if (context.read<SpaceTreeBloc>().selectedCommunityId.isNotEmpty &&
|
||||
context.read<SpaceTreeBloc>().selectedSpaceId.isNotEmpty) {
|
||||
context.read<RoutineBloc>().add(
|
||||
(ResetRoutineState()),
|
||||
);
|
||||
BlocProvider.of<RoutineBloc>(context).add(
|
||||
const CreateNewRoutineViewEvent(createRoutineView: true),
|
||||
);
|
||||
} else {
|
||||
CustomSnackBar.redSnackBar('Please select a space');
|
||||
}
|
||||
},
|
||||
icon: Icons.add,
|
||||
textString: '',
|
||||
),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
const Expanded(child: FetchRoutineScenesAutomation()),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@ -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/style.dart';
|
||||
|
||||
class SpaceTreeView extends StatelessWidget {
|
||||
class SpaceTreeView extends StatefulWidget {
|
||||
final Function onSelect;
|
||||
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
|
||||
Widget build(BuildContext context) {
|
||||
return BlocBuilder<SpaceTreeBloc, SpaceTreeState>(builder: (context, state) {
|
||||
@ -21,7 +34,6 @@ class SpaceTreeView extends StatelessWidget {
|
||||
return Container(
|
||||
height: MediaQuery.sizeOf(context).height,
|
||||
decoration: subSectionContainerDecoration,
|
||||
// padding: const EdgeInsets.all(16.0),
|
||||
child: state is SpaceTreeLoadingState
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
: Column(
|
||||
@ -33,67 +45,150 @@ class SpaceTreeView extends StatelessWidget {
|
||||
),
|
||||
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,
|
||||
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,
|
||||
),
|
||||
),
|
||||
)
|
||||
: 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.uuid,
|
||||
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.uuid),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
)
|
||||
: 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(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// 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
|
||||
.read<SpaceTreeBloc>()
|
||||
.add(OnSpaceSelected(communityId, child.uuid ?? '', child.children));
|
||||
onSelect();
|
||||
widget.onSelect();
|
||||
},
|
||||
onExpansionChanged: () {
|
||||
context.read<SpaceTreeBloc>().add(OnSpaceExpanded(communityId, child.uuid ?? ''));
|
||||
|
||||
Reference in New Issue
Block a user