TF-2615 improve always read receipt loading mechanism & UX

This commit is contained in:
DatDang
2024-03-14 08:43:21 +07:00
committed by Dat H. Pham
parent 42b7a874ab
commit 9ac7ebd787
2 changed files with 66 additions and 57 deletions
@@ -19,7 +19,7 @@ class AlwaysReadReceiptController extends BaseController {
final GetAlwaysReadReceiptSettingInteractor _getAlwaysReadReceiptSettingInteractor; final GetAlwaysReadReceiptSettingInteractor _getAlwaysReadReceiptSettingInteractor;
final UpdateAlwaysReadReceiptSettingInteractor _updateAlwaysReadReceiptSettingInteractor; final UpdateAlwaysReadReceiptSettingInteractor _updateAlwaysReadReceiptSettingInteractor;
final alwaysReadReceipt = true.obs; final alwaysReadReceipt = Rxn<bool>();
bool get isLoading => viewState.value.fold( bool get isLoading => viewState.value.fold(
(failure) => false, (failure) => false,
(success) => success is GettingAlwaysReadReceiptSetting || success is UpdatingAlwaysReadReceiptSetting); (success) => success is GettingAlwaysReadReceiptSetting || success is UpdatingAlwaysReadReceiptSetting);
@@ -71,12 +71,12 @@ class AlwaysReadReceiptController extends BaseController {
} }
void toggleAlwaysReadReceipt() { void toggleAlwaysReadReceipt() {
if (isLoading) return; if (isLoading || alwaysReadReceipt.value == null) return;
final accountId = _manageAccountDashBoardController.accountId.value; final accountId = _manageAccountDashBoardController.accountId.value;
if (accountId != null) { if (accountId != null) {
consumeState(_updateAlwaysReadReceiptSettingInteractor.execute( consumeState(_updateAlwaysReadReceiptSettingInteractor.execute(
accountId, accountId,
!alwaysReadReceipt.value)); !alwaysReadReceipt.value!));
} }
} }
@@ -14,20 +14,24 @@ class AlwaysReadReceiptView extends GetWidget<AlwaysReadReceiptController> with
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: SettingsUtils.getBackgroundColor(context, controller.responsiveUtils), backgroundColor: SettingsUtils.getBackgroundColor(context, controller.responsiveUtils),
body: Container( body: Padding(
color: SettingsUtils.getContentBackgroundColor(context, controller.responsiveUtils), padding: SettingsUtils.getMarginViewForSettingDetails(context, controller.responsiveUtils),
decoration: SettingsUtils.getBoxDecorationForContent(context, controller.responsiveUtils),
margin: SettingsUtils.getMarginViewForSettingDetails(context, controller.responsiveUtils),
padding: SettingsUtils.getPaddingAlwaysReadReceiptSetting(context, controller.responsiveUtils),
child: Column( child: Column(
children: [ children: [
Obx(() { Obx(() {
if (!controller.isLoading) { if (!controller.isLoading) {
return const SizedBox(height: 3); return const SizedBox.shrink();
} }
return horizontalLoadingWidget; return Padding(
padding: const EdgeInsets.only(bottom: 8),
child: horizontalLoadingWidget,
);
}), }),
Expanded( Expanded(
child: Container(
color: SettingsUtils.getContentBackgroundColor(context, controller.responsiveUtils),
decoration: SettingsUtils.getBoxDecorationForContent(context, controller.responsiveUtils),
padding: SettingsUtils.getPaddingAlwaysReadReceiptSetting(context, controller.responsiveUtils),
child: ListView( child: ListView(
physics: const ClampingScrollPhysics(), physics: const ClampingScrollPhysics(),
children: [ children: [
@@ -46,21 +50,24 @@ class AlwaysReadReceiptView extends GetWidget<AlwaysReadReceiptController> with
height: 20 / 16, height: 20 / 16,
color: AppColor.colorTextSettingDescriptions)), color: AppColor.colorTextSettingDescriptions)),
const SizedBox(height: 24), const SizedBox(height: 24),
Row( Obx(() {
if (controller.alwaysReadReceipt.value == null) {
return const SizedBox.shrink();
}
return Row(
children: [ children: [
InkWell( InkWell(
onTap: controller.toggleAlwaysReadReceipt, onTap: controller.toggleAlwaysReadReceipt,
child: Padding( child: Padding(
padding: const EdgeInsets.all(4), padding: const EdgeInsets.all(4),
child: Obx(() { child: SvgPicture.asset(
return SvgPicture.asset( controller.alwaysReadReceipt.value!
controller.alwaysReadReceipt.value
? controller.imagePaths.icSwitchOn ? controller.imagePaths.icSwitchOn
: controller.imagePaths.icSwitchOff, : controller.imagePaths.icSwitchOff,
fit: BoxFit.fill, fit: BoxFit.fill,
width: 32, width: 32,
height: 20); height: 20),
}),
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
@@ -73,10 +80,12 @@ class AlwaysReadReceiptView extends GetWidget<AlwaysReadReceiptController> with
color: Colors.black), color: Colors.black),
)), )),
], ],
), );
}),
], ],
), ),
), ),
),
], ],
), ),
), ),