Client - add preferences for ascent related data
This commit is contained in:
parent
06b7af126a
commit
81efdf53d5
@ -15,6 +15,8 @@
|
|||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
</dd>
|
</dd>
|
||||||
|
<dt>{{ $t('user.PROFILE.ASCENT_DATA') }}:</dt>
|
||||||
|
<dd>{{ $t(`common.${display_ascent}`) }}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<div class="profile-buttons">
|
<div class="profile-buttons">
|
||||||
<button @click="$router.push('/profile/edit/preferences')">
|
<button @click="$router.push('/profile/edit/preferences')">
|
||||||
@ -28,11 +30,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
|
|
||||||
import { IUserProfile } from '@/types/user'
|
import { IAuthUserProfile } from '@/types/user'
|
||||||
import { languageLabels } from '@/utils/locales'
|
import { languageLabels } from '@/utils/locales'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user: IUserProfile
|
user: IAuthUserProfile
|
||||||
}
|
}
|
||||||
const props = defineProps<Props>()
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
@ -45,4 +47,7 @@
|
|||||||
const timezone = computed(() =>
|
const timezone = computed(() =>
|
||||||
props.user.timezone ? props.user.timezone : 'Europe/Paris'
|
props.user.timezone ? props.user.timezone : 'Europe/Paris'
|
||||||
)
|
)
|
||||||
|
const display_ascent = computed(() =>
|
||||||
|
props.user.display_ascent ? 'DISPLAYED' : 'HIDDEN'
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
@ -51,6 +51,22 @@
|
|||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
|
<label class="form-items">
|
||||||
|
{{ $t('user.PROFILE.ASCENT_DATA') }}
|
||||||
|
<select
|
||||||
|
id="display_ascent"
|
||||||
|
v-model="userForm.display_ascent"
|
||||||
|
:disabled="loading"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="status in ascentData"
|
||||||
|
:value="status.value"
|
||||||
|
:key="status.value"
|
||||||
|
>
|
||||||
|
{{ $t(`common.${status.label}`) }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
<div class="form-buttons">
|
<div class="form-buttons">
|
||||||
<button class="confirm" type="submit">
|
<button class="confirm" type="submit">
|
||||||
{{ $t('buttons.SUBMIT') }}
|
{{ $t('buttons.SUBMIT') }}
|
||||||
@ -72,18 +88,19 @@
|
|||||||
|
|
||||||
import TimezoneDropdown from '@/components/User/ProfileEdition/TimezoneDropdown.vue'
|
import TimezoneDropdown from '@/components/User/ProfileEdition/TimezoneDropdown.vue'
|
||||||
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
|
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
|
||||||
import { IUserProfile, IUserPreferencesPayload } from '@/types/user'
|
import { IUserPreferencesPayload, IAuthUserProfile } from '@/types/user'
|
||||||
import { useStore } from '@/use/useStore'
|
import { useStore } from '@/use/useStore'
|
||||||
import { availableLanguages } from '@/utils/locales'
|
import { availableLanguages } from '@/utils/locales'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
user: IUserProfile
|
user: IAuthUserProfile
|
||||||
}
|
}
|
||||||
const props = defineProps<Props>()
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
|
|
||||||
const userForm: IUserPreferencesPayload = reactive({
|
const userForm: IUserPreferencesPayload = reactive({
|
||||||
|
display_ascent: true,
|
||||||
imperial_units: false,
|
imperial_units: false,
|
||||||
language: '',
|
language: '',
|
||||||
timezone: 'Europe/Paris',
|
timezone: 'Europe/Paris',
|
||||||
@ -109,6 +126,16 @@
|
|||||||
value: false,
|
value: false,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
const ascentData = [
|
||||||
|
{
|
||||||
|
label: 'DISPLAYED',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'HIDDEN',
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
]
|
||||||
const loading = computed(
|
const loading = computed(
|
||||||
() => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
|
() => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
|
||||||
)
|
)
|
||||||
@ -122,7 +149,8 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function updateUserForm(user: IUserProfile) {
|
function updateUserForm(user: IAuthUserProfile) {
|
||||||
|
userForm.display_ascent = user.display_ascent
|
||||||
userForm.imperial_units = user.imperial_units ? user.imperial_units : false
|
userForm.imperial_units = user.imperial_units ? user.imperial_units : false
|
||||||
userForm.language = user.language ? user.language : 'en'
|
userForm.language = user.language ? user.language : 'en'
|
||||||
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
|
userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
|
||||||
|
@ -3,9 +3,11 @@
|
|||||||
"CONFIRMATION": "Confirmation",
|
"CONFIRMATION": "Confirmation",
|
||||||
"CONTACT": "contact",
|
"CONTACT": "contact",
|
||||||
"DAY": "day | days",
|
"DAY": "day | days",
|
||||||
|
"DISPLAYED": "Displayed",
|
||||||
"DOCUMENTATION": "documentation",
|
"DOCUMENTATION": "documentation",
|
||||||
"HOME": "Home",
|
"HOME": "Home",
|
||||||
"HERE": "here",
|
"HERE": "here",
|
||||||
|
"HIDDEN": "Hidden",
|
||||||
"SELECTS": {
|
"SELECTS": {
|
||||||
"ORDER_BY": {
|
"ORDER_BY": {
|
||||||
"LABEL": "order by"
|
"LABEL": "order by"
|
||||||
|
@ -48,6 +48,7 @@
|
|||||||
"PASSWORD_UPDATED": "Your password have been updated. Click {0} to log in.",
|
"PASSWORD_UPDATED": "Your password have been updated. Click {0} to log in.",
|
||||||
"PROFILE": {
|
"PROFILE": {
|
||||||
"ACCOUNT_EDITION": "Account edition",
|
"ACCOUNT_EDITION": "Account edition",
|
||||||
|
"ASCENT_DATA": "Ascent-related data (records, total)",
|
||||||
"BACK_TO_PROFILE": "Back to profile",
|
"BACK_TO_PROFILE": "Back to profile",
|
||||||
"BIO": "Bio",
|
"BIO": "Bio",
|
||||||
"BIRTH_DATE": "Birth date",
|
"BIRTH_DATE": "Birth date",
|
||||||
|
@ -3,9 +3,11 @@
|
|||||||
"CONFIRMATION": "Confirmation",
|
"CONFIRMATION": "Confirmation",
|
||||||
"CONTACT": "contact",
|
"CONTACT": "contact",
|
||||||
"DAY": "jour | jours",
|
"DAY": "jour | jours",
|
||||||
|
"DISPLAYED": "Affiché",
|
||||||
"DOCUMENTATION": "documentation (en)",
|
"DOCUMENTATION": "documentation (en)",
|
||||||
"HOME": "Accueil",
|
"HOME": "Accueil",
|
||||||
"HERE": "ici",
|
"HERE": "ici",
|
||||||
|
"HIDDEN": "Masqué",
|
||||||
"SELECTS": {
|
"SELECTS": {
|
||||||
"ORDER_BY": {
|
"ORDER_BY": {
|
||||||
"LABEL": "trier par "
|
"LABEL": "trier par "
|
||||||
|
@ -48,6 +48,7 @@
|
|||||||
"PASSWORD_UPDATED": "Votre mot de passe a été mis à jour. Cliquez {0} pour vous connecter.",
|
"PASSWORD_UPDATED": "Votre mot de passe a été mis à jour. Cliquez {0} pour vous connecter.",
|
||||||
"PROFILE": {
|
"PROFILE": {
|
||||||
"ACCOUNT_EDITION": "Mise à jour du compte",
|
"ACCOUNT_EDITION": "Mise à jour du compte",
|
||||||
|
"ASCENT_DATA": "Données relatives au dénivelé positif (records, total)",
|
||||||
"BACK_TO_PROFILE": "Revenir au profil",
|
"BACK_TO_PROFILE": "Revenir au profil",
|
||||||
"BIO": "Bio",
|
"BIO": "Bio",
|
||||||
"BIRTH_DATE": "Date de naissance",
|
"BIRTH_DATE": "Date de naissance",
|
||||||
|
@ -24,6 +24,7 @@ export interface IUserProfile {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface IAuthUserProfile extends IUserProfile {
|
export interface IAuthUserProfile extends IUserProfile {
|
||||||
|
display_ascent: boolean
|
||||||
imperial_units: boolean
|
imperial_units: boolean
|
||||||
language: string | null
|
language: string | null
|
||||||
timezone: string
|
timezone: string
|
||||||
@ -58,6 +59,7 @@ export interface IAdminUserPayload {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface IUserPreferencesPayload {
|
export interface IUserPreferencesPayload {
|
||||||
|
display_ascent: boolean
|
||||||
imperial_units: boolean
|
imperial_units: boolean
|
||||||
language: string
|
language: string
|
||||||
timezone: string
|
timezone: string
|
||||||
|
Loading…
Reference in New Issue
Block a user