Improve search (results) interaction (#18)

Author: frankdekker

frontend/package-lock.json

@@ -10,8 +10,8 @@ defineProps<{
 </script>
 
 <template>
-    <a href="javascript:" class="slv-list-group-item list-group-item list-group-item-action" @click="expanded = !expanded" :aria-expanded="expanded">
-        <div :class="{ 'text-nowrap': !expanded, 'overflow-hidden': !expanded }">
+    <div class="slv-list-group-item list-group-item list-group-item-action" :aria-expanded="expanded">
+        <div class="slv-list-link" :class="{ 'text-nowrap': !expanded, 'overflow-hidden': !expanded }" @click="expanded = !expanded">
             <i class="slv-indicator bi bi-chevron-right me-1"></i>
             <span class="pe-2 text-secondary">{{ logRecord.datetime }}</span>
             <span class="text-primary pe-2">{{ logRecord.channel }}</span>
@@ -28,12 +28,16 @@ defineProps<{
                 <pre class="m-0"><code>{{ prettyFormatJson(logRecord.extra) }}</code></pre>
             </div>
         </div>
-    </a>
+    </div>
 </template>
 
 <style scoped>
 .slv-list-group-item {
     --bs-list-group-item-padding-x: 0px;
     --bs-list-group-item-padding-y: 0px;
 }
+
+.slv-list-link {
+    cursor: pointer;
+}
 </style>

frontend/src/components/LogRecord.vue

@@ -71,14 +71,23 @@ onMounted(() => {
                        placeholder="Search log entries"
                        aria-label="Search log entries"
                        aria-describedby="button-search"
+                       @change="navigate"
                        v-model="query">
 
-                <select class="slv-menu-sort-direction form-control" aria-label="Sort direction" title="Sort direction" v-model="sort">
+                <select class="slv-menu-sort-direction form-control"
+                        aria-label="Sort direction"
+                        title="Sort direction"
+                        v-model="sort"
+                        @change="navigate">
                     <option value="desc">Newest First</option>
                     <option value="asc">Oldest First</option>
                 </select>
 
-                <select class="slv-menu-page-size form-control" aria-label="Entries per page" title="Entries per page" v-model="perPage">
+                <select class="slv-menu-page-size form-control"
+                        aria-label="Entries per page"
+                        title="Entries per page"
+                        v-model="perPage"
+                        @change="navigate">
                     <option value="50">50</option>
                     <option value="100">100</option>
                     <option value="150">150</option>

frontend/src/views/LogView.vue

@@ -12,12 +12,12 @@
       "assets/bootstrap-icons-bb42NSi8.woff2",
       "assets/bootstrap-icons-TqycWyKO.woff"
     ],
-    "file": "assets/main-_Tsc7ogr.js",
+    "file": "assets/main-cu5OmzDi.js",
     "isEntry": true,
     "src": "src/main.ts"
   },
   "style.css": {
-    "file": "assets/style-_EKrxENf.css",
+    "file": "assets/style-WdlfaNth.css",
     "src": "style.css"
   }
 }