From f0de240b8a272c69a58a03188baae42b582ffd07 Mon Sep 17 00:00:00 2001
From: "jmosrael@gmail.com" <I4mmrc()w3>
Date: Sat, 18 May 2024 14:13:38 -0700
Subject: [PATCH] rudimentary filter string for game list

---
 frontend/src/vues/CharacterDetails.vue | 14 +++++------
 frontend/src/vues/CharacterList.vue    |  8 +++----
 frontend/src/vues/GameList.vue         | 33 ++++++++++++++++++++++----
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/frontend/src/vues/CharacterDetails.vue b/frontend/src/vues/CharacterDetails.vue
index 6903f2f..cace6b1 100644
--- a/frontend/src/vues/CharacterDetails.vue
+++ b/frontend/src/vues/CharacterDetails.vue
@@ -23,13 +23,13 @@
 </template>
 
 <style>
-  .game-list {
-    margin: 20px;
-    margin-top: 25px;
-  }
-  .game-list-title{
-    margin-bottom: 10px;
-  }
+.game-list {
+  margin: 20px;
+  margin-top: 25px;
+}
+.game-list-title {
+  margin-bottom: 10px;
+}
 </style>
 
 <script setup lang="ts">
diff --git a/frontend/src/vues/CharacterList.vue b/frontend/src/vues/CharacterList.vue
index cf9e811..5e377b4 100644
--- a/frontend/src/vues/CharacterList.vue
+++ b/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()
diff --git a/frontend/src/vues/GameList.vue b/frontend/src/vues/GameList.vue
index e2d28d8..bdd6c7c 100644
--- a/frontend/src/vues/GameList.vue
+++ b/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>