address some review comments

Author: PhilBastian

src/Frontend/src/components/audit/FiltersPanel.vue

@@ -9,7 +9,7 @@ import DatePickerRange from "@/components/audit/DatePickerRange.vue";
 const store = useAuditStore();
 const { sortBy, messageFilterString, selectedEndpointName, endpoints, itemsPerPage, dateRange } = storeToRefs(store);
 const endpointNames = computed(() => {
-  return [...new Set(endpoints.value.map((endpoint) => endpoint.name))];
+  return [...new Set(endpoints.value.map((endpoint) => endpoint.name))].sort();
 });
 const sortByItemsMap = new Map([
   ["Latest sent", "time_sent,desc"],
@@ -62,7 +62,7 @@ watch(selectedSortByItem, (newValue) => {
       <div class="filter-component text-search-container"><FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" /></div>
     </div>
     <div class="filter">
-      <div class="filter-label">Endpoints:</div>
+      <div class="filter-label">Endpoint:</div>
       <div class="filter-component">
         <ListFilterSelector :items="endpointNames" instructions="Select an endpoint" v-model="selectedEndpointName" item-name="endpoint" label="Endpoint" default-empty-text="Any" :show-clear="true" :show-filter="true" />
       </div>
@@ -76,13 +76,13 @@ watch(selectedSortByItem, (newValue) => {
     <div class="filter">
       <div class="filter-label">Show:</div>
       <div class="filter-component">
-        <ListFilterSelector :items="numberOfItemsPerPage" instructions="Select how many result to display" v-model="selectedItemsPerPage" item-name="result" default-empty-text="Any" :show-clear="false" :show-filter="false" />
+        <ListFilterSelector :items="numberOfItemsPerPage" instructions="Select how many result to display" v-model="selectedItemsPerPage" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
       </div>
     </div>
     <div class="filter last-filter">
       <div class="filter-label">Sort:</div>
       <div class="filter-component">
-        <ListFilterSelector :items="sortByItems" instructions="" v-model="selectedSortByItem" item-name="result" default-empty-text="Any" :show-clear="false" :show-filter="false" />
+        <ListFilterSelector :items="sortByItems" instructions="" v-model="selectedSortByItem" item-name="result" :can-clear="false" :show-clear="false" :show-filter="false" />
       </div>
     </div>
   </div>

src/Frontend/src/components/audit/ListFilterSelector.vue

@@ -3,50 +3,52 @@ import FilterInput from "@/components/FilterInput.vue";
 import { ref, watch } from "vue";
 
 const selected = defineModel<string>({ required: true });
-const props = defineProps<{ items: string[]; instructions: string; itemName: string; defaultEmptyText: string; showClear: boolean; showFilter: boolean }>();
+const props = withDefaults(
+  defineProps<{
+    items: string[];
+    instructions?: string;
+    itemName: string;
+    defaultEmptyText?: string;
+    canClear?: boolean;
+    showClear: boolean;
+    showFilter: boolean;
+  }>(),
+  { canClear: true }
+);
 const filter = ref("");
 const filteredItems = ref(props.items);
 
 watch([filter, () => props.items], () => {
-  if (filter.value !== "" && filter.value !== null && filter.value !== undefined) {
+  if (filter.value !== "" && filter.value != null) {
     filteredItems.value = props.items.filter((item) => item.toLowerCase().includes(filter.value.toLowerCase()));
   } else {
     filteredItems.value = props.items;
   }
 });
 
-function onclick(item: string, isSelected: boolean) {
-  if (isSelected) {
-    selected.value = "";
-  } else {
-    selected.value = item;
-  }
+function setFilter(item: string, isSelected: boolean) {
+  selected.value = isSelected && props.canClear ? "" : item;
 }
 </script>
 
 <template>
   <div class="dropdown">
     <button type="button" aria-label="open dropdown menu" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <span class="wrap-text">{{ selected ? selected : defaultEmptyText }}</span>
+      <span class="wrap-text">{{ selected || defaultEmptyText }}</span>
     </button>
     <div class="dropdown-menu wrapper">
       <div class="instructions">{{ instructions }}</div>
       <div v-if="showFilter" class="filter-input">
         <FilterInput v-model="filter" :placeholder="`Filter ${itemName}s`" />
       </div>
       <div class="items-container">
-        <div class="item-container" v-if="showClear && selected">
-          <svg class="fa-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-            <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
-            <path
-              d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
-            />
-          </svg>
-          <a class="clear" @click.prevent="() => onclick('', true)"> Clear selected {{ itemName }}</a>
+        <div class="item-container" v-if="showClear && selected" @click.prevent="() => setFilter('', true)">
+          <i class="fa fa-times" />
+          <span class="clear"> Clear selected {{ itemName }}</span>
         </div>
-        <div class="item-container" v-for="item in filteredItems" :key="item">
+        <div class="item-container" v-for="item in filteredItems" :key="item" @click.prevent="() => setFilter(item, item === selected)">
           <i v-if="item === selected" class="fa fa-check" />
-          <a class="item" :class="{ selected: item === selected }" @click.prevent="() => onclick(item, item === selected)">{{ item }}</a>
+          <span class="item" :class="{ selected: item === selected }">{{ item }}</span>
         </div>
       </div>
     </div>
@@ -55,61 +57,53 @@ function onclick(item: string, isSelected: boolean) {
 
 <style scoped>
 .wrap-text {
-  max-width: 250px;
+  max-width: 18em;
   word-wrap: break-word;
 }
 .wrapper {
-  padding: 0.5em;
-  min-width: 200px;
+  padding: 0.5rem;
+  min-width: 12.5rem;
 }
 .instructions {
   font-weight: bold;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.5rem;
 }
 .items-container {
-  max-height: 300px;
-  max-width: 400px;
+  max-height: 18rem;
+  max-width: 25rem;
   overflow-y: auto;
 }
 .item {
-  margin-left: 20px;
-  font-size: 14px;
+  font-size: 0.875rem;
+  margin-left: 1.25rem;
   font-weight: 400;
-  cursor: pointer;
   color: #262626;
   word-wrap: break-word;
   text-decoration: none;
   width: 100%;
 }
 .item-container {
-  padding: 0.3em 0;
+  padding: 0.25rem 0;
   display: flex;
   place-items: center;
+  cursor: pointer;
 }
 
 .item-container:hover {
   background-color: #f5f5f5;
 }
 
 .filter-input {
-  margin-bottom: 0.5em;
+  margin-bottom: 0.5rem;
 }
 
 .clear {
   color: #262626;
-  font-size: 14px;
   font-weight: 400;
-  cursor: pointer;
-  text-decoration: none;
-  margin-left: 6px;
+  margin-left: 0.375rem;
 }
 
 .selected {
-  margin-left: 6px;
-}
-
-.fa-cross {
-  width: 14px;
-  height: 14px;
+  margin-left: 0.375rem;
 }
 </style>