eduvia/workavia-mail-front
11
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TF-4178 Add create new label modal

Browse Source
This commit is contained in:
dab246
2025-11-26 12:10:55 +07:00
committed by Dat H. Pham
parent f6f299dc97
commit d3029ec4de
16 changed files with 629 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/labels/presentation/label_controller.dart
+19
View File
@@ -1,5 +1,6 @@
import 'package:core/presentation/state/failure.dart';
import 'package:core/presentation/state/success.dart';
import 'package:core/utils/platform_info.dart';
import 'package:get/get.dart';
import 'package:jmap_dart_client/jmap/account_id.dart';
import 'package:jmap_dart_client/jmap/core/session/session.dart';
@@ -11,12 +12,14 @@ import 'package:tmail_ui_user/features/base/base_controller.dart';
import 'package:tmail_ui_user/features/labels/domain/state/get_all_label_state.dart';
import 'package:tmail_ui_user/features/labels/domain/usecases/get_all_label_interactor.dart';
import 'package:tmail_ui_user/features/labels/presentation/label_interactor_bindings.dart';
import 'package:tmail_ui_user/features/labels/presentation/widgets/create_new_label_modal.dart';
import 'package:tmail_ui_user/main/error/capability_validator.dart';
import 'package:tmail_ui_user/main/routes/route_navigation.dart';
class LabelController extends BaseController {
final labels = <Label>[].obs;
final labelListExpandMode = Rx(ExpandMode.EXPAND);
final isCreateNewLabelModalVisible = RxBool(false);
GetAllLabelInteractor? _getAllLabelInteractor;
@@ -41,6 +44,22 @@ class LabelController extends BaseController {
: ExpandMode.COLLAPSE;
}
Future<void> openCreateNewLabelModal() async {
if (PlatformInfo.isWeb) {
isCreateNewLabelModalVisible.value = true;
}
await Get.generalDialog(
barrierDismissible: true,
barrierLabel: 'create-new-label-modal',
pageBuilder: (_, __, ___) => CreateNewLabelModal(labels: labels),
).whenComplete(() {
if (PlatformInfo.isWeb) {
isCreateNewLabelModalVisible.value = false;
}
});
}
@override
void handleSuccessViewState(Success success) {
if (success is GetAllLabelSuccess) {
lib/features/labels/presentation/label_interactor_bindings.dart
+2
View File
@@ -7,6 +7,7 @@ import 'package:tmail_ui_user/features/labels/data/network/label_api.dart';
import 'package:tmail_ui_user/features/labels/data/repository/label_repository_impl.dart';
import 'package:tmail_ui_user/features/labels/domain/repository/label_repository.dart';
import 'package:tmail_ui_user/features/labels/domain/usecases/get_all_label_interactor.dart';
import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_name_interactor.dart';
import 'package:tmail_ui_user/main/exceptions/remote_exception_thrower.dart';
class LabelInteractorBindings extends InteractorsBindings {
@@ -29,6 +30,7 @@ class LabelInteractorBindings extends InteractorsBindings {
@override
void bindingsInteractor() {
Get.lazyPut(() => GetAllLabelInteractor(Get.find<LabelRepository>()));
Get.lazyPut(() => VerifyNameInteractor());
}
@override
lib/features/labels/presentation/widgets/create_new_label_modal.dart
+280
View File
@@ -0,0 +1,280 @@
import 'dart:math' as math;
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/resources/image_paths.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:core/presentation/views/color/colors_map_widget.dart';
import 'package:core/utils/platform_info.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:labels/extensions/list_label_extension.dart';
import 'package:labels/model/label.dart';
import 'package:tmail_ui_user/features/base/widget/default_field/default_close_button_widget.dart';
import 'package:tmail_ui_user/features/base/widget/label_input_field_builder.dart';
import 'package:tmail_ui_user/features/base/widget/modal_list_action_button_widget.dart';
import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/duplicate_name_validator.dart';
import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/empty_name_validator.dart';
import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/name_with_space_only_validator.dart';
import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/special_character_validator.dart';
import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/validator.dart';
import 'package:tmail_ui_user/features/mailbox_creator/domain/state/verify_name_view_state.dart';
import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_name_interactor.dart';
import 'package:tmail_ui_user/features/mailbox_creator/presentation/extensions/validator_failure_extension.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
import 'package:tmail_ui_user/main/routes/route_navigation.dart';
class CreateNewLabelModal extends StatefulWidget {
final List<Label> labels;
const CreateNewLabelModal({super.key, required this.labels});
@override
State<CreateNewLabelModal> createState() => _CreateNewLabelModalState();
}
class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
final _imagePaths = Get.find<ImagePaths>();
final _verifyNameInteractor = Get.find<VerifyNameInteractor>();
final ValueNotifier<String?> _labelNameErrorText = ValueNotifier(null);
final TextEditingController _nameInputController = TextEditingController();
final FocusNode _nameInputFocusNode = FocusNode();
List<String> _labelDisplayNameList = <String>[];
@override
void initState() {
super.initState();
_labelDisplayNameList = widget.labels.displayNameNotNullList;
}
@override
Widget build(BuildContext context) {
final appLocalizations = AppLocalizations.of(context);
final theme = Theme.of(context);
return LayoutBuilder(builder: (_, constraints) {
final currentScreenWidth = constraints.maxWidth;
final currentScreenHeight = constraints.maxHeight;
final isMobile = currentScreenWidth < ResponsiveUtils.minTabletWidth;
Widget bodyWidget = Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(16)),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.08),
blurRadius: 24,
offset: const Offset(0, 2),
),
BoxShadow(
color: Colors.black.withValues(alpha: 0.08),
blurRadius: 2,
),
],
),
width: math.min(
currentScreenWidth - 32,
554,
),
constraints: BoxConstraints(maxHeight: currentScreenHeight - 100),
clipBehavior: Clip.antiAlias,
child: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 64,
alignment: Alignment.center,
padding: EdgeInsetsDirectional.only(
start: 32,
end: 32,
top: 16,
bottom: isMobile ? 0 : 16,
),
child: Text(
appLocalizations.createANewLabel,
style: theme.textTheme.headlineSmall?.copyWith(
color: AppColor.m3SurfaceBackground,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Center(
child: Padding(
padding: EdgeInsetsDirectional.only(
start: 32,
end: 32,
bottom: isMobile ? 32 : 48,
),
child: Text(
appLocalizations.organizeYourInboxWithACustomCategory,
style: ThemeUtils.textStyleInter400.copyWith(
color: AppColor.steelGrayA540,
fontSize: 13,
height: 20 / 13,
),
textAlign: TextAlign.center,
),
),
),
Flexible(
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Padding(
padding: EdgeInsetsDirectional.only(
start: 32,
end: 32,
bottom: isMobile ? 0 : 16,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ValueListenableBuilder(
valueListenable: _labelNameErrorText,
builder: (_, errorText, __) {
return LabelInputFieldBuilder(
label: appLocalizations.labelName,
hintText: appLocalizations
.pleaseEnterNameYourNewLabel,
textEditingController: _nameInputController,
focusNode: _nameInputFocusNode,
errorText: errorText,
arrangeHorizontally: false,
isLabelHasColon: false,
labelStyle:
ThemeUtils.textStyleInter600().copyWith(
fontSize: 14,
height: 18 / 14,
color: Colors.black,
),
runSpacing: 16,
inputFieldMaxWidth: double.infinity,
onTextChange: (value) =>
_onLabelNameInputChanged(
appLocalizations,
value,
),
);
},
),
Padding(
padding: const EdgeInsets.only(top: 26, bottom: 16),
child: Text(
appLocalizations.chooseALabelColor,
style: ThemeUtils.textStyleInter600().copyWith(
fontSize: 14,
height: 18 / 14,
color: Colors.black,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Flexible(
child: Padding(
padding: isMobile
? EdgeInsetsDirectional.zero
: const EdgeInsetsDirectional.only(
start: 32,
end: 16,
),
child: const ColorsMapWidget(),
),
),
ModalListActionButtonWidget(
positiveLabel: appLocalizations.createLabel,
negativeLabel: appLocalizations.cancel,
padding: const EdgeInsets.symmetric(vertical: 25),
onPositiveAction: _onCreateNewLabel,
onNegativeAction: _onCloseModal,
),
],
),
),
),
),
],
),
DefaultCloseButtonWidget(
iconClose: _imagePaths.icCloseDialog,
onTapActionCallback: _onCloseModal,
),
],
),
);
bodyWidget = Center(child: bodyWidget);
if (PlatformInfo.isMobile) {
bodyWidget = GestureDetector(
onTap: _onCloseModal,
child: Scaffold(
backgroundColor: AppColor.blackAlpha20,
body: GestureDetector(
onTap: _clearInputFocus,
child: bodyWidget,
),
),
);
}
return bodyWidget;
});
}
void _onLabelNameInputChanged(
AppLocalizations appLocalizations, String value) {
_labelNameErrorText.value = _verifyLabelName(appLocalizations, value);
}
String? _verifyLabelName(AppLocalizations appLocalizations, String value) {
final result = _verifyNameInteractor.execute(
value,
_validators,
);
return result.fold(
(failure) => failure is VerifyNameFailure
? failure.getMessageLabelError(appLocalizations)
: null,
(_) => null,
);
}
List<Validator> get _validators => [
EmptyNameValidator(),
NameWithSpaceOnlyValidator(),
DuplicateNameValidator(_labelDisplayNameList),
SpecialCharacterValidator(),
];
void _clearInputFocus() {
_nameInputFocusNode.unfocus();
}
void _onCreateNewLabel() {
_clearInputFocus();
popBack();
}
void _onCloseModal() {
_clearInputFocus();
popBack();
}
@override
void dispose() {
_nameInputFocusNode.dispose();
_nameInputController.dispose();
_labelNameErrorText.dispose();
_labelDisplayNameList = [];
super.dispose();
}
}
lib/features/mailbox/presentation/base_mailbox_view.dart
+1
View File
@@ -364,6 +364,7 @@ abstract class BaseMailboxView extends GetWidget<MailboxController>
expandMode: labelListExpandMode,
countLabels: countLabels,
onToggleLabelListState: labelController.toggleLabelListState,
onAddNewLabel: labelController.openCreateNewLabelModal,
);
} else {
return const SizedBox.shrink();
lib/features/mailbox_creator/presentation/extensions/validator_failure_extension.dart
+14
View File
@@ -48,4 +48,18 @@ extension ValicatorFailureExtension on VerifyNameFailure {
return '';
}
}
String getMessageLabelError(AppLocalizations appLocalizations) {
if (exception is EmptyNameException) {
return appLocalizations.this_field_cannot_be_blank;
} else if (exception is DuplicatedNameException) {
return appLocalizations.tagNameAlreadyExists;
} else if (exception is SpecialCharacterException) {
return appLocalizations.tagNameCannotContainSpecialCharacters;
} else if (exception is NameWithSpaceOnlyException) {
return appLocalizations.thisFieldCannotContainOnlySpaces;
} else {
return '';
}
}
}
lib/features/mailbox_dashboard/presentation/extensions/verify_display_overlay_view_on_iframe_extension.dart
+2 -1
View File
@@ -9,6 +9,7 @@ extension VerifyDisplayOverlayViewOnIframeExtension
isAppGridDialogDisplayed.isTrue ||
isDrawerOpened.isTrue ||
isContextMenuOpened.isTrue ||
isPopupMenuOpened.isTrue;
isPopupMenuOpened.isTrue ||
labelController.isCreateNewLabelModalVisible.isTrue;
}
}