diff --git a/lib/pages/spaces_management/widgets/add_device_type_widget.dart b/lib/pages/spaces_management/widgets/add_device_type_widget.dart index d069b391..2c88b866 100644 --- a/lib/pages/spaces_management/widgets/add_device_type_widget.dart +++ b/lib/pages/spaces_management/widgets/add_device_type_widget.dart @@ -13,24 +13,27 @@ class AddDeviceWidget extends StatefulWidget { final ValueChanged>? onProductsSelected; final List? initialSelectedProducts; - const AddDeviceWidget( - {super.key, this.products, this.initialSelectedProducts, this.onProductsSelected}); + const AddDeviceWidget({ + super.key, + this.products, + this.initialSelectedProducts, + this.onProductsSelected, + }); @override _AddDeviceWidgetState createState() => _AddDeviceWidgetState(); } class _AddDeviceWidgetState extends State { - late ScrollController _scrollController; - List productCounts = []; + late final ScrollController _scrollController; + late List productCounts; @override void initState() { super.initState(); _scrollController = ScrollController(); - if (widget.initialSelectedProducts != null && widget.initialSelectedProducts!.isNotEmpty) { - productCounts = List.from(widget.initialSelectedProducts!); - } + productCounts = + widget.initialSelectedProducts != null ? List.from(widget.initialSelectedProducts!) : []; } @override @@ -41,86 +44,72 @@ class _AddDeviceWidgetState extends State { @override Widget build(BuildContext context) { - Size size = MediaQuery.of(context).size; + final size = MediaQuery.of(context).size; return AlertDialog( title: const Text('Add Devices'), backgroundColor: ColorsManager.whiteColors, content: Container( width: size.width * 0.65, - height: size.height * 0.57, // Set width for the dialog + height: size.height * 0.57, color: ColorsManager.textFieldGreyColor, child: Column( children: [ - const SizedBox(height: 16.0), + const SizedBox(height: 16), Expanded( child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 20.0), // Add horizontal padding - child: Scrollbar( + padding: const EdgeInsets.symmetric(horizontal: 20.0), + child: Scrollbar( + controller: _scrollController, + thumbVisibility: false, + child: GridView.builder( controller: _scrollController, - thumbVisibility: false, - child: GridView.builder( - controller: _scrollController, - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 6, // Display 6 items in a row - mainAxisSpacing: 10, - crossAxisSpacing: 10, - childAspectRatio: 0.7, // Adjust the aspect ratio - ), - itemCount: widget.products?.length ?? 0, - itemBuilder: (context, index) { - final deviceType = widget.products![index]; - return _buildDeviceTypeTile(deviceType); - }, + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 6, + mainAxisSpacing: 10, + crossAxisSpacing: 10, + childAspectRatio: 0.7, ), - )), + itemCount: widget.products?.length ?? 0, + itemBuilder: (context, index) { + final product = widget.products![index]; + return _buildDeviceTypeTile(product); + }, + ), + ), + ), ), ], ), ), actions: [ Row( - mainAxisAlignment: - MainAxisAlignment.spaceBetween, // Align cancel to the left and continue to the right + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - SizedBox( - width: 200, // Define a specific width for the button - child: DefaultButton( - onPressed: () { - Navigator.of(context).pop(); - }, - backgroundColor: ColorsManager.boxColor, - foregroundColor: ColorsManager.blackColor, - child: const Text('Cancel'), - ), - ), - SizedBox( - width: 200, // Define a specific width for the button - child: DefaultButton( - onPressed: () { - Navigator.of(context).pop(); - }, - backgroundColor: ColorsManager.secondaryColor, - foregroundColor: Colors.white, - child: const Text('Continue'), - ), - ), + _buildActionButton('Cancel', ColorsManager.boxColor, ColorsManager.blackColor, () { + Navigator.of(context).pop(); + }), + _buildActionButton('Continue', ColorsManager.secondaryColor, Colors.white, () { + Navigator.of(context).pop(); + if (widget.onProductsSelected != null) { + widget.onProductsSelected!(productCounts); + } + }), ], ), ], ); } - Widget _buildDeviceTypeTile(ProductModel? deviceType) { - - SelectedProduct? existingProduct = productCounts.firstWhere( - (product) => product.productId == deviceType?.uuid, - orElse: () => SelectedProduct(productId: deviceType!.uuid, count: 0), + Widget _buildDeviceTypeTile(ProductModel product) { + final selectedProduct = productCounts.firstWhere( + (p) => p.productId == product.uuid, + orElse: () => SelectedProduct(productId: product.uuid, count: 0), ); return SizedBox( width: 75, - height: 90, // Increase height if needed + height: 90, child: Card( elevation: 2, color: ColorsManager.whiteColors, @@ -132,53 +121,25 @@ class _AddDeviceWidgetState extends State { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - // Fixed height container for the icon - Container( - height: 80, - width: 80, - decoration: BoxDecoration( - shape: BoxShape.circle, // Make it circular - color: ColorsManager.textFieldGreyColor, // Background color of the circle - border: Border.all( - color: ColorsManager.neutralGray, // Border color - width: 2, // Border width - ), - ), // Fixed height for the icon - child: Center( - child: SvgPicture.asset( - deviceType?.icon ?? Assets.sensors, - width: 45, - height: 45, - ), - ), - ), + _buildDeviceIcon(product), const SizedBox(height: 8), - // Fixed height container for the name - SizedBox( - height: 35, // Fixed height for the text (adjust as needed) - child: Text( - deviceType?.name ?? '', - style: context.textTheme.bodySmall!.copyWith(color: ColorsManager.blackColor), - textAlign: TextAlign.center, - maxLines: 2, // Allow up to 2 lines for long names - overflow: TextOverflow.ellipsis, // Handle overflow - ), - ), + _buildDeviceName(product), const SizedBox(height: 8), - // The custom counter widget aligned at the bottom CounterWidget( - initialCount: existingProduct.count, + initialCount: selectedProduct.count, onCountChanged: (newCount) { setState(() { if (newCount > 0) { - if (!productCounts.contains(existingProduct)) { - productCounts.add(SelectedProduct(productId: deviceType!.uuid, count: newCount)); + if (!productCounts.contains(selectedProduct)) { + productCounts + .add(SelectedProduct(productId: product.uuid, count: newCount)); } else { - existingProduct.count = newCount; + selectedProduct.count = newCount; } } else { - productCounts.remove(deviceType!.uuid); + productCounts.removeWhere((p) => p.productId == product.uuid); } + if (widget.onProductsSelected != null) { widget.onProductsSelected!(productCounts); } @@ -191,4 +152,56 @@ class _AddDeviceWidgetState extends State { ), ); } + + Widget _buildDeviceIcon(ProductModel product) { + return Container( + height: 80, + width: 80, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: ColorsManager.textFieldGreyColor, + border: Border.all( + color: ColorsManager.neutralGray, + width: 2, + ), + ), + child: Center( + child: SvgPicture.asset( + product.icon ?? Assets.sensors, + width: 45, + height: 45, + ), + ), + ); + } + + Widget _buildDeviceName(ProductModel product) { + return SizedBox( + height: 35, + child: Text( + product.name ?? '', + style: context.textTheme.bodySmall?.copyWith(color: ColorsManager.blackColor), + textAlign: TextAlign.center, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ), + ); + } + + Widget _buildActionButton( + String label, + Color backgroundColor, + Color foregroundColor, + VoidCallback onPressed, + ) { + return SizedBox( + width: 200, + child: DefaultButton( + onPressed: onPressed, + backgroundColor: backgroundColor, + foregroundColor: foregroundColor, + child: Text(label), + ), + ); + } }