app/src/components/CrudField.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { IonInput, IonItem } from '@ionic/vue';
-import { Field, useField } from 'vee-validate';
-
-interface Props {
-  name: string; // The name of the field for validation
-  label: string; // The label text
-  labelPlacement?: string; // Placement of the label (optional)
-  type?: string; // Input type, e.g., "text", "number", etc.
-}
-
-const props = defineProps<Props>(); // Define props for the component
-const { value, errorMessage, ...fieldAttrs } = useField(props.name); // Setup field logic using vee-validate
-</script>
-
-<template>
-  <ion-item>
-    <Field name="name">
-      <IonInput
-          :label="label"
-          :label-placement="labelPlacement || 'stacked'"
-          v-model="value"
-          v-bind="fieldAttrs"
-          :type="type || 'text'"
-      >
-        <small v-if="errorMessage" class="error-message">{{ errorMessage }}</small>
-      </IonInput>
-    </Field>
-  </ion-item>
-</template>
-
-<style scoped>
-.error-message {
-  color: red;
-  font-size: 12px;
-}
-</style>

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,10 +24,12 @@ const routes: Array<RouteRecordRaw> = [
   { path: '/stats', component: BullpenListView },
   { path: '/summary', component: BullpenSummaryView },
   {
-    path: '/player',
-    component: PlayerView,
+    path: '/player/:id',
+    name: 'EditPlayer',
+    component: () => import('@/views/PlayerView.vue'),
     props: (route: RouteLocationNormalizedGeneric) => ({
-      id: route.query.id
+      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

@@ -7,5 +7,4 @@ 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: '/player', query: { id: user.value.id }});
+  router.push({ path: '/profile' });
 };
 
 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/selectPlayer', user);
+    return store.dispatch('player/determinePlayer', user);
   }).then(() => {
     resetForm();
     onLogin();

app/src/views/PlayerView.vue

@@ -18,22 +18,17 @@ import {
 import { Field, useForm } from 'vee-validate';
 import * as yup from 'yup';
 import dayjs from 'dayjs';
-import { ref, onMounted, watch } from 'vue';
+import { ref, computed, 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(),
@@ -46,17 +41,12 @@ 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
@@ -96,40 +86,23 @@ const schema = yup.object({
       .required('Height is required'),
 });
 
-const { errors, resetForm, handleSubmit, defineField } = useForm({
+const { errors, handleSubmit, defineField } = useForm({
   validationSchema: schema,
   initialValues: player.value
 });
 
 // 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
+    () => props.player,
+    (newPlayer) => {
+      if (newPlayer) {
+        resetForm({ values: { ...newPlayer } });
+      } 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) {
@@ -139,15 +112,12 @@ const submit = handleSubmit((values: Player) => {
   }
 });
 
-const onDateChange = (value: string) => {
-  formattedDate.value = value; // Update formatted string
-  player.value.user.dateOfBirth = new Date(value); // Convert to Date object and update
-};
+const isEdit = computed(() => !!player.value.id);
 
-const [email, emailAttrs] = defineField('user.auth.email');
+const [email, emailAttrs] = defineField('user.email');
 const [firstName, firstNameAttrs] = defineField('user.firstName');
 const [lastName, lastNameAttrs] = defineField('user.lastName');
-// const [dateOfBirth, dateOfBirthAttrs] = defineField('formattedDate');
+const [dateOfBirth, dateOfBirthAttrs] = defineField('user.dateOfBirth');
 const [gender, genderAttrs] = defineField('gender');
 const [bats, batsAttrs] = defineField('bats');
 const [throws, throwsAttrs] = defineField('throws');
@@ -172,11 +142,9 @@ 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"
@@ -191,7 +159,6 @@ const [height, heightAttrs] = defineField('height');
             <ion-item>
               <Field name="firstName">
                 <ion-input
-                    readonly: true
                     label="First Name"
                     label-placement="stacked"
                     v-model="firstName"
@@ -222,8 +189,8 @@ const [height, heightAttrs] = defineField('height');
                 <ion-input
                     label="Date of Birth"
                     label-placement="stacked"
-                    v-model="formattedDate"
-                    @input="onDateChange($event.target.value)"
+                    v-model="dateOfBirth"
+                    v-bind="dateOfBirthAttrs"
                     type="date"
                 >
                   <small v-if="errors['user.dateOfBirth']" class="error-message">{{ errors['user.dateOfBirth'] }}</small>
@@ -263,9 +230,9 @@ const [height, heightAttrs] = defineField('height');
                     v-bind="batsAttrs"
                     interface="action-sheet"
                 >
-                  <ion-select-option value="right">Right</ion-select-option>
-                  <ion-select-option value="left">Left</ion-select-option>
-                  <ion-select-option value="both">Switch</ion-select-option>
+                  <ion-select-option value="R">Right</ion-select-option>
+                  <ion-select-option value="L">Left</ion-select-option>
+                  <ion-select-option value="S">Switch</ion-select-option>
                 </ion-select>
               </Field>
             </ion-item>
@@ -277,10 +244,9 @@ const [height, heightAttrs] = defineField('height');
                     label-placement="stacked"
                     v-model="throws"
                     v-bind="throwsAttrs"
-                    interface="action-sheet"
                 >
-                  <ion-select-option value="right">Right</ion-select-option>
-                  <ion-select-option value="left">Left</ion-select-option>
+                  <ion-select-option value="R">Right</ion-select-option>
+                  <ion-select-option value="L">Left</ion-select-option>
                 </ion-select>
               </Field>
             </ion-item>

backend/controllers/player.controller.js

@@ -2,7 +2,6 @@ const db = require("../models/index");
 const {registerUser} = require("../helper/user.helper");
 const Player = db.Player;
 const User = db.User;
-const Auth = db.Auth;
 const Op = db.Sequelize.Op;
 
 exports.insert = (req, res) => {
@@ -64,15 +63,7 @@ exports.findOneByUserId = (req, res) => {
 
     Player.findOne({
         where: { userId: userId },
-        include: {
-            model: User,
-            as: 'user',
-            include: {
-                model: Auth,
-                as: 'auth',
-                attributes: ['email']
-            }
-        }
+        include: { model: User }
     }).then(data => {
         if (data) {
             res.send(data);

backend/models/player.model.js

@@ -29,7 +29,7 @@ module.exports = (sequelize, DataTypes) => {
             type: DataTypes.ENUM('left', 'right', 'both'),
         },
         throws: {
-            type: DataTypes.ENUM('left', 'right'),
+            type: DataTypes.ENUM('left', 'right', 'both'),
         },
         jerseyNumber: {
             type: DataTypes.INTEGER,

backend/seeders/02-users-development.js

@@ -8,16 +8,16 @@ module.exports = {
 
     const roles = await queryInterface.select(null, 'Roles');
     const players = [
-      { email: 'ryan.nolan@bullpen.com', password: 'ryan$123', firstName: 'Nolan', lastName: 'Ryan', dateOfBirth: new Date(1947, 0, 31), jerseyNumber: 17, gender: 'male', bats: 'right', throws: 'right', state: 'active' },
-      { email: 'sandy.koufax@bullpen.com', password: 'sandy$123', firstName: 'Sandy', lastName: 'Koufax', dateOfBirth: new Date(1935, 11, 30), jerseyNumber: 18, gender: 'male', bats: 'right', throws: 'right', state: 'active' },
-      { email: 'pedro.martinez@bullpen.com', password: 'pedro$123', firstName: 'Pedro', lastName: 'Martinez', dateOfBirth: new Date(1971, 9, 25), jerseyNumber: 19, gender: 'male', bats: 'right', throws: 'right', state: 'active' },
-      { email: 'randy.johnson@bullpen.com', password: 'randy$123', firstName: 'Randy', lastName: 'Johnson', dateOfBirth: new Date(1963, 8, 10), jerseyNumber: 20, gender: 'male', bats: 'right', throws: 'right', state: 'active' },
+      { email: 'ryan.nolan@bullpen.com', password: 'ryan$123', firstName: 'Nolan', lastName: 'Ryan', dateOfBirth: new Date(1947, 1, 31), jerseyNumber: 17, gender: 'male', bats: 'right', throws: 'right', state: 'active' },
+      { email: 'sandy.koufax@bullpen.com', password: 'sandy$123', firstName: 'Sandy', lastName: 'Koufax', dateOfBirth: new Date(1935, 12, 30), jerseyNumber: 18, gender: 'male', bats: 'right', throws: 'right', state: 'active' },
+      { email: 'pedro.martinez@bullpen.com', password: 'pedro$123', firstName: 'Pedro', lastName: 'Martinez', dateOfBirth: new Date(1971, 10, 25), jerseyNumber: 19, gender: 'male', bats: 'right', throws: 'right', state: 'active' },
+      { email: 'randy.johnson@bullpen.com', password: 'randy$123', firstName: 'Randy', lastName: 'Johnson', dateOfBirth: new Date(1963, 9, 10), jerseyNumber: 20, gender: 'male', bats: 'right', throws: 'right', state: 'active' },
     ];
 
     await createPlayer(queryInterface, roles, players);
 
     await createUsers(queryInterface, roles, [
-      { email: 'sparky.anderson@bullpen.com', password: 'sparky$123', firstName: 'Sparky', lastName: 'Anderson', dateOfBirth: new Date(1934, 1, 22), roles: ['coach', 'admin'] },
+      { email: 'sparky.anderson@bullpen.com', password: 'sparky$123', firstName: 'Sparky', lastName: 'Anderson', dateOfBirth: new Date(1934, 22, 2), roles: ['coach', 'admin'] },
     ]);
   },