tinker with the page query for game list

backend/src/app.ts

@@ -49,9 +49,11 @@ app.post('/api/game', jsonParser, async (req, res) => {
     order: orderBy,
     where: filter
   })
-  const pageCount = Math.ceil((await Game.count({
+  const pageCount = Math.ceil(
+    (await Game.count({
       where: filter
-  })) / count)
+    })) / count
+  )
 
   res.setHeader('Content-Type', 'application/json')
   res.send({ gameData, pageCount })

frontend/src/vues/CharacterList.vue

@@ -51,7 +51,7 @@ let count = 10
 async function loadData() {
   const response = await axios.post('/api/character', {
     page: `${page.value - 1}`,
-    count: `${count}`,
+    count: `10`,
     orderBy: 'id'
   })
 
@@ -60,7 +60,6 @@ async function loadData() {
 }
 
 function setPage(targetPage: number) {
-  console.log(targetPage)
   router.replace({ query: { page: targetPage } })
 }
 

frontend/src/vues/GameList.vue

@@ -1,94 +1,86 @@
 <template>
   <div class="d-flex flex-row">
-    <input class="filter flex-1-0" placeholder="Filter by Name" v-model="filtervalue" />
+    <v-text-field
+      class="filter flex-1-0"
+      placeholder="Filter by Name"
+      v-model="filtervalue"
+    ></v-text-field>
   </div>
-  <v-table>
-    <thead>
-      <tr>
-        <th class="text-left">ID</th>
-        <th class="text-left">Title</th>
-        <th class="text-left">Staus</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="game in games">
-        <td>
-          <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
-        </td>
-        <td>
-          <a v-bind:href="`/#/games/${game.id}`">{{ game.title }}</a>
-        </td>
-        <td>{{ game.status }}</td>
-      </tr>
-    </tbody>
-  </v-table>
+  <game-table :gameList="games"></game-table>
   <v-pagination
+    :model-value="page"
     :length="pageCount"
-    @prev="previousPage()"
-    @next="nextPage()"
     @update:modelValue="setPage($event)"
   ></v-pagination>
 </template>
 
 <style>
-label.filter {
-  margin: 10px;
+.filter {
+  margin-top: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
   margin-bottom: 0px;
 }
-input.filter {
-  margin: 10px;
-  background: darkslategray;
-  border-color: lightgray;
-}
 </style>
 
 <script setup lang="ts">
+import GameTable from './GameTable.vue'
 import { onMounted, watch, ref } from 'vue'
 import axios from 'axios'
 
-let page = 0
-let count = 10
+const route = useRoute()
+const router = useRouter()
+
 const games = ref({})
+let page = ref(1)
 const pageCount = ref(1)
 
-const filtervalue = ref("")
+let count = 10
+
+const filtervalue = ref('')
 
 async function loadData() {
   const response = await axios.post('/api/game', {
-    page: `${page}`,
-    count: '10',
-    filter: filtervalue.value ? `title:${filtervalue.value}` : ""
+    page: `${page.value - 1}`,
+    count: `10`,
+    filter: filtervalue.value ? `title:${filtervalue.value}` : '',
+    orderBy: 'id'
   })
 
   games.value = response.data.gameData
   pageCount.value = response.data.pageCount
 }
 
-async function nextPage() {
-  page++
-  loadData()
-}
-
-async function previousPage() {
-  page--
-  loadData()
-}
-
 function setPage(targetPage: number) {
-  this.page = targetPage - 1
-  loadData()
+  router.replace({ query: { page: targetPage } })
 }
 
-onMounted(async () => {
+watch(route, (newValue, oldValue) => {
+  if (!route.query.page) {
+    router.replace({ query: { page: 1 } })
+    page.value = 1
+  } else {
+    page.value = Number(route.query.page)
+  }
   loadData()
 })
 
-
-let debounce = null;
+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 } })
+    page.value = 1
+  } else {
+    page.value = Number(route.query.page)
+  }
+  console.log(page.value)
+  loadData()
+})
 </script>