style(search): move extended search button next to submit search button

inosca · Sep 2, 2022 · f478194 · f478194
1 parent 0a1d6e8
commit f478194
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 38 deletions.
diff --git a/addon/components/search.hbs b/addon/components/search.hbs
@@ -4,6 +4,8 @@
     changeset=this.changeset
     onSubmit=this.onSubmit
     validateBeforeSubmit=true
+    extendedSearch=@extendedSearch
+    idField=@idField
   )
   (component
     "search/result-table"

diff --git a/addon/components/search/filters.hbs b/addon/components/search/filters.hbs
@@ -25,22 +25,15 @@
       prompt=(t "ember-gwr.search.hasErrorPlaceholder")
       errorComponent=(component "validated-form-error")
     )
-    (component
-      "uk-button"
-      label=(if
-        this.extendedSearch
-        (t "ember-gwr.components.search.extendedSearch.collapse")
-        (t "ember-gwr.components.search.extendedSearch.extend")
-      )
-      name=this.extendedSearch
-      value=this.extendedSearch
-      onClick=(fn (mut this.extendedSearch) (not this.extendedSearch))
-    )
     Form
   }}
-  {{#if this.extendedSearch}}
+  {{#if (and @extendedSearch this.extendedSearchActive)}}
     {{#let
-      (component Form.input errorComponent=(component "validated-form-error"))
+      (component
+        Form.input
+        errorComponent=(component "validated-form-error")
+        disabled=(get Form.model @idField)
+      )
       as |FilterInput|
     }}
       <div class="uk-flex uk-flex-between uk-margin-small-bottom uk-margin-top">
@@ -132,9 +125,22 @@
     {{/let}}
   {{/if}}
 
-  <div
-    class="uk-flex-inline uk-flex-nowrap uk-flex-top uk-margin-top uk-width-1-1 uk-margin-bottom"
-  >
+  <div class="uk-flex uk-flex-right">
+    {{#if @extendedSearch}}
+      <UkButton
+        @label={{if
+          this.extendedSearchActive
+          (t "ember-gwr.components.search.extendedSearch.collapse")
+          (t "ember-gwr.components.search.extendedSearch.extend")
+        }}
+        @value={{this.extendedSearchActive}}
+        @onClick={{fn
+          (mut this.extendedSearchActive)
+          (not this.extendedSearchActive)
+        }}
+        class="uk-margin-small-right"
+      />
+    {{/if}}
     <Form.submit
       data-test-submit-btn
       @label={{@submitLabel}}

diff --git a/addon/components/search/filters.js b/addon/components/search/filters.js
@@ -6,7 +6,7 @@ import { tracked } from "@glimmer/tracking";
 export default class SearchFiltersComponent extends Component {
   @service intl;
 
-  @tracked extendedSearch = false;
+  @tracked extendedSearchActive = false;
   @tracked errorOptions = [
     {
       value: true,

diff --git a/addon/templates/search-building.hbs b/addon/templates/search-building.hbs
@@ -21,11 +21,12 @@
   @extendedSearch={{true}}
   @service={{this.building}}
   @baseQuery={{this.baseQuery}}
+  @idField="EGID"
 >
   <:filters as |Filters|>
     <Filters
       @submitLabel={{t "ember-gwr.searchBuilding.search"}}
-      as |FilterInput ErrorSelect ExtendedSearchToggle Form|
+      as |FilterInput ErrorSelect Form|
     >
       <div class="uk-flex uk-flex-wrap uk-flex-between">
         <div class="uk-width-1-3@m uk-width-1">
@@ -87,14 +88,6 @@
             />
           </div>
         </div>
-        <div class="uk-width-1 uk-flex uk-flex-right">
-          <div class="uk-margin-small-right">
-            <ExtendedSearchToggle
-              class="uk-margin-top uk-width-1-1"
-              @disabled={{Form.model.EGID}}
-            />
-          </div>
-        </div>
       </div>
     </Filters>
   </:filters>

diff --git a/addon/templates/search-project.hbs b/addon/templates/search-project.hbs
@@ -21,11 +21,12 @@
   @service={{this.constructionProject}}
   @baseQuery={{this.baseQuery}}
   @extendedSearch={{true}}
+  @idField="EPROID"
 >
   <:filters as |Filters|>
     <Filters
       @submitLabel={{t "ember-gwr.searchProject.search"}}
-      as |FilterInput ErrorSelect ExtendedSearchToggle Form|
+      as |FilterInput ErrorSelect Form|
     >
       <div class="uk-flex uk-flex-wrap uk-flex-between">
         <div class="uk-width-1-3@m uk-width-1">
@@ -54,14 +55,6 @@
             <ErrorSelect @disabled={{Form.model.EPROID}} />
           </div>
         </div>
-        <div class="uk-width-1 uk-flex uk-flex-right">
-          <div class="uk-margin-small-right">
-            <ExtendedSearchToggle
-              class="uk-margin-top uk-width-1-1"
-              @disabled={{Form.model.EPROID}}
-            />
-          </div>
-        </div>
       </div>
     </Filters>
   </:filters>

diff --git a/tests/integration/components/search/filters-test.js b/tests/integration/components/search/filters-test.js
@@ -13,15 +13,14 @@ module("Integration | Component | search/filters", function (hooks) {
 
   test("it allows toggling of the extended search fields", async function (assert) {
     this.changeset = new Changeset({});
-    this.onSubmit = function () {};
+    this.onSubmit = { perform: () => {} };
 
     await render(hbs`
     <Search::Filters
       @changeset={{this.changeset}}
       @onSubmit={{this.onSubmit}}
-      as |FilterInput ErrorSelect ExtendedSearchToggle|
+      @extendedSearch={{true}}
     >
-      <ExtendedSearchToggle />
     </Search::Filters>`);
 
     assert.dom('input[name="realestateIdentification.EGRID"]').isNotVisible();