From bfeba034907ed7a70cbb1c14caf38ba6950c53a0 Mon Sep 17 00:00:00 2001 From: anhtunz Date: Tue, 11 Feb 2025 11:55:51 +0700 Subject: [PATCH] fix(ui): display selected device name when add devices in DetailGroupScreen --- .../add_device_to_group_dialog.dart | 199 ++++++++++-------- lib/feature/main/main_screen.dart | 6 +- lib/feature/map/map_screen.dart | 4 +- lib/product/constant/app/app_constants.dart | 2 + lib/product/utils/device_utils.dart | 9 +- lib/product/utils/response_status_utils.dart | 2 + 6 files changed, 124 insertions(+), 98 deletions(-) diff --git a/lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart b/lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart index dd1c2a7..1741121 100644 --- a/lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart +++ b/lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart @@ -19,74 +19,84 @@ addDeviceDialog(BuildContext context, DetailGroupBloc detailGroupBloc, devices.any((device) => device.thingId == element.thingId)); } showDialog( - context: context, - builder: (dialogContext) { - return AlertDialog( - title: Center(child: Text(appLocalization(context).add_device_title)), - content: DropdownButtonFormField2( - isExpanded: true, - decoration: InputDecoration( - contentPadding: const EdgeInsets.symmetric(vertical: 10), - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(15), + context: context, + builder: (dialogContext) { + return StatefulBuilder( + builder: (context, setState) { + return AlertDialog( + title: + Center(child: Text(appLocalization(context).add_device_title)), + content: DropdownButtonFormField2( + isExpanded: true, + decoration: InputDecoration( + contentPadding: const EdgeInsets.symmetric(vertical: 10), + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(15), + ), ), - ), - hint: Text( - appLocalization(context).choose_device_dropdownButton, - style: const TextStyle(fontSize: 14), - ), - items: ownerDevices - .map((item) => DropdownMenuItem( - value: item.thingId, - child: StatefulBuilder(builder: (context, menuSetState) { - final isSelected = selectedItems.contains(item.thingId); - final isNameSelected = selectedItems.contains(item.name); - - return InkWell( - onTap: () { - isSelected - ? selectedItems.remove(item.thingId) - : selectedItems.add(item.thingId!); - isNameSelected - ? selectedDevices.remove(item.name) - : selectedDevices.add(item.name!); - menuSetState(() {}); + hint: Text( + appLocalization(context).choose_device_dropdownButton, + style: const TextStyle(fontSize: 14), + ), + items: ownerDevices + .map( + (item) => DropdownMenuItem( + value: item.thingId, + enabled: false, + child: StatefulBuilder( + builder: (context, menuSetState) { + final isSelected = + selectedItems.contains(item.thingId); + return InkWell( + onTap: () { + if (isSelected) { + selectedItems.remove(item.thingId); + } else { + selectedItems.add(item.thingId!); + } + selectedDevices = + getDevices(ownerDevices, selectedItems); + setState(() {}); + menuSetState(() {}); + }, + child: Container( + height: double.infinity, + padding: + const EdgeInsets.symmetric(horizontal: 16.0), + child: Row( + children: [ + if (isSelected) + const Icon(Icons.check_box_outlined) + else + const Icon(Icons.check_box_outline_blank), + const SizedBox(width: 10), + Expanded( + child: Text( + item.name!, + style: const TextStyle(fontSize: 14), + ), + ), + ], + ), + ), + ); }, - child: SizedBox( - height: double.infinity, - child: Row( - children: [ - if (isSelected) - const Icon(Icons.check_box_outlined) - else - const Icon(Icons.check_box_outline_blank), - const SizedBox(width: 10), - Expanded( - child: Text( - item.name!, - style: const TextStyle(fontSize: 14), - )) - ], - ), - ), - ); - }))) - .toList(), - buttonStyleData: const ButtonStyleData( - padding: EdgeInsets.only(right: 8), - ), - onChanged: (value) { - // thingID = value!; - // setState(() {}); - }, - onSaved: (value) {}, - selectedItemBuilder: (context) { - return selectedDevices.map( - (item) { + ), + ), + ) + .toList(), + value: selectedItems.isEmpty ? null : selectedItems.last, + buttonStyleData: const ButtonStyleData( + padding: EdgeInsets.only(right: 8), + ), + onChanged: (value) {}, + onSaved: (value) {}, + selectedItemBuilder: (context) { + return ownerDevices.map((device) { return Container( alignment: AlignmentDirectional.center, child: Text( - item, + selectedDevices.join(', '), style: const TextStyle( fontSize: 14, overflow: TextOverflow.ellipsis, @@ -94,41 +104,50 @@ addDeviceDialog(BuildContext context, DetailGroupBloc detailGroupBloc, maxLines: 1, ), ); - }, - ).toList(); - }, - iconStyleData: IconStyleData( - icon: IconConstants.instance - .getMaterialIcon(Icons.arrow_drop_down)), - dropdownStyleData: DropdownStyleData( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(15), - ), - ), - menuItemStyleData: const MenuItemStyleData( - padding: EdgeInsets.symmetric(horizontal: 16), - ), - ), - actions: [ - TextButton( - onPressed: () { - Navigator.of(dialogContext).pop(); + }).toList(); }, - child: Text( - appLocalization(context).cancel_button_content, - style: const TextStyle(color: Colors.red), + iconStyleData: IconStyleData( + icon: IconConstants.instance + .getMaterialIcon(Icons.arrow_drop_down)), + dropdownStyleData: DropdownStyleData( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + ), ), ), - TextButton( + actions: [ + TextButton( + onPressed: () { + Navigator.of(dialogContext).pop(); + }, + child: Text( + appLocalization(context).cancel_button_content, + style: const TextStyle(color: Colors.red), + ), + ), + TextButton( onPressed: () async { for (var device in selectedItems) { await detailGroupBloc.addDeviceToGroup( context, groupID, device); await detailGroupBloc.getGroupDetail(groupID); } + + Navigator.of(dialogContext).pop(); }, - child: Text(appLocalization(context).add_device_title)) - ], - ); - }); + child: Text(appLocalization(context).add_device_title), + ), + ], + ); + }, + ); + }, + ); +} + +List getDevices(List devices, List selectedDevices) { + return devices + .where((device) => selectedDevices.contains(device.thingId)) + .map((device) => device.name ?? '') + .toList(); } diff --git a/lib/feature/main/main_screen.dart b/lib/feature/main/main_screen.dart index 86538aa..36b843b 100644 --- a/lib/feature/main/main_screen.dart +++ b/lib/feature/main/main_screen.dart @@ -62,8 +62,10 @@ class _MainScreenState extends State with WidgetsBindingObserver { } if (theme == AppThemes.LIGHT.name) { isLight = true; - } else { + } else if (theme == AppThemes.DARK.name) { isLight = false; + } else { + isLight = true; } mainBloc.sinkIsVNIcon.add(isVN); mainBloc.sinkThemeMode.add(isLight); @@ -325,7 +327,7 @@ class _MainScreenState extends State with WidgetsBindingObserver { controller: controller, screens: _buildScreens(), items: _navBarsItems(), - handleAndroidBackButtonPress: true, + handleAndroidBackButtonPress: false, resizeToAvoidBottomInset: true, stateManagement: true, backgroundColor: diff --git a/lib/feature/map/map_screen.dart b/lib/feature/map/map_screen.dart index 3294c27..c830c3d 100644 --- a/lib/feature/map/map_screen.dart +++ b/lib/feature/map/map_screen.dart @@ -245,9 +245,7 @@ class _MapScreenState extends State with WidgetsBindingObserver { hasOtherState = true; } } - - // log("Has state = 1: $hasStateOne, Has other state: $hasOtherState"); - + if (hasStateOne) { return true; // flameIcon } else if (hasOtherState) { diff --git a/lib/product/constant/app/app_constants.dart b/lib/product/constant/app/app_constants.dart index d02ee77..cffe097 100644 --- a/lib/product/constant/app/app_constants.dart +++ b/lib/product/constant/app/app_constants.dart @@ -23,4 +23,6 @@ class ApplicationConstants { static const DEVICE_NOTIFICATIONS_SETTINGS = "/device-notifications-settings"; static const OWNER_GROUP = "owner"; static const PARTICIPANT_GROUP = "participant"; + static const NO_DATA = "no_data"; + static const LOADING = "loading"; } diff --git a/lib/product/utils/device_utils.dart b/lib/product/utils/device_utils.dart index 342e20f..b62bcf1 100644 --- a/lib/product/utils/device_utils.dart +++ b/lib/product/utils/device_utils.dart @@ -136,9 +136,12 @@ class DeviceUtils { List sortDeviceByState(List devices) { List sortedDevices = List.from(devices); sortedDevices.sort((a, b) { - int stateOrder = [2, 1, 3, 0, -1, 3].indexOf(a.state!) - - [2, 1, 3, 0, -1, 3].indexOf(b.state!); - return stateOrder; + int stateOrder = [2, 1, 3, 0, -1].indexOf(a.state!) - + [2, 1, 3, 0, -1].indexOf(b.state!); + if (stateOrder != 0) { + return stateOrder; + } + return a.name!.compareTo(b.name!); }); return sortedDevices; diff --git a/lib/product/utils/response_status_utils.dart b/lib/product/utils/response_status_utils.dart index c1cb631..576c924 100644 --- a/lib/product/utils/response_status_utils.dart +++ b/lib/product/utils/response_status_utils.dart @@ -21,3 +21,5 @@ void showSnackBarResponseByStatusCodeNoIcon(BuildContext context, int statusCode showNoIconTopSnackBar(context, failedMessage, Colors.red, Colors.white); } } + +