pagination for game list

backend/src/app.ts

@@ -85,9 +85,6 @@ app.post('/api/character', jsonParser, async (req, res) => {
   })
   const pageCount = Math.ceil(await Character.count() / count)
 
-console.log(characterData)
-console.log(pageCount)
-
   res.setHeader('Content-Type', 'application/json')
   res.json({characterData, pageCount})
 })
@@ -101,8 +98,14 @@ app.post('/api/game', jsonParser, async (req, res) => {
   const orderBy = req.body.orderBy
   const count = req.body.count
 
+  const gameData = await Game.findAll({ 
+    offset: page * count, 
+    limit: count 
+  })
+  const pageCount = Math.ceil(await Character.count() / count)
+
   res.setHeader('Content-Type', 'application/json')
-  res.send(await Game.findAll({ offset: page * count, limit: count }))
+  res.send({gameData, pageCount})
 })
 
 app.get('/api/game/:gameId', async (req, res) => {

frontend/src/vues/GameList.vue

@@ -8,7 +8,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="game in games.data">
+      <tr v-for="game in games">
         <td>
           <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
         </td>
@@ -19,8 +19,7 @@
       </tr>
     </tbody>
   </v-table>
-  <button @click="previousPage()">pp</button>
+  <v-pagination :length="pageCount" @prev="previousPage()" @next="nextPage()" @update:modelValue="setPage($event)"></v-pagination>
-  <button @click="nextPage()">np</button>
 </template>
 <style></style>
 
@@ -31,18 +30,35 @@ import axios from 'axios'
 let page = 1
 let count = 10
 const games = ref({})
+const pageCount = ref({})
 
-onMounted(async () => {
+async function loadData() {
-  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
+  const response = await axios.post('/api/game', { 
+    page: `${page}`, 
+    count: '10', 
+    orderBy: 'id' 
   })
 
+  games.value = response.data.gameData
+  pageCount.value = response.data.pageCount
+}
+
 async function nextPage() {
   page++
-  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
+  loadData()
 }
 
 async function previousPage() {
   page--
-  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
+  loadData()
 }
+
+function setPage(targetPage:number) {
+  this.page=targetPage - 1
+  loadData() 
+}
+
+onMounted(async () => {
+  loadData()
+})
 </script>