tuanta/sfm_app_final
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

199
lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart
View File

@@ -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<String>(
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<String>(
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<String>(
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<String>(
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: <Widget>[
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: <Widget>[
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<String> getDevices(List<Device> devices, List<String> selectedDevices) {
return devices
.where((device) => selectedDevices.contains(device.thingId))
.map((device) => device.name ?? '')
.toList();
}