diff --git a/lib/pages/routines/create_new_routines/commu_dropdown.dart b/lib/pages/routines/create_new_routines/commu_dropdown.dart index 13e2a437..ec031160 100644 --- a/lib/pages/routines/create_new_routines/commu_dropdown.dart +++ b/lib/pages/routines/create_new_routines/commu_dropdown.dart @@ -1,16 +1,16 @@ +import 'package:dropdown_button2/dropdown_button2.dart'; 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/spaces_management/all_spaces/model/community_model.dart'; import 'package:syncrow_web/utils/color_manager.dart'; -import 'package:syncrow_web/utils/style.dart'; class CommunityDropdown extends StatelessWidget { final String? selectedValue; final Function(String?) onChanged; + final TextEditingController _searchController = TextEditingController(); - const CommunityDropdown({ + CommunityDropdown({ Key? key, required this.selectedValue, required this.onChanged, @@ -34,59 +34,125 @@ class CommunityDropdown extends StatelessWidget { const SizedBox(height: 8), BlocBuilder( builder: (context, state) { - List communities = state.isSearching - ? state.filteredCommunity - : state.communityList; - return SizedBox( - child: DropdownButtonFormField( - dropdownColor: ColorsManager.whiteColors, + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + ), + child: DropdownButton2( + underline: SizedBox(), value: selectedValue, - items: communities.map((community) { + items: state.communityList.map((community) { return DropdownMenuItem( value: community.uuid, - child: Text(' ${community.name}'), + child: Text( + ' ${community.name}', + overflow: TextOverflow.ellipsis, + maxLines: 1, + ), ); }).toList(), onChanged: onChanged, - icon: const SizedBox.shrink(), - borderRadius: const BorderRadius.all(Radius.circular(10)), + style: TextStyle(color: Colors.black), hint: Padding( padding: EdgeInsets.only(left: 10), child: Text( - "Please Select", + " Please Select", style: Theme.of(context).textTheme.bodySmall!.copyWith( color: ColorsManager.textGray, ), ), ), - decoration: inputTextFormDeco().copyWith( - contentPadding: EdgeInsets.zero, - suffixIcon: Container( - padding: EdgeInsets.zero, - width: 70, - height: 45, - decoration: BoxDecoration( - color: Colors.grey[100], - borderRadius: const BorderRadius.only( - bottomRight: Radius.circular(10), - topRight: Radius.circular(10), + customButton: Container( + height: 45, + decoration: BoxDecoration( + border: + Border.all(color: ColorsManager.textGray, width: 1.0), + borderRadius: BorderRadius.circular(10), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + flex: 5, + child: Text( + selectedValue != null + ? " ${state.communityList.firstWhere((element) => element.uuid == selectedValue).name}" + : ' Please Select', + style: + Theme.of(context).textTheme.bodySmall!.copyWith( + color: selectedValue != null + ? Colors.black + : ColorsManager.textGray, + ), + overflow: TextOverflow.ellipsis, + ), ), - border: Border.all( - color: ColorsManager.textGray, - width: 1.0, + Expanded( + child: Container( + decoration: BoxDecoration( + color: Colors.grey[100], + borderRadius: const BorderRadius.only( + topRight: Radius.circular(10), + bottomRight: Radius.circular(10), + ), + ), + height: 45, + child: const Icon( + Icons.keyboard_arrow_down, + color: ColorsManager.textGray, + ), + ), ), - ), - child: const Center( - child: Icon( - Icons.keyboard_arrow_down, - color: ColorsManager.textGray, + ], + ), + ), + dropdownStyleData: DropdownStyleData( + maxHeight: MediaQuery.of(context).size.height * 0.4, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + ), + ), + dropdownSearchData: DropdownSearchData( + searchController: _searchController, + searchInnerWidgetHeight: 50, + searchInnerWidget: Container( + height: 50, + padding: const EdgeInsets.symmetric( + horizontal: 8, vertical: 4), + child: TextFormField( + style: const TextStyle(color: Colors.black), + controller: _searchController, + decoration: InputDecoration( + isDense: true, + contentPadding: const EdgeInsets.symmetric( + horizontal: 10, + vertical: 12, + ), + hintText: 'Search for community...', + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(8), + ), ), ), ), + searchMatchFn: (item, searchValue) { + final communityName = + (item.child as Text).data?.toLowerCase() ?? ''; + return communityName + .contains(searchValue.toLowerCase().trim()); + }, + ), + onMenuStateChange: (isOpen) { + if (!isOpen) { + _searchController.clear(); + } + }, + menuItemStyleData: const MenuItemStyleData( + height: 40, ), ), - ); + )); }, ), ], diff --git a/lib/pages/routines/create_new_routines/create_new_routines.dart b/lib/pages/routines/create_new_routines/create_new_routines.dart index 5d1021f2..baf10748 100644 --- a/lib/pages/routines/create_new_routines/create_new_routines.dart +++ b/lib/pages/routines/create_new_routines/create_new_routines.dart @@ -62,28 +62,34 @@ class _CreateNewRoutinesDialogState extends State { mainAxisSize: MainAxisSize.min, children: [ const Divider(), - CommunityDropdown( - selectedValue: _selectedCommunity, - onChanged: (String? newValue) { - setState(() { - _selectedCommunity = newValue; - _selectedSpace = null; - }); - if (newValue != null) { - _fetchSpaces(newValue); - } - }, + Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: CommunityDropdown( + selectedValue: _selectedCommunity, + onChanged: (String? newValue) { + setState(() { + _selectedCommunity = newValue; + _selectedSpace = null; + }); + if (newValue != null) { + _fetchSpaces(newValue); + } + }, + ), ), - const SizedBox(height: 16), - SpaceDropdown( - hintMessage: spaceHint, - spaces: spaces, - selectedValue: _selectedSpace, - onChanged: (String? newValue) { - setState(() { - _selectedSpace = newValue; - }); - }, + const SizedBox(height: 5), + Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SpaceDropdown( + hintMessage: spaceHint, + spaces: spaces, + selectedValue: _selectedSpace, + onChanged: (String? newValue) { + setState(() { + _selectedSpace = newValue; + }); + }, + ), ), const Divider(), Row( @@ -96,7 +102,6 @@ class _CreateNewRoutinesDialogState extends State { ), child: TextButton( onPressed: () { - Navigator.of(context).pop(); }, child: Text( @@ -139,6 +144,7 @@ class _CreateNewRoutinesDialogState extends State { ), ], ), + SizedBox(height: 10), ], ), ); diff --git a/lib/pages/routines/create_new_routines/space_dropdown.dart b/lib/pages/routines/create_new_routines/space_dropdown.dart index f207c736..a26ff9f4 100644 --- a/lib/pages/routines/create_new_routines/space_dropdown.dart +++ b/lib/pages/routines/create_new_routines/space_dropdown.dart @@ -1,7 +1,8 @@ +import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:flutter/material.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 SpaceDropdown extends StatelessWidget { final List spaces; @@ -33,62 +34,108 @@ class SpaceDropdown extends StatelessWidget { ), ), const SizedBox(height: 8), - DropdownButtonFormField( - value: selectedValue, - items: spaces.map((space) { - return DropdownMenuItem( - value: space.uuid, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Text( - ' ${space.name}', - style: Theme.of(context).textTheme.bodyMedium!.copyWith( - fontSize: 12, - color: ColorsManager.blackColor, - ), - ), - Text( - ' ${space.lastThreeParents}', - style: Theme.of(context).textTheme.bodyMedium!.copyWith( - fontSize: 12, - ), - ), - ], - )); - }).toList(), - onChanged: onChanged, - icon: const SizedBox.shrink(), - borderRadius: const BorderRadius.all(Radius.circular(10)), - hint: Padding( - padding: const EdgeInsets.only(left: 10), - child: Text( - hintMessage, - style: Theme.of(context).textTheme.bodySmall!.copyWith( - color: ColorsManager.textGray, - ), + SizedBox( + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), ), - ), - decoration: inputTextFormDeco().copyWith( - contentPadding: EdgeInsets.zero, - suffixIcon: Container( - width: 70, - height: 45, - decoration: BoxDecoration( - color: Colors.grey[200], - borderRadius: const BorderRadius.only( - bottomRight: Radius.circular(10), - topRight: Radius.circular(10), - ), - border: Border.all( - color: ColorsManager.textGray, - width: 1.0, + child: DropdownButton2( + underline: const SizedBox(), + value: selectedValue, + items: spaces.map((space) { + return DropdownMenuItem( + value: space.uuid, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Text( + ' ${space.name}', + style: + Theme.of(context).textTheme.bodyMedium!.copyWith( + fontSize: 12, + color: ColorsManager.blackColor, + ), + ), + Text( + ' ${space.lastThreeParents}', + style: + Theme.of(context).textTheme.bodyMedium!.copyWith( + fontSize: 12, + ), + ), + ], + ), + ); + }).toList(), + onChanged: onChanged, + style: TextStyle(color: Colors.black), + hint: Padding( + padding: const EdgeInsets.only(left: 10), + child: Text( + hintMessage, + style: Theme.of(context).textTheme.bodySmall!.copyWith( + color: ColorsManager.textGray, + ), ), ), - child: const Icon( - Icons.keyboard_arrow_down, - color: ColorsManager.textGray, + customButton: Container( + height: 45, + decoration: BoxDecoration( + border: + Border.all(color: ColorsManager.textGray, width: 1.0), + borderRadius: BorderRadius.circular(10), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + flex: 5, + child: Padding( + padding: const EdgeInsets.only(left: 10), + child: Text( + selectedValue != null + ? spaces + .firstWhere((e) => e.uuid == selectedValue) + .name + : hintMessage, + style: + Theme.of(context).textTheme.bodySmall!.copyWith( + color: selectedValue != null + ? Colors.black + : ColorsManager.textGray, + ), + overflow: TextOverflow.ellipsis, + ), + ), + ), + Expanded( + child: Container( + decoration: BoxDecoration( + color: Colors.grey[200], + borderRadius: const BorderRadius.only( + topRight: Radius.circular(10), + bottomRight: Radius.circular(10), + ), + ), + height: 45, + child: const Icon( + Icons.keyboard_arrow_down, + color: ColorsManager.textGray, + ), + ), + ), + ], + ), + ), + dropdownStyleData: DropdownStyleData( + maxHeight: MediaQuery.of(context).size.height * 0.4, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + ), + ), + menuItemStyleData: const MenuItemStyleData( + height: 60, ), ), ), diff --git a/lib/pages/routines/view/routines_view.dart b/lib/pages/routines/view/routines_view.dart index 962b3b89..83ab82b9 100644 --- a/lib/pages/routines/view/routines_view.dart +++ b/lib/pages/routines/view/routines_view.dart @@ -33,8 +33,6 @@ class _RoutinesViewState extends State { communityID: communityId, spaceID: spaceId)); await Future.delayed(const Duration(seconds: 1)); routineBloc.add(const CreateNewRoutineViewEvent(createRoutineView: true)); - await Future.delayed(const Duration(milliseconds:500)); - _bloc.add(const ResetSelectedEvent()); } @override