API & Client - move user preferences + add picture edition

fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="user-infos">
+  <div id="user-infos" class="description-list">
     <dl>
       <dt>{{ t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
       <dd>{{ registrationDate }}</dd>
@@ -43,8 +43,7 @@
   import { IAuthUserProfile } from '@/types/user'
 
   export default defineComponent({
-    name: 'Profile',
-    components: {},
+    name: 'UserInfos',
     props: {
       user: {
         type: Object as PropType<IAuthUserProfile>,
@@ -71,33 +70,6 @@
 <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;
     }

fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="user-preferences" class="description-list">
+    <dl>
+      <dt>{{ t('user.PROFILE.LANGUAGE') }}:</dt>
+      <dd>{{ language }}</dd>
+    </dl>
+    <dl>
+      <dt>{{ t('user.PROFILE.TIMEZONE') }}:</dt>
+      <dd>{{ timezone }}</dd>
+    </dl>
+    <dl>
+      <dt>{{ t('user.PROFILE.FIRST_DAY_OF_WEEK') }}:</dt>
+      <dd>{{ t(`user.PROFILE.${fistDayOfWeek}`) }}</dd>
+    </dl>
+    <div class="profile-buttons">
+      <button @click="$router.push('/profile/edit/preferences')">
+        {{ t('user.PROFILE.EDIT_PREFERENCES') }}
+      </button>
+      <button @click="$router.push('/')">{{ t('common.HOME') }}</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, computed, defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import { IAuthUserProfile } from '@/types/user'
+
+  export default defineComponent({
+    name: 'UserPreferences',
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      const language = computed(() =>
+        props.user.language ? props.user.language.toUpperCase() : 'EN'
+      )
+      const fistDayOfWeek = computed(() =>
+        props.user.weekm ? 'MONDAY' : 'SUNDAY'
+      )
+      const timezone = computed(() =>
+        props.user.timezone ? props.user.timezone : 'Europe/Paris'
+      )
+      return { fistDayOfWeek, language, t, timezone }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+  #user-preferences {
+    .profile-buttons {
+      display: flex;
+      gap: $default-padding;
+    }
+  }
+</style>

fittrackee_client/src/components/User/ProfileDisplay/index.vue

@@ -1,17 +1,7 @@
 <template>
   <div id="user-profile">
     <div class="box user-header">
-      <div class="user-picture">
-        <img
-          v-if="authUserPictureUrl !== ''"
-          class="nav-profile-user-img"
-          :alt="t('user.USER_PICTURE')"
-          :src="authUserPictureUrl"
-        />
-        <div v-else class="no-picture">
-          <i class="fa fa-user-circle-o" aria-hidden="true" />
-        </div>
-      </div>
+      <UserPicture :user="user" />
       <div class="user-details">
         <div class="user-name">{{ user.username }}</div>
         <div class="user-stats">
@@ -37,7 +27,9 @@
       </div>
     </div>
     <div class="box">
-      <UserInfos :user="user" />
+      <UserProfileTabs :tabs="tabs" :selectedTab="tab" :edition="false" />
+      <UserInfos :user="user" v-if="tab === 'PROFILE'" />
+      <UserPreferences :user="user" v-if="tab === 'PREFERENCES'" />
     </div>
   </div>
 </template>
@@ -47,28 +39,39 @@
   import { useI18n } from 'vue-i18n'
 
   import UserInfos from '@/components/User/ProfileDisplay/UserInfos.vue'
+  import UserPreferences from '@/components/User/ProfileDisplay/UserPreferences.vue'
+  import UserPicture from '@/components/User/UserPicture.vue'
+  import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
   import { IAuthUserProfile } from '@/types/user'
   import { getApiUrl } from '@/utils'
 
   export default defineComponent({
-    name: 'Profile',
+    name: 'ProfileDisplay',
     components: {
       UserInfos,
+      UserPicture,
+      UserPreferences,
+      UserProfileTabs,
     },
     props: {
       user: {
         type: Object as PropType<IAuthUserProfile>,
         required: true,
       },
+      tab: {
+        type: String,
+        required: true,
+      },
     },
     setup(props) {
       const { t } = useI18n()
+      const tabs = ['PROFILE', 'PREFERENCES']
       const authUserPictureUrl: ComputedRef<string> = computed(() =>
         props.user.picture
           ? `${getApiUrl()}/users/${props.user.username}/picture?${Date.now()}`
           : ''
       )
-      return { authUserPictureUrl, t }
+      return { authUserPictureUrl, t, tabs }
     },
   })
 </script>
@@ -88,22 +91,6 @@
       display: flex;
       align-items: stretch;
 
-      .user-picture {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-width: 30%;
-        img {
-          border-radius: 50%;
-          height: 90px;
-          width: 90px;
-        }
-        .no-picture {
-          color: var(--app-a-color);
-          font-size: 5.5em;
-        }
-      }
-
       .user-details {
         flex-grow: 1;
         padding: $default-padding;