feat(search): add clear button

addon/components/search.hbs

@@ -3,7 +3,7 @@
     class="uk-background-default uk-search uk-search-default uk-width-1"
     {{on "submit" this.onSubmit}}
   >
-    <span uk-search-icon />
+    <span uk-search-icon></span>
     <input
       type="search"
       class="uk-search-input uk-background-default"
@@ -13,5 +13,13 @@
       data-test-search-input
       {{on "input" this.updateSearch.perform}}
     />
+    {{!<button class="uk-form-icon uk-form-icon-flip"><UkIcon @icon="close" /></button>}}
+    <a
+      class="uk-form-icon uk-form-icon-flip"
+      href="#"
+      uk-tooltip={{t "alexandria.search-clear"}}
+      {{on "click" this.resetSearch}}
+      data-test-search-clear
+    ><UkIcon @icon="close" /></a>
   </form>
 </div>

addon/components/search.js

@@ -21,8 +21,16 @@ export default class SearchComponent extends Component {
       }
 
       this.router.transitionTo(this.router.currentRouteName, {
-        queryParams: { search: search || undefined, category: undefined },
+        queryParams: { search: search || undefined },
       });
     },
   );
+
+  @action
+  resetSearch(event) {
+    event.preventDefault();
+    this.router.transitionTo(this.router.currentRouteName, {
+      queryParams: { search: undefined },
+    });
+  }
 }

addon/controllers/index.js

@@ -25,7 +25,7 @@ export default class IndexController extends Controller {
 
   get documentFilters() {
     let filters = {
-      category: this.category,
+      categories: this.category,
       tags: this.tags.length ? this.tags.join(",") : undefined,
       marks: this.marks.length ? this.marks.join(",") : undefined,
       query: this.search,

tests/integration/components/search-test.js

@@ -1,4 +1,4 @@
-import { render, fillIn } from "@ember/test-helpers";
+import { render, fillIn, click } from "@ember/test-helpers";
 import { setupRenderingTest } from "dummy/tests/helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
@@ -7,7 +7,7 @@ import { fake, stub } from "sinon";
 module("Integration | Component | search", function (hooks) {
   setupRenderingTest(hooks);
 
-  test("it renders", async function (assert) {
+  test("it searches", async function (assert) {
     const router = this.engine.lookup("service:router");
 
     stub(router, "currentRouteName").get(() => null);
@@ -25,7 +25,32 @@ module("Integration | Component | search", function (hooks) {
       [
         null,
         {
-          queryParams: { search: "new search", category: undefined },
+          queryParams: { search: "new search" },
+        },
+      ],
+      "transitionTo was called with the correct arguments",
+    );
+  });
+
+  test("it clears search", async function (assert) {
+    const router = this.engine.lookup("service:router");
+
+    stub(router, "currentRouteName").get(() => null);
+    router.transitionTo = fake();
+
+    await render(hbs`<Search @search="test"/>`, { owner: this.engine });
+
+    assert.dom("[data-test-search-input]").hasValue("test");
+
+    await click("[data-test-search-clear]");
+
+    assert.ok(router.transitionTo.called, "transitionTo was called");
+    assert.deepEqual(
+      router.transitionTo.firstCall.args,
+      [
+        null,
+        {
+          queryParams: { search: undefined },
         },
       ],
       "transitionTo was called with the correct arguments",

tests/unit/controllers/application-test.js

@@ -17,7 +17,7 @@ module("Unit | Controller | index", function (hooks) {
 
     assert.deepEqual(controller.documentFilters, {
       activeGroup: "group",
-      category: 1,
+      categories: 1,
       metainfo: JSON.stringify([{ key: "instance_id", value: "1" }]),
       query: "test",
       tags: undefined,

translations/de.yaml

@@ -1,6 +1,7 @@
 alexandria:
   loading: "Lädt..."
   search: "Suchen..."
+  search-clear: "Suche löschen"
   nothing-found: "Wir haben nichts gefunden..."
   delete: "Löschen"
   upload-file: "Datei hochladen"

translations/en.yaml

@@ -1,6 +1,7 @@
 alexandria:
   loading: "Loading..."
   search: "Search..."
+  search-clear: "Clear search"
   nothing-found: "We found nothing..."
   delete: "Delete"
   upload-file: "Upload file"

translations/it.yaml

@@ -1,6 +1,7 @@
 alexandria:
   loading: "Sto caricando i risultati..."
   search: "Cerca..."
+  search-clear: "Ricerca chiara"
   nothing-found: "Nessun risultato trovato..."
   delete: "Elimina"
   upload-file: "Carica file"