D1APP-38 radar page (dynamic)

lib/config/theme_data.dart

@@ -95,6 +95,7 @@ class DarkThemeConfig {
       color: _colorScheme.text,
     ),
     checkboxTheme: CheckboxThemeData(
+      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
       fillColor: MaterialStateProperty.all<Color>(_colorScheme.primary),
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(4),

lib/models/enums.dart

@@ -9,3 +9,9 @@ enum ButtonStyleMode {
   primary,
   flat,
 }
+
+enum ALertType {
+  error,
+  info,
+  success,
+}

lib/pages/home/radar/radar.dart

@@ -1,12 +1,28 @@
+import 'dart:async';
+
 import 'package:didvan/config/design_config.dart';
 import 'package:didvan/config/theme_data.dart';
+import 'package:didvan/constants/app_icons.dart';
+import 'package:didvan/models/enums.dart';
+import 'package:didvan/models/radar_category.dart';
+import 'package:didvan/models/view/action_sheet_data.dart';
+import 'package:didvan/pages/home/radar/radar_state.dart';
 import 'package:didvan/pages/home/radar/widgets/categories_gird.dart';
 import 'package:didvan/pages/home/radar/widgets/categories_list.dart';
 import 'package:didvan/pages/home/radar/widgets/radar_item.dart';
 import 'package:didvan/pages/home/radar/widgets/search_field.dart';
 import 'package:didvan/pages/home/widgets/logo_app_bar.dart';
+import 'package:didvan/utils/action_sheet.dart';
+import 'package:didvan/widgets/date_picker_button.dart';
+import 'package:didvan/widgets/didvan/card.dart';
+import 'package:didvan/widgets/didvan/checkbox.dart';
+import 'package:didvan/widgets/didvan/divider.dart';
 import 'package:didvan/widgets/didvan/text.dart';
+import 'package:didvan/widgets/item_title.dart';
+import 'package:didvan/widgets/shimmer_placeholder.dart';
+import 'package:didvan/widgets/sliver_state_handler.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class Radar extends StatefulWidget {
   const Radar({Key? key}) : super(key: key);
@@ -21,37 +37,61 @@ class _RadarState extends State<Radar> {
   bool _isColapsed = false;
   bool _isAnimating = false;
 
+  Timer? _timer;
+
   @override
   void initState() {
     _scrollController.addListener(() async {
       _handleAnimations();
     });
+    Future.delayed(Duration.zero, () {
+      context.read<RadarState>().getRadarOverviews(page: 1);
+    });
     super.initState();
   }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Stack(
+      body: Consumer<RadarState>(
+        child: SliverPadding(
+          padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
+          sliver: SliverToBoxAdapter(
+            child: Row(
+              children: [
+                Expanded(
+                  child: SearchField(title: 'رادار', onChanged: _onChanged),
+                ),
+                const SizedBox(width: 8),
+                GestureDetector(
+                  onTap: _showFilterBottomSheet,
+                  child: const Icon(
+                    DidvanIcons.filter_regular,
+                    size: 32,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        builder: (context, state, child) => Stack(
           children: [
             CustomScrollView(
-            physics: _isAnimating
+              physics: _isAnimating ||
+                      (state.appState == AppState.busy && state.radars.isEmpty)
                   ? const NeverScrollableScrollPhysics()
                   : const ScrollPhysics(),
               controller: _scrollController,
               slivers: [
                 const SliverToBoxAdapter(child: LogoAppBar()),
+                child!,
+                if (!state.isFiltering)
+                  const SliverToBoxAdapter(
+                    child: SizedBox(height: 284),
+                  ),
+                if (state.radars.isNotEmpty && !state.isFiltering)
                   SliverPadding(
-                padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
+                    padding: const EdgeInsets.only(right: 16, bottom: 20),
-                sliver: SliverToBoxAdapter(
-                  child: SearchField(
-                    title: 'رادار',
-                    onChanged: (value) {},
-                  ),
-                ),
-              ),
-              SliverPadding(
-                padding: const EdgeInsets.only(top: 284, right: 16, bottom: 20),
                     sliver: SliverToBoxAdapter(
                       child: DidvanText(
                         'آخرین رصد',
@@ -60,25 +100,42 @@ class _RadarState extends State<Radar> {
                       ),
                     ),
                   ),
-              SliverList(
+                SliverStateHandler<RadarState>(
-                delegate: SliverChildBuilderDelegate(
+                  state: state,
-                  (context, index) => const Padding(
+                  itemPadding: const EdgeInsets.only(
-                    padding: EdgeInsets.only(bottom: 20),
+                    bottom: 20,
-                    child: RadarItem(),
+                    left: 16,
+                    right: 16,
                   ),
-                  childCount: 10,
+                  placeholder: const _RadarItemPlaceholder(),
+                  builder: (context, state, index) => RadarItem(
+                    radar: state.radars[index],
                   ),
+                  childCount: state.radars.length,
                 ),
               ],
             ),
-          CategoriesRow1(isColapsed: _isColapsed),
+            CategoriesRow1(isColapsed: _isColapsed || state.isFiltering),
-          CategoriesRow2(isColapsed: _isColapsed),
+            CategoriesRow2(isColapsed: _isColapsed || state.isFiltering),
-          CategoriesList(isColapsed: _isColapsed),
+            if (!state.isFiltering) CategoriesList(isColapsed: _isColapsed),
           ],
         ),
+      ),
     );
   }
 
+  void _onChanged(String value) {
+    context.read<RadarState>().resetFilters();
+    if (value.length < 4 && value.isNotEmpty) return;
+    _timer?.cancel();
+    _timer = Timer(const Duration(seconds: 2), () {
+      context.read<RadarState>().getRadarOverviews(
+            page: 1,
+            search: value,
+          );
+    });
+  }
+
   void _handleAnimations() async {
     if (_isAnimating) return;
     final double position = _scrollController.position.pixels;
@@ -106,4 +163,144 @@ class _RadarState extends State<Radar> {
       setState(() {});
     }
   }
+
+  Future<void> _showFilterBottomSheet() async {
+    final state = context.read<RadarState>();
+    await ActionSheetUtils.showBottomSheet(
+      data: ActionSheetData(
+        title: 'فیلتر جستجو',
+        titleIcon: DidvanIcons.filter_regular,
+        hasDismissButton: false,
+        confrimTitle: 'نمایش نتایج',
+        onConfirmed: () {
+          Navigator.of(context).pop();
+          state.getRadarOverviews(page: 1, filter: true);
+        },
+        content: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ItemTitle(
+              title: 'تاریخ رادار',
+              style: Theme.of(context).textTheme.bodyText2,
+              icon: DidvanIcons.calendar_range_regular,
+            ),
+            const SizedBox(height: 8),
+            StatefulBuilder(
+              builder: (context, setState) => Row(
+                children: [
+                  DatePickerButton(
+                    initialValue: state.startDate,
+                    emptyText: 'از تاریخ',
+                    onPicked: (date) => setState(() => state.startDate = date),
+                    lastDate: state.endDate,
+                  ),
+                  const SizedBox(width: 8),
+                  DatePickerButton(
+                    initialValue: state.endDate,
+                    emptyText: 'تا تاریخ',
+                    onPicked: (date) => setState(() => state.endDate = date),
+                    firstDate: state.startDate,
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 28),
+            ItemTitle(
+              title: 'دسته بندی',
+              icon: DidvanIcons.radar_regular,
+              style: Theme.of(context).textTheme.bodyText2,
+            ),
+            const SizedBox(height: 12),
+            Wrap(
+              children: [
+                for (var i = 0; i < state.categories.length; i++)
+                  SizedBox(
+                    width: (MediaQuery.of(context).size.width - 40) / 2,
+                    child: DidvanCheckbox(
+                      title: state.categories[i].title,
+                      value: state.selectedCats.contains(state.categories[i]),
+                      onChanged: (value) {
+                        if (value) {
+                          state.selectedCats.add(state.categories[i]);
+                          return;
+                        }
+                        state.selectedCats.remove(state.categories[i]);
+                      },
+                    ),
+                  ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _RadarItemPlaceholder extends StatelessWidget {
+  const _RadarItemPlaceholder({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return DidvanCard(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const ShimmerPlaceholder(
+            width: 200,
+            height: 16,
+          ),
+          const SizedBox(height: 8),
+          const ShimmerPlaceholder(height: 140),
+          const SizedBox(height: 8),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: const [
+              ShimmerPlaceholder(
+                height: 12,
+                width: 70,
+              ),
+              ShimmerPlaceholder(
+                height: 12,
+                width: 70,
+              ),
+            ],
+          ),
+          const SizedBox(height: 8),
+          const ShimmerPlaceholder(
+            height: 16,
+          ),
+          const SizedBox(height: 8),
+          const ShimmerPlaceholder(
+            height: 16,
+          ),
+          const SizedBox(height: 8),
+          const ShimmerPlaceholder(
+            height: 16,
+          ),
+          const DidvanDivider(),
+          Row(
+            children: const [
+              ShimmerPlaceholder(
+                height: 32,
+                width: 32,
+              ),
+              Spacer(),
+              ShimmerPlaceholder(
+                height: 32,
+                width: 32,
+              ),
+              SizedBox(width: 16),
+              ShimmerPlaceholder(
+                height: 32,
+                width: 32,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
 }

lib/pages/home/radar/radar_state.dart

@@ -1,12 +1,68 @@
 import 'package:didvan/constants/assets.dart';
+import 'package:didvan/models/enums.dart';
 import 'package:didvan/models/radar_category.dart';
+import 'package:didvan/models/radar_overview/radar_overview.dart';
 import 'package:didvan/providers/core_provider.dart';
+import 'package:didvan/services/network/request.dart';
+import 'package:didvan/services/network/request_helper.dart';
 
 class RadarState extends CoreProvier {
+  bool isFiltering = false;
+  String? _lastSearch;
+  String? startDate;
+  String? endDate;
+  final List<RadarCategory> selectedCats = [];
+
+  final List<RadarOverview> radars = [];
+
+  void resetFilters() {
+    startDate = null;
+    endDate = null;
+    selectedCats.clear();
+  }
+
+  Future<void> getRadarOverviews({
+    required int page,
+    String? search,
+    bool filter = false,
+  }) async {
+    if (search != null && search.isNotEmpty) {
+      if (_lastSearch == search && !filter) {
+        return;
+      }
+      isFiltering = true;
+      _lastSearch = search;
+    } else {
+      isFiltering = false;
+    }
+    if (filter) {
+      isFiltering = true;
+    }
+    appState = AppState.busy;
+    final RequestService service = RequestService(
+      RequestHelper.getRadarOverviews(
+        page: page,
+        startDate: startDate?.split(' ').first,
+        endDate: endDate?.split(' ').first,
+        search: search,
+        categories: selectedCats.map((e) => e.id).toList(),
+      ),
+    );
+    await service.httpGet();
+    if (service.isSuccess) {
+      for (var i = 0; i < service.result['radars'].length; i++) {
+        radars.add(RadarOverview.fromJson(service.result['radars'][i]));
+      }
+      appState = AppState.idle;
+      return;
+    }
+    appState = AppState.failed;
+  }
+
   final List<RadarCategory> categories = [
     RadarCategory(
       id: 1,
-      title: 'افتصادی',
+      title: 'اقتصادی',
       asset: Assets.economicCategoryIcon,
     ),
     RadarCategory(

lib/pages/home/radar/widgets/radar_item.dart

@@ -1,6 +1,7 @@
 import 'package:didvan/config/design_config.dart';
 import 'package:didvan/config/theme_data.dart';
 import 'package:didvan/constants/app_icons.dart';
+import 'package:didvan/models/radar_overview/radar_overview.dart';
 import 'package:didvan/routes/routes.dart';
 import 'package:didvan/widgets/didvan/card.dart';
 import 'package:didvan/widgets/didvan/divider.dart';
@@ -9,13 +10,12 @@ import 'package:didvan/widgets/skeletun_image.dart';
 import 'package:flutter/material.dart';
 
 class RadarItem extends StatelessWidget {
-  const RadarItem({Key? key}) : super(key: key);
+  final RadarOverview? radar;
+  const RadarItem({Key? key, required this.radar}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return DidvanCard(
-      padding: const EdgeInsets.symmetric(horizontal: 16),
-      child: DidvanCard(
       onTap: () => Navigator.of(context).pushNamed(Routes.radarDetails),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -82,7 +82,6 @@ class RadarItem extends StatelessWidget {
           ),
         ],
       ),
-      ),
     );
   }
 }

lib/pages/home/radar/widgets/search_field.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 
 class SearchField extends StatefulWidget {
   final String title;
-  final void Function(String? value) onChanged;
+  final void Function(String value) onChanged;
 
   const SearchField({Key? key, required this.title, required this.onChanged})
       : super(key: key);
@@ -47,8 +47,9 @@ class _SearchFieldState extends State<SearchField> {
               color: Theme.of(context).colorScheme.primary,
             ),
           ),
-          prefixIcon: const Icon(
+          prefixIcon: Icon(
             DidvanIcons.search_regular,
+            color: Theme.of(context).colorScheme.text,
           ),
           prefixIconColor: Theme.of(context).colorScheme.inputText,
           enabledBorder: OutlineInputBorder(

lib/services/network/request_helper.dart

@@ -6,20 +6,31 @@ class RequestHelper {
 
   static String getRadarOverviews({
     required int page,
-    int? radarId,
+    List<int> categories = const [],
     String? startDate,
     String? endDate,
     String? search,
-  }) =>
+  }) {
-      _baseUrl +
+    String? cats;
+    if (categories.isNotEmpty) {
+      cats = '';
+      for (var i = 0; i < categories.length; i++) {
+        cats = cats! + categories[i].toString();
+        if (i != categories.length - 1) {
+          cats += ',';
+        }
+      }
+    }
+    return _baseUrl +
         '/radar' +
         _urlConcatGenerator([
           MapEntry('page', page.toString()),
           MapEntry('start', startDate),
           MapEntry('end', endDate),
           MapEntry('search', search),
-        MapEntry('radar', radarId?.toString()),
+          MapEntry('categories', cats),
         ]);
+  }
 
   static String _urlConcatGenerator(List<MapEntry<String, String?>> additions) {
     String result = '';
@@ -27,8 +38,8 @@ class RequestHelper {
     if (additions.isNotEmpty) {
       result += '?';
       for (var i = 0; i < additions.length; i++) {
-        result += (additions[i].key + additions[i].value!);
+        result += (additions[i].key + '=' + additions[i].value!);
-        if (i != additions.length) {
+        if (i != additions.length - 1) {
           result += '&';
         }
       }

lib/utils/action_sheet.dart

@@ -117,7 +117,7 @@ class ActionSheetUtils {
                   Expanded(
                     child: DidvanButton(
                       style: ButtonStyleMode.primary,
-                      onPressed: () {},
+                      onPressed: data.onConfirmed,
                       title: data.confrimTitle ?? 'تایید',
                     ),
                   ),

lib/utils/date_time.dart

@@ -1,4 +1,6 @@
+import 'package:didvan/config/design_config.dart';
 import 'package:flutter/material.dart';
+import 'package:persian_datetime_picker/persian_datetime_picker.dart';
 
 class DateTimeUtils {
   static TimeOfDay stringToTimeOfDay(String input) => TimeOfDay(
@@ -22,4 +24,23 @@ class DateTimeUtils {
     }
     return '$minute:$second';
   }
+
+  static Future<String?> showDatePicker(
+      {String? initialDate, String? startDate, String? endDate}) async {
+    final initDate = initialDate == null ? null : DateTime.parse(initialDate);
+    final initialJalali = Jalali.fromDateTime(initDate ?? DateTime.now());
+    final firstDate = Jalali.fromDateTime(
+      startDate == null ? DateTime(2021) : DateTime.parse(startDate),
+    );
+    final lastDate = Jalali.fromDateTime(
+      endDate == null ? DateTime.now() : DateTime.parse(endDate),
+    );
+    final Jalali? result = await showPersianDatePicker(
+      context: DesignConfig.context,
+      initialDate: initialJalali,
+      firstDate: firstDate,
+      lastDate: lastDate,
+    );
+    return result?.toDateTime().toString();
+  }
 }

pubspec.lock

@@ -441,6 +441,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.7.0"
+  persian_datetime_picker:
+    dependency: "direct main"
+    description:
+      name: persian_datetime_picker
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.4.0"
+  persian_number_utility:
+    dependency: "direct main"
+    description:
+      name: persian_number_utility
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.1"
   petitparser:
     dependency: transitive
     description:

pubspec.yaml

@@ -58,6 +58,8 @@ dependencies:
   record_web: ^0.2.1
   just_waveform: ^0.0.1
   another_flushbar: ^1.10.28
+  persian_datetime_picker: ^2.4.0
+  persian_number_utility: ^1.1.1
 
 dev_dependencies:
   flutter_test: