rudimentary filter string for game list

frontend/src/vues/CharacterDetails.vue

@@ -23,13 +23,13 @@
 </template>
 
 <style>
-  .game-list {
+.game-list {
   margin: 20px;
   margin-top: 25px;
-  }
-  .game-list-title{
+}
+.game-list-title {
   margin-bottom: 10px;
-  }
+}
 </style>
 
 <script setup lang="ts">

frontend/src/vues/CharacterList.vue

@@ -50,7 +50,7 @@ let count = 10
 
 async function loadData() {
   const response = await axios.post('/api/character', {
-    page: `${page.value-1}`,
+    page: `${page.value - 1}`,
     count: `${count}`,
     orderBy: 'id'
   })
@@ -61,7 +61,7 @@ async function loadData() {
 
 function setPage(targetPage: number) {
   console.log(targetPage)
-  router.replace({query: {page: targetPage}})
+  router.replace({ query: { page: targetPage } })
 }
 
 watch(route, (newValue, oldValue) => {
@@ -70,8 +70,8 @@ watch(route, (newValue, oldValue) => {
 })
 
 onMounted(async () => {
-  if(!route.query.page){
-    router.replace({query: {page: 1}})
+  if (!route.query.page) {
+    router.replace({ query: { page: 1 } })
   }
   page.value = Number(route.query.page)
   loadData()

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>