Create SearchInput component

app/components/search_input_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class SearchInputComponent < ViewComponentReflex::Component
+  def initialize(value: nil, data: {})
+    super
+    @value = value
+    @data = data
+  end
+end

app/components/search_input_component/search_input_component.html.haml

@@ -0,0 +1,5 @@
+= component_controller do
+  %div.search-input
+    %input{type: 'text', placeholder: 'Search', id: 'search_query', data: {action: 'debounced:input->search-input#search'}, value: @value}
+    .search-button{data: @data}
+      %i.fa.fa-search

app/components/search_input_component/search_input_component.scss

@@ -0,0 +1,23 @@
+.search-input {
+  border: 1px solid #d2d2d2;
+  height: 3em;
+  display: flex;
+  line-height: 3em;
+  align-items: center;
+
+  input {
+    border: none;
+    height: 3em;
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 5px;
+  }
+
+  .search-button {
+    padding-right: 10px;
+    padding-left: 5px;
+    cursor: pointer;
+    color: #6788A2;
+  }
+
+}

app/webpacker/controllers/search-input_controller.js

@@ -0,0 +1,28 @@
+import ApplicationController from "./application_controller";
+
+export default class extends ApplicationController {
+  connect() {
+    super.connect();
+    this.element
+      .querySelector("input")
+      .addEventListener("keydown", this.searchOnEnter);
+  }
+
+  disconnect() {
+    super.disconnect();
+    this.element
+      .querySelector("input")
+      .removeEventListener("keydown", this.searchOnEnter);
+  }
+
+  searchOnEnter = (e) => {
+    if (e.key === "Enter") {
+      this.element.querySelector(".search-button").click();
+    }
+  };
+
+  search(e) {
+    this.element.querySelector(".search-button").dataset["value"] =
+      e.target.value;
+  }
+}

app/webpacker/css/admin/all.scss

@@ -126,5 +126,6 @@
 @import "app/components/super_selector_component/super_selector_component";
 @import "app/components/pagination_component/pagination_component";
 @import "app/components/table_header_component/table_header_component";
+@import "app/components/search_input_component/search_input_component";
 
 @import "v2/main.scss";

app/webpacker/packs/admin.js

@@ -13,3 +13,6 @@ application.consumer = consumer;
 StimulusReflex.initialize(application, { controller, isolate: true });
 StimulusReflex.debug = process.env.RAILS_ENV === "development";
 CableReady.initialize({ consumer });
+
+import debounced from "debounced";
+debounced.initialize({ input: { wait: 300 } });

package.json

@@ -26,6 +26,7 @@
     "@rails/webpacker": "5.4.3",
     "babel-loader": "^8.2.3",
     "cable_ready": "5.0.0-pre9",
+    "debounced": "^0.0.5",
     "flatpickr": "^4.6.9",
     "foundation-sites": "^5.5.2",
     "jquery-ui": "1.13.0",

yarn.lock

@@ -5054,6 +5054,11 @@ date-format@^4.0.3:
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.3.tgz#f63de5dc08dc02efd8ef32bf2a6918e486f35873"
   integrity sha512-7P3FyqDcfeznLZp2b+OMitV9Sz2lUnsT87WaTat9nVwqsBkTzPG3lPLNwW3en6F4pHUiWzr6vb8CLhjdK9bcxQ==
 
+debounced@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/debounced/-/debounced-0.0.5.tgz#e540b6eebfe703d93462711b4f3562ffd101b87f"
+  integrity sha512-8Bgheu1YxQB7ocqYmK2enbLGVoo4nCtu/V6UD/SMDOeV3g2LocG2CrA5oxudlyl79Ja07UiqGdp9pWZoJn52EQ==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"