filter for character list

backend/src/app.ts

@@ -20,14 +20,21 @@ app.get('/api/character/:characterId', async (req, res) => {
 
 app.post('/api/character', jsonParser, async (req, res) => {
   const page = req.body.page
-  const orderBy = req.body.orderBy
+  const orderBy = req.body.orderBy ? obp.parse(req.body.orderBy) : ['id']
   const count = req.body.count
+  const filter = req.body.filter ? fp.parse(req.body.filter) : {}
 
   const characterData = await Character.findAll({
     offset: page * count,
-    limit: count
+    limit: count,
+    order: orderBy,
+    where: filter
   })
-  const pageCount = Math.ceil((await Character.count()) / count)
+  const pageCount = Math.ceil(
+    (await Character.count({
+      where: filter
+    })) / count
+  )
 
   res.setHeader('Content-Type', 'application/json')
   res.json({ characterData, pageCount })

frontend/src/App.vue

@@ -2,6 +2,7 @@
   <v-app>
     <v-main>
       <v-app-bar>
+        <v-btn to="/serverstats">Server Stats</v-btn>
         <v-btn to="/games">Games</v-btn>
         <v-btn to="/characters">Characters</v-btn>
         <v-btn to="/gms">GMs</v-btn>

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
@@ -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>