mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 07:07:19 +00:00
sidebar widget
This commit is contained in:
@ -6,12 +6,14 @@ import 'package:syncrow_web/utils/constants/assets.dart';
|
|||||||
class CustomSearchBar extends StatelessWidget {
|
class CustomSearchBar extends StatelessWidget {
|
||||||
final TextEditingController? controller;
|
final TextEditingController? controller;
|
||||||
final String hintText;
|
final String hintText;
|
||||||
|
final Function(String)? onSearchChanged; // Callback for search input changes
|
||||||
|
|
||||||
const CustomSearchBar({
|
const CustomSearchBar({
|
||||||
Key? key,
|
super.key,
|
||||||
this.controller,
|
this.controller,
|
||||||
this.hintText = 'Search',
|
this.hintText = 'Search',
|
||||||
}) : super(key: key);
|
this.onSearchChanged,
|
||||||
|
});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
@ -39,6 +41,7 @@ class CustomSearchBar extends StatelessWidget {
|
|||||||
style: const TextStyle(
|
style: const TextStyle(
|
||||||
color: Colors.black,
|
color: Colors.black,
|
||||||
),
|
),
|
||||||
|
onChanged: onSearchChanged, // Call the callback on text change
|
||||||
decoration: InputDecoration(
|
decoration: InputDecoration(
|
||||||
filled: true,
|
filled: true,
|
||||||
fillColor: ColorsManager.textFieldGreyColor,
|
fillColor: ColorsManager.textFieldGreyColor,
|
||||||
|
6
lib/pages/spaces_management/model/community_model.dart
Normal file
6
lib/pages/spaces_management/model/community_model.dart
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
class Community {
|
||||||
|
final String name;
|
||||||
|
final List<Community>? children; // Sub-communities
|
||||||
|
|
||||||
|
Community({required this.name, this.children});
|
||||||
|
}
|
@ -1,6 +1,7 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_svg/flutter_svg.dart';
|
import 'package:flutter_svg/svg.dart';
|
||||||
import 'package:syncrow_web/common/search_bar.dart';
|
import 'package:syncrow_web/common/search_bar.dart';
|
||||||
|
import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
|
||||||
import 'package:syncrow_web/pages/spaces_management/view/community_tile.dart';
|
import 'package:syncrow_web/pages/spaces_management/view/community_tile.dart';
|
||||||
import 'package:syncrow_web/utils/color_manager.dart';
|
import 'package:syncrow_web/utils/color_manager.dart';
|
||||||
import 'package:syncrow_web/utils/constants/assets.dart';
|
import 'package:syncrow_web/utils/constants/assets.dart';
|
||||||
@ -17,6 +18,19 @@ class SidebarWidget extends StatefulWidget {
|
|||||||
|
|
||||||
class _SidebarWidgetState extends State<SidebarWidget> {
|
class _SidebarWidgetState extends State<SidebarWidget> {
|
||||||
String? _expandedTile;
|
String? _expandedTile;
|
||||||
|
String _searchQuery = ''; // Track search query
|
||||||
|
|
||||||
|
// List of all communities
|
||||||
|
final List<Community> _communities = [
|
||||||
|
Community(name: 'Downtown Dubai'),
|
||||||
|
Community(name: 'Dubai Creek Harbour'),
|
||||||
|
Community(
|
||||||
|
name: 'Dubai Hills Estate',
|
||||||
|
children: [
|
||||||
|
Community(name: 'South Side'), // Nested community
|
||||||
|
],
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
// A helper method to handle the expansion logic for CustomExpansionTile
|
// A helper method to handle the expansion logic for CustomExpansionTile
|
||||||
void _handleExpansionChange(String title, bool expanded) {
|
void _handleExpansionChange(String title, bool expanded) {
|
||||||
@ -26,8 +40,20 @@ class _SidebarWidgetState extends State<SidebarWidget> {
|
|||||||
widget.onCommunitySelected?.call(title);
|
widget.onCommunitySelected?.call(title);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
List<Community> _filterCommunities() {
|
||||||
|
if (_searchQuery.isEmpty) {
|
||||||
|
return _communities;
|
||||||
|
}
|
||||||
|
return _communities
|
||||||
|
.where((community) =>
|
||||||
|
community.name.toLowerCase().contains(_searchQuery.toLowerCase()))
|
||||||
|
.toList();
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
List<Community> filteredCommunities = _filterCommunities();
|
||||||
|
|
||||||
return Container(
|
return Container(
|
||||||
width: 300,
|
width: 300,
|
||||||
decoration: subSectionContainerDecoration,
|
decoration: subSectionContainerDecoration,
|
||||||
@ -69,39 +95,41 @@ class _SidebarWidgetState extends State<SidebarWidget> {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
// Search bar
|
// Search bar
|
||||||
const CustomSearchBar(),
|
CustomSearchBar(
|
||||||
|
onSearchChanged: (query) {
|
||||||
|
setState(() {
|
||||||
|
_searchQuery = query; // Update search query on text change
|
||||||
|
});
|
||||||
|
},
|
||||||
|
),
|
||||||
const SizedBox(height: 16),
|
const SizedBox(height: 16),
|
||||||
// Community list with one item expanded at a time
|
// Community list with one item expanded at a time
|
||||||
Expanded(
|
Expanded(
|
||||||
child: ListView(
|
child: ListView.builder(
|
||||||
children: [
|
itemCount: filteredCommunities.length,
|
||||||
CommunityTile(
|
itemBuilder: (context, index) {
|
||||||
title: "Downtown Dubai",
|
Community community = filteredCommunities[index];
|
||||||
expandedTile: _expandedTile ?? '',
|
return _buildCommunityTile(community);
|
||||||
onExpansionChanged: _handleExpansionChange,
|
},
|
||||||
),
|
|
||||||
CommunityTile(
|
|
||||||
title: 'Dubai Creek Harbour',
|
|
||||||
expandedTile: _expandedTile ?? '',
|
|
||||||
onExpansionChanged: _handleExpansionChange,
|
|
||||||
),
|
|
||||||
CommunityTile(
|
|
||||||
title: 'Dubai Hills Estate',
|
|
||||||
expandedTile: _expandedTile ?? '',
|
|
||||||
onExpansionChanged: _handleExpansionChange,
|
|
||||||
children: [
|
|
||||||
CommunityTile(
|
|
||||||
title: 'South Side',
|
|
||||||
expandedTile: _expandedTile ?? '',
|
|
||||||
onExpansionChanged: _handleExpansionChange,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _buildCommunityTile(Community community) {
|
||||||
|
bool hasChildren =
|
||||||
|
community.children != null && community.children!.isNotEmpty;
|
||||||
|
return CommunityTile(
|
||||||
|
title: community.name,
|
||||||
|
expandedTile: _expandedTile ?? '',
|
||||||
|
onExpansionChanged: _handleExpansionChange,
|
||||||
|
children: hasChildren
|
||||||
|
? community.children!
|
||||||
|
.map((child) => _buildCommunityTile(child))
|
||||||
|
.toList()
|
||||||
|
: null, // Recursively render sub-communities
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ import 'package:syncrow_web/pages/spaces_management/view/sidebar_widget.dart';
|
|||||||
import 'package:syncrow_web/utils/color_manager.dart';
|
import 'package:syncrow_web/utils/color_manager.dart';
|
||||||
import 'package:syncrow_web/utils/constants/assets.dart';
|
import 'package:syncrow_web/utils/constants/assets.dart';
|
||||||
|
|
||||||
class SpaceManagementPage extends StatefulWidget {
|
class SpaceManagementPage extends StatefulWidget with HelperResponsiveLayout {
|
||||||
@override
|
@override
|
||||||
SpaceManagementPageState createState() => SpaceManagementPageState();
|
SpaceManagementPageState createState() => SpaceManagementPageState();
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user