progress on player view

app/src/router/index.ts

@@ -1,8 +1,8 @@
 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 PlayerView from '../views/PlayerView.vue'
 import LoginView from '../views/LoginView.vue'
 import HomeView from '../views/HomeView.vue'
 import BullpenView from "@/views/BullpenView.vue";
@@ -19,19 +19,19 @@ const routes: Array<RouteRecordRaw> = [
   { path: '/home', component: HomeView },
   { path: '/profile', component: ProfileView },
   { path: '/players', component: PlayerList },
-  { path: '/player', component: PlayerView },
+  // { path: '/player', component: PlayerView },
   { path: '/bullpen', component: BullpenView },
   { path: '/stats', component: BullpenListView },
   { path: '/summary', component: BullpenSummaryView },
-  // {
-  //   path: '/player/:id',
-  //   name: 'EditPlayer',
-  //   component: () => import('@/views/PlayerView.vue'),
-  //   props: (route) => ({
-  //     player: route.state?.player || null, // Pass the player from the state if available
-  //     mode: route.query.mode || 'create', // Default to "create" if no query exists
-  //   }),
-  // },
+  {
+    path: '/player/:id',
+    name: 'EditPlayer',
+    component: () => import('@/views/PlayerView.vue'),
+    props: (route: RouteLocationNormalizedGeneric) => ({
+      player: route.state?.player || null, // Pass the player from the state if available
+      mode: route.query.mode || 'create', // Default to "create" if no query exists
+    }),
+  },
 
 ]
 

app/src/types/User.ts

@@ -1,5 +1,6 @@
 export default interface User {
     id: number,
+    email: string,
     firstName: string,
     lastName: string,
     dateOfBirth: Date,

app/src/views/PlayerView.vue

@@ -24,6 +24,25 @@ import Player from '@/types/Player';
 const props = defineProps<{ player?: Player }>();
 
 // Todo: create default player
+const defaultPlayer: Player = {
+  id: 0,
+  gender: 'male',
+  bats: 'R',
+  throws: 'R',
+  jerseyNumber: 0,
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  user: {
+    id: 0,
+    email: '',
+    firstName: '',
+    lastName: '',
+    dateOfBirth: new Date(),
+    roles: [],
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  }
+}
 // ...
 
 // Computed reactive player object: Either use the provided player or initialize with default
@@ -95,10 +114,10 @@ const submit = handleSubmit((values: Player) => {
 
 const isEdit = computed(() => !!player.value.id);
 
-const [email, emailAttrs] = defineField('email');
-const [firstName, firstNameAttrs] = defineField('firstName');
-const [lastName, lastNameAttrs] = defineField('lastName');
-const [dateOfBirth, dateOfBirthAttrs] = defineField('dateOfBirth');
+const [email, emailAttrs] = defineField('user.email');
+const [firstName, firstNameAttrs] = defineField('user.firstName');
+const [lastName, lastNameAttrs] = defineField('user.lastName');
+const [dateOfBirth, dateOfBirthAttrs] = defineField('user.dateOfBirth');
 const [gender, genderAttrs] = defineField('gender');
 const [bats, batsAttrs] = defineField('bats');
 const [throws, throwsAttrs] = defineField('throws');
@@ -132,7 +151,7 @@ const [height, heightAttrs] = defineField('height');
                     v-bind="emailAttrs"
                     type="email"
                 >
-                  <small v-if="errors.email" class="error-message">{{ errors.email }}</small>
+                  <small v-if="errors['user.email']" class="error-message">{{ errors['user.email'] }}</small>
                 </ion-input>
               </Field>
             </ion-item>
@@ -146,7 +165,7 @@ const [height, heightAttrs] = defineField('height');
                     v-bind="firstNameAttrs"
                     type="text"
                 >
-                  <small v-if="errors.firstName" class="error-message">{{ errors.firstName }}</small>
+                  <small v-if="errors['user.firstName']" class="error-message">{{ errors['user.firstName'] }}</small>
                 </ion-input>
               </Field>
             </ion-item>
@@ -160,7 +179,7 @@ const [height, heightAttrs] = defineField('height');
                     v-bind="lastNameAttrs"
                     type="text"
                 >
-                  <small v-if="errors.lastName" class="error-message">{{ errors.lastName }}</small>
+                  <small v-if="errors['user.lastName']" class="error-message">{{ errors['user.lastName'] }}</small>
                 </ion-input>
               </Field>
             </ion-item>
@@ -174,7 +193,7 @@ const [height, heightAttrs] = defineField('height');
                     v-bind="dateOfBirthAttrs"
                     type="date"
                 >
-                  <small v-if="errors.dateOfBirth" class="error-message">{{ errors.dateOfBirth }}</small>
+                  <small v-if="errors['user.dateOfBirth']" class="error-message">{{ errors['user.dateOfBirth'] }}</small>
                 </ion-input>
               </Field>
             </ion-item>

backend/controllers/player.controller.js

@@ -5,7 +5,7 @@ const User = db.User;
 const Op = db.Sequelize.Op;
 
 exports.insert = (req, res) => {
-    registerUser(req.body).then(user => {
+    registerUser(req.body.user).then(user => {
         return Player.create({
             firstName: req.body.firstName,
             lastName: req.body.lastName,