rudimentary filter string for game list

frontend/src/vues/GameList.vue

@@ -1,4 +1,7 @@
 <template>
+  <div class="d-flex flex-row">
+    <input class="filter flex-1-0" placeholder="Filter by Name" v-model="filtervalue" />
+  </div>
   <v-table>
     <thead>
       <tr>
@@ -26,22 +29,35 @@
     @update:modelValue="setPage($event)"
   ></v-pagination>
 </template>
-<style></style>
+
+<style>
+label.filter {
+  margin: 10px;
+  margin-bottom: 0px;
+}
+input.filter {
+  margin: 10px;
+  background: darkslategray;
+  border-color: lightgray;
+}
+</style>
 
 <script setup lang="ts">
-import { onMounted, onCreated, ref } from 'vue'
+import { onMounted, watch, ref } from 'vue'
 import axios from 'axios'
 
-let page = 1
+let page = 0
 let count = 10
 const games = ref({})
 const pageCount = ref(1)
 
+const filtervalue = ref("")
+
 async function loadData() {
   const response = await axios.post('/api/game', {
     page: `${page}`,
     count: '10',
-    orderBy: 'id'
+    filter: filtervalue.value ? `title:${filtervalue.value}` : ""
   })
 
   games.value = response.data.gameData
@@ -66,4 +82,13 @@ function setPage(targetPage: number) {
 onMounted(async () => {
   loadData()
 })
+
+
+let debounce = null;
+watch(filtervalue, (oldFilter, newFilter) => {
+  debounce = clearTimeout(debounce)
+  debounce = setTimeout(() => {
+    loadData()
+  }, 500)
+})
 </script>