filter for character list

frontend/src/vues/CharacterList.vue

@@ -1,4 +1,11 @@
 <template>
+  <div class="d-flex flex-row">
+    <v-text-field
+      class="filter flex-1-0"
+      placeholder="Filter by Name"
+      v-model="filtervalue"
+    ></v-text-field>
+  </div>
   <v-table>
     <thead>
       <tr>
@@ -48,11 +55,14 @@ const page = ref(1)
 
 let count = 10
 
+const filtervalue = ref('')
+
 async function loadData() {
   const response = await axios.post('/api/character', {
     page: `${page.value - 1}`,
     count: `10`,
-    orderBy: 'id'
+    orderBy: 'id',
+    filter: filtervalue.value ? `characterName:"${filtervalue.value}"` : ''
   })
 
   characters.value = response.data.characterData
@@ -63,7 +73,7 @@ function setPage(targetPage: number) {
   router.replace({ query: { page: targetPage } })
 }
 
-watch(route, (newValue, oldValue) => {  
+watch(route, (newValue, oldValue) => {
   if (!route.query.page) {
     router.replace({ query: { page: 1 } })
     page.value = 1
@@ -74,6 +84,14 @@ watch(route, (newValue, oldValue) => {
   loadData()
 })
 
+let debounce = null
+watch(filtervalue, (oldFilter, newFilter) => {
+  debounce = clearTimeout(debounce)
+  debounce = setTimeout(() => {
+    loadData()
+  }, 500)
+})
+
 onMounted(async () => {
   if (!route.query.page) {
     router.replace({ query: { page: 1 } })

frontend/src/vues/GameList.vue

@@ -43,7 +43,7 @@ async function loadData() {
   const response = await axios.post('/api/game', {
     page: `${page.value - 1}`,
     count: `${count}`,
-    filter: filtervalue.value ? `title:${filtervalue.value}` : '',
+    filter: filtervalue.value ? `title:"${filtervalue.value}"` : '',
     orderBy: 'id'
   })
 
@@ -74,6 +74,12 @@ watch(filtervalue, (oldFilter, newFilter) => {
 })
 
 onMounted(async () => {
+  if (!route.query.page) {
+    router.replace({ query: { page: 1 } })
+    page.value = 1
+  } else {
+    page.value = Number(route.query.page)
+  }
   loadData()
 })
 </script>