Merge pull request apache#15768 from [BEAM-13064] [Playground] Implem…

…ent search & filter logic * [BEAM-12967]: Created Examples Component * [BEAM-12967]: Wrapped CategoryBubble and ExpansionPanelItem in MouseRegion * [BEAM-13064]: Implemented Search field and Filter by type components logic * [BEAM-13064]: Fixed names to clarify code, refactored Category model (added const keyword) * [BEAM-13064]: Increased test coverage of Example Dropdown module * [BEAM-12967] Added generated files * [BEAM-12967]: Added license to generated files * [BEAM-13064]: Fixed sorting functionality, updated tests & mocks * [BEAM-13064]: Refactored code * [BEAM-12967]: Deleted duplicate files * [BEAM-13064] Fixes after merge * [Playground][BEAM-12941][Bugfix] Fix workflows for playground applications (#83) * Update workflows for playground * Attempt to fix tests * Remove continue on error to catch errors * Fix linter problem for backend dockerfile * Update folder to run backend go linter * Moved flutter test to execution via gradle tasks * Revert "[Playground][BEAM-12941][Bugfix] Fix workflows for playground applications (#83)" (#88) This reverts commit b73f5f7. * [BEAM-13064] Fixed analyze issues * [BEAM-13064] Fixed example selector state test Co-authored-by: Sergey Kalinin <91209855+snkalinin@users.noreply.github.com> Co-authored-by: Ilya <ilya.kozyrev@akvelon.com> Co-authored-by: Aydar Zainutdinov <aydar.zaynutdinov@akvelon.com> Co-authored-by: daria.malkova <daria.malkova@akvelon.com>
akvelon · Nov 20, 2021 · b6bc642 · b6bc642
1 parent 2c1a29b
commit b6bc642
Show file tree

Hide file tree

Showing 14 changed files with 645 additions and 155 deletions.
diff --git a/playground/frontend/lib/modules/examples/components/example_list/example_list.dart b/playground/frontend/lib/modules/examples/components/example_list/example_list.dart
@@ -18,34 +18,36 @@
 
 import 'package:flutter/material.dart';
 import 'package:playground/modules/examples/components/examples_components.dart';
+import 'package:playground/pages/playground/states/example_selector_state.dart';
+import 'package:provider/provider.dart';
 
 class ExampleList extends StatelessWidget {
-  final List items;
   final ScrollController controller;
 
   const ExampleList({
     Key? key,
-    required this.items,
     required this.controller,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
-      child: Container(
-        color: Theme.of(context).backgroundColor,
-        child: Scrollbar(
-          isAlwaysShown: true,
-          showTrackOnHover: true,
-          controller: controller,
-          child: ListView.builder(
-            itemCount: items.length,
-            itemBuilder: (context, index) => CategoryExpansionPanel(
-              categoryName: items[index].name,
-              examples: items[index].examples,
-            ),
+    return Consumer<ExampleSelectorState>(
+      builder: (context, state, child) => Expanded(
+        child: Container(
+          color: Theme.of(context).backgroundColor,
+          child: Scrollbar(
+            isAlwaysShown: true,
+            showTrackOnHover: true,
             controller: controller,
-            shrinkWrap: true,
+            child: ListView.builder(
+              itemCount: state.categories.length,
+              itemBuilder: (context, index) => CategoryExpansionPanel(
+                categoryName: state.categories[index].name,
+                examples: state.categories[index].examples,
+              ),
+              controller: controller,
+              shrinkWrap: true,
+            ),
           ),
         ),
       ),

diff --git a/playground/frontend/lib/modules/examples/components/filter/category_bubble.dart b/playground/frontend/lib/modules/examples/components/filter/category_bubble.dart
@@ -19,48 +19,55 @@
 import 'package:flutter/material.dart';
 import 'package:playground/config/theme.dart';
 import 'package:playground/constants/sizes.dart';
-import 'package:playground/pages/playground/states/example_dropdown_state.dart';
+import 'package:playground/modules/examples/models/example_model.dart';
+import 'package:playground/pages/playground/states/example_selector_state.dart';
 import 'package:provider/provider.dart';
 
 class CategoryBubble extends StatelessWidget {
-  final String name;
+  final ExampleType type;
 
-  const CategoryBubble({Key? key, required this.name}) : super(key: key);
+  const CategoryBubble({Key? key, required this.type}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.only(right: kMdSpacing),
-      child: Consumer<ExampleDropdownState>(
-        builder: (context, state, child) => MouseRegion(
-          cursor: SystemMouseCursors.click,
-          child: GestureDetector(
-            onTap: () {
-              if (name != state.selectedCategory) {
-                state.setSelectedCategory(name);
-              }
-            },
-            child: Container(
-              height: kContainerHeight,
-              padding: const EdgeInsets.symmetric(horizontal: kXlSpacing),
-              decoration: BoxDecoration(
-                color: name == state.selectedCategory
-                    ? ThemeColors.of(context).primary
-                    : ThemeColors.of(context).lightGreyColor,
-                borderRadius: BorderRadius.circular(kXlBorderRadius),
-              ),
-              child: Center(
-                child: Text(
-                  name,
-                  style: TextStyle(
-                    color: name == state.selectedCategory
-                        ? ThemeColors.of(context).primaryBackgroundTextColor
-                        : ThemeColors.of(context).lightGreyBackgroundTextColor,
+    return MouseRegion(
+      cursor: SystemMouseCursors.click,
+      child: Padding(
+        padding: const EdgeInsets.only(right: kMdSpacing),
+        child: Consumer<ExampleSelectorState>(
+          builder: (context, state, child) {
+            final isSelected = type == state.selectedFilterType;
+
+            return GestureDetector(
+              onTap: () {
+                if (!isSelected) {
+                  state.setSelectedFilterType(type);
+                  state.sortCategories();
+                }
+              },
+              child: Container(
+                height: kContainerHeight,
+                padding: const EdgeInsets.symmetric(horizontal: kXlSpacing),
+                decoration: BoxDecoration(
+                  color: isSelected
+                      ? ThemeColors.of(context).primary
+                      : ThemeColors.of(context).lightGreyColor,
+                  borderRadius: BorderRadius.circular(kXlBorderRadius),
+                ),
+                child: Center(
+                  child: Text(
+                    type.name,
+                    style: TextStyle(
+                      color: isSelected
+                          ? ThemeColors.of(context).primaryBackgroundTextColor
+                          : ThemeColors.of(context)
+                              .lightGreyBackgroundTextColor,
+                    ),
                   ),
                 ),
               ),
-            ),
-          ),
+            );
+          },
         ),
       ),
     );

diff --git a/playground/frontend/lib/modules/examples/components/filter/type_filter.dart b/playground/frontend/lib/modules/examples/components/filter/type_filter.dart
@@ -19,6 +19,7 @@
 import 'package:flutter/material.dart';
 import 'package:playground/constants/sizes.dart';
 import 'package:playground/modules/examples/components/examples_components.dart';
+import 'package:playground/modules/examples/models/example_model.dart';
 
 class TypeFilter extends StatelessWidget {
   const TypeFilter({Key? key}) : super(key: key);
@@ -32,10 +33,10 @@ class TypeFilter extends StatelessWidget {
       ),
       child: Row(
         children: const <CategoryBubble>[
-          CategoryBubble(name: 'All'),
-          CategoryBubble(name: 'Examples'),
-          CategoryBubble(name: 'Katas'),
-          CategoryBubble(name: 'Unit tests'),
+          CategoryBubble(type: ExampleType.all),
+          CategoryBubble(type: ExampleType.example),
+          CategoryBubble(type: ExampleType.kata),
+          CategoryBubble(type: ExampleType.test),
         ],
       ),
     );

diff --git a/playground/frontend/lib/modules/examples/components/search_field/search_field.dart b/playground/frontend/lib/modules/examples/components/search_field/search_field.dart
@@ -19,6 +19,8 @@
 import 'package:flutter/material.dart';
 import 'package:playground/config/theme.dart';
 import 'package:playground/constants/sizes.dart';
+import 'package:playground/pages/playground/states/example_selector_state.dart';
+import 'package:provider/provider.dart';
 
 const double kContainerWidth = 376.0;
 const int kMinLines = 1;
@@ -37,45 +39,53 @@ class SearchField extends StatelessWidget {
       borderRadius: BorderRadius.circular(kMdBorderRadius),
     );
 
-    return Container(
-      margin: const EdgeInsets.only(
-        top: kLgSpacing,
-        right: kLgSpacing,
-        left: kLgSpacing,
-      ),
-      width: kContainerWidth,
-      height: kContainerHeight,
-      color: Theme.of(context).backgroundColor,
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(kMdBorderRadius),
-        child: TextFormField(
-          controller: controller,
-          decoration: InputDecoration(
-            suffixIcon: Padding(
-              padding: const EdgeInsetsDirectional.only(
-                start: kZeroSpacing,
-                end: kZeroSpacing,
-              ),
-              child: Icon(
-                Icons.search,
-                color: ThemeColors.of(context).lightGreyColor,
-                size: kIconSizeMd,
+    return Consumer<ExampleSelectorState>(
+      builder: (context, state, child) => Container(
+        margin: const EdgeInsets.only(
+          top: kLgSpacing,
+          right: kLgSpacing,
+          left: kLgSpacing,
+        ),
+        width: kContainerWidth,
+        height: kContainerHeight,
+        color: Theme.of(context).backgroundColor,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(kMdBorderRadius),
+          child: TextFormField(
+            controller: controller,
+            decoration: InputDecoration(
+              suffixIcon: Padding(
+                padding: const EdgeInsetsDirectional.only(
+                  start: kZeroSpacing,
+                  end: kZeroSpacing,
+                ),
+                child: Icon(
+                  Icons.search,
+                  color: ThemeColors.of(context).lightGreyColor,
+                  size: kIconSizeMd,
+                ),
               ),
+              focusedBorder: border,
+              enabledBorder: border,
+              filled: false,
+              isDense: true,
+              hintText: kHintText,
+              contentPadding: const EdgeInsets.only(left: kLgSpacing),
             ),
-            focusedBorder: border,
-            enabledBorder: border,
-            filled: false,
-            isDense: true,
-            hintText: kHintText,
-            contentPadding: const EdgeInsets.only(left: kLgSpacing),
+            cursorColor: ThemeColors.of(context).lightGreyColor,
+            cursorWidth: kCursorSize,
+            textAlignVertical: TextAlignVertical.center,
+            onFieldSubmitted: (String filterText) {
+              state.setFilterText(filterText);
+              state.sortCategories();
+            },
+            onChanged: (String filterText) {
+              state.setFilterText(filterText);
+              state.sortCategories();
+            },
+            maxLines: kMinLines,
+            minLines: kMaxLines,
           ),
-          cursorColor: ThemeColors.of(context).lightGreyColor,
-          cursorWidth: kCursorSize,
-          textAlignVertical: TextAlignVertical.center,
-          onFieldSubmitted: (String txt) {},
-          onChanged: (String txt) {},
-          maxLines: kMinLines,
-          minLines: kMaxLines,
         ),
       ),
     );