Merge pull request #147 from SyncrowIOT/SP-1433-FE-Text-Alignment-Issue-in-UI-Component-in-adding-subspace-in-a-space

Sp 1433 fe text alignment issue in UI component in adding subspace in a space
This commit is contained in:
Faris Armoush
2025-04-21 09:48:38 +03:00
committed by GitHub
4 changed files with 181 additions and 198 deletions

View File

@ -592,8 +592,6 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
return CreateSubSpaceDialog( return CreateSubSpaceDialog(
spaceName: name, spaceName: name,
dialogTitle: isEdit ? 'Edit Sub-space' : 'Create Sub-space', dialogTitle: isEdit ? 'Edit Sub-space' : 'Create Sub-space',
spaceTags: spaceTags,
isEdit: isEdit,
products: products, products: products,
existingSubSpaces: existingSubSpaces, existingSubSpaces: existingSubSpaces,
onSave: (slectedSubspaces) { onSave: (slectedSubspaces) {

View File

@ -4,222 +4,204 @@ import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart'; import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart'; import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/subspace_model.dart'; import 'package:syncrow_web/pages/spaces_management/all_spaces/model/subspace_model.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/tag.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_bloc.dart'; import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_event.dart'; import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_event.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_state.dart'; import 'package:syncrow_web/pages/spaces_management/create_subspace/bloc/subspace_state.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class CreateSubSpaceDialog extends StatelessWidget { class CreateSubSpaceDialog extends StatefulWidget {
final bool isEdit;
final String dialogTitle; final String dialogTitle;
final List<SubspaceModel>? existingSubSpaces; final List<SubspaceModel>? existingSubSpaces;
final String? spaceName; final String? spaceName;
final List<Tag>? spaceTags;
final List<ProductModel>? products; final List<ProductModel>? products;
final Function(List<SubspaceModel>?)? onSave; final void Function(List<SubspaceModel>?)? onSave;
const CreateSubSpaceDialog( const CreateSubSpaceDialog({
{Key? key, required this.dialogTitle,
required this.isEdit, required this.spaceName,
required this.dialogTitle, required this.products,
this.existingSubSpaces, required this.onSave,
required this.spaceName, this.existingSubSpaces,
required this.spaceTags, super.key,
required this.products, });
required this.onSave})
: super(key: key); @override
State<CreateSubSpaceDialog> createState() => _CreateSubSpaceDialogState();
}
class _CreateSubSpaceDialogState extends State<CreateSubSpaceDialog> {
late final TextEditingController _subspaceNameController;
@override
void initState() {
_subspaceNameController = TextEditingController();
super.initState();
}
@override
void dispose() {
_subspaceNameController.dispose();
super.dispose();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width; return BlocProvider(
final textController = TextEditingController(); create: (_) {
final bloc = SubSpaceBloc();
return Dialog( if (widget.existingSubSpaces != null) {
shape: RoundedRectangleBorder( for (final subSpace in widget.existingSubSpaces ?? []) {
borderRadius: BorderRadius.circular(20), bloc.add(AddSubSpace(subSpace));
),
child: BlocProvider(
create: (_) {
final bloc = SubSpaceBloc();
if (existingSubSpaces != null) {
for (var subSpace in existingSubSpaces!) {
bloc.add(AddSubSpace(subSpace));
}
} }
return bloc; }
}, return bloc;
},
child: Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: BlocBuilder<SubSpaceBloc, SubSpaceState>( child: BlocBuilder<SubSpaceBloc, SubSpaceState>(
builder: (context, state) { builder: (context, state) {
return Container( return Container(
color: ColorsManager.whiteColors, width: context.screenWidth * 0.35,
child: SizedBox( color: ColorsManager.whiteColors,
width: screenWidth * 0.35, padding: const EdgeInsets.all(16),
child: Padding( child: Column(
padding: const EdgeInsets.all(16.0), crossAxisAlignment: CrossAxisAlignment.start,
child: Column( mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start, children: [
mainAxisSize: MainAxisSize.min, Text(
widget.dialogTitle,
style: context.textTheme.headlineLarge?.copyWith(
color: ColorsManager.blackColor,
),
),
const SizedBox(height: 16),
Container(
width: context.screenWidth * 0.35,
padding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 16,
),
decoration: BoxDecoration(
color: ColorsManager.boxColor,
borderRadius: BorderRadius.circular(10),
),
child: Wrap(
spacing: 8,
runSpacing: 8,
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.center,
children: [ children: [
Text( ...state.subSpaces.asMap().entries.map(
dialogTitle, (entry) {
style: Theme.of(context) final index = entry.key;
.textTheme final subSpace = entry.value;
.headlineLarge
?.copyWith(color: ColorsManager.blackColor), final lowerName = subSpace.subspaceName.toLowerCase();
final duplicateIndices = state.subSpaces
.asMap()
.entries
.where((e) =>
e.value.subspaceName.toLowerCase() == lowerName)
.map((e) => e.key)
.toList();
final isDuplicate = duplicateIndices.length > 1 &&
duplicateIndices.indexOf(index) != 0;
return SubspaceChip(
subSpace: SubspaceTemplateModel(
subspaceName: entry.value.subspaceName,
disabled: entry.value.disabled,
),
isDuplicate: isDuplicate,
onDeleted: () => context.read<SubSpaceBloc>().add(
RemoveSubSpace(subSpace),
),
);
},
), ),
const SizedBox(height: 16), SizedBox(
Container( width: 200,
width: screenWidth * 0.35, child: TextField(
padding: const EdgeInsets.symmetric( controller: _subspaceNameController,
vertical: 10.0, horizontal: 16.0), decoration: InputDecoration(
decoration: BoxDecoration( border: InputBorder.none,
color: ColorsManager.boxColor, hintText: state.subSpaces.isEmpty
borderRadius: BorderRadius.circular(10), ? 'Please enter the name'
), : null,
child: Wrap( hintStyle: context.textTheme.bodySmall?.copyWith(
spacing: 8.0, color: ColorsManager.lightGrayColor,
runSpacing: 8.0, ),
children: [ ),
...state.subSpaces.asMap().entries.map( onSubmitted: (value) {
(entry) { final trimmedValue = value.trim();
final index = entry.key; if (trimmedValue.isNotEmpty) {
final subSpace = entry.value; context.read<SubSpaceBloc>().add(
AddSubSpace(
final lowerName = SubspaceModel(
subSpace.subspaceName.toLowerCase(); subspaceName: trimmedValue,
disabled: false,
final duplicateIndices = state.subSpaces
.asMap()
.entries
.where((e) =>
e.value.subspaceName.toLowerCase() ==
lowerName)
.map((e) => e.key)
.toList();
final isDuplicate =
duplicateIndices.length > 1 &&
duplicateIndices.indexOf(index) != 0;
return Chip(
label: Text(subSpace.subspaceName,
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(
color:
ColorsManager.spaceColor)),
backgroundColor: ColorsManager.whiteColors,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: isDuplicate
? ColorsManager.red
: ColorsManager.transparentColor,
width: 0,
),
),
deleteIcon: Container(
width: 24,
height: 24,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: ColorsManager.lightGrayColor,
width: 1.5,
), ),
), ),
child: const Icon( );
Icons.close, _subspaceNameController.clear();
size: 16, }
color: ColorsManager.lightGrayColor, },
), style: context.textTheme.bodyMedium,
),
onDeleted: () => context
.read<SubSpaceBloc>()
.add(RemoveSubSpace(subSpace)),
);
},
),
SizedBox(
width: 200,
child: TextField(
controller: textController,
decoration: InputDecoration(
border: InputBorder.none,
hintText: state.subSpaces.isEmpty
? 'Please enter the name'
: null,
hintStyle: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(
color: ColorsManager
.lightGrayColor)),
onSubmitted: (value) {
if (value.trim().isNotEmpty) {
context.read<SubSpaceBloc>().add(
AddSubSpace(SubspaceModel(
subspaceName: value.trim(),
disabled: false)));
textController.clear();
}
},
style:
Theme.of(context).textTheme.bodyMedium),
),
],
), ),
), ),
if (state.errorMessage.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(state.errorMessage,
style: Theme.of(context)
.textTheme
.bodySmall
?.copyWith(
color: ColorsManager.warningRed,
)),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: CancelButton(
label: 'Cancel',
onPressed: () async {
Navigator.of(context).pop();
},
),
),
const SizedBox(width: 10),
Expanded(
child: DefaultButton(
onPressed: (state.errorMessage.isNotEmpty)
? null
: () async {
final subSpaces = context
.read<SubSpaceBloc>()
.state
.subSpaces;
onSave!(subSpaces);
Navigator.of(context).pop();
},
backgroundColor: ColorsManager.secondaryColor,
borderRadius: 10,
foregroundColor: state.errorMessage.isNotEmpty
? ColorsManager.whiteColorsWithOpacity
: ColorsManager.whiteColors,
child: const Text('OK'),
),
),
],
),
], ],
), ),
), ),
)); if (state.errorMessage.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
state.errorMessage,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.warningRed,
),
),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: CancelButton(
label: 'Cancel',
onPressed: () async {
Navigator.of(context).pop();
},
),
),
const SizedBox(width: 10),
Expanded(
child: DefaultButton(
onPressed: state.errorMessage.isEmpty
? () {
final subSpacesBloc = context.read<SubSpaceBloc>();
final subSpaces = subSpacesBloc.state.subSpaces;
widget.onSave?.call(subSpaces);
Navigator.of(context).pop();
}
: null,
backgroundColor: ColorsManager.secondaryColor,
borderRadius: 10,
foregroundColor: state.errorMessage.isNotEmpty
? ColorsManager.whiteColorsWithOpacity
: ColorsManager.whiteColors,
child: const Text('OK'),
),
),
],
),
],
),
);
}, },
), ),
), ),

View File

@ -1,4 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart'; import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspace_chip.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspaces_textfield.dart'; import 'package:syncrow_web/pages/spaces_management/create_subspace_model/widgets/subspaces_textfield.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart'; import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
@ -51,6 +54,9 @@ class CreateSubspaceModelChipsBox extends StatelessWidget {
return SubspaceChip( return SubspaceChip(
subSpace: subSpace, subSpace: subSpace,
isDuplicate: isDuplicate, isDuplicate: isDuplicate,
onDeleted: () => context.read<SubSpaceModelBloc>().add(
RemoveSubSpaceModel(subSpace),
),
); );
}, },
), ),

View File

@ -1,7 +1,4 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/create_subspace_model/bloc/subspace_model_event.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart'; import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
@ -11,10 +8,12 @@ class SubspaceChip extends StatelessWidget {
required this.subSpace, required this.subSpace,
required this.isDuplicate, required this.isDuplicate,
super.key, super.key,
required this.onDeleted,
}); });
final SubspaceTemplateModel subSpace; final SubspaceTemplateModel subSpace;
final bool isDuplicate; final bool isDuplicate;
final void Function() onDeleted;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -50,9 +49,7 @@ class SubspaceChip extends StatelessWidget {
), ),
), ),
), ),
onDeleted: () => context.read<SubSpaceModelBloc>().add( onDeleted: onDeleted,
RemoveSubSpaceModel(subSpace),
),
); );
} }
} }