From b5d775c65f185fa2904d2d391dc840f102b1ec96 Mon Sep 17 00:00:00 2001 From: hieubt Date: Thu, 31 Aug 2023 00:12:29 +0700 Subject: [PATCH] TF-2083 add RuleFilterConditionWidget (cherry picked from commit dd3e2638f4fe6b41239578481a4d41dc8c25c096) --- .../extensions/color_extension.dart | 1 + .../model/rule_filter_condition_type.dart | 5 + .../widgets/rule_filter_condition_widget.dart | 175 ++++++++++++++++++ 3 files changed, 181 insertions(+) create mode 100644 lib/features/rules_filter_creator/presentation/model/rule_filter_condition_type.dart create mode 100644 lib/features/rules_filter_creator/presentation/widgets/rule_filter_condition_widget.dart diff --git a/core/lib/presentation/extensions/color_extension.dart b/core/lib/presentation/extensions/color_extension.dart index 1deeff044..3ba17921e 100644 --- a/core/lib/presentation/extensions/color_extension.dart +++ b/core/lib/presentation/extensions/color_extension.dart @@ -206,6 +206,7 @@ extension AppColor on Color { static const colorClosePopupDialogButton = Color(0xFFAEB7C2); static const colorEmptyPopupDialogButton = Color(0xFFFFC107); static const colorCancelPopupDialogButton = Color(0xFFEBEDF0); + static const colorRemoveRuleFilterConditionButton = Color(0xFFE6E8EC); static const mapGradientColor = [ [Color(0xFF21D4FD), Color(0xFFB721FF)], diff --git a/lib/features/rules_filter_creator/presentation/model/rule_filter_condition_type.dart b/lib/features/rules_filter_creator/presentation/model/rule_filter_condition_type.dart new file mode 100644 index 000000000..5c85247b0 --- /dev/null +++ b/lib/features/rules_filter_creator/presentation/model/rule_filter_condition_type.dart @@ -0,0 +1,5 @@ +enum RuleFilterConditionType { + mobile, + tablet, + desktop +} \ No newline at end of file diff --git a/lib/features/rules_filter_creator/presentation/widgets/rule_filter_condition_widget.dart b/lib/features/rules_filter_creator/presentation/widgets/rule_filter_condition_widget.dart new file mode 100644 index 000000000..88c7071b9 --- /dev/null +++ b/lib/features/rules_filter_creator/presentation/widgets/rule_filter_condition_widget.dart @@ -0,0 +1,175 @@ +import 'package:core/presentation/extensions/color_extension.dart'; +import 'package:core/presentation/utils/keyboard_utils.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get.dart'; +import 'package:tmail_ui_user/features/base/widget/drop_down_button_widget.dart'; +import 'package:tmail_ui_user/features/rules_filter_creator/presentation/model/rule_filter_condition_type.dart'; +import 'package:rule_filter/rule_filter/rule_condition.dart' as rule_condition; +import 'package:rule_filter/rule_filter/rule_condition.dart'; +import 'package:tmail_ui_user/features/rules_filter_creator/presentation/widgets/rule_filter_button_field.dart'; +import 'package:tmail_ui_user/features/rules_filter_creator/presentation/widgets/rules_filter_input_field_builder.dart'; +import 'package:tmail_ui_user/main/localizations/app_localizations.dart'; +import 'package:core/presentation/resources/image_paths.dart'; + +class RuleFilterConditionWidget extends StatelessWidget { + final RuleFilterConditionType? ruleFilterConditionType; + final RuleCondition? ruleCondition; + final Function(Field?)? tapRuleConditionFieldCallback; + final Function(Comparator?)? tapRuleConditionComparatorCallback; + final String? conditionValueErrorText; + final TextEditingController? conditionValueEditingController; + final FocusNode? conditionValueFocusNode; + final OnChangeFilterInputAction? conditionValueOnChangeAction; + final ImagePaths? imagePaths; + final Function()? onTapRemoveRuleFilterConditionCallback; + + const RuleFilterConditionWidget({ + super.key, + this.ruleFilterConditionType, + this.ruleCondition, + this.tapRuleConditionFieldCallback, + this.tapRuleConditionComparatorCallback, + this.conditionValueErrorText, + this.conditionValueEditingController, + this.conditionValueFocusNode, + this.conditionValueOnChangeAction, + this.imagePaths, + this.onTapRemoveRuleFilterConditionCallback, + }); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(12), + decoration: BoxDecoration( + color: AppColor.colorBackgroundFieldConditionRulesFilter, + borderRadius: BorderRadius.circular(12), + ), + child: _buildRuleFilterCondition( + context, + ruleFilterConditionType, + ruleCondition, + tapRuleConditionFieldCallback, + tapRuleConditionComparatorCallback, + conditionValueErrorText, + conditionValueEditingController, + conditionValueFocusNode, + conditionValueOnChangeAction, + onTapRemoveRuleFilterConditionCallback, + imagePaths, + ) + ); + + } +} + +Widget _buildRuleFilterCondition( + BuildContext context, + RuleFilterConditionType? ruleFilterConditionType, + RuleCondition? ruleCondition, + Function(Field?)? tapRuleConditionFieldCallback, + Function(Comparator?)? tapRuleConditionComparatorCallback, + String? conditionValueErrorText, + TextEditingController? conditionValueEditingController, + FocusNode? conditionValueFocusNode, + OnChangeFilterInputAction? conditionValueOnChangeAction, + Function()? onTapRemoveRuleFilterConditionCallback, + ImagePaths? imagePaths, +) { + switch (ruleFilterConditionType) { + case RuleFilterConditionType.mobile: + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + RuleFilterButtonField( + value: ruleCondition!.field.obs.value, + tapActionCallback: (value) { + KeyboardUtils.hideKeyboard(context); + tapRuleConditionFieldCallback!(ruleCondition.field); + }, + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 12), + child: RuleFilterButtonField( + value: ruleCondition!.comparator.obs.value, + tapActionCallback: (value) { + KeyboardUtils.hideKeyboard(context); + tapRuleConditionComparatorCallback!(ruleCondition.comparator); + }, + ) + ), + RulesFilterInputField( + hintText: AppLocalizations.of(context).conditionValueHintTextInput, + errorText: conditionValueErrorText, + focusNode: conditionValueFocusNode, + onChangeAction: conditionValueOnChangeAction, + editingController: conditionValueEditingController, + ), + ], + ); + case RuleFilterConditionType.tablet: + case RuleFilterConditionType.desktop: + return Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded( + child: DropDownButtonWidget( + items: rule_condition.Field.values, + itemSelected: ruleCondition!.field.obs.value, + dropdownMaxHeight: 250, + onChanged: (newField) => { + tapRuleConditionFieldCallback!(newField) + }, + supportSelectionIcon: true, + ) + ), + Container( + width: 220, + padding: const EdgeInsets.symmetric(horizontal: 12), + child: DropDownButtonWidget( + items: rule_condition.Comparator.values, + itemSelected: ruleCondition!.comparator.obs.value, + onChanged: (newComparator) => { + tapRuleConditionComparatorCallback!(newComparator) + }, + supportSelectionIcon: true, + ) + ), + Expanded( + child: RulesFilterInputField( + hintText: AppLocalizations.of(context).conditionValueHintTextInput, + errorText: conditionValueErrorText, + focusNode: conditionValueFocusNode, + onChangeAction: conditionValueOnChangeAction, + editingController: conditionValueEditingController, + ) + ), + _buildRemoveRuleFilterConditionButton(onTapRemoveRuleFilterConditionCallback, imagePaths), + ], + ); + default: + return Container(); + } +} + +Widget _buildRemoveRuleFilterConditionButton ( + Function()? onTapRemoveRuleFilterConditionCallback, + ImagePaths? imagePath, +) { + return Container( + padding: const EdgeInsets.only(left: 12), + child: InkWell( + onTap: onTapRemoveRuleFilterConditionCallback, + child: CircleAvatar( + backgroundColor: AppColor.colorRemoveRuleFilterConditionButton, + radius: 22, + child: SvgPicture.asset( + imagePath!.icMinimize, + fit: BoxFit.fill, + colorFilter: AppColor.colorDeletePermanentlyButton.asFilter(), + ), + ) + ), + ); +} \ No newline at end of file