app/src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { useStore } from 'vuex'
-import { RouteRecordRaw } from 'vue-router';
+import { RouteRecordRaw, RouteLocationNormalizedGeneric } from 'vue-router';
 import PlayerList from '../views/PlayerList.vue'
 import PlayerView from '../views/PlayerView.vue'
 import LoginView from '../views/LoginView.vue'
@@ -23,9 +23,14 @@ const routes: Array<RouteRecordRaw> = [
   { path: '/bullpen', component: BullpenView },
   { path: '/stats', component: BullpenListView },
   { path: '/summary', component: BullpenSummaryView },
-  { path: '/player/create', name: 'PlayerCreate', component: PlayerView },
+  {
-  { path: '/player/view/:id', name: 'PlayerView', component: PlayerView },
+    path: '/player',
-  { path: '/player/edit/:id', name: 'PlayerEdit', component: PlayerView }
+    component: PlayerView,
+    props: (route: RouteLocationNormalizedGeneric) => ({
+      id: route.query.id
+    }),
+  },
+
 ]
 
 const router = createRouter({

app/src/views/HomeView.vue

@@ -38,7 +38,7 @@ const showStats = () => {
 };
 
 const showProfile = () => {
-  router.push({ path: `/player/view/${user.value.id}`});
+  router.push({ path: '/player', query: { id: user.value.id }});
 };
 
 const logout = () => {
@@ -50,7 +50,7 @@ const logout = () => {
 }
 
 const addPlayer = () => {
-  router.push({ path: '/player/create' });
+  router.push({ path: '/player' });
 }
 
 </script>

app/src/views/PlayerList.vue

@@ -17,7 +17,6 @@ onMounted(async () => {
 const selectPlayer = (player: Player) => {
   console.log(player);
   store.commit("player/select", player);
-  store.dispatch("bullpen/start", player.user);
   router.push({ path: '/bullpen' });
 };
 

app/src/views/PlayerView.vue

@@ -18,19 +18,19 @@ import {
 import { Field, useForm } from 'vee-validate';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { computed, ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Player from '@/types/Player';
 // import CrudField from '@/components/CrudField.vue'
 import PlayerService from '@/services/PlayerService';
-import {useRoute, useRouter} from 'vue-router';
+import {useRoute} from 'vue-router';
 
 const props = defineProps<{ player?: Player }>();
 
 const defaultPlayer: Player = {
   id: 0,
   gender: 'male',
-  bats: 'right',
+  bats: 'R',
-  throws: 'right',
+  throws: 'R',
   height: 0,
   weight: 0,
   state: 'active',
@@ -54,17 +54,8 @@ const defaultPlayer: Player = {
 
 // Computed reactive player object: Either use the provided player or initialize with default
 const player = ref<Player>(props.player ? { ...props.player } : { ...defaultPlayer });
+const isEdit = ref(false);
 const route = useRoute();
-const router = useRouter();
-
-const id = route.params.id as string | undefined; // `id` parameter from route
-const mode = computed(() => {
-  if (route.name === 'PlayerCreate') return 'create';
-  if (route.name === 'PlayerView') return 'view';
-  if (route.name === 'PlayerEdit') return 'edit';
-  return null; // Fallback for unsupported routes
-});
-
 const formattedDate = ref(player.value.user.dateOfBirth.toISOString().split('T')[0]);
 
 const schema = yup.object({
@@ -111,49 +102,40 @@ const { errors, resetForm, handleSubmit, defineField } = useForm({
 });
 
 // Watch for changes in props.player to reset form when editing
-// watch(
+watch(
-//     () => route.params.id || route.query.id,
+    () => route.params.id || route.query.id,
-//     (newId) => {
+    (newId) => {
-//       if (newId) {
+      if (newId) {
-//         fetchPlayerById(Number(newId)); // Fetch player when the ID changes
+        fetchPlayerById(Number(newId)); // Fetch player when the ID changes
-//       }
+      }
-//     }
+    }
-// );
+);
 
 onMounted(() => {
-  if (mode.value === 'view' || mode.value === 'edit') {
+  const id = route.params.id || route.query.id; // Get ID from params or query
-    PlayerService.fetchById(Number(id))
+  if (id) {
-        .then((response) => {
+    fetchPlayerById(Number(id));
-          player.value = response;
-        })
-        .catch((error) => {
-          console.error('Failed to fetch player:', error);
-        });
   }
-  resetForm({ values: { ...player.value } }); // Reset form with fetched data
-  formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
 });
 
-// const fetchPlayerById = async (id: number) => {
+const fetchPlayerById = async (id: number) => {
-//   try {
+  try {
-//     const data = await PlayerService.fetchByUserId(id); // Fetch the player from the API
+    const data = await PlayerService.fetchByUserId(id); // Fetch the player from the API
-//     player.value = { ...data }; // Load the API response into the form
+    player.value = { ...data }; // Load the API response into the form
-//     resetForm({ values: { ...player.value } }); // Reset form with fetched data
+    resetForm({ values: { ...player.value } }); // Reset form with fetched data
-//     formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
+    formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
-//     isEdit.value = true; // Set to edit mode
+    isEdit.value = true; // Set to edit mode
-//   } catch (error) {
+  } catch (error) {
-//     console.error('Error fetching player data:', error);
+    console.error('Error fetching player data:', error);
-//   }
+  }
-// };
+};
 
 // Submit logic: Differentiate between create and update
 const submit = handleSubmit((values: Player) => {
-  if (mode.value === 'edit') {
+  if (player.value.id) {
     console.log('Updating player:', values); // Replace with update logic
-    // PlayerService.(player.value.id, player.value).then(() => router.push('/players'));
+  } else {
-  } else if (mode.value === 'create') {
     console.log('Creating player:', values); // Replace with create logic
-    PlayerService.save(player.value).then(() => router.push('/home'));
   }
 });
 
@@ -179,11 +161,7 @@ const [height, heightAttrs] = defineField('height');
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>
+        <ion-title>{{ isEdit ? 'Update Player' : 'Create Player' }}</ion-title>
-          <template v-if="mode === 'view'">View Player</template>
-          <template v-else-if="mode === 'edit'">Edit Player</template>
-          <template v-else>Create Player</template>
-        </ion-title>
       </ion-toolbar>
     </ion-header>