feat(Autocomplete): implement group_by option on Entity Autocompleter result

jvancoillie · jvancoillie · commit 94cc1b5cd8f7 · 2022-11-06T03:54:46.000+01:00
diff --git a/src/Autocomplete/assets/dist/controller.js b/src/Autocomplete/assets/dist/controller.js
@@ -131,13 +131,14 @@ _instances = new WeakSet(), _getCommonConfig = function _getCommonConfig() {
             const url = this.getUrl(query);
             fetch(url)
                 .then(response => response.json())
-                .then(json => { this.setNextUrl(query, json.next_page); callback(json.results); })
+                .then(json => { this.setNextUrl(query, json.next_page); callback(json.results.options, json.results.optgroups || []); })
                 .catch(() => callback());
         },
         shouldLoad: function (query) {
             const minLength = minCharacterLength || 3;
             return query.length >= minLength;
         },
+        optgroupField: 'group_by',
         score: function (search) {
             return function (item) {
                 return 1;
diff --git a/src/Autocomplete/assets/src/controller.ts b/src/Autocomplete/assets/src/controller.ts
@@ -136,19 +136,20 @@ export default class extends Controller {
             // VERY IMPORTANT: use 'function (query, callback) { ... }' instead of the
             // '(query, callback) => { ... }' syntax because, otherwise,
             // the 'this.XXX' calls inside this method fail
-            load: function (query: string, callback: (results?: any) => void) {
+            load: function (query: string, callback: (options?: any, optgroups?: any) => void) {
                 const url = this.getUrl(query);
                 fetch(url)
                     .then(response => response.json())
                     // important: next_url must be set before invoking callback()
-                    .then(json => { this.setNextUrl(query, json.next_page); callback(json.results) })
+                    .then(json => { this.setNextUrl(query, json.next_page); callback(json.results.options, json.results.optgroups || []) })
                     .catch(() => callback());
             },
             shouldLoad: function (query: string) {
                 const minLength = minCharacterLength || 3;
 
                 return query.length >= minLength;
             },
+            optgroupField: 'group_by',
             // avoid extra filtering after results are returned
             score: function(search: string) {
                 return function(item: any) {
diff --git a/src/Autocomplete/assets/test/controller.test.ts b/src/Autocomplete/assets/test/controller.test.ts
@@ -108,28 +108,32 @@ describe('AutocompleteController', () => {
         fetchMock.mock(
             '/path/to/autocomplete?query=',
             JSON.stringify({
-                results: [
-                    {
-                        value: 3,
-                        text: 'salad'
-                    },
-                ],
+                results: {
+                    options: [
+                        {
+                            value: 3,
+                            text: 'salad'
+                        },
+                    ]
+                },
             }),
         );
 
         fetchMock.mock(
             '/path/to/autocomplete?query=foo',
             JSON.stringify({
-                results: [
-                    {
-                        value: 1,
-                        text: 'pizza'
-                    },
-                    {
-                        value: 2,
-                        text: 'popcorn'
-                    },
-                ],
+                results: {
+                    options: [
+                        {
+                            value: 1,
+                            text: 'pizza'
+                        },
+                        {
+                            value: 2,
+                            text: 'popcorn'
+                        }
+                    ]
+                },
             }),
         );
 
@@ -181,6 +185,111 @@ describe('AutocompleteController', () => {
         });
     });
 
+    it('connect with ajax URL and group_by option', async () => {
+        const container = mountDOM(`
+            <label for="the-select">Items</label>
+            <select
+                id="the-select"
+                data-testid="main-element"
+                data-controller="check autocomplete"
+                data-autocomplete-url-value="/path/to/autocomplete"
+            ></select>
+        `);
+
+        application = startStimulus();
+
+        await waitFor(() => {
+            expect(getByTestId(container, 'main-element')).toHaveClass('connected');
+        });
+
+        // initial Ajax request on focus with group_by options
+        fetchMock.mock(
+            '/path/to/autocomplete?query=',
+            JSON.stringify({
+                results: {
+                    options: [
+                        {
+                            group_by: ['Meat'],
+                            value: 1,
+                            text: 'Beef'
+                        },
+                        {
+                            group_by: ['Meat'],
+                            value: 2,
+                            text: 'Mutton'
+                        },
+                        {
+                            group_by: ['starchy'],
+                            value: 3,
+                            text: 'Potatoes'
+                        },
+                        {
+                            group_by: ['starchy', 'Meat'],
+                            value: 4,
+                            text: 'chili con carne'
+                        },
+                    ],
+                    optgroups: [
+                        {
+                            value: 'Meat',
+                            label: 'Meat'
+                        },
+                        {
+                            value: 'starchy',
+                            label: 'starchy'
+                        },
+                    ]
+                },
+            }),
+        );
+
+        fetchMock.mock(
+            '/path/to/autocomplete?query=foo',
+            JSON.stringify({
+                results: {
+                    options: [
+                        {
+                            group_by: ['Meat'],
+                            value: 1,
+                            text: 'Beef'
+                        },
+                        {
+                            group_by: ['Meat'],
+                            value: 2,
+                            text: 'Mutton'
+                        },
+                    ],
+                    optgroups: [
+                        {
+                            value: 'Meat',
+                            label: 'Meat'
+                        },
+                    ]
+                }
+            }),
+        );
+
+        const tomSelect = getByTestId(container, 'main-element').tomSelect;
+        const controlInput = tomSelect.control_input;
+
+        // wait for the initial Ajax request to finish
+        userEvent.click(controlInput);
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(5);
+            expect(container.querySelectorAll('.optgroup-header')).toHaveLength(2);
+        });
+
+        // typing was not properly triggering, for some reason
+        //userEvent.type(controlInput, 'foo');
+        controlInput.value = 'foo';
+        controlInput.dispatchEvent(new Event('input'));
+
+        await waitFor(() => {
+            expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(2);
+            expect(container.querySelectorAll('.optgroup-header')).toHaveLength(1);
+        });
+    });
+
     it('adds live-component support', async () => {
         const container = mountDOM(`
             <div>
diff --git a/src/Autocomplete/composer.json b/src/Autocomplete/composer.json
@@ -28,6 +28,7 @@
         "symfony/dependency-injection": "^5.4|^6.0",
         "symfony/http-foundation": "^5.4|^6.0",
         "symfony/http-kernel": "^5.4|^6.0",
+        "symfony/property-access": "^5.4|^6.0",
         "symfony/string": "^5.4|^6.0"
     },
     "require-dev": {
diff --git a/src/Autocomplete/src/AutocompleteResultsExecutor.php b/src/Autocomplete/src/AutocompleteResultsExecutor.php
@@ -12,6 +12,10 @@
 namespace Symfony\UX\Autocomplete;
 
 use Doctrine\ORM\Tools\Pagination\Paginator;
+use Symfony\Component\PropertyAccess\Exception\UnexpectedTypeException;
+use Symfony\Component\PropertyAccess\PropertyAccessorInterface;
+use Symfony\Component\PropertyAccess\PropertyPath;
+use Symfony\Component\PropertyAccess\PropertyPathInterface;
 use Symfony\Component\Security\Core\Exception\AccessDeniedException;
 use Symfony\Component\Security\Core\Security;
 use Symfony\UX\Autocomplete\Doctrine\DoctrineRegistryWrapper;
@@ -25,7 +29,8 @@ final class AutocompleteResultsExecutor
 {
     public function __construct(
         private DoctrineRegistryWrapper $managerRegistry,
-        private ?Security $security = null
+        private PropertyAccessorInterface $propertyAccessor,
+        private ?Security $security = null,
     ) {
     }
 
@@ -53,14 +58,56 @@ public function fetchResults(EntityAutocompleterInterface $autocompleter, string
 
         $nbPages = (int) ceil($paginator->count() / $queryBuilder->getMaxResults());
 
-        $results = [];
-        foreach ($paginator as $entity) {
-            $results[] = [
-                'value' => $autocompleter->getValue($entity),
-                'text' => $autocompleter->getLabel($entity),
-            ];
+        $options = [];
+        $optgroups = [];
+
+        if (null !== $groupBy = $autocompleter->getGroupBy()) {
+            if (\is_string($groupBy)) {
+                $groupBy = new PropertyPath($groupBy);
+            }
+
+            if ($groupBy instanceof PropertyPathInterface) {
+                $accessor = $this->propertyAccessor;
+                $groupBy = function ($choice) use ($accessor, $groupBy) {
+                    try {
+                        return $accessor->getValue($choice, $groupBy);
+                    } catch (UnexpectedTypeException) {
+                        return null;
+                    }
+                };
+            }
+        }
+
+        if (\is_callable($groupBy)) {
+            $optgroupLabels = [];
+
+            foreach ($paginator as $entity) {
+                $option = [
+                    'value' => $autocompleter->getValue($entity),
+                    'text' => $autocompleter->getLabel($entity),
+                ];
+
+                $groupLabels = $groupBy($entity, $option['value'], $option['text']);
+
+                if (null !== $groupLabels) {
+                    $groupLabels = \is_array($groupLabels) ? array_map('strval', $groupLabels) : [(string) $groupLabels];
+                    $option['group_by'] = $groupLabels;
+                    $optgroupLabels = array_merge($optgroupLabels, $groupLabels);
+                }
+
+                $options[] = $option;
+            }
+
+            $optgroups = array_map(fn (string $label) => ['value' => $label, 'label' => $label], array_unique($optgroupLabels));
+        } else {
+            foreach ($paginator as $entity) {
+                $options[] = [
+                    'value' => $autocompleter->getValue($entity),
+                    'text' => $autocompleter->getLabel($entity),
+                ];
+            }
         }
 
-        return new AutocompleteResults($results, $page < $nbPages);
+        return new AutocompleteResults($options, $optgroups, $page < $nbPages);
     }
 }
diff --git a/src/Autocomplete/src/EntityAutocompleterInterface.php b/src/Autocomplete/src/EntityAutocompleterInterface.php
@@ -46,4 +46,9 @@ public function getValue(object $entity): mixed;
      * Note: if SecurityBundle is not installed, this will not be called.
      */
     public function isGranted(Security $security): bool;
+
+    /**
+     * Return Form option by name.
+     */
+    public function getFormOption(string $name): mixed;
 }
diff --git a/src/Autocomplete/src/Form/WrappedEntityTypeAutocompleter.php b/src/Autocomplete/src/Form/WrappedEntityTypeAutocompleter.php
@@ -112,7 +112,7 @@ public function isGranted(Security $security): bool
         throw new \InvalidArgumentException('Invalid passed to the "security" option: it must be the boolean true, a string role or a callable.');
     }
 
-    private function getFormOption(string $name): mixed
+    public function getFormOption(string $name): mixed
     {
         $form = $this->getForm();
         $formOptions = $form['autocomplete']->getConfig()->getOptions();
diff --git a/src/Autocomplete/tests/Fixtures/Autocompleter/CustomGroupByProductAutocompleter.php b/src/Autocomplete/tests/Fixtures/Autocompleter/CustomGroupByProductAutocompleter.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Symfony\UX\Autocomplete\Tests\Fixtures\Autocompleter;
+
+use Doctrine\ORM\EntityRepository;
+use Doctrine\ORM\QueryBuilder;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Component\Security\Core\Security;
+use Symfony\UX\Autocomplete\Doctrine\EntitySearchUtil;
+use Symfony\UX\Autocomplete\EntityAutocompleterInterface;
+use Symfony\UX\Autocomplete\Tests\Fixtures\Entity\Product;
+
+class CustomGroupByProductAutocompleter extends CustomProductAutocompleter
+{
+    public function getFormOption(string $name): mixed
+    {
+        return 'group_by' === $name ? 'category.name' : null;
+    }
+}
diff --git a/src/Autocomplete/tests/Fixtures/Autocompleter/CustomProductAutocompleter.php b/src/Autocomplete/tests/Fixtures/Autocompleter/CustomProductAutocompleter.php
@@ -58,4 +58,9 @@ public function isGranted(Security $security): bool
 
         return true;
     }
+
+    public function getFormOption(string $name): mixed
+    {
+        return null;
+    }
 }
diff --git a/src/Autocomplete/tests/Fixtures/Kernel.php b/src/Autocomplete/tests/Fixtures/Kernel.php
@@ -28,6 +28,7 @@
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
 use Symfony\UX\Autocomplete\AutocompleteBundle;
 use Symfony\UX\Autocomplete\DependencyInjection\AutocompleteFormTypePass;
+use Symfony\UX\Autocomplete\Tests\Fixtures\Autocompleter\CustomGroupByProductAutocompleter;
 use Symfony\UX\Autocomplete\Tests\Fixtures\Autocompleter\CustomProductAutocompleter;
 use Symfony\UX\Autocomplete\Tests\Fixtures\Form\ProductType;
 use Twig\Environment;
@@ -135,6 +136,13 @@ protected function configureContainer(ContainerConfigurator $c): void
                 'alias' => 'custom_product'
             ]);
 
+        $services->set(CustomGroupByProductAutocompleter::class)
+            ->public()
+            ->arg(1, new Reference('ux.autocomplete.entity_search_util'))
+            ->tag(AutocompleteFormTypePass::ENTITY_AUTOCOMPLETER_TAG, [
+                'alias' => 'custom_group_by_product'
+            ]);
+
         $services->alias('public.results_executor', 'ux.autocomplete.results_executor')
             ->public();
 
diff --git a/src/Autocomplete/tests/Functional/CustomAutocompleterTest.php b/src/Autocomplete/tests/Functional/CustomAutocompleterTest.php
diff --git a/src/Autocomplete/tests/Functional/FieldAutocompleterTest.php b/src/Autocomplete/tests/Functional/FieldAutocompleterTest.php
diff --git a/src/Autocomplete/tests/Integration/WiringTest.php b/src/Autocomplete/tests/Integration/WiringTest.php
diff --git a/src/Autocomplete/tests/Unit/AutocompleteResultsExecutorTest.php b/src/Autocomplete/tests/Unit/AutocompleteResultsExecutorTest.php

Original file line number	Diff line number	Diff line change
`@@ -112,7 +112,7 @@ public function isGranted(Security $security): bool`
`112`	`112`	`throw new \InvalidArgumentException('Invalid passed to the "security" option: it must be the boolean true, a string role or a callable.');`
`113`	`113`	`}`
`114`	`114`
`115`		`- private function getFormOption(string $name): mixed`
	`115`	`+ public function getFormOption(string $name): mixed`
`116`	`116`	`{`
`117`	`117`	`$form = $this->getForm();`
`118`	`118`	`$formOptions = $form['autocomplete']->getConfig()->getOptions();`
Original file line number	Diff line number	Diff line change
`@@ -58,4 +58,9 @@ public function isGranted(Security $security): bool`
`58`	`58`
`59`	`59`	`return true;`
`60`	`60`	`}`
	`61`	`+`
	`62`	`+ public function getFormOption(string $name): mixed`
	`63`	`+ {`
	`64`	`+ return null;`
	`65`	`+ }`
`61`	`66`	`}`