refactor(ui): Refactor the CreateBackupsModal

This commit is contained in:
Inex Code 2024-11-14 20:49:26 +03:00
parent 33e9d23043
commit 94bd428988
2 changed files with 100 additions and 65 deletions

View file

@ -0,0 +1,80 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:selfprivacy/logic/bloc/server_jobs/server_jobs_bloc.dart';
import 'package:selfprivacy/logic/bloc/volumes/volumes_bloc.dart';
import 'package:selfprivacy/logic/models/service.dart';
class CreateBackupCheckboxItem extends StatelessWidget {
const CreateBackupCheckboxItem({
required this.service,
required this.busy,
required this.selected,
required this.onChanged,
super.key,
});
final Service service;
final bool busy;
final bool selected;
final void Function(bool?) onChanged;
@override
Widget build(final BuildContext context) {
final List<Widget> descriptionWidgets = [];
if (busy) {
descriptionWidgets.add(
Text(
'backup.service_busy'.tr(),
),
);
} else {
descriptionWidgets.add(
Text(
'service_page.uses'.tr(
namedArgs: {
'usage': service.storageUsage.used.toString(),
'volume': context
.read<VolumesBloc>()
.state
.getVolume(service.storageUsage.volume ?? '')
.displayName,
},
),
style: Theme.of(context).textTheme.labelMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
),
);
descriptionWidgets.add(
Text(service.backupDescription),
);
}
return CheckboxListTile.adaptive(
onChanged: !busy ? onChanged : null,
title: Text(
service.displayName,
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: descriptionWidgets,
),
isThreeLine: true,
secondary: Padding(
padding: const EdgeInsets.only(top: 4.0),
child: SvgPicture.string(
service.svgIcon,
height: 24,
width: 24,
colorFilter: ColorFilter.mode(
busy
? Theme.of(context).colorScheme.outlineVariant
: Theme.of(context).colorScheme.onSurface,
BlendMode.srcIn,
),
),
),
value: selected,
);
}
}

View file

@ -1,10 +1,9 @@
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:selfprivacy/logic/bloc/backups/backups_bloc.dart'; import 'package:selfprivacy/logic/bloc/backups/backups_bloc.dart';
import 'package:selfprivacy/logic/bloc/server_jobs/server_jobs_bloc.dart'; import 'package:selfprivacy/logic/bloc/server_jobs/server_jobs_bloc.dart';
import 'package:selfprivacy/logic/bloc/volumes/volumes_bloc.dart';
import 'package:selfprivacy/logic/models/service.dart'; import 'package:selfprivacy/logic/models/service.dart';
import 'package:selfprivacy/ui/molecules/list_items/create_backup_checkbox_item.dart';
class CreateBackupsModal extends StatefulWidget { class CreateBackupsModal extends StatefulWidget {
const CreateBackupsModal({ const CreateBackupsModal({
@ -21,7 +20,7 @@ class CreateBackupsModal extends StatefulWidget {
} }
class _CreateBackupsModalState extends State<CreateBackupsModal> { class _CreateBackupsModalState extends State<CreateBackupsModal> {
// Store in state the selected services to backup /// Store in state the selected services to backup
List<Service> selectedServices = []; List<Service> selectedServices = [];
// Select all services on modal open // Select all services on modal open
@ -83,68 +82,24 @@ class _CreateBackupsModalState extends State<CreateBackupsModal> {
height: 1.0, height: 1.0,
), ),
...widget.services.map( ...widget.services.map(
(final Service service) { (final Service service) => CreateBackupCheckboxItem(
final bool busy = busyServices.contains(service.id); service: service,
final List<Widget> descriptionWidgets = []; busy: busyServices.contains(service.id),
if (busy) { selected: selectedServices.contains(service),
descriptionWidgets.add(Text('backup.service_busy'.tr())); onChanged: (final bool? value) {
} else { setState(() {
descriptionWidgets.add( if (value ?? true) {
Text( setState(() {
'service_page.uses'.tr( selectedServices.add(service);
namedArgs: { });
'usage': service.storageUsage.used.toString(), } else {
'volume': context setState(() {
.read<VolumesBloc>() selectedServices.remove(service);
.state });
.getVolume(service.storageUsage.volume ?? '') }
.displayName, });
}, },
), ),
style: Theme.of(context).textTheme.labelMedium,
),
);
descriptionWidgets.add(
Text(service.backupDescription),
);
}
return CheckboxListTile.adaptive(
onChanged: !busy
? (final bool? value) {
setState(() {
if (value ?? true) {
setState(() {
selectedServices.add(service);
});
} else {
setState(() {
selectedServices.remove(service);
});
}
});
}
: null,
title: Text(
service.displayName,
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: descriptionWidgets,
),
secondary: SvgPicture.string(
service.svgIcon,
height: 24,
width: 24,
colorFilter: ColorFilter.mode(
busy
? Theme.of(context).colorScheme.outlineVariant
: Theme.of(context).colorScheme.onSurface,
BlendMode.srcIn,
),
),
value: selectedServices.contains(service),
);
},
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
// Create backup button // Create backup button