From f00ce83fdd232d3241ab503b40dff097f7ee5e9f Mon Sep 17 00:00:00 2001
From: RapidRik <r.dejong@rapidlogistics.nl>
Date: Fri, 24 Jan 2025 13:45:47 +0100
Subject: [PATCH] Command palette no ticket

---
 app/components/satis/navigation/component.css | 31 ++++++++++++++
 .../satis/navigation/component.html.slim      |  6 +++
 app/components/satis/navigation/component.rb  | 37 +++++++++++++++++
 .../satis/navigation/component_controller.js  | 40 +++++++++++++++++++
 .../satis/navigation_controller.rb            | 11 +++++
 config/routes.rb                              |  4 ++
 6 files changed, 129 insertions(+)
 create mode 100644 app/components/satis/navigation/component.css
 create mode 100644 app/components/satis/navigation/component.html.slim
 create mode 100644 app/components/satis/navigation/component.rb
 create mode 100644 app/components/satis/navigation/component_controller.js
 create mode 100644 app/controllers/satis/navigation_controller.rb

diff --git a/app/components/satis/navigation/component.css b/app/components/satis/navigation/component.css
new file mode 100644
index 00000000..a7d766ae
--- /dev/null
+++ b/app/components/satis/navigation/component.css
@@ -0,0 +1,31 @@
+.navigation-form {
+    @apply flex bg-white w-2/6 rounded-md dark:bg-gray-800 shadow place-self-center border-2;
+}
+
+form {
+    @apply w-full;
+}
+
+.navigation-input input[type="search"] {
+    @apply rounded-md bg-white dark:bg-gray-800 w-full dark:text-gray-300 text-gray-700 border-gray-300 dark:border-gray-500 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none;
+}
+
+ul#results-container {
+    @apply mt-2 space-y-1 bg-white border border-gray-300 rounded-md shadow-md dark:bg-gray-800 dark:border-gray-600;
+}
+
+.result-item {
+    @apply py-2 px-3 text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600 cursor-pointer;
+}
+
+.result-item:hover {
+    @apply bg-gray-100 dark:bg-gray-700;
+}
+
+.noResults {
+    @apply text-sm text-gray-500 dark:text-gray-400 mt-2 hidden;
+}
+
+.noResults.hidden {
+    @apply block;
+}
diff --git a/app/components/satis/navigation/component.html.slim b/app/components/satis/navigation/component.html.slim
new file mode 100644
index 00000000..3075494e
--- /dev/null
+++ b/app/components/satis/navigation/component.html.slim
@@ -0,0 +1,6 @@
+.navigation-form
+  = form_with url: '#', method: :get, remote: true, id: 'search-form' do
+    .navigation-input
+      input type="search" data-action="input->satis-navigation#search" id="search-input" placeholder="Search..."
+    ul#results-container
+    p.noResults.hidden No results found
diff --git a/app/components/satis/navigation/component.rb b/app/components/satis/navigation/component.rb
new file mode 100644
index 00000000..f2899c48
--- /dev/null
+++ b/app/components/satis/navigation/component.rb
@@ -0,0 +1,37 @@
+module Satis
+  module Navigation
+    class Component < Satis::ApplicationComponent
+      # before_action :needed_objects, :extra_tables
+
+      def search(term = nil)
+        queries = []
+        values = []
+
+        queries << "name LIKE ?"
+        values << "%#{term}%"
+
+        needed_tables&.each do |table|
+          queries << "#{table} LIKE ?"
+          values << "%#{term}%"
+        end
+
+        query = queries.join(" OR ")
+
+        needed_objects.where(query, *values)
+      end
+
+      private
+
+      def needed_tables
+        # Define any tables that should be included in the search
+        [brands, users, projects]
+      end
+
+      def needed_objects(objects)
+        # Define the objects that should be included in the search
+        objects
+      end
+
+    end
+  end
+end
\ No newline at end of file
diff --git a/app/components/satis/navigation/component_controller.js b/app/components/satis/navigation/component_controller.js
new file mode 100644
index 00000000..1bc6c6db
--- /dev/null
+++ b/app/components/satis/navigation/component_controller.js
@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "results"];
+
+  connect() {}
+
+  search(event) {
+    const query = this.inputTarget.value.trim();
+
+    if (query.length === 0) {
+      this.displayResults([]);
+      return;
+    }
+
+    fetch(`/satis/navigation/search?query=${encodeURIComponent(query)}`)
+      .then(response => response.json())
+      .then(data => this.displayResults(data))
+      .catch(error => console.error("Error fetching results:", error));
+  }
+
+  displayResults(results) {
+    const resultsContainer = this.resultsTarget;
+    resultsContainer.innerHTML = ""; 
+
+    if (results.length > 0) {
+      this.resultsTarget.nextElementSibling.classList.add("hidden");
+
+      results.slice(0, 10).forEach(result => {
+        const item = document.createElement("li");
+        item.textContent = result.name;
+        item.className = "result-item p-2 hover:bg-gray-100 cursor-pointer"; 
+        resultsContainer.appendChild(item);
+      });
+      } 
+    else {
+      this.resultsTarget.nextElementSibling.classList.remove("hidden"); 
+    }
+  }
+}
diff --git a/app/controllers/satis/navigation_controller.rb b/app/controllers/satis/navigation_controller.rb
new file mode 100644
index 00000000..1dd8ecec
--- /dev/null
+++ b/app/controllers/satis/navigation_controller.rb
@@ -0,0 +1,11 @@
+module Satis
+  class NavigationController < ApplicationController
+    def search
+      term = params[:query]
+      component = Satis::Navigation::Component.new
+      results = component.search(term)
+
+      render json: results.map { |result| { name: result.name } }
+    end
+  end
+end
diff --git a/config/routes.rb b/config/routes.rb
index 076ff12a..4beb0f47 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -14,4 +14,8 @@
     end
     resources :documentation
   end
+
+  namespace :satis do
+    get 'navigation/search', to: 'navigation#search'
+  end
 end