Suche im zentralen Logbuch hinzufügen

frontend/components/HistoryDisplay.vue

@@ -14,6 +14,11 @@ const props = defineProps({
   renderHeadline: {
     type: Boolean,
     default: false
+  },
+  search: {
+    type: String,
+    required: false,
+    default: ""
   }
 })
 
@@ -72,6 +77,21 @@ const renderText = (text) => {
   return text
 }
 
+const filteredItems = computed(() => {
+  const search = props.search.trim().toLowerCase()
+
+  if (!search) return items.value
+
+  return items.value.filter((item) => {
+    return [
+      item.text,
+      item.created_by_profile?.full_name,
+      item.created_by ? "" : "FEDEO Bot",
+      dayjs(item.created_at).format("DD.MM.YY HH:mm")
+    ].some((value) => String(value || "").toLowerCase().includes(search))
+  })
+})
+
 </script>
 
 <template>
@@ -135,8 +155,8 @@ const renderText = (text) => {
   <!-- ITEM LIST  -->
   <div style="height: 90%; overflow-y: scroll">
     <div
-        v-if="items.length > 0"
+        v-if="filteredItems.length > 0"
-        v-for="(item,index) in items.slice().reverse()"
+        v-for="(item,index) in filteredItems.slice().reverse()"
     >
       <USeparator
           class="my-3"
@@ -159,6 +179,14 @@ const renderText = (text) => {
         </div>
       </div>
     </div>
+    <UAlert
+        v-else
+        color="neutral"
+        variant="soft"
+        icon="i-heroicons-magnifying-glass"
+        title="Keine Logbucheinträge gefunden."
+        description="Passe die Suche an, um weitere Einträge zu sehen."
+    />
   </div>
 
 

frontend/pages/historyitems/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-
+const search = ref("")
 </script>
 
 <template>
@@ -9,9 +9,29 @@
           :class="['text-xl','font-medium']"
       >Zentrales Logbuch</h1>
     </template>
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="search"
+          icon="i-heroicons-magnifying-glass"
+          placeholder="Logbuch durchsuchen..."
+          class="w-72 max-w-full"
+      >
+        <template #trailing v-if="search">
+          <UButton
+              color="neutral"
+              variant="link"
+              icon="i-heroicons-x-mark"
+              :padded="false"
+              aria-label="Suche löschen"
+              @click="search = ''"
+          />
+        </template>
+      </UInput>
+    </template>
   </UDashboardNavbar>
   <UDashboardPanelContent>
-    <HistoryDisplay/>
+    <HistoryDisplay :search="search"/>
   </UDashboardPanelContent>
 </template>