From c8614a7fa0c3ee93cc8d66c7d51bc4c8e69ab3c4 Mon Sep 17 00:00:00 2001
From: "jmosrael@gmail.com" <I4mmrc()w3>
Date: Mon, 13 May 2024 21:49:41 -0700
Subject: [PATCH] url query params for character list page number

---
 frontend/src/vues/CharacterDetails.vue | 22 +++++++++++++---
 frontend/src/vues/CharacterList.vue    | 36 ++++++++++++--------------
 frontend/src/vues/GameDetails.vue      |  1 +
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/frontend/src/vues/CharacterDetails.vue b/frontend/src/vues/CharacterDetails.vue
index 32e6205..6903f2f 100644
--- a/frontend/src/vues/CharacterDetails.vue
+++ b/frontend/src/vues/CharacterDetails.vue
@@ -10,13 +10,27 @@
     </div>
     <div>Last Game: {{ lastPlayedPostDate }}</div>
     <div class="d-flex flex-row">
-    <GameTable title="Games Played" :gameList="games.played"></GameTable>
-    <game-table title="Games Applied" :gameList="games.applied"></game-table>
-  </div>
+      <div class="flex-column game-list">
+        <h3 class="game-list-title">Games Played</h3>
+        <GameTable :gameList="games.played"></GameTable>
+      </div>
+      <div class="flex-column game-list">
+        <h3 class="game-list-title">Games Applied</h3>
+        <game-table :gameList="games.applied"></game-table>
+      </div>
+    </div>
   </v-container>
 </template>
 
-<style></style>
+<style>
+  .game-list {
+    margin: 20px;
+    margin-top: 25px;
+  }
+  .game-list-title{
+    margin-bottom: 10px;
+  }
+</style>
 
 <script setup lang="ts">
 import GameTable from './GameTable.vue'
diff --git a/frontend/src/vues/CharacterList.vue b/frontend/src/vues/CharacterList.vue
index b380fe9..88565f9 100644
--- a/frontend/src/vues/CharacterList.vue
+++ b/frontend/src/vues/CharacterList.vue
@@ -27,30 +27,29 @@
     </tbody>
   </v-table>
   <v-pagination
+    :model-value="page"
     :length="pageCount"
-    @prev="previousPage()"
-    @next="nextPage()"
     @update:modelValue="setPage($event)"
   ></v-pagination>
-  <button @click="previousPage()">pp</button>
-  <button @click="nextPage()">np</button>
 </template>
 
 <style type="text/css"></style>
 
 <script setup lang="ts">
 import { onMounted, onCreated, ref } from 'vue'
-import { Game, useGameStore } from '../store/gamestore'
 import axios from 'axios'
 
-let page = 0
+const route = useRoute()
+const router = useRouter()
+
 let count = 10
 const characters = ref({})
 const pageCount = ref(1)
+const page = ref(1)
 
 async function loadData() {
   const response = await axios.post('/api/character', {
-    page: `${page}`,
+    page: `${page.value-1}`,
     count: `${count}`,
     orderBy: 'id'
   })
@@ -59,22 +58,21 @@ async function loadData() {
   pageCount.value = response.data.pageCount
 }
 
-function previousPage() {
-  page--
-  loadData()
-}
-
-function nextPage() {
-  page++
-  loadData()
-}
-
 function setPage(targetPage: number) {
-  this.page = targetPage - 1
-  loadData()
+  console.log(targetPage)
+  router.replace({query: {page: targetPage}})
 }
 
+watch(route, (newValue, oldValue) => {
+  page.value = Number(route.query.page)
+  loadData()
+})
+
 onMounted(async () => {
+  if(!route.query.page){
+    router.replace({query: {page: 1}})
+  }
+  page.value = Number(route.query.page)
   loadData()
 })
 </script>
diff --git a/frontend/src/vues/GameDetails.vue b/frontend/src/vues/GameDetails.vue
index 3822017..497c2c6 100644
--- a/frontend/src/vues/GameDetails.vue
+++ b/frontend/src/vues/GameDetails.vue
@@ -1,3 +1,4 @@
+<template>
   <div class="game-title-box">
     <h1>#{{ game.id }} - {{ game.title }}</h1>
   </div>