update game list to use sortable columns

backend/src/characterservice.ts

@@ -25,7 +25,7 @@ export function addCharacterApis(app, jsonParser) {
 
       const page = req.body.page
       const orderBy = req.body.orderBy ? obp.parse(req.body.orderBy) : ['id']
-      const count = req.body.count
+      const count = req.body.count || 10
       const filter = req.body.filter ? fp.parse(req.body.filter) : {}
 
       const characterData = await Character.findAll({

backend/src/gameservice.ts

@@ -20,6 +20,7 @@ export function addGameApis(app, jsonParser) {
     try {
       const fp = new FilterParser()
       const obp = new OrderByParser()
+
       const page = req.body.page || 0
       const orderBy = req.body.orderBy ? obp.parse(req.body.orderBy) : ['id']
       const count = req.body.count || 10
@@ -31,14 +32,15 @@ export function addGameApis(app, jsonParser) {
         order: orderBy,
         where: filter
       })
-      const pageCount = Math.ceil(
+      const totalCount = await Game.count({
-        (await Game.count({
           where: filter
-        })) / count
+        })
+      const pageCount = Math.ceil(
+        totalCount / count
       )
 
       res.setHeader('Content-Type', 'application/json')
-      res.send({ gameData, pageCount })
+      res.send({ gameData, pageCount, totalCount })
     } catch (e) {
       if (e instanceof ParsingError) {
         res.status(400).send('Could not parse filter.')

frontend/src/vues/CharacterList.vue

@@ -12,7 +12,7 @@
     :items="characters"
     :items-length="count"
     v-model:page="page"
-    @update:options="loadItems"
+    @update:options="loadData"
   >
     <template v-slot:item.id="{ item }">
       <a v-bind:href="`/#/characters/${item.id}`">{{ item.id }}</a>
@@ -61,7 +61,7 @@ const count = ref(10)
 
 const filtervalue = ref('')
 
-async function loadItems({ page, itemsPerPage, sortBy }) {
+async function loadData({ page, itemsPerPage, sortBy }) {
   let sortString = 'id'
   if (sortBy[0]) {
     console.log(sortBy[0].key)
@@ -75,8 +75,6 @@ async function loadItems({ page, itemsPerPage, sortBy }) {
     orderBy: sortString,
     filter: filtervalue.value ? `characterName:${filtervalue.value}` : ''
   })
-  
-  console.log(response)
 
   characters.value = response.data.characterData
   pageCount.value = response.data.pageCount
@@ -95,7 +93,7 @@ watch(route, (newValue, oldValue) => {
     page.value = Number(route.query.page)
   }
   page.value = Number(route.query.page)
-  loadItems({page: page.value, itemsPerPage: resultePerPage.value, sortBy:[]})
+  loadData({page: page.value, itemsPerPage: resultePerPage.value, sortBy:[]})
 })
 
 let debounce: ReturnType<typeof setTimeout>
@@ -116,6 +114,5 @@ onMounted(async () => {
   if (route.query.filter) {
     filtervalue.value = route.query.filter.toString()
   }
-  loadItems({page: page.value, itemsPerPage: resultePerPage.value, sortBy:[]})
 })
 </script>

frontend/src/vues/GameList.vue

@@ -6,30 +6,30 @@
       v-model="filtervalue"
     ></v-text-field>
   </div>
-  <v-table>
+  <v-data-table-server
-    <thead>
+    :headers="headers"
-      <tr>
+    v-model:items-per-page="resltsPerPage"
-        <th class="text-left">ID</th>
+    :items="games"
-        <th class="text-left">Title</th>
+    :items-length="count"
-        <th class="text-left">Staus</th>
+    v-model:page="page"
-        <th class="text-left">Post Date</th>
+    @update:options="loadData"
-      </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>
-        <td>
-          {{ new Date(game.postdate * 1000).toISOString().split('T')[0] }}
-        </td>
-      </tr>
-    </tbody></v-table
   >
+
+
+
+ <template v-slot:item.id="{ item }">
+      <a v-bind:href="`/#/games/${item.id}`">{{ item.id }}</a>
+    </template>
+    <template v-slot:item.title="{ item }">
+      <a v-bind:href="`/#/games/${item.id}`">{{ item.title }}</a>
+    </template>
+    <template v-slot:item.postdate="{ item }">
+      {{ new Date(item.postdate * 1000).toISOString().split('T')[0] }}
+    </template>
+
+
+    <template #bottom></template>
+  </v-data-table-server>
   <v-pagination
     :model-value="page"
     :length="pageCount"
@@ -53,27 +53,54 @@ import { onMounted, watch, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
 
+const headers = [
+  { title: 'ID', align: 'start', sortable: true, key: 'id' },
+  { title: 'Title', align: 'start', sortable: true, key: 'title' },
+  { title: 'Status', align: 'start', sortable: true, key: 'status' },
+  { title: 'Post Date', align: 'start', sortable: true, key: 'postdate' }
+]
+
 const route = useRoute()
 const router = useRouter()
 
 const games = ref<Game[]>([])
-let page = ref(1)
 const pageCount = ref(1)
+let page = ref(1)
+const resultePerPage = ref(10)
 
-let count = 10
+let count = ref(10)
 
 const filtervalue = ref<string>('')
 
-async function loadData() {
+async function loadData({ page, itemsPerPage, sortBy }) {
-  const response = await axios.post('/api/game', {
+  let sortString = 'id'
+  if (sortBy[0]) {
+    console.log(sortBy[0].key)
+    console.log(sortBy[0].order)
+    sortString = `${sortBy[0].key} ${sortBy[0].order}`
+  }
+
+  console.log(page) 
+  console.log(itemsPerPage) 
+  console.log(sortBy)
+
+  console.log({
     page: `${page.value - 1}`,
-    count: `${count}`,
+    count: `${itemsPerPage}`,
+    orderBy: sortString,
+    filter: filtervalue.value ? `title:"${filtervalue.value}"` : '',
+  })
+
+  const response = await axios.post('/api/game', {
+    page: `${page - 1}`,
+    count: `${itemsPerPage}`,
+    orderBy: sortString,
     filter: filtervalue.value ? `title:"${filtervalue.value}"` : '',
-    orderBy: 'id'
   })
 
   games.value = response.data.gameData
   pageCount.value = response.data.pageCount
+  count.value = response.data.totalCount
 }
 
 function setPage(targetPage: number) {
@@ -91,7 +118,7 @@ watch(route, (newValue, oldValue) => {
   if (route.query.filter) {
     filtervalue.value = route.query.filter.toString()
   }
-  loadData()
+  loadData({page: page.value, itemsPerPage: resultePerPage.value, sortBy:[]})
 })
 
 let debounce: ReturnType<typeof setTimeout>
@@ -112,6 +139,5 @@ onMounted(async () => {
   if (route.query.filter) {
     filtervalue.value = route.query.filter.toString()
   }
-  loadData()
 })
 </script>