Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - use nested routes for user profile

Browse Source
This commit is contained in:
Sam
2021-10-23 20:04:38 +02:00
parent d072189936
commit 3bcc93bb1a
8 changed files with 215 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
View File

@ -81,7 +81,7 @@
<button class="confirm" type="submit">
{{ $t('buttons.SUBMIT') }}
</button>
<button class="cancel" @click.prevent="$router.go(-1)">
<button class="cancel" @click.prevent="$router.push('/profile')">
{{ $t('buttons.CANCEL') }}
</button>
<button class="danger" @click.prevent="updateDisplayModal(true)">

5
fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
View File

@ -39,7 +39,10 @@
<button class="confirm" type="submit">
{{ $t('buttons.SUBMIT') }}
</button>
<button class="cancel" @click.prevent="$router.go(-1)">
<button
class="cancel"
@click.prevent="$router.push('/profile/preferences')"
>
{{ $t('buttons.CANCEL') }}
</button>
</div>

28
fittrackee_client/src/components/User/ProfileEdition/index.vue
View File

@ -1,7 +1,9 @@
<template>
<div id="user-profile-edition">
<Card>
<template #title>{{ $t(`user.PROFILE.${tab}_EDITION`) }}</template>
<template #title>
{{ $t(`user.PROFILE.${tab}_EDITION`) }}
</template>
<template #content>
<UserProfileTabs
:tabs="tabs"
@ -9,20 +11,15 @@
:edition="true"
:disabled="loading"
/>
<UserInfosEdition v-if="tab === 'PROFILE'" :user="user" />
<UserPreferencesEdition v-if="tab === 'PREFERENCES'" :user="user" />
<UserPictureEdition v-if="tab === 'PICTURE'" :user="user" />
<router-view :user="user"></router-view>
</template>
</Card>
</div>
</template>
<script lang="ts">
import { PropType, computed, defineComponent, ref } from 'vue'
import { computed, defineComponent, PropType } from 'vue'
import UserInfosEdition from '@/components/User/ProfileEdition/UserInfosEdition.vue'
import UserPictureEdition from '@/components/User/ProfileEdition/UserPictureEdition.vue'
import UserPreferencesEdition from '@/components/User/ProfileEdition/UserPreferencesEdition.vue'
import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
import { USER_STORE } from '@/store/constants'
import { IAuthUserProfile } from '@/types/user'
@ -31,9 +28,6 @@
export default defineComponent({
name: 'ProfileEdition',
components: {
UserInfosEdition,
UserPictureEdition,
UserPreferencesEdition,
UserProfileTabs,
},
props: {
@ -46,14 +40,12 @@
required: true,
},
},
setup(props) {
setup() {
const store = useStore()
const tabs = ['PROFILE', 'PICTURE', 'PREFERENCES']
const selectedTab = ref(props.tab)
const loading = computed(
() => store.getters[USER_STORE.GETTERS.USER_LOADING]
)
return { loading, selectedTab, tabs }
return {
loading: computed(() => store.getters[USER_STORE.GETTERS.USER_LOADING]),
tabs: ['PROFILE', 'PICTURE', 'PREFERENCES'],
}
},
})
</script>