diff --git a/app/src/router/index.ts b/app/src/router/index.ts index 2c69b9f..b37624f 100644 --- a/app/src/router/index.ts +++ b/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 = [ { path: '/stats', component: BullpenListView }, { path: '/summary', component: BullpenSummaryView }, { - path: '/player/:id', - name: 'EditPlayer', - component: () => import('@/views/PlayerView.vue'), + path: '/player', + component: PlayerView, 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 + id: route.query.id }), }, diff --git a/app/src/types/User.ts b/app/src/types/User.ts index 46cbdae..8be326d 100644 --- a/app/src/types/User.ts +++ b/app/src/types/User.ts @@ -7,4 +7,5 @@ export default interface User { roles: string[], createdAt: Date, updatedAt: Date, + auth: { email: string } } diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue index 8ecbb07..2aba1d3 100644 --- a/app/src/views/HomeView.vue +++ b/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 = () => { diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue index 892e1d3..7f0fbf8 100644 --- a/app/src/views/LoginView.vue +++ b/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(); diff --git a/app/src/views/PlayerView.vue b/app/src/views/PlayerView.vue index a3b4f74..d194ff5 100644 --- a/app/src/views/PlayerView.vue +++ b/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(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, - (newPlayer) => { - if (newPlayer) { - resetForm({ values: { ...newPlayer } }); - } else { - resetForm({ values: { ...defaultPlayer } }); + () => 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)); + } +}); + +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'); Personal Data + {{ errors['user.dateOfBirth'] }} @@ -230,9 +263,9 @@ const [height, heightAttrs] = defineField('height'); v-bind="batsAttrs" interface="action-sheet" > - Right - Left - Switch + Right + Left + Switch @@ -244,9 +277,10 @@ const [height, heightAttrs] = defineField('height'); label-placement="stacked" v-model="throws" v-bind="throwsAttrs" + interface="action-sheet" > - Right - Left + Right + Left