add search input to message headers view

Author: soujay

src/Frontend/src/components/messages/HeadersView.vue

@@ -1,22 +1,37 @@
 <script setup lang="ts">
 import { ExtendedFailedMessage } from "@/resources/FailedMessage";
 import CopyToClipboard from "@/components/CopyToClipboard.vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 const props = defineProps<{
   message: ExtendedFailedMessage;
 }>();
 
 const hoverStates = ref<Record<number, boolean>>({});
-
+const searchTerm = ref<string>("");
 const toggleHover = (index: number, state: boolean) => {
   hoverStates.value[index] = state;
 };
+// Computed property to filter headers based on search term
+const filteredHeaders = computed(() => {
+  if (!searchTerm.value) {
+    return props.message.headers;
+  }
+  return props.message.headers.filter((header) => header.key.toLowerCase().includes(searchTerm.value.toLowerCase()));
+});
+function clearSearch() {
+  searchTerm.value = ""; // Clears the search term
+}
 </script>
 
 <template>
+  <div class="searchheader">
+    <input v-model="searchTerm" type="text" placeholder="Search for a header key" class="search-input" />
+    <button v-if="searchTerm" title="Clear" @click="clearSearch" class="clear-btn">X</button>
+  </div>
+
   <table class="table" v-if="!props.message.headersNotFound">
     <tbody>
-      <tr class="interactiveList" v-for="(header, index) in props.message.headers" :key="index">
+      <tr class="interactiveList" v-for="(header, index) in filteredHeaders" :key="index">
         <td nowrap="nowrap">{{ header.key }}</td>
         <td>
           <div class="headercopy" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
@@ -36,4 +51,28 @@ const toggleHover = (index: number, state: boolean) => {
   align-items: top;
   gap: 10px;
 }
+.searchheader {
+  display: flex;
+  /*  justify-content: flex-end;*/
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+/* Style for the search input */
+.search-input {
+  padding: 5px;
+  margin-right: 10px;
+}
+
+/* Style for the clear button */
+.clear-btn {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  font-weight: bold;
+}
 </style>