Update the character list to use the server side table stuff

backend/src/characterservice.ts

@@ -33,14 +33,15 @@ export function addCharacterApis(app, jsonParser) {
         order: orderBy,
         where: filter
       })
-      const pageCount = Math.ceil(
+      const totalCount = await Character.count({
-        (await Character.count({
           where: filter
-        })) / count
+        })
+      const pageCount = Math.ceil(
+        totalCount / count
       )
 
       res.setHeader('Content-Type', 'application/json')
-      res.send({ characterData, pageCount })
+      res.send({ characterData, pageCount, totalCount })
     } catch (e) {
       if (e instanceof ParsingError) {
         res.status(400).send('Could not parse filter.')

frontend/src/types.ts

@@ -28,7 +28,7 @@ export interface GameStats {
   Events: number
   AverageIP: number
   AverageEB: number
-  TotalIP: number,
+  TotalIP: number
   TotalEB: number
 }
 

frontend/src/vues/CharacterDetails.vue

@@ -48,7 +48,12 @@ const route = useRoute()
 
 const characterId = ref(route.params.characterId)
 const character = ref<Character>({
-  id: 0, characterName: "", playerName: "", role: "", status: "", lastGame: 0
+  id: 0,
+  characterName: '',
+  playerName: '',
+  role: '',
+  status: '',
+  lastGame: 0
 })
 const games = ref<GameList>({ played: [], applied: [] })
 const earnedEB = ref(0)

frontend/src/vues/CharacterList.vue

@@ -6,33 +6,25 @@
       v-model="filtervalue"
     ></v-text-field>
   </div>
-  <v-table>
+  <v-data-table-server
-    <thead>
+    :headers="headers"
-      <tr>
+    v-model:items-per-page="resultePerPage"
-        <th class="text-left">ID</th>
+    :items="characters"
-        <th class="text-left">Character</th>
+    :items-length="count"
-        <th class="text-left">Role</th>
+    v-model:page="page"
-        <th class="text-left">Player</th>
+    @update:options="loadItems"
-        <th class="text-left">Status</th>
+  >
-        <th class="text-left">Last Game</th>
+    <template v-slot:item.id="{ item }">
-      </tr>
+      <a v-bind:href="`/#/characters/${item.id}`">{{ item.id }}</a>
-    </thead>
+    </template>
-    <tbody>
+    <template v-slot:item.characterName="{ item }">
-      <tr v-for="character in characters">
+      <a v-bind:href="`/#/characters/${item.characterName}`">{{ item.characterName }}</a>
-        <td>
+    </template>
-          <a v-bind:href="`/#/characters/${character.id}`">{{ character.id }}</a>
+    <template v-slot:item.creationDate="{ item }">
-        </td>
+      {{ new Date(item.creationDate * 1000).toISOString().split('T')[0] }}
-        <td>
+    </template>
-          <a v-bind:href="`/#/characters/${character.id}`">{{ character.characterName }}</a>
+    <template #bottom></template>
-        </td>
+  </v-data-table-server>
-        <td>{{ character.role }}</td>
-        <td>{{ character.playerName }}</td>
-        <td>{{ character.status }}</td>
-        <td>{{ character.lastGame }}</td>
-        <td>0</td>
-      </tr>
-    </tbody>
-  </v-table>
   <v-pagination
     :model-value="page"
     :length="pageCount"
@@ -48,27 +40,47 @@ import { onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
 
+const headers = [
+  { title: 'ID', align: 'start', sortable: true, key: 'id' },
+  { title: 'Character', align: 'start', sortable: true, key: 'characterName' },
+  { title: 'Role', align: 'start', sortable: true, key: 'role' },
+  { title: 'Player', align: 'start', sortable: true, key: 'playerName' },
+  { title: 'Status', align: 'start', sortable: true, key: 'status' },
+  { title: 'Creation Date', align: 'start', sortable: true, key: 'creationDate' }
+]
+
 const route = useRoute()
 const router = useRouter()
 
 const characters = ref<Character[]>([])
 const pageCount = ref(1)
 const page = ref(1)
+const resultePerPage = ref(10)
 
-let count = 10
+const count = ref(10)
 
 const filtervalue = ref('')
 
-async function loadData() {
+async function loadItems({ page, itemsPerPage, sortBy }) {
+  let sortString = 'id'
+  if (sortBy[0]) {
+    console.log(sortBy[0].key)
+    console.log(sortBy[0].order)
+    sortString = `${sortBy[0].key} ${sortBy[0].order}`
+  }
+
   const response = await axios.post('/api/character', {
-    page: `${page.value - 1}`,
+    page: `${page - 1}`,
-    count: `10`,
+    count: `${itemsPerPage}`,
-    orderBy: 'id',
+    orderBy: sortString,
-    filter: filtervalue.value ? `characterName:"${filtervalue.value}"` : ''
+    filter: filtervalue.value ? `characterName:${filtervalue.value}` : ''
   })
   
+  console.log(response)
+
   characters.value = response.data.characterData
   pageCount.value = response.data.pageCount
+  count.value = response.data.totalCount
 }
 
 function setPage(targetPage: number) {
@@ -83,7 +95,7 @@ watch(route, (newValue, oldValue) => {
     page.value = Number(route.query.page)
   }
   page.value = Number(route.query.page)
-  loadData()
+  loadItems({page: page.value, itemsPerPage: resultePerPage.value, sortBy:[]})
 })
 
 let debounce: ReturnType<typeof setTimeout>
@@ -104,6 +116,6 @@ onMounted(async () => {
   if (route.query.filter) {
     filtervalue.value = route.query.filter.toString()
   }
-  loadData()
+  loadItems({page: page.value, itemsPerPage: resultePerPage.value, sortBy:[]})
 })
 </script>

frontend/src/vues/GameDetails.vue

@@ -100,12 +100,12 @@ const appHeaders: ReadonlyHeaders = [
 const gameId = ref(route.params.gameId)
 const game = ref<Game>({
   id: 0,
-  title: "",
+  title: '',
-  gamemaster: "",
+  gamemaster: '',
   payoutEB: 0,
   payoutIP: 0,
-  payoutLoot: "",
+  payoutLoot: '',
-  status: "",
+  status: '',
   postdate: 0
 })
 const picks = ref<GameCharacter[]>([])