Merge pull request #41 from Setono/rename-facets-to-f

Rename 'facets' query parameter to 'f'. Also making a namespace on the classes used in the html elements

src/Engine/SearchRequest.php

@@ -14,7 +14,7 @@ final class SearchRequest
 
     public const QUERY_PARAMETER_SORT = 's';
 
-    public const QUERY_PARAMETER_FILTER = 'facets';
+    public const QUERY_PARAMETER_FILTER = 'f';
 
     // todo we need the hits per page here
     public function __construct(
@@ -40,9 +40,8 @@ public static function fromRequest(Request $request): self
             $sort = null;
         }
 
-        // todo rename facets to f or filters?
         /** @var array<string, mixed> $filters */
-        $filters = $request->query->all('facets');
+        $filters = $request->query->all(self::QUERY_PARAMETER_FILTER);
 
         return new self($q, $filters, $page, $sort);
     }

src/Form/Builder/SearchFormBuilder.php

@@ -40,7 +40,7 @@ public function build(SearchResult $searchResult): FormInterface
 
         // todo this nesting makes the URLs uglier. Can we do something else?
         // todo could this be fixed by adding the facet forms to some kind of collection?
-        $facetsFormBuilder = $this->formFactory->createNamedBuilder('facets');
+        $facetsFormBuilder = $this->formFactory->createNamedBuilder(SearchRequest::QUERY_PARAMETER_FILTER);
 
         /**
          * Here is an example of the facet stats array

src/Resources/public/js/search.js

@@ -66,16 +66,17 @@ class SearchManager {
 
             field.dispatchEvent(new CustomEvent('search:form-changed', { bubbles: true }));
 
-            if(field.name.startsWith('facets')) {
-                field.dispatchEvent(new CustomEvent('search:facet-changed', { bubbles: true }));
+            // todo would be better to have a way to check the type of the field directly on the field, e.g. with a data attribute
+            if(field.closest('.ssm-filter') !== null) {
+                field.dispatchEvent(new CustomEvent('search:filter-changed', { bubbles: true }));
             } else if(field.name === 'p') {
                 field.dispatchEvent(new CustomEvent('search:page-changed', { bubbles: true }));
             } else if(field.classList.contains('sort')) {
                 field.dispatchEvent(new CustomEvent('search:sort-changed', { bubbles: true }));
             }
         });
 
-        this.#form.addEventListener('search:facet-changed', (event) => this.#options.onFacetChange.bind(this, this.#form, event.target)());
+        this.#form.addEventListener('search:filter-changed', (event) => this.#options.onFacetChange.bind(this, this.#form, event.target)());
         this.#form.addEventListener('search:page-changed', (event) => this.#options.onSortChange.bind(this, this.#form, event.target)());
         this.#form.addEventListener('search:sort-changed', (event) => this.#options.onSortChange.bind(this, this.#form, event.target)());
         this.#form.addEventListener('submit', () => this.#options.onSubmit.bind(this, this.#form)());

src/Resources/views/form/search_theme.html.twig

@@ -1,5 +1,5 @@
 {% block setono_sylius_meilisearch_facet_checkbox_row %}
-    <div class="facet facet-checkbox">
+    <div class="ssm-filter ssm-filter-checkbox">
         {{ form_label(form) }}
         <ul>
             <li>{{- form_widget(form) -}}{{ form_label(form) }}</li>
@@ -8,10 +8,10 @@
 {% endblock %}
 
 {% block setono_sylius_meilisearch_facet_range_row %}
-    <div class="facet facet-range">
+    <div class="ssm-filter ssm-filter-range">
         {{ form_label(form) }}
         {# todo these input fields should be prefilled with min and max values, but should not be submitted if those values are equal to the default value #}
-        <div class="facet-range-widget">
+        <div class="ssm-filter-range-widget">
             <div>
                 {{ form_label(form.min) }}
                 {{ form_widget(form.min) }}
@@ -25,7 +25,7 @@
 {% endblock %}
 
 {% block setono_sylius_meilisearch_facet_choice_row %}
-    <div class="facet facet-choice">
+    <div class="ssm-filter ssm-filter-choice">
         {{ form_label(form) }}
         <ul>
             {%- for child in form %}
@@ -39,7 +39,7 @@
 {% endblock %}
 
 {% block setono_sylius_meilisearch_page_choice_widget %}
-    <nav class="pagination">
+    <nav class="ssm-pagination">
         <ol>
             {%- for child in form %}
                 <li{{ child.vars.label == '__current' ? ' style="display:none"' : '' }}>

src/Resources/views/search/_filters.html.twig

@@ -0,0 +1 @@
+{{ form_widget(searchForm.f, { 'attr': { 'class': 'ssm-filters' } }) }}

src/Resources/views/search/_results.html.twig

@@ -3,7 +3,7 @@
 {{ form_start(searchForm, { 'attr': { 'id': 'search-form' } }) }}
     <div class="ui stackable grid">
         <div class="four wide column">
-            {{ include('@SetonoSyliusMeilisearchPlugin/search/_facets.html.twig') }}
+            {{ include('@SetonoSyliusMeilisearchPlugin/search/_filters.html.twig') }}
         </div>
         <div class="twelve wide column">
             <div class="ui grid">

src/Resources/views/search/_sorting.html.twig

@@ -1 +1 @@
-{{ form_widget(searchForm.s, { 'attr': { 'class': 'sort' } }) }}
+{{ form_widget(searchForm.s, { 'attr': { 'class': 'ssm-sort' } }) }}

tests/Application/templates/bundles/SetonoSyliusMeilisearchPlugin/search/index.html.twig

@@ -16,15 +16,15 @@
         }
 
         /**
-         * Facets
+         * Filters
          */
-        #facets {
+        .ssm-filters {
             display: flex;
             flex-direction: column;
             gap: 30px;
         }
 
-        .facet > label {
+        .ssm-filter > label {
             font-size: 14px !important;
             text-transform: uppercase;
             font-weight: bold;
@@ -34,7 +34,7 @@
             margin: 0 0 7px 0 !important;
         }
 
-        .facet ul {
+        .ssm-filter ul {
             list-style-type: none;
             padding: 0;
             margin: 0;
@@ -43,26 +43,26 @@
             gap: 7px;
         }
 
-        .facet li {
+        .ssm-filter li {
             display: flex;
             gap: 10px;
             align-items: center;
         }
 
-        .facet li label {
+        .ssm-filter li label {
             margin: 0 !important;
             padding: 0 !important;
             font-size: 14px !important;
         }
 
-        .facet-range .facet-range-widget {
+        .ssm-filter-range .ssm-filter-range-widget {
             display: flex;
             flex-direction: row;
             flex-wrap: nowrap;
             gap: 10px;
         }
 
-        .facet-range input {
+        .ssm-filter-range input {
             width: 100%;
             padding: 5px 10px !important;
             border: 1px solid #cacaca;
@@ -72,7 +72,7 @@
         /**
          * Pagination
          */
-        nav.pagination ol {
+        .ssm-pagination ol {
             list-style: none;
             margin: 0;
             padding: 0;
@@ -84,13 +84,13 @@
         /**
          * Sort
          */
-        .sort {
+        .ssm-sort {
             padding: 0 !important;
             margin: 0 !important;
             text-align-last: right;
         }
 
-        .sort option {
+        .ssm-sort option {
             direction: rtl;
         }
     </style>

tests/Functional/SearchFormBuilderTest.php

@@ -22,7 +22,7 @@ public function testItCreatesFormForSearchResultsWithProperlySortedFacetValues()
 
         $form = $searchFormBuilder->build($result);
         /** @var ChoiceListInterface $choiceList */
-        $choiceList = $form->get('facets')->get('size')->getConfig()->getAttributes()['choice_list'];
+        $choiceList = $form->get(SearchRequest::QUERY_PARAMETER_FILTER)->get('size')->getConfig()->getAttributes()['choice_list'];
 
         self::assertSame(
             ['S' => 'S', 'M' => 'M', 'L' => 'L', 'XL' => 'XL', 'XXL' => 'XXL'],

tests/Unit/Engine/SearchRequestTest.php

@@ -33,7 +33,13 @@ public function it_creates_search_request(): void
      */
     public function it_creates_from_request(): void
     {
-        $request = Request::create('/search', 'GET', ['q' => 'jeans', 'facets' => ['brand' => ['Celsius small', 'You are breathtaking'], 'price' => ['min' => '30', 'max' => '45']], 'p' => 2, 's' => 'price:asc']);
+        $request = Request::create('/search', 'GET', [
+            SearchRequest::QUERY_PARAMETER_SEARCH => 'jeans',
+            SearchRequest::QUERY_PARAMETER_FILTER => ['brand' => ['Celsius small', 'You are breathtaking'], 'price' => ['min' => '30', 'max' => '45']],
+            SearchRequest::QUERY_PARAMETER_PAGE => 2,
+            SearchRequest::QUERY_PARAMETER_SORT => 'price:asc',
+        ]);
+
         $searchRequest = SearchRequest::fromRequest($request);
 
         self::assertSame('jeans', $searchRequest->query);