Merge pull request 'feat(timezone): Timezone search bar for the timezone selection screen' (#138) from timezone-bar into master

Reviewed-on: https://git.selfprivacy.org/kherel/selfprivacy.org.app/pulls/138 Reviewed-by: NaiJi ✨ <naiji@udongein.xyz>
2025-01-08 17:11:14 +00:00 · 2022-10-21 05:58:36 +03:00 · 2022-10-21 05:58:36 +03:00 · 522cbbf3d5
parent e1419ce38f e7bb1dc16e
commit 522cbbf3d5
5 changed files with 120 additions and 76 deletions
--- a/assets/translations/en.json
+++ b/assets/translations/en.json
@ -101,6 +101,7 @@
        "reboot_after_upgrade_hint": "Reboot without prompt after applying changes on server",
        "server_timezone": "Server timezone",
        "select_timezone": "Select timezone",
+        "timezone_search_bar": "Timezone name or time shift value",
        "server_id": "Server ID",
        "status": "Status",
        "cpu": "CPU",
--- a/assets/translations/ru.json
+++ b/assets/translations/ru.json
@ -101,6 +101,7 @@
        "reboot_after_upgrade_hint": "Автоматически перезагружать сервер после применения обновлений",
        "server_timezone": "Часовой пояс сервера",
        "select_timezone": "Выберите часовой пояс",
+        "timezone_search_bar": "Имя часового пояса или значение временного сдвига",
        "server_id": "ID сервера",
        "status": "Статус",
        "cpu": "Процессор",
--- a/lib/ui/pages/server_details/server_details_screen.dart
+++ b/lib/ui/pages/server_details/server_details_screen.dart
@ -17,17 +17,15 @@ import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
 import 'package:selfprivacy/ui/components/brand_loader/brand_loader.dart';
 import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
 import 'package:selfprivacy/ui/components/list_tiles/list_tile_on_surface_variant.dart';
+import 'package:selfprivacy/ui/pages/server_details/charts/cpu_chart.dart';
+import 'package:selfprivacy/ui/pages/server_details/charts/network_charts.dart';
 import 'package:selfprivacy/ui/pages/server_storage/storage_card.dart';
-import 'package:selfprivacy/ui/pages/server_details/time_zone/lang.dart';
 import 'package:selfprivacy/utils/extensions/duration.dart';
 import 'package:selfprivacy/utils/extensions/string_extensions.dart';
 import 'package:selfprivacy/utils/named_font_weight.dart';
 import 'package:selfprivacy/utils/route_transitions/basic.dart';
 import 'package:timezone/timezone.dart';

-import 'package:selfprivacy/ui/pages/server_details/charts/cpu_chart.dart';
-import 'package:selfprivacy/ui/pages/server_details/charts/network_charts.dart';
-
 part 'charts/chart.dart';
 part 'server_settings.dart';
 part 'text_details.dart';
--- a/lib/ui/pages/server_details/time_zone/time_zone.dart
+++ b/lib/ui/pages/server_details/time_zone/time_zone.dart
@ -14,11 +14,21 @@ class SelectTimezone extends StatefulWidget {
 }

 class _SelectTimezoneState extends State<SelectTimezone> {
-  final ScrollController controller = ScrollController();
+  final ScrollController scrollController = ScrollController();
+  final TextEditingController searchController = TextEditingController();
+
+  String? timezoneFilterValue;
+  bool isSearching = false;

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
+    searchController.addListener(() {
+      setState(() {
+        timezoneFilterValue =
+            searchController.text.isNotEmpty ? searchController.text : null;
+      });
+    });
    super.initState();
  }

@ -31,7 +41,7 @@ class _SelectTimezoneState extends State<SelectTimezone> {
    print(t);

    if (index >= 0) {
-      controller.animateTo(
+      scrollController.animateTo(
        60.0 * index,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeIn,
@ -41,93 +51,120 @@ class _SelectTimezoneState extends State<SelectTimezone> {

  @override
  void dispose() {
-    controller.dispose();
+    scrollController.dispose();
+    searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(final BuildContext context) => Scaffold(
        appBar: AppBar(
-          title: Padding(
-            padding: const EdgeInsets.only(top: 4.0),
-            child: Text('server.select_timezone'.tr()),
-          ),
+          title: isSearching
+              ? TextField(
+                  readOnly: false,
+                  textAlign: TextAlign.start,
+                  textInputAction: TextInputAction.next,
+                  enabled: true,
+                  controller: searchController,
+                  decoration: InputDecoration(
+                    errorText: null,
+                    hintText: 'server.timezone_search_bar'.tr(),
+                  ),
+                )
+              : Padding(
+                  padding: const EdgeInsets.only(top: 4.0),
+                  child: Text('server.select_timezone'.tr()),
+                ),
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
-            onPressed: () => Navigator.of(context).pop(),
+            onPressed: isSearching
+                ? () => setState(() => isSearching = false)
+                : () => Navigator.of(context).pop(),
          ),
+          actions: [
+            if (!isSearching)
+              IconButton(
+                icon: const Icon(Icons.search),
+                onPressed: () => setState(() => isSearching = true),
+              ),
+          ],
        ),
        body: SafeArea(
          child: ListView(
-            controller: controller,
+            controller: scrollController,
            children: locations
+                .where(
+                  (final Location location) => timezoneFilterValue == null
+                      ? true
+                      : location.name
+                              .toLowerCase()
+                              .contains(timezoneFilterValue!) ||
+                          Duration(
+                            milliseconds: location.currentTimeZone.offset,
+                          )
+                              .toDayHourMinuteFormat()
+                              .contains(timezoneFilterValue!),
+                )
+                .toList()
                .asMap()
-                .map((final key, final value) {
-                  final duration =
-                      Duration(milliseconds: value.currentTimeZone.offset);
-                  final area = value.currentTimeZone.abbreviation
-                      .replaceAll(RegExp(r'[\d+()-]'), '');
-
-                  String timezoneName = value.name;
-                  if (context.locale.toString() == 'ru') {
-                    timezoneName = russian[value.name] ??
-                        () {
-                          final arr = value.name.split('/')..removeAt(0);
-                          return arr.join('/');
-                        }();
-                  }
-
-                  return MapEntry(
-                    key,
-                    Container(
-                      height: 75,
-                      padding: const EdgeInsets.symmetric(horizontal: 20),
-                      decoration: const BoxDecoration(
-                        border: Border(
-                          bottom: BorderSide(
-                            color: BrandColors.dividerColor,
-                          ),
-                        ),
-                      ),
-                      child: InkWell(
-                        onTap: () {
-                          context
-                              .read<ServerDetailsCubit>()
-                              .repository
-                              .setTimezone(
-                                timezoneName,
-                              );
-                          Navigator.of(context).pop();
-                        },
-                        child: Container(
-                          padding: const EdgeInsets.symmetric(vertical: 16),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            children: [
-                              BrandText.body1(
-                                timezoneName,
-                                style: const TextStyle(
-                                  fontSize: 16,
-                                  fontWeight: FontWeight.bold,
-                                ),
-                              ),
-                              BrandText.small(
-                                'GMT ${duration.toDayHourMinuteFormat()} ${area.isNotEmpty ? '($area)' : ''}',
-                                style: const TextStyle(
-                                  fontSize: 13,
-                                ),
-                              ),
-                            ],
-                          ),
-                        ),
-                      ),
-                    ),
-                  );
-                })
+                .map(
+                  (final key, final value) => locationToListTile(key, value),
+                )
                .values
                .toList(),
          ),
        ),
      );
+
+  MapEntry<int, Container> locationToListTile(
+      final int key, final Location location) {
+    final duration = Duration(milliseconds: location.currentTimeZone.offset);
+    final area = location.currentTimeZone.abbreviation
+        .replaceAll(RegExp(r'[\d+()-]'), '');
+
+    return MapEntry(
+      key,
+      Container(
+        height: 75,
+        padding: const EdgeInsets.symmetric(horizontal: 20),
+        decoration: const BoxDecoration(
+          border: Border(
+            bottom: BorderSide(
+              color: BrandColors.dividerColor,
+            ),
+          ),
+        ),
+        child: InkWell(
+          onTap: () {
+            context.read<ServerDetailsCubit>().repository.setTimezone(
+                  location.name,
+                );
+            Navigator.of(context).pop();
+          },
+          child: Container(
+            padding: const EdgeInsets.symmetric(vertical: 16),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                BrandText.body1(
+                  location.name,
+                  style: const TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                BrandText.small(
+                  'GMT ${duration.toDayHourMinuteFormat()} ${area.isNotEmpty ? '($area)' : ''}',
+                  style: const TextStyle(
+                    fontSize: 13,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
 }
--- a/lib/ui/pages/server_storage/extending_volume.dart
+++ b/lib/ui/pages/server_storage/extending_volume.dart
@ -32,6 +32,13 @@ class _ExtendingVolumePageState extends State<ExtendingVolumePage> {
    super.initState();
  }

+  @override
+  void dispose() {
+    _sizeController.dispose();
+    _priceController.dispose();
+    super.dispose();
+  }
+
  bool _isError = false;

  late double _currentSliderGbValue;