ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 07:07:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

separated header

Browse Source
This commit is contained in:
hannathkadher
2024-11-23 18:55:32 +04:00
parent bca7aa059d
commit cb0abe751e
3 changed files with 196 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
lib/pages/spaces_management/widgets/community_stricture_header_widget.dart Normal file
View File

@ -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<String> 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,
),
),
],
),
],
),
);
}
}

226
lib/pages/spaces_management/widgets/community_structure_widget.dart
View File

@ -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<CommunityStructureArea> {
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<SpaceManagementBloc>().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<CommunityStructureArea> {
_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<CommunityStructureArea> {
},
),
),
],
),
],
),
),
),
if (spaces.isEmpty)
Center(
child: AddSpaceButton(
@ -190,144 +218,6 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
));
}
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<SpaceManagementBloc>().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;

8
lib/pages/spaces_management/widgets/dialogs/delete_dialogue.dart
View File

@ -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),
);
}