update the character list to keep sort and filters in the query params.

frontend/src/vues/CharacterList.vue

@@ -3,15 +3,16 @@
     <v-text-field
       class="filter flex-1-0"
       placeholder="Filter by Name"
-      v-model="filtervalue"
+      v-model="filterValue"
     ></v-text-field>
   </div>
   <v-data-table-server
     :headers="headers"
-    v-model:items-per-page="resultePerPage"
     :items="characters"
     :items-length="count"
-    v-model:page="page"
+    v-model:items-per-page="resultePerPage"
+    v-model:page="pageValue"
+    v-model:sort-by="sortValue"
     @update:options="loadData"
   >
     <template v-slot:item.id="{ item }">
@@ -26,9 +27,8 @@
     <template #bottom></template>
   </v-data-table-server>
   <v-pagination
-    :model-value="page"
+    v-model:model-value="pageValue"
     :length="pageCount"
-    @update:modelValue="setPage($event)"
   ></v-pagination>
 </template>
 
@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { Character } from '../types'
-import { onMounted, ref, watch } from 'vue'
+import { onBeforeMount, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { VDataTable } from 'vuetify/components'
 import axios from 'axios'
@@ -57,18 +57,17 @@ const router = useRouter()
 
 const characters = ref<Character[]>([])
 const pageCount = ref(1)
-const page = ref(1)
 const resultePerPage = ref(10)
 
 const count = ref(10)
 
-const filtervalue = ref('')
+const pageValue = ref(1)
+const filterValue = ref('')
+const sortValue = ref([])
 
 async function loadData({ page, itemsPerPage, sortBy }: any) {
-  let sortString = 'id'
+  let sortString = 'id asc'
   if (sortBy[0]) {
-    console.log(sortBy[0].key)
-    console.log(sortBy[0].order)
     sortString = `${sortBy[0].key} ${sortBy[0].order}`
   }
 
@@ -76,47 +75,82 @@ async function loadData({ page, itemsPerPage, sortBy }: any) {
     page: `${page - 1}`,
     count: `${itemsPerPage}`,
     orderBy: sortString,
-    filter: filtervalue.value ? `characterName:"${filtervalue.value}"` : ''
+    filter: filterValue.value ? `characterName:"${filterValue.value}"` : ''
   })
 
   characters.value = response.data.characterData
   pageCount.value = response.data.pageCount
   count.value = response.data.totalCount
-}
 
-function setPage(targetPage: number) {
-  router.replace({ query: { page: targetPage, filter: route.query.filter } })
-}
-
-watch(route, (newValue, oldValue) => {
-  if (!route.query.page) {
-    router.replace({ query: { page: 1, filter: route.query.filter } })
-    page.value = 1
-  } else {
-    page.value = Number(route.query.page)
+  router.replace({
+    query: {
+      page: pageValue.value,
+      sort: sortString === 'id asc' ? '' : sortString,
+      filter: filterValue.value
+    }
+  })
+}
+
+async function reloadData() {
+    loadData({
+    page: pageValue.value,
+    itemsPerPage: 10,
+    sortBy: sortValue.value
+  })
+}
+
+watch(route, (newRoute, oldRoute) => {
+    if (newRoute.query.page) {
+    pageValue.value = Number(newRoute.query.page)
+  }
+
+  if (newRoute.query.sort) {
+    sortValue.value = [
+      {
+        key: newRoute.query.sort.split(' ')[0],
+        order: newRoute.query.sort.split(' ')[1]
+      }
+    ]
+  }
+
+  if (newRoute.query.filter) {
+    filterValue.value = newRoute.query.filter.toString()
   }
-  page.value = Number(route.query.page)
-  loadData({ page: page.value, itemsPerPage: resultePerPage.value, sortBy: [] })
 })
 
 let debounce: ReturnType<typeof setTimeout>
-watch(filtervalue, (newFilter: string, oldFilter: string) => {
+watch(filterValue, (newFilter: string, oldFilter: string) => {
   clearTimeout(debounce)
   debounce = setTimeout(() => {
     router.replace({ query: { page: route.query.page, filter: newFilter } })
   }, 500)
-  loadData({ page: page.value, itemsPerPage: resultePerPage.value, sortBy: [] })
+  loadData({ page: pageValue.value, itemsPerPage: resultePerPage.value, sortBy: [] })
 })
 
-onMounted(async () => {
+onBeforeMount(async () => {
+  // Initialize Filter
   if (!route.query.page) {
-    router.replace({ query: { page: 1 } })
-    page.value = 1
+    pageValue.value = 1
   } else {
-    page.value = Number(route.query.page)
+    pageValue.value = Number(route.query.page)
+    count.value = route.query.page * 10
   }
+
+  // Initialize Sort
+  if (!route.query.sort) {
+    sortValue.value = []
+  } else {    
+    sortValue.value = [
+      {
+        key: route.query.sort.split(' ')[0],
+        order: route.query.sort.split(' ')[1]
+      }
+    ]
+  }
+
+  // Initialize Filter
   if (route.query.filter) {
-    filtervalue.value = route.query.filter.toString()
+    filterValue.value = route.query.filter.toString()
   }
 })
 </script>

frontend/src/vues/GameList.vue

@@ -85,10 +85,7 @@ async function loadData({ page, itemsPerPage, sortBy }: any) {
   games.value = response.data.gameData
   pageCount.value = response.data.pageCount
   count.value = response.data.totalCount
-  console.log('asdf')
-  console.log(page)
-  console.log(itemsPerPage)
-  console.log(sortBy)
+
   router.replace({
     query: {
       page: pageValue.value,