progress on player view

app/src/router/index.ts

@@ -23,14 +23,9 @@ const routes: Array<RouteRecordRaw> = [
   { path: '/bullpen', component: BullpenView },
   { path: '/stats', component: BullpenListView },
   { path: '/summary', component: BullpenSummaryView },
-  {
-    path: '/player',
-    component: PlayerView,
-    props: (route: RouteLocationNormalizedGeneric) => ({
-      id: route.query.id
-    }),
-  },
-
+  { path: '/player/create', name: 'PlayerCreate', component: PlayerView },
+  { path: '/player/view/:id', name: 'PlayerView', component: PlayerView },
+  { path: '/player/edit/:id', name: 'PlayerEdit', component: PlayerView }
 ]
 
 const router = createRouter({

app/src/views/HomeView.vue

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

app/src/views/PlayerList.vue

@@ -17,6 +17,7 @@ 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 { ref, onMounted, watch } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import Player from '@/types/Player';
 // import CrudField from '@/components/CrudField.vue'
 import PlayerService from '@/services/PlayerService';
-import {useRoute} from 'vue-router';
+import {useRoute, useRouter} from 'vue-router';
 
 const props = defineProps<{ player?: Player }>();
 
 const defaultPlayer: Player = {
   id: 0,
   gender: 'male',
-  bats: 'R',
-  throws: 'R',
+  bats: 'right',
+  throws: 'right',
   height: 0,
   weight: 0,
   state: 'active',
@@ -54,8 +54,17 @@ 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({
@@ -102,40 +111,49 @@ const { errors, resetForm, handleSubmit, defineField } = useForm({
 });
 
 // Watch for changes in props.player to reset form when editing
-watch(
-    () => route.params.id || route.query.id,
-    (newId) => {
-      if (newId) {
-        fetchPlayerById(Number(newId)); // Fetch player when the ID changes
-      }
-    }
-);
+// watch(
+//     () => route.params.id || route.query.id,
+//     (newId) => {
+//       if (newId) {
+//         fetchPlayerById(Number(newId)); // Fetch player when the ID changes
+//       }
+//     }
+// );
 
 onMounted(() => {
-  const id = route.params.id || route.query.id; // Get ID from params or query
-  if (id) {
-    fetchPlayerById(Number(id));
+  if (mode.value === 'view' || mode.value === 'edit') {
+    PlayerService.fetchById(Number(id))
+        .then((response) => {
+          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) => {
-  try {
-    const data = await PlayerService.fetchByUserId(id); // Fetch the player from the API
-    player.value = { ...data }; // Load the API response into the form
-    resetForm({ values: { ...player.value } }); // Reset form with fetched data
-    formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
-    isEdit.value = true; // Set to edit mode
-  } catch (error) {
-    console.error('Error fetching player data:', error);
-  }
-};
+// const fetchPlayerById = async (id: number) => {
+//   try {
+//     const data = await PlayerService.fetchByUserId(id); // Fetch the player from the API
+//     player.value = { ...data }; // Load the API response into the form
+//     resetForm({ values: { ...player.value } }); // Reset form with fetched data
+//     formattedDate.value = dayjs(player.value.user.dateOfBirth).format('YYYY-MM-DD');
+//     isEdit.value = true; // Set to edit mode
+//   } catch (error) {
+//     console.error('Error fetching player data:', error);
+//   }
+// };
 
 // Submit logic: Differentiate between create and update
 const submit = handleSubmit((values: Player) => {
-  if (player.value.id) {
+  if (mode.value === 'edit') {
     console.log('Updating player:', values); // Replace with update logic
-  } else {
+    // PlayerService.(player.value.id, player.value).then(() => router.push('/players'));
+  } else if (mode.value === 'create') {
     console.log('Creating player:', values); // Replace with create logic
+    PlayerService.save(player.value).then(() => router.push('/home'));
   }
 });
 
@@ -161,7 +179,11 @@ const [height, heightAttrs] = defineField('height');
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>{{ isEdit ? 'Update Player' : 'Create Player' }}</ion-title>
+        <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>