progress on player view

app/src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { useStore } from 'vuex'
 import { RouteRecordRaw, RouteLocationNormalizedGeneric } from 'vue-router';
 import PlayerList from '../views/PlayerList.vue'
-// import PlayerView from '../views/PlayerView.vue'
+import PlayerView from '../views/PlayerView.vue'
 import LoginView from '../views/LoginView.vue'
 import HomeView from '../views/HomeView.vue'
 import BullpenView from "@/views/BullpenView.vue";
@@ -24,12 +24,10 @@ const routes: Array<RouteRecordRaw> = [
   { path: '/stats', component: BullpenListView },
   { path: '/summary', component: BullpenSummaryView },
   {
-    path: '/player/:id',
+    path: '/player',
-    name: 'EditPlayer',
+    component: PlayerView,
-    component: () => import('@/views/PlayerView.vue'),
     props: (route: RouteLocationNormalizedGeneric) => ({
-      player: route.state?.player || null, // Pass the player from the state if available
+      id: route.query.id
-      mode: route.query.mode || 'create', // Default to "create" if no query exists
     }),
   },
 

app/src/types/User.ts

@@ -7,4 +7,5 @@ export default interface User {
     roles: string[],
     createdAt: Date,
     updatedAt: Date,
+    auth: { email: string }
 }

app/src/views/HomeView.vue

@@ -38,7 +38,7 @@ const showStats = () => {
 };
 
 const showProfile = () => {
-  router.push({ path: '/profile' });
+  router.push({ path: '/player', query: { id: user.value.id }});
 };
 
 const logout = () => {

app/src/views/LoginView.vue

@@ -56,7 +56,7 @@ const submit = handleSubmit((values, { resetForm }) => {
     email: values.email,
     password: values.password,
   }).then((user: User) => {
-    return store.dispatch('player/determinePlayer', user);
+    return store.dispatch('player/selectPlayer', user);
   }).then(() => {
     resetForm();
     onLogin();

app/src/views/PlayerView.vue

@@ -18,17 +18,22 @@ import {
 import { Field, useForm } from 'vee-validate';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { ref, computed, watch } 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} from 'vue-router';
 
 const props = defineProps<{ player?: Player }>();
 
-// Todo: create default player
 const defaultPlayer: Player = {
   id: 0,
   gender: 'male',
   bats: 'R',
   throws: 'R',
+  height: 0,
+  weight: 0,
+  state: 'active',
   jerseyNumber: 0,
   createdAt: new Date(),
   updatedAt: new Date(),
@@ -41,12 +46,17 @@ const defaultPlayer: Player = {
     roles: [],
     createdAt: new Date(),
     updatedAt: new Date(),
+    auth: {
+      email: ''
+    }
   }
 }
-// ...
 
 // 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 formattedDate = ref(player.value.user.dateOfBirth.toISOString().split('T')[0]);
 
 const schema = yup.object({
   email: yup
@@ -86,23 +96,40 @@ const schema = yup.object({
       .required('Height is required'),
 });
 
-const { errors, handleSubmit, defineField } = useForm({
+const { errors, resetForm, handleSubmit, defineField } = useForm({
   validationSchema: schema,
   initialValues: player.value
 });
 
 // Watch for changes in props.player to reset form when editing
 watch(
-    () => props.player,
+    () => route.params.id || route.query.id,
-    (newPlayer) => {
+    (newId) => {
-      if (newPlayer) {
+      if (newId) {
-        resetForm({ values: { ...newPlayer } });
+        fetchPlayerById(Number(newId)); // Fetch player when the ID changes
-      } else {
-        resetForm({ values: { ...defaultPlayer } });
       }
     }
 );
 
+onMounted(() => {
+  const id = route.params.id || route.query.id; // Get ID from params or query
+  if (id) {
+    fetchPlayerById(Number(id));
+  }
+});
+
+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) {
@@ -112,12 +139,15 @@ const submit = handleSubmit((values: Player) => {
   }
 });
 
-const isEdit = computed(() => !!player.value.id);
+const onDateChange = (value: string) => {
+  formattedDate.value = value; // Update formatted string
+  player.value.user.dateOfBirth = new Date(value); // Convert to Date object and update
+};
 
-const [email, emailAttrs] = defineField('user.email');
+const [email, emailAttrs] = defineField('user.auth.email');
 const [firstName, firstNameAttrs] = defineField('user.firstName');
 const [lastName, lastNameAttrs] = defineField('user.lastName');
-const [dateOfBirth, dateOfBirthAttrs] = defineField('user.dateOfBirth');
+// const [dateOfBirth, dateOfBirthAttrs] = defineField('formattedDate');
 const [gender, genderAttrs] = defineField('gender');
 const [bats, batsAttrs] = defineField('bats');
 const [throws, throwsAttrs] = defineField('throws');
@@ -142,9 +172,11 @@ const [height, heightAttrs] = defineField('height');
             <ion-card-title>Personal Data</ion-card-title>
           </ion-card-header>
           <ion-card-content>
+<!--            <CrudField name="user.email" label="Email" labelPlacement="floating"/>-->
             <ion-item>
               <Field name="email">
                 <ion-input
+                    readonly: true
                     label="E-Mail"
                     label-placement="stacked"
                     v-model="email"
@@ -159,6 +191,7 @@ const [height, heightAttrs] = defineField('height');
             <ion-item>
               <Field name="firstName">
                 <ion-input
+                    readonly: true
                     label="First Name"
                     label-placement="stacked"
                     v-model="firstName"
@@ -189,8 +222,8 @@ const [height, heightAttrs] = defineField('height');
                 <ion-input
                     label="Date of Birth"
                     label-placement="stacked"
-                    v-model="dateOfBirth"
+                    v-model="formattedDate"
-                    v-bind="dateOfBirthAttrs"
+                    @input="onDateChange($event.target.value)"
                     type="date"
                 >
                   <small v-if="errors['user.dateOfBirth']" class="error-message">{{ errors['user.dateOfBirth'] }}</small>
@@ -230,9 +263,9 @@ const [height, heightAttrs] = defineField('height');
                     v-bind="batsAttrs"
                     interface="action-sheet"
                 >
-                  <ion-select-option value="R">Right</ion-select-option>
+                  <ion-select-option value="right">Right</ion-select-option>
-                  <ion-select-option value="L">Left</ion-select-option>
+                  <ion-select-option value="left">Left</ion-select-option>
-                  <ion-select-option value="S">Switch</ion-select-option>
+                  <ion-select-option value="both">Switch</ion-select-option>
                 </ion-select>
               </Field>
             </ion-item>
@@ -244,9 +277,10 @@ const [height, heightAttrs] = defineField('height');
                     label-placement="stacked"
                     v-model="throws"
                     v-bind="throwsAttrs"
+                    interface="action-sheet"
                 >
-                  <ion-select-option value="R">Right</ion-select-option>
+                  <ion-select-option value="right">Right</ion-select-option>
-                  <ion-select-option value="L">Left</ion-select-option>
+                  <ion-select-option value="left">Left</ion-select-option>
                 </ion-select>
               </Field>
             </ion-item>