API & Client - move user preferences + add picture edition
This commit is contained in:
Sam
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div id="user-infos-edition">
|
||||
<Modal
|
||||
v-if="displayModal"
|
||||
:title="t('common.CONFIRMATION')"
|
||||
:message="t('user.CONFIRM_ACCOUNT_DELETION')"
|
||||
@confirmAction="deleteAccount(user.username)"
|
||||
@cancelAction="updateDisplayModal(false)"
|
||||
/>
|
||||
<div class="profile-form form-box">
|
||||
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
||||
<form @submit.prevent="updateProfile">
|
||||
<label class="form-items" for="email">
|
||||
{{ t('user.EMAIL') }}
|
||||
<input id="email" :value="user.email" disabled />
|
||||
</label>
|
||||
<label class="form-items" for="registrationDate">
|
||||
{{ t('user.PROFILE.REGISTRATION_DATE') }}
|
||||
<input id="registrationDate" :value="registrationDate" disabled />
|
||||
</label>
|
||||
<label class="form-items" for="password">
|
||||
{{ t('user.PASSWORD') }}
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
v-model="userForm.password"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="passwordConfirmation">
|
||||
{{ t('user.PASSWORD_CONFIRMATION') }}
|
||||
<input
|
||||
id="passwordConfirmation"
|
||||
type="password"
|
||||
v-model="userForm.password_conf"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<hr />
|
||||
<label class="form-items" for="first_name">
|
||||
{{ t('user.PROFILE.FIRST_NAME') }}
|
||||
<input
|
||||
id="first_name"
|
||||
v-model="userForm.first_name"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="last_name">
|
||||
{{ t('user.PROFILE.LAST_NAME') }}
|
||||
<input id="last_name" v-model="userForm.last_name" />
|
||||
</label>
|
||||
<label class="form-items" for="birth_date">
|
||||
{{ t('user.PROFILE.BIRTH_DATE') }}
|
||||
<input
|
||||
id="birth_date"
|
||||
type="date"
|
||||
class="birth-date"
|
||||
v-model="userForm.birth_date"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items" for="location">
|
||||
{{ t('user.PROFILE.LOCATION') }}
|
||||
<input
|
||||
id="location"
|
||||
v-model="userForm.location"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items">
|
||||
{{ t('user.PROFILE.BIO') }}
|
||||
<CustomTextArea
|
||||
name="bio"
|
||||
:charLimit="200"
|
||||
:input="userForm.bio"
|
||||
:disabled="loading"
|
||||
@updateValue="updateBio"
|
||||
/>
|
||||
</label>
|
||||
<div class="form-buttons">
|
||||
<button class="confirm" type="submit">
|
||||
{{ t('buttons.SUBMIT') }}
|
||||
</button>
|
||||
<button class="cancel" @click.prevent="$router.go(-1)">
|
||||
{{ t('buttons.CANCEL') }}
|
||||
</button>
|
||||
<button class="danger" @click.prevent="updateDisplayModal(true)">
|
||||
{{ t('buttons.DELETE_MY_ACCOUNT') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { format } from 'date-fns'
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
computed,
|
||||
defineComponent,
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import CustomTextArea from '@/components/Common/CustomTextArea.vue'
|
||||
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
|
||||
import Modal from '@/components/Common/Modal.vue'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { IAuthUserProfile, IUserPayload } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserInfosEdition',
|
||||
components: {
|
||||
CustomTextArea,
|
||||
ErrorMessage,
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
const userForm: IUserPayload = reactive({
|
||||
password: '',
|
||||
password_conf: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
birth_date: '',
|
||||
location: '',
|
||||
bio: '',
|
||||
})
|
||||
const registrationDate = computed(() =>
|
||||
props.user.created_at
|
||||
? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
|
||||
: ''
|
||||
)
|
||||
const loading = computed(
|
||||
() => store.getters[USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
let displayModal: Ref<boolean> = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
|
||||
function updateUserForm(user: IAuthUserProfile) {
|
||||
userForm.first_name = user.first_name ? user.first_name : ''
|
||||
userForm.last_name = user.last_name ? user.last_name : ''
|
||||
userForm.birth_date = user.birth_date
|
||||
? format(new Date(user.birth_date), 'yyyy-MM-dd')
|
||||
: ''
|
||||
userForm.location = user.location ? user.location : ''
|
||||
userForm.bio = user.bio ? user.bio : ''
|
||||
}
|
||||
function updateBio(value: string) {
|
||||
userForm.bio = value
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
|
||||
}
|
||||
function updateDisplayModal(value: boolean) {
|
||||
displayModal.value = value
|
||||
}
|
||||
function deleteAccount(username: string) {
|
||||
store.dispatch(USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
|
||||
}
|
||||
|
||||
return {
|
||||
displayModal,
|
||||
errorMessages,
|
||||
loading,
|
||||
registrationDate,
|
||||
t,
|
||||
userForm,
|
||||
deleteAccount,
|
||||
updateBio,
|
||||
updateDisplayModal,
|
||||
updateProfile,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
.form-buttons {
|
||||
flex-direction: row;
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div id="user-picture-edition">
|
||||
<div class="user-picture-form">
|
||||
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
||||
<UserPicture :user="user" />
|
||||
<form @submit.prevent="updateUserPicture">
|
||||
<input
|
||||
type="file"
|
||||
name="picture"
|
||||
accept=".png,.jpg,.gif"
|
||||
@input="updatePictureFile"
|
||||
/>
|
||||
<div class="picture-buttons">
|
||||
<button type="submit" :disabled="!pictureFile">
|
||||
{{ t('user.PROFILE.PICTURE_UPDATE') }}
|
||||
</button>
|
||||
<button class="danger" v-if="user.picture" @click="deleteUserPicture">
|
||||
{{ t('user.PROFILE.PICTURE_REMOVE') }}
|
||||
</button>
|
||||
<button class="cancel" @click="$router.push('/profile')">
|
||||
{{ t('user.PROFILE.BACK_TO_PROFILE') }}
|
||||
</button>
|
||||
</div>
|
||||
<span>{{ t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
Ref,
|
||||
defineComponent,
|
||||
computed,
|
||||
ref,
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
|
||||
import UserPicture from '@/components/User/UserPicture.vue'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { IAppConfig } from '@/types/application'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
import { getReadableFileSize } from '@/utils/files'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPictureEdition',
|
||||
components: {
|
||||
ErrorMessage,
|
||||
UserPicture,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
const appConfig: ComputedRef<IAppConfig> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
|
||||
)
|
||||
const fileSizeLimit = appConfig.value.max_single_file_size
|
||||
? getReadableFileSize(appConfig.value.max_single_file_size)
|
||||
: ''
|
||||
let pictureFile: Ref<File | null> = ref(null)
|
||||
|
||||
function deleteUserPicture() {
|
||||
store.dispatch(USER_STORE.ACTIONS.DELETE_PICTURE)
|
||||
}
|
||||
function updatePictureFile(event: Event & { target: HTMLInputElement }) {
|
||||
if (event.target.files) {
|
||||
pictureFile.value = event.target.files[0]
|
||||
}
|
||||
}
|
||||
function updateUserPicture() {
|
||||
if (pictureFile.value) {
|
||||
store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PICTURE, {
|
||||
picture: pictureFile.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
errorMessages,
|
||||
fileSizeLimit,
|
||||
pictureFile,
|
||||
t,
|
||||
deleteUserPicture,
|
||||
updateUserPicture,
|
||||
updatePictureFile,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
#user-picture-edition {
|
||||
.user-picture-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $default-padding;
|
||||
justify-content: flex-start;
|
||||
|
||||
input {
|
||||
margin-top: $default-margin;
|
||||
padding: $default-padding * 0.5;
|
||||
}
|
||||
|
||||
span {
|
||||
font-style: italic;
|
||||
font-size: 0.9em;
|
||||
padding-left: $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
.picture-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: $default-padding;
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div id="user-preferences-edition">
|
||||
<div class="profile-form form-box">
|
||||
<ErrorMessage :message="errorMessages" v-if="errorMessages" />
|
||||
<form @submit.prevent="updateProfile">
|
||||
<label class="form-items">
|
||||
{{ t('user.PROFILE.LANGUAGE') }}
|
||||
<select id="language" v-model="userForm.language" :disabled="loading">
|
||||
<option
|
||||
v-for="lang in availableLanguages"
|
||||
:value="lang.value"
|
||||
:key="lang.value"
|
||||
>
|
||||
{{ lang.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="form-items" for="timezone">
|
||||
{{ t('user.PROFILE.TIMEZONE') }}
|
||||
<input
|
||||
id="timezone"
|
||||
v-model="userForm.timezone"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-items">
|
||||
{{ t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
|
||||
<select id="weekm" v-model="userForm.weekm" :disabled="loading">
|
||||
<option
|
||||
v-for="start in weekStart"
|
||||
:value="start.value"
|
||||
:key="start.value"
|
||||
>
|
||||
{{ t(`user.PROFILE.${start.label}`) }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="form-buttons">
|
||||
<button class="confirm" type="submit">
|
||||
{{ t('buttons.SUBMIT') }}
|
||||
</button>
|
||||
<button class="cancel" @click.prevent="$router.go(-1)">
|
||||
{{ t('buttons.CANCEL') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
ComputedRef,
|
||||
PropType,
|
||||
computed,
|
||||
defineComponent,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import ErrorMessage from '@/components/Common/ErrorMessage.vue'
|
||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||
import { IAuthUserProfile, IUserPreferencesPayload } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserPreferencesEdition',
|
||||
components: {
|
||||
ErrorMessage,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t, availableLocales } = useI18n()
|
||||
const store = useStore()
|
||||
const userForm: IUserPreferencesPayload = reactive({
|
||||
language: '',
|
||||
timezone: 'Europe/Paris',
|
||||
weekm: false,
|
||||
})
|
||||
const availableLanguages = availableLocales.map((l) => {
|
||||
return { label: l.toUpperCase(), value: l }
|
||||
})
|
||||
const weekStart = [
|
||||
{
|
||||
label: 'MONDAY',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: 'SUNDAY',
|
||||
value: false,
|
||||
},
|
||||
]
|
||||
const loading = computed(
|
||||
() => store.getters[USER_STORE.GETTERS.USER_LOADING]
|
||||
)
|
||||
const errorMessages: ComputedRef<string | string[] | null> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
if (props.user) {
|
||||
updateUserForm(props.user)
|
||||
}
|
||||
})
|
||||
|
||||
function updateUserForm(user: IAuthUserProfile) {
|
||||
userForm.language = user.language ? user.language : 'en'
|
||||
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
|
||||
userForm.weekm = user.weekm ? user.weekm : false
|
||||
}
|
||||
function updateProfile() {
|
||||
store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES, userForm)
|
||||
}
|
||||
|
||||
return {
|
||||
availableLanguages,
|
||||
errorMessages,
|
||||
loading,
|
||||
t,
|
||||
userForm,
|
||||
weekStart,
|
||||
updateProfile,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div id="user-profile-edition">
|
||||
<Card>
|
||||
<template #title>{{ t('user.PROFILE.EDITION') }}</template>
|
||||
<template #content>
|
||||
<UserProfileTabs
|
||||
:tabs="tabs"
|
||||
:selectedTab="tab"
|
||||
: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" />
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent, ref, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.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'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ProfileEdition',
|
||||
components: {
|
||||
Card,
|
||||
UserInfosEdition,
|
||||
UserPictureEdition,
|
||||
UserPreferencesEdition,
|
||||
UserProfileTabs,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
tab: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
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, t, tabs }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
#user-profile-edition {
|
||||
margin: auto;
|
||||
width: 700px;
|
||||
@media screen and (max-width: $medium-limit) {
|
||||
width: 100%;
|
||||
margin: 0 auto 50px auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user