mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-09 22:57:21 +00:00
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:
@ -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) {
|
||||||
|
@ -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'),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
@ -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),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
@ -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),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user