diff --git a/lib/pages/spaces_management/view/dialogs/create_space_dialog.dart b/lib/pages/spaces_management/view/dialogs/create_space_dialog.dart index 4351203f..d7bfeba6 100644 --- a/lib/pages/spaces_management/view/dialogs/create_space_dialog.dart +++ b/lib/pages/spaces_management/view/dialogs/create_space_dialog.dart @@ -42,7 +42,7 @@ class CreateSpaceDialogState extends State { width: 100, height: 100, decoration: const BoxDecoration( - color: Color(0xFFF5F6F7), + color: ColorsManager.boxColor, shape: BoxShape.circle, ), ), @@ -87,12 +87,12 @@ class CreateSpaceDialogState extends State { color: ColorsManager.lightGrayColor, fontWeight: FontWeight.w400), filled: true, - fillColor: const Color(0xFFF5F6F7), + fillColor: ColorsManager.boxColor, enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: const BorderSide( - color: - Color(0xFFF5F6F7), // Light gray color when enabled (not focused) + color: ColorsManager + .boxColor, // Light gray color when enabled (not focused) width: 1.5, ), ), @@ -100,7 +100,7 @@ class CreateSpaceDialogState extends State { focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: const BorderSide( - color: Color(0xFFF5F6F7), // Primary color when focused + color: ColorsManager.boxColor, // Primary color when focused width: 1.5, ), ), @@ -108,7 +108,7 @@ class CreateSpaceDialogState extends State { disabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: const BorderSide( - color: Color(0xFFF5F6F7), // Light gray for disabled state + color: ColorsManager.boxColor, // Light gray for disabled state width: 1.5, ), ), @@ -116,7 +116,7 @@ class CreateSpaceDialogState extends State { errorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: const BorderSide( - color: Color(0xFFF5F6F7), // Red border when there's an error + color: ColorsManager.boxColor, // Red border when there's an error width: 1.5, ), ), @@ -124,7 +124,8 @@ class CreateSpaceDialogState extends State { focusedErrorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(10), borderSide: const BorderSide( - color: ColorsManager.boxColor, // Red border when there's an error and it's focused + color: ColorsManager + .boxColor, // Red border when there's an error and it's focused width: 1.5, ), ), @@ -132,55 +133,59 @@ class CreateSpaceDialogState extends State { ), const SizedBox(height: 16), // Add Devices or Space Model Button - ElevatedButton( - onPressed: () { - showDialog( - context: context, - builder: (context) => AddDeviceWidget( - products: widget.products, - onProductsSelected: (selectedProductsMap) { - setState(() { - selectedProducts = selectedProductsMap; - }); - }, - ), - ); - }, - style: ElevatedButton.styleFrom( - backgroundColor: ColorsManager.textFieldGreyColor, - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20), - shape: RoundedRectangleBorder( - side: const BorderSide( - // Add border side here - color: ColorsManager.neutralGray, // Define your desired border color - width: 2.0, // Define border width + if (selectedProducts.isNotEmpty) + _buildSelectedProductsButtons(widget.products ?? []) + else + ElevatedButton( + onPressed: () { + showDialog( + context: context, + builder: (context) => AddDeviceWidget( + products: widget.products, + onProductsSelected: (selectedProductsMap) { + setState(() { + selectedProducts = selectedProductsMap; + }); + }, ), - borderRadius: BorderRadius.circular(20)), - ), - child: Row( - mainAxisSize: - MainAxisSize.min, // Adjust the button size to fit the content - children: [ - SvgPicture.asset( - Assets.addIcon, // Replace with your actual icon path - width: 20, // Set the size of the icon - height: 20, - ), - const SizedBox(width: 8), // Add spacing between the icon and text - const Text( - 'Add devices / Assign a space model', - style: TextStyle( - color: Colors.black, - fontSize: 16, - fontFamily: 'Aftika', - fontWeight: FontWeight.w400, - height: 1.5, // Adjust line height for better spacing + ); + }, + style: ElevatedButton.styleFrom( + backgroundColor: ColorsManager.textFieldGreyColor, + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20), + shape: RoundedRectangleBorder( + side: const BorderSide( + // Add border side here + color: + ColorsManager.neutralGray, // Define your desired border color + width: 2.0, // Define border width + ), + borderRadius: BorderRadius.circular(20)), + ), + child: Row( + mainAxisSize: + MainAxisSize.min, // Adjust the button size to fit the content + children: [ + SvgPicture.asset( + Assets.addIcon, // Replace with your actual icon path + width: 20, // Set the size of the icon + height: 20, ), - ), - const SizedBox(width: 8), - ], + const SizedBox(width: 8), // Add spacing between the icon and text + const Text( + 'Add devices / Assign a space model', + style: TextStyle( + color: Colors.black, + fontSize: 16, + fontFamily: 'Aftika', + fontWeight: FontWeight.w400, + height: 1.5, // Adjust line height for better spacing + ), + ), + const SizedBox(width: 8), + ], + ), ), - ), ], ), ), @@ -231,7 +236,7 @@ class CreateSpaceDialogState extends State { height: 200, padding: const EdgeInsets.all(18), decoration: BoxDecoration( - color: const Color(0xFFF5F6F7), + color: ColorsManager.boxColor, borderRadius: BorderRadius.circular(12), ), child: GridView.builder( @@ -263,6 +268,104 @@ class CreateSpaceDialogState extends State { ); } + Widget _buildSelectedProductsButtons(List products) { + return Container( + padding: const EdgeInsets.all(8), + decoration: BoxDecoration( + color: ColorsManager.textFieldGreyColor, + borderRadius: BorderRadius.circular(12), + ), + child: Wrap( + spacing: 8, // Horizontal spacing between buttons + runSpacing: 8, // Vertical spacing between rows + children: [ + // Dynamically create a button for each selected product + for (var entry in selectedProducts.entries) + GestureDetector( + onTap: () { + + }, + child: Container( + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(16), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + // Display the product icon + SvgPicture.asset( + _mapIconToProduct(entry.key, products), + width: 24, + height: 24, + ), + const SizedBox(width: 8), + // Display the product count + Text( + 'x${entry.value}', + style: const TextStyle( + fontSize: 14, + fontWeight: FontWeight.w500, + color: ColorsManager.spaceColor, + ), + ), + ], + ), + ), + ), + // Add Button + GestureDetector( + onTap: () { + showDialog( + context: context, + builder: (context) => AddDeviceWidget( + products: widget.products, + initialSelectedProducts: selectedProducts, + onProductsSelected: (selectedProductsMap) { + setState(() { + selectedProducts = selectedProductsMap; + }); + }, + ), + ); + }, + child: Container( + width: 50, + height: 50, + decoration: BoxDecoration( + color: ColorsManager.textFieldGreyColor, + borderRadius: BorderRadius.circular(16), + ), + child: const Icon( + Icons.add, + color: ColorsManager.spaceColor, + size: 24, + ), + ), + ), + ], + ), + ); + } + + String _mapIconToProduct(String uuid, List products) { + // Find the product with the matching UUID + final product = products.firstWhere( + (product) => product.uuid == uuid, + orElse: () => ProductModel( + uuid: '', + catName: '', + prodId: '', + prodType: '', + name: '', + icon: Assets.presenceSensor, + ), + ); + + return product.icon ?? Assets.presenceSensor; + } + final List _iconList = [ Assets.location, Assets.villa, 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 e0686dcb..d6f4e8db 100644 --- a/lib/pages/spaces_management/widgets/add_device_type_widget.dart +++ b/lib/pages/spaces_management/widgets/add_device_type_widget.dart @@ -10,8 +10,10 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart'; class AddDeviceWidget extends StatefulWidget { final List? products; final ValueChanged>? onProductsSelected; + final Map? initialSelectedProducts; - const AddDeviceWidget({super.key, this.products, this.onProductsSelected}); + const AddDeviceWidget( + {super.key, this.products, this.initialSelectedProducts, this.onProductsSelected}); @override _AddDeviceWidgetState createState() => _AddDeviceWidgetState(); @@ -25,11 +27,9 @@ class _AddDeviceWidgetState extends State { void initState() { super.initState(); _scrollController = ScrollController(); - - if (widget.products != null) { - for (var product in widget.products!) { - productCounts[product.uuid] = 0; - } + print(widget.initialSelectedProducts); + if (widget.initialSelectedProducts != null && widget.initialSelectedProducts!.isNotEmpty) { + productCounts = widget.initialSelectedProducts!; } } @@ -161,7 +161,7 @@ class _AddDeviceWidgetState extends State { const SizedBox(height: 8), // The custom counter widget aligned at the bottom CounterWidget( - initialCount: 0, + initialCount: productCounts[deviceType!.uuid] ?? 0, onCountChanged: (newCount) { setState(() { if (newCount > 0) {