From cb0abe751ea82a254511def94dc45e867d604c6c Mon Sep 17 00:00:00 2001 From: hannathkadher Date: Sat, 23 Nov 2024 18:55:32 +0400 Subject: [PATCH] separated header --- .../community_stricture_header_widget.dart | 135 +++++++++++ .../widgets/community_structure_widget.dart | 226 +++++------------- .../widgets/dialogs/delete_dialogue.dart | 8 +- 3 files changed, 196 insertions(+), 173 deletions(-) create mode 100644 lib/pages/spaces_management/widgets/community_stricture_header_widget.dart diff --git a/lib/pages/spaces_management/widgets/community_stricture_header_widget.dart b/lib/pages/spaces_management/widgets/community_stricture_header_widget.dart new file mode 100644 index 00000000..90376bb4 --- /dev/null +++ b/lib/pages/spaces_management/widgets/community_stricture_header_widget.dart @@ -0,0 +1,135 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; + +class CommunityStructureHeader extends StatelessWidget { + final String? communityName; + final bool isEditingName; + final TextEditingController nameController; + final VoidCallback onSave; + final VoidCallback onDelete; + final VoidCallback onEditName; + final ValueChanged onNameSubmitted; + + const CommunityStructureHeader({ + Key? key, + required this.communityName, + required this.isEditingName, + required this.nameController, + required this.onSave, + required this.onDelete, + required this.onEditName, + required this.onNameSubmitted, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0), + width: double.infinity, + decoration: BoxDecoration( + color: ColorsManager.whiteColors, + boxShadow: [ + BoxShadow( + color: ColorsManager.shadowBlackColor, + spreadRadius: 0, + blurRadius: 8, + offset: const Offset(0, 4), + ), + ], + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Community Structure', + style: Theme.of(context) + .textTheme + .headlineLarge + ?.copyWith(color: ColorsManager.blackColor), + ), + if (communityName != null) + Row( + children: [ + if (!isEditingName) + Text( + communityName!, + style: Theme.of(context) + .textTheme + .bodyLarge + ?.copyWith(color: ColorsManager.blackColor), + ), + if (isEditingName) + SizedBox( + width: 200, + child: TextField( + controller: nameController, + decoration: const InputDecoration( + border: InputBorder.none, + isDense: true, + ), + style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor), + onSubmitted: onNameSubmitted, + ), + ), + const SizedBox(width: 8), + GestureDetector( + onTap: onEditName, + child: SvgPicture.asset( + Assets.iconEdit, + width: 16, + height: 16, + ), + ), + ], + ), + ], + ), + Row( + children: [ + ElevatedButton.icon( + onPressed: onSave, + icon: const Icon(Icons.save, size: 18, color: ColorsManager.spaceColor), + label: const Text("Save"), + style: ElevatedButton.styleFrom( + backgroundColor: ColorsManager.textFieldGreyColor, + foregroundColor: ColorsManager.blackColor, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8.0), + ), + padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), + side: BorderSide(color: Colors.grey.shade300), + elevation: 0, + ), + ), + const SizedBox(width: 10), + ElevatedButton.icon( + onPressed: onDelete, + icon: SvgPicture.asset( + Assets.delete, + width: 18, + height: 18, + ), + label: const Text("Delete"), + style: ElevatedButton.styleFrom( + backgroundColor: ColorsManager.textFieldGreyColor, + foregroundColor: Colors.black, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8.0), + ), + padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), + side: BorderSide(color: ColorsManager.neutralGray), + elevation: 0, + ), + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/pages/spaces_management/widgets/community_structure_widget.dart b/lib/pages/spaces_management/widgets/community_structure_widget.dart index 6de9e06c..f93d66c6 100644 --- a/lib/pages/spaces_management/widgets/community_structure_widget.dart +++ b/lib/pages/spaces_management/widgets/community_structure_widget.dart @@ -1,18 +1,22 @@ +// Flutter imports import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:flutter_svg/svg.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +// Syncrow project imports import 'package:syncrow_web/pages/common/buttons/add_space_button.dart'; import 'package:syncrow_web/pages/spaces_management/bloc/space_management_bloc.dart'; import 'package:syncrow_web/pages/spaces_management/bloc/space_management_event.dart'; import 'package:syncrow_web/pages/spaces_management/model/product_model.dart'; import 'package:syncrow_web/pages/spaces_management/model/selected_product_model.dart'; import 'package:syncrow_web/pages/spaces_management/model/space_model.dart'; -import 'package:syncrow_web/pages/spaces_management/widgets/dialogs/create_space_dialog.dart'; -import 'package:syncrow_web/pages/spaces_management/widgets/curved_line_painter.dart'; -import 'package:syncrow_web/pages/spaces_management/widgets/dialogs/delete_dialogue.dart'; -import 'package:syncrow_web/pages/spaces_management/widgets/space_card_widget.dart'; import 'package:syncrow_web/pages/spaces_management/model/community_model.dart'; import 'package:syncrow_web/pages/spaces_management/model/connection_model.dart'; +import 'package:syncrow_web/pages/spaces_management/widgets/community_stricture_header_widget.dart'; +import 'package:syncrow_web/pages/spaces_management/widgets/dialogs/create_space_dialog.dart'; +import 'package:syncrow_web/pages/spaces_management/widgets/dialogs/delete_dialogue.dart'; +import 'package:syncrow_web/pages/spaces_management/widgets/curved_line_painter.dart'; +import 'package:syncrow_web/pages/spaces_management/widgets/space_card_widget.dart'; import 'package:syncrow_web/pages/spaces_management/widgets/space_container_widget.dart'; import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/constants/assets.dart'; @@ -106,30 +110,55 @@ class _CommunityStructureAreaState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - _buildHeader(), + CommunityStructureHeader( + communityName: widget.selectedCommunity?.name, + isEditingName: isEditingName, + nameController: _nameController, + onSave: _saveSpaces, + onDelete: _onDelete, + onEditName: () { + setState(() { + isEditingName = !isEditingName; + if (isEditingName) { + _nameController.text = widget.selectedCommunity?.name ?? ''; + } + }); + }, + onNameSubmitted: (value) { + context.read().add( + UpdateCommunityEvent( + communityUuid: widget.selectedCommunity!.uuid, + name: value, + ), + ); + setState(() { + widget.selectedCommunity?.name = value; + isEditingName = false; + }); + }, + ), Flexible( child: Stack( children: [ - InteractiveViewer( - transformationController: _transformationController, - boundaryMargin: EdgeInsets.all(500), - minScale: 0.5, - maxScale: 3.0, - constrained: false, - child: Container( - width: canvasWidth, - height: canvasHeight, - child: Stack( - children: [ - for (var connection in connections) - Opacity( - opacity: _isHighlightedConnection(connection) - ? 1.0 - : 0.3, // Adjust opacity - child: CustomPaint(painter: CurvedLinePainter([connection])), - ), - for (var entry in spaces.asMap().entries) - if(entry.value.status != SpaceStatus.deleted) + InteractiveViewer( + transformationController: _transformationController, + boundaryMargin: EdgeInsets.all(500), + minScale: 0.5, + maxScale: 3.0, + constrained: false, + child: Container( + width: canvasWidth, + height: canvasHeight, + child: Stack( + children: [ + for (var connection in connections) + Opacity( + opacity: + _isHighlightedConnection(connection) ? 1.0 : 0.3, // Adjust opacity + child: CustomPaint(painter: CurvedLinePainter([connection])), + ), + for (var entry in spaces.asMap().entries) + if (entry.value.status != SpaceStatus.deleted) Positioned( left: entry.value.position.dx, top: entry.value.position.dy, @@ -151,8 +180,7 @@ class _CommunityStructureAreaState extends State { _updateNodePosition(entry.value, newPosition); }, buildSpaceContainer: (int index) { - final bool isHighlighted = - _isHighlightedSpace(spaces[index]); + final bool isHighlighted = _isHighlightedSpace(spaces[index]); return Opacity( opacity: isHighlighted ? 1.0 : 0.3, @@ -170,10 +198,10 @@ class _CommunityStructureAreaState extends State { }, ), ), - ], - ), + ], ), ), + ), if (spaces.isEmpty) Center( child: AddSpaceButton( @@ -190,144 +218,6 @@ class _CommunityStructureAreaState extends State { )); } - Widget _buildHeader() { - return Container( - padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0), - width: double.infinity, - decoration: BoxDecoration( - color: ColorsManager.whiteColors, - boxShadow: [ - BoxShadow( - color: ColorsManager.shadowBlackColor, - spreadRadius: 0, - blurRadius: 8, - offset: const Offset(0, 4), - ), - ], - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Text( - 'Community Structure', - style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), - ), - if (widget.selectedCommunity != null) - Row( - children: [ - // Show Text widget when not editing - if (!isEditingName) - Text( - widget.selectedCommunity?.name ?? '', - style: const TextStyle(fontSize: 16, color: ColorsManager.blackColor), - ), - if (isEditingName) // Show TextField when editing - SizedBox( - width: 200, // Adjusted width to make TextField visible - child: TextField( - controller: _nameController, - decoration: const InputDecoration( - border: InputBorder.none, - isDense: true, // Reduce the height of the TextField - ), - style: const TextStyle( - fontSize: 16, - color: ColorsManager.blackColor, - ), - onSubmitted: (value) { - context.read().add( - UpdateCommunityEvent( - communityUuid: widget.selectedCommunity!.uuid, - name: value, - ), - ); - setState(() { - widget.selectedCommunity?.name = value; // Update the name - isEditingName = false; // Exit edit mode - }); - }, - ), - ), - const SizedBox(width: 8), - if (!isEditingName) - GestureDetector( - onTap: () { - setState(() { - isEditingName = !isEditingName; // Toggle edit mode - }); - if (isEditingName) { - _nameController.text = widget.selectedCommunity?.name ?? ''; // Pre-fill - } - }, - child: SvgPicture.asset( - Assets.iconEdit, // Path to the edit icon SVG asset - width: 16, - height: 16, - ), - ), - ], - ), - ], - ), - // Show "Save" button only if there are spaces - if (spaces.isNotEmpty && widget.selectedCommunity != null) - Row(children: [ - ElevatedButton.icon( - onPressed: () { - _saveSpaces(); - }, - icon: const Icon( - Icons.save, - size: 18, - color: ColorsManager.spaceColor, - ), - label: const Text("Save"), - style: ElevatedButton.styleFrom( - backgroundColor: ColorsManager.textFieldGreyColor, - foregroundColor: ColorsManager.blackColor, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8.0), - ), - padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), - side: BorderSide(color: Colors.grey.shade300), - elevation: 0, - ), - ), - const SizedBox(width: 10), - ElevatedButton.icon( - onPressed: () { - showDeleteConfirmationDialog(context, () { - // Handle the delete action here - Navigator.of(context).pop(); // Close the dialog after confirming - _onDelete(); - }, widget.selectedSpace != null); - }, - icon: SvgPicture.asset( - Assets.delete, // Path to your SVG asset - width: 18, // Adjust width as needed - height: 18, // Adjust height as needed - ), - label: const Text("Delete"), - style: ElevatedButton.styleFrom( - backgroundColor: ColorsManager.textFieldGreyColor, - foregroundColor: Colors.black, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8.0), - ), - padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), - side: BorderSide(color: ColorsManager.neutralGray), - elevation: 0, - ), - ), - ]) - ], - ), - ); - } - void _updateNodePosition(SpaceModel node, Offset newPosition) { setState(() { node.position = newPosition; diff --git a/lib/pages/spaces_management/widgets/dialogs/delete_dialogue.dart b/lib/pages/spaces_management/widgets/dialogs/delete_dialogue.dart index 41646a47..8607f9e0 100644 --- a/lib/pages/spaces_management/widgets/dialogs/delete_dialogue.dart +++ b/lib/pages/spaces_management/widgets/dialogs/delete_dialogue.dart @@ -24,7 +24,7 @@ void showDeleteConfirmationDialog(BuildContext context, VoidCallback onConfirm, children: [ _buildWarningIcon(), const SizedBox(height: 20), - _buildDialogTitle(context,title), + _buildDialogTitle(context, title), const SizedBox(height: 10), _buildDialogSubtitle(context, subtitle), const SizedBox(height: 20), @@ -73,7 +73,7 @@ void showProcessingPopup(BuildContext context, bool isSpace, VoidCallback onDele children: [ _buildWarningIcon(), const SizedBox(height: 20), - _buildDialogTitle(context,title), + _buildDialogTitle(context, title), const SizedBox(height: 10), _buildDialogSubtitle(context, 'Are you sure you want to delete?'), const SizedBox(height: 20), @@ -123,9 +123,7 @@ Widget _buildDialogSubtitle(BuildContext context, String subtitle) { return Text( subtitle, textAlign: TextAlign.center, - style: Theme.of(context).textTheme.bodyMedium?.copyWith( - color: ColorsManager.grayColor - ), + style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: ColorsManager.grayColor), ); }