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

Client - profile display refactoring

Browse Source
This commit is contained in:
Sam 2021-10-17 11:48:00 +02:00
parent 2729d5dae5
commit b70dd3116e
3 changed files with 118 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<div id="user-infos">
<dl>
<dt>{{ t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
<dd>{{ registrationDate }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.FIRST_NAME') }}:</dt>
<dd>{{ user.first_name }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.LAST_NAME') }}:</dt>
<dd>{{ user.last_name }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.BIRTH_DATE') }}:</dt>
<dd>{{ birthDate }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.LOCATION') }}:</dt>
<dd>{{ user.location }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.BIO') }}:</dt>
<dd class="user-bio">
{{ user.bio }}
</dd>
</dl>
<div class="profile-buttons">
<button @click="$router.push('/profile/edit')">
{{ t('user.PROFILE.EDIT') }}
</button>
<button @click="$router.push('/')">{{ t('common.HOME') }}</button>
</div>
</div>
</template>
<script lang="ts">
import { format } from 'date-fns'
import { PropType, computed, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { IAuthUserProfile } from '@/types/user'
export default defineComponent({
name: 'Profile',
components: {},
props: {
user: {
type: Object as PropType<IAuthUserProfile>,
required: true,
},
},
setup(props) {
const { t } = useI18n()
const registrationDate = computed(() =>
props.user.created_at
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
: ''
)
const birthDate = computed(() =>
props.user.birth_date
? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
: ''
)
return { birthDate, registrationDate, t }
},
})
</script>
<style lang="scss" scoped>
@import '~@/scss/base.scss';
#user-infos {
dl {
overflow: hidden;
width: 100%;
padding: 0 $default-padding;
dt {
font-weight: bold;
float: left;
width: 25%;
}
dd {
float: left;
}
}
@media screen and (max-width: $x-small-limit) {
dl {
overflow: auto;
width: initial;
dt {
font-weight: bold;
float: none;
width: initial;
}
dd {
float: none;
}
}
}
.user-bio {
white-space: pre-wrap;
}
.profile-buttons {
display: flex;
gap: $default-padding;
}
}
</style>

93
fittrackee_client/src/components/User/Profile.vue → fittrackee_client/src/components/User/ProfileDisplay/index.vue
View File

@ -36,54 +36,25 @@
</div>
</div>
</div>
<div class="box user-infos">
<dl>
<dt>{{ t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
<dd>{{ registrationDate }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.FIRST_NAME') }}:</dt>
<dd>{{ user.first_name }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.LAST_NAME') }}:</dt>
<dd>{{ user.last_name }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.BIRTH_DATE') }}:</dt>
<dd>{{ birthDate }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.LOCATION') }}:</dt>
<dd>{{ user.location }}</dd>
</dl>
<dl>
<dt>{{ t('user.PROFILE.BIO') }}:</dt>
<dd class="user-bio">
{{ user.bio }}
</dd>
</dl>
<div class="profile-buttons">
<button @click="$router.push('/profile/edit')">
{{ t('user.PROFILE.EDIT') }}
</button>
<button @click="$router.push('/')">{{ t('common.HOME') }}</button>
</div>
<div class="box">
<UserInfos :user="user" />
</div>
</div>
</template>
<script lang="ts">
import { format } from 'date-fns'
import { computed, ComputedRef, defineComponent, PropType } from 'vue'
import { ComputedRef, PropType, computed, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import UserInfos from '@/components/User/ProfileDisplay/UserInfos.vue'
import { IAuthUserProfile } from '@/types/user'
import { getApiUrl } from '@/utils'
export default defineComponent({
name: 'Profile',
components: {},
components: {
UserInfos,
},
props: {
user: {
type: Object as PropType<IAuthUserProfile>,
@ -97,17 +68,7 @@
? `${getApiUrl()}/users/${props.user.username}/picture?${Date.now()}`
: ''
)
const registrationDate = computed(() =>
props.user.created_at
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
: ''
)
const birthDate = computed(() =>
props.user.birth_date
? format(new Date(props.user.birth_date), 'dd/MM/yyyy')
: ''
)
return { t, authUserPictureUrl, birthDate, registrationDate }
return { authUserPictureUrl, t }
},
})
</script>
@ -195,43 +156,5 @@
}
}
}
.user-infos {
dl {
overflow: hidden;
width: 100%;
padding: 0 $default-padding;
dt {
font-weight: bold;
float: left;
width: 25%;
}
dd {
float: left;
}
}
@media screen and (max-width: $x-small-limit) {
dl {
overflow: auto;
width: initial;
dt {
font-weight: bold;
float: none;
width: initial;
}
dd {
float: none;
}
}
}
.user-bio {
white-space: pre-wrap;
}
.profile-buttons {
display: flex;
gap: $default-padding;
}
}
}
</style>

2
fittrackee_client/src/views/ProfileView.vue
View File

@ -8,7 +8,7 @@
<script lang="ts">
import { computed, ComputedRef, defineComponent } from 'vue'
import Profile from '@/components/User/Profile.vue'
import Profile from '@/components/User/ProfileDisplay/index.vue'
import ProfileEdition from '@/components/User/ProfileEdition.vue'
import { USER_STORE } from '@/store/constants'
import { IAuthUserProfile } from '@/types/user'