From a18038c32619ea847a388c1e2a8ace6690739dd8 Mon Sep 17 00:00:00 2001
From: Andreas Palm <ap@ewsp.de>
Date: Fri, 12 Apr 2024 12:51:07 +0200
Subject: [PATCH] Vue Autocomplete: Show search icon to make autocomplete more
 obvious

---
 resources/css/primevue/autocomplete.css | 14 ++++++++++++++
 resources/css/vue.css                   |  2 +-
 resources/vue/AutoComplete.vue          |  8 +++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/resources/css/primevue/autocomplete.css b/resources/css/primevue/autocomplete.css
index 089d2ae8..9c95d789 100644
--- a/resources/css/primevue/autocomplete.css
+++ b/resources/css/primevue/autocomplete.css
@@ -91,4 +91,18 @@
     color: #212529;
     background: #ffffff;
     font-weight: 600;
+}
+input[type=text].p-autocomplete-dd-input {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+.p-autocomplete-dd .p-autocomplete-dropdown {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0px;
+    margin: 0;
+    padding: 3px;
+}
+.p-autocomplete-dd .p-autocomplete-dropdown svg {
+    width: 14px;
+    height: 14px;
 }
\ No newline at end of file
diff --git a/resources/css/vue.css b/resources/css/vue.css
index 54b22c3f..12956372 100644
--- a/resources/css/vue.css
+++ b/resources/css/vue.css
@@ -32,6 +32,6 @@
     padding-top: 5px;
 }
 
-.grid input {
+.grid input[type=text] {
     width: 100%;
 }
\ No newline at end of file
diff --git a/resources/vue/AutoComplete.vue b/resources/vue/AutoComplete.vue
index 01802dbd..883c89c4 100644
--- a/resources/vue/AutoComplete.vue
+++ b/resources/vue/AutoComplete.vue
@@ -8,6 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import {ref} from "vue";
 import AutoComplete from "primevue/autocomplete";
 import axios from "axios";
+import SearchIcon from "primevue/icons/search";
 
 const props = defineProps({
   ajaxFilter: String,
@@ -40,5 +41,10 @@ async function search(event) {
       @complete="search"
       dataKey="id"
       :forceSelection="forceSelection"
-  />
+      dropdown
+  >
+    <template #dropdownicon>
+      <SearchIcon />
+    </template>
+  </AutoComplete>
 </template>
\ No newline at end of file