97 lines
2.1 KiB
Vue
Raw Normal View History

2021-10-13 17:29:12 +02:00
<template>
2021-10-13 18:45:34 +02:00
<div id="profile" class="container" v-if="authUser.username">
<ProfileEdition :user="authUser" :tab="tab" v-if="edition" />
<Profile :user="authUser" :tab="tab" v-else />
2021-10-13 17:29:12 +02:00
</div>
</template>
<script lang="ts">
import { computed, ComputedRef, defineComponent } from 'vue'
2021-10-17 11:48:00 +02:00
import Profile from '@/components/User/ProfileDisplay/index.vue'
import ProfileEdition from '@/components/User/ProfileEdition/index.vue'
2021-10-13 17:29:12 +02:00
import { USER_STORE } from '@/store/constants'
import { IAuthUserProfile } from '@/types/user'
import { useStore } from '@/use/useStore'
export default defineComponent({
name: 'ProfileView',
components: {
Profile,
2021-10-13 18:45:34 +02:00
ProfileEdition,
},
props: {
edition: {
type: Boolean,
required: true,
},
tab: {
type: String,
required: true,
},
2021-10-13 17:29:12 +02:00
},
setup() {
const store = useStore()
const authUser: ComputedRef<IAuthUserProfile> = computed(
() => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
)
return {
authUser,
}
},
})
</script>
<style lang="scss" scoped>
@import '~@/scss/base.scss';
#profile {
display: flex;
flex-direction: column;
::v-deep(.profile-form) {
display: flex;
flex-direction: column;
hr {
border-color: var(--card-border-color);
border-width: 1px 0 0 0;
}
.form-items {
display: flex;
flex-direction: column;
input {
margin: $default-padding * 0.5 0;
}
select {
height: 35px;
padding: $default-padding * 0.5 0;
}
::v-deep(.custom-textarea) {
textarea {
padding: $default-padding * 0.5;
}
}
.form-item {
display: flex;
flex-direction: column;
padding: $default-padding;
}
.birth-date {
height: 20px;
}
}
.form-buttons {
display: flex;
margin-top: $default-margin;
padding: $default-padding 0;
gap: $default-padding;
}
}
2021-10-13 17:29:12 +02:00
}
</style>