fix(ui): display selected device name when add devices in DetailGroupScreen

This commit is contained in:
anhtunz
2025-02-11 11:55:51 +07:00
parent a98e84880b
commit bfeba03490
6 changed files with 124 additions and 98 deletions

View File

@@ -19,74 +19,84 @@ addDeviceDialog(BuildContext context, DetailGroupBloc detailGroupBloc,
devices.any((device) => device.thingId == element.thingId)); devices.any((device) => device.thingId == element.thingId));
} }
showDialog( showDialog(
context: context, context: context,
builder: (dialogContext) { builder: (dialogContext) {
return AlertDialog( return StatefulBuilder(
title: Center(child: Text(appLocalization(context).add_device_title)), builder: (context, setState) {
content: DropdownButtonFormField2<String>( return AlertDialog(
isExpanded: true, title:
decoration: InputDecoration( Center(child: Text(appLocalization(context).add_device_title)),
contentPadding: const EdgeInsets.symmetric(vertical: 10), content: DropdownButtonFormField2<String>(
border: OutlineInputBorder( isExpanded: true,
borderRadius: BorderRadius.circular(15), decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(vertical: 10),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
),
), ),
), hint: Text(
hint: Text( appLocalization(context).choose_device_dropdownButton,
appLocalization(context).choose_device_dropdownButton, style: const TextStyle(fontSize: 14),
style: const TextStyle(fontSize: 14), ),
), items: ownerDevices
items: ownerDevices .map(
.map((item) => DropdownMenuItem<String>( (item) => DropdownMenuItem<String>(
value: item.thingId, value: item.thingId,
child: StatefulBuilder(builder: (context, menuSetState) { enabled: false,
final isSelected = selectedItems.contains(item.thingId); child: StatefulBuilder(
final isNameSelected = selectedItems.contains(item.name); builder: (context, menuSetState) {
final isSelected =
return InkWell( selectedItems.contains(item.thingId);
onTap: () { return InkWell(
isSelected onTap: () {
? selectedItems.remove(item.thingId) if (isSelected) {
: selectedItems.add(item.thingId!); selectedItems.remove(item.thingId);
isNameSelected } else {
? selectedDevices.remove(item.name) selectedItems.add(item.thingId!);
: selectedDevices.add(item.name!); }
menuSetState(() {}); 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: [ .toList(),
if (isSelected) value: selectedItems.isEmpty ? null : selectedItems.last,
const Icon(Icons.check_box_outlined) buttonStyleData: const ButtonStyleData(
else padding: EdgeInsets.only(right: 8),
const Icon(Icons.check_box_outline_blank), ),
const SizedBox(width: 10), onChanged: (value) {},
Expanded( onSaved: (value) {},
child: Text( selectedItemBuilder: (context) {
item.name!, return ownerDevices.map((device) {
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) {
return Container( return Container(
alignment: AlignmentDirectional.center, alignment: AlignmentDirectional.center,
child: Text( child: Text(
item, selectedDevices.join(', '),
style: const TextStyle( style: const TextStyle(
fontSize: 14, fontSize: 14,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@@ -94,41 +104,50 @@ addDeviceDialog(BuildContext context, DetailGroupBloc detailGroupBloc,
maxLines: 1, maxLines: 1,
), ),
); );
}, }).toList();
).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: <Widget>[
TextButton(
onPressed: () {
Navigator.of(dialogContext).pop();
}, },
child: Text( iconStyleData: IconStyleData(
appLocalization(context).cancel_button_content, icon: IconConstants.instance
style: const TextStyle(color: Colors.red), .getMaterialIcon(Icons.arrow_drop_down)),
dropdownStyleData: DropdownStyleData(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
),
), ),
), ),
TextButton( actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(dialogContext).pop();
},
child: Text(
appLocalization(context).cancel_button_content,
style: const TextStyle(color: Colors.red),
),
),
TextButton(
onPressed: () async { onPressed: () async {
for (var device in selectedItems) { for (var device in selectedItems) {
await detailGroupBloc.addDeviceToGroup( await detailGroupBloc.addDeviceToGroup(
context, groupID, device); context, groupID, device);
await detailGroupBloc.getGroupDetail(groupID); await detailGroupBloc.getGroupDetail(groupID);
} }
Navigator.of(dialogContext).pop();
}, },
child: Text(appLocalization(context).add_device_title)) child: Text(appLocalization(context).add_device_title),
], ),
); ],
}); );
},
);
},
);
}
List<String> getDevices(List<Device> devices, List<String> selectedDevices) {
return devices
.where((device) => selectedDevices.contains(device.thingId))
.map((device) => device.name ?? '')
.toList();
} }

View File

@@ -62,8 +62,10 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
} }
if (theme == AppThemes.LIGHT.name) { if (theme == AppThemes.LIGHT.name) {
isLight = true; isLight = true;
} else { } else if (theme == AppThemes.DARK.name) {
isLight = false; isLight = false;
} else {
isLight = true;
} }
mainBloc.sinkIsVNIcon.add(isVN); mainBloc.sinkIsVNIcon.add(isVN);
mainBloc.sinkThemeMode.add(isLight); mainBloc.sinkThemeMode.add(isLight);
@@ -325,7 +327,7 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
controller: controller, controller: controller,
screens: _buildScreens(), screens: _buildScreens(),
items: _navBarsItems(), items: _navBarsItems(),
handleAndroidBackButtonPress: true, handleAndroidBackButtonPress: false,
resizeToAvoidBottomInset: true, resizeToAvoidBottomInset: true,
stateManagement: true, stateManagement: true,
backgroundColor: backgroundColor:

View File

@@ -245,9 +245,7 @@ class _MapScreenState extends State<MapScreen> with WidgetsBindingObserver {
hasOtherState = true; hasOtherState = true;
} }
} }
// log("Has state = 1: $hasStateOne, Has other state: $hasOtherState");
if (hasStateOne) { if (hasStateOne) {
return true; // flameIcon return true; // flameIcon
} else if (hasOtherState) { } else if (hasOtherState) {

View File

@@ -23,4 +23,6 @@ class ApplicationConstants {
static const DEVICE_NOTIFICATIONS_SETTINGS = "/device-notifications-settings"; static const DEVICE_NOTIFICATIONS_SETTINGS = "/device-notifications-settings";
static const OWNER_GROUP = "owner"; static const OWNER_GROUP = "owner";
static const PARTICIPANT_GROUP = "participant"; static const PARTICIPANT_GROUP = "participant";
static const NO_DATA = "no_data";
static const LOADING = "loading";
} }

View File

@@ -136,9 +136,12 @@ class DeviceUtils {
List<Device> sortDeviceByState(List<Device> devices) { List<Device> sortDeviceByState(List<Device> devices) {
List<Device> sortedDevices = List.from(devices); List<Device> sortedDevices = List.from(devices);
sortedDevices.sort((a, b) { sortedDevices.sort((a, b) {
int stateOrder = [2, 1, 3, 0, -1, 3].indexOf(a.state!) - int stateOrder = [2, 1, 3, 0, -1].indexOf(a.state!) -
[2, 1, 3, 0, -1, 3].indexOf(b.state!); [2, 1, 3, 0, -1].indexOf(b.state!);
return stateOrder; if (stateOrder != 0) {
return stateOrder;
}
return a.name!.compareTo(b.name!);
}); });
return sortedDevices; return sortedDevices;

View File

@@ -21,3 +21,5 @@ void showSnackBarResponseByStatusCodeNoIcon(BuildContext context, int statusCode
showNoIconTopSnackBar(context, failedMessage, Colors.red, Colors.white); showNoIconTopSnackBar(context, failedMessage, Colors.red, Colors.white);
} }
} }