mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
separated header
This commit is contained in:
@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -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,7 +110,33 @@ 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: [
|
||||
@ -123,9 +153,8 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
|
||||
children: [
|
||||
for (var connection in connections)
|
||||
Opacity(
|
||||
opacity: _isHighlightedConnection(connection)
|
||||
? 1.0
|
||||
: 0.3, // Adjust opacity
|
||||
opacity:
|
||||
_isHighlightedConnection(connection) ? 1.0 : 0.3, // Adjust opacity
|
||||
child: CustomPaint(painter: CurvedLinePainter([connection])),
|
||||
),
|
||||
for (var entry in spaces.asMap().entries)
|
||||
@ -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,
|
||||
@ -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;
|
||||
|
@ -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),
|
||||
);
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user