Client - init administration + refacto

fittrackee_client/src/components/Administration/AdminMenu.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="admin-menu" class="center-card">
+    <Card>
+      <template #title>{{ $t('admin.ADMINISTRATION') }}</template>
+      <template #content>
+        <AppStatsCards :app-statistics="appStatistics" />
+        <div class="admin-menu description-list">
+          <dl>
+            <dt>{{ $t('admin.APPLICATION') }}</dt>
+            <dd>
+              {{ $t('admin.UPDATE_APPLICATION_DESCRIPTION') }}
+            </dd>
+            <dt>{{ capitalize($t('workouts.SPORT', 0)) }}</dt>
+            <dd>
+              {{ $t('admin.ENABLE_DISABLE_SPORTS') }}
+            </dd>
+            <dt>{{ capitalize($t('admin.USER', 0)) }}</dt>
+            <dd>
+              {{ $t('admin.ADMIN_RIGHTS_DELETE_USER_ACCOUNT') }}
+            </dd>
+          </dl>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, capitalize, defineComponent } from 'vue'
+
+  import AppStatsCards from '@/components/Administration/AppStatsCards.vue'
+  import Card from '@/components/Common/Card.vue'
+  import { IAppStatistics } from '@/types/application'
+
+  export default defineComponent({
+    name: 'AdminMenu',
+    components: {
+      AppStatsCards,
+      Card,
+    },
+    props: {
+      appStatistics: {
+        type: Object as PropType<IAppStatistics>,
+      },
+    },
+    setup() {
+      return { capitalize }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #admin-menu {
+    display: flex;
+    &.center-card {
+      width: 100%;
+    }
+
+    ::v-deep(.card) {
+      flex-grow: 1;
+
+      .admin-menu {
+        padding: 0 $default-padding;
+
+        dd {
+          margin-bottom: $default-margin * 3;
+        }
+      }
+    }
+  }
+</style>

fittrackee_client/src/components/Administration/AppStatsCards.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="user-stats">
+    <StatCard
+      icon="users"
+      :value="usersCount"
+      :text="$t('admin.USER', usersCount)"
+    />
+    <StatCard
+      icon="tags"
+      :value="sportsCount"
+      :text="$t('workouts.SPORT', sportsCount)"
+    />
+    <StatCard
+      icon="calendar"
+      :value="workoutCount"
+      :text="$t('workouts.WORKOUT', workoutCount)"
+    />
+    <StatCard
+      icon="folder-open"
+      :value="uploadDirSize.size"
+      :text="uploadDirSize.suffix"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, defineComponent, computed } from 'vue'
+
+  import StatCard from '@/components/Common/StatCard.vue'
+  import { IAppStatistics } from '@/types/application'
+  import { getReadableFileSize } from '@/utils/files'
+
+  export default defineComponent({
+    name: 'UserStatsCards',
+    components: {
+      StatCard,
+    },
+    props: {
+      appStatistics: {
+        type: Object as PropType<IAppStatistics>,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    setup(props) {
+      return {
+        uploadDirSize: computed(() =>
+          props.appStatistics.uploads_dir_size
+            ? getReadableFileSize(props.appStatistics.uploads_dir_size, false)
+            : { size: 0, suffix: 'bytes' }
+        ),
+        usersCount: computed(() =>
+          props.appStatistics.users ? props.appStatistics.users : 0
+        ),
+        sportsCount: computed(() =>
+          props.appStatistics.sports ? props.appStatistics.sports : 0
+        ),
+        workoutCount: computed(() =>
+          props.appStatistics.workouts ? props.appStatistics.workouts : 0
+        ),
+      }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+  #user-stats {
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>

fittrackee_client/src/components/Common/StatCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="user-stat-card">
+  <div class="stat-card">
     <div class="stat-content box">
       <div class="stat-icon">
         <i class="fa" :class="`fa-${icon}`" />
@@ -16,7 +16,7 @@
   import { defineComponent } from 'vue'
 
   export default defineComponent({
-    name: 'UserStatCard',
+    name: 'StatCard',
     props: {
       icon: {
         type: String,
@@ -36,7 +36,7 @@
 
 <style lang="scss">
   @import '~@/scss/base';
-  .user-stat-card {
+  .stat-card {
     flex: 1;
     max-width: 25%;
     @media screen and (max-width: $small-limit) {

fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue

@@ -1,21 +1,21 @@
 <template>
   <div id="user-stats">
-    <UserStatCard
+    <StatCard
       icon="calendar"
       :value="user.nb_workouts"
       :text="$t('workouts.WORKOUT', user.nb_workouts)"
     />
-    <UserStatCard
+    <StatCard
       icon="road"
       :value="Number(user.total_distance).toFixed(2)"
       :text="$t('workouts.KM')"
     />
-    <UserStatCard
+    <StatCard
       icon="clock-o"
       :value="total_duration.days"
       :text="total_duration.duration"
     />
-    <UserStatCard
+    <StatCard
       icon="tags"
       :value="user.nb_sports"
       :text="$t('workouts.SPORT', user.nb_sports)"
@@ -27,13 +27,13 @@
   import { ComputedRef, PropType, defineComponent, computed } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import UserStatCard from '@/components/Dashboard/UserStatsCards/UserStatCard.vue'
+  import StatCard from '@/components/Common/StatCard.vue'
   import { IAuthUserProfile } from '@/types/user'
 
   export default defineComponent({
     name: 'UserStatsCards',
     components: {
-      UserStatCard,
+      StatCard,
     },
     props: {
       user: {

fittrackee_client/src/components/NavBar.vue

@@ -29,12 +29,16 @@
             <router-link class="nav-item" to="/statistics">
               {{ $t('statistics.STATISTICS') }}
             </router-link>
-            <div v-if="isAuthenticated && authUser.admin" class="nav-item">
-              {{ $t('administration.ADMIN') }}
-            </div>
             <router-link class="nav-item" to="/workouts/add">
               {{ $t('workouts.ADD_WORKOUT') }}
             </router-link>
+            <router-link
+              class="nav-item"
+              v-if="isAuthenticated && authUser.admin"
+              to="/admin"
+            >
+              {{ $t('admin.ADMIN') }}
+            </router-link>
             <div class="nav-item nav-separator" />
           </div>
         </div>

fittrackee_client/src/components/User/PasswordReset/PasswordActionDone.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="password-action-done">
+  <div id="password-action-done" class="center-card center-card with-margin">
     <EmailSent v-if="action === 'request-sent'" />
     <Password v-else />
     <div class="password-message">
@@ -43,11 +43,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 100px auto;
-    width: 700px;
-    @media screen and (max-width: $medium-limit) {
-      width: 100%;
-    }
 
     svg {
       stroke: none;

fittrackee_client/src/components/User/PasswordReset/PasswordResetForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="password-reset-request">
+  <div id="password-reset-request" class="center-card with-margin">
     <Card>
       <template #title>{{ $t('user.RESET_PASSWORD') }}</template>
       <template #content>
@@ -36,12 +36,6 @@
   @import '~@/scss/base';
 
   #password-reset-request {
-    margin: 100px auto;
-    width: 700px;
-    @media screen and (max-width: $medium-limit) {
-      width: 100%;
-    }
-
     ::v-deep(.card) {
       .card-content {
         #user-form {

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

@@ -3,24 +3,14 @@
     <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 }}

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

@@ -3,12 +3,8 @@
     <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>

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="user-profile-edition">
+  <div id="user-profile-edition" class="center-card">
     <Card>
       <template #title>
         {{ $t(`user.PROFILE.${tab}_EDITION`) }}
@@ -49,16 +49,3 @@
     },
   })
 </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>

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     id="workout-edition"
+    class="center-card center-card with-margin"
     :class="{ 'center-form': workout && workout.with_gpx }"
   >
     <Card>
@@ -416,12 +417,6 @@
   @import '~@/scss/base';
 
   #workout-edition {
-    margin: 100px auto;
-    width: 700px;
-    @media screen and (max-width: $medium-limit) {
-      width: 100%;
-      margin: 0 auto 50px auto;
-    }
     @media screen and (max-width: $small-limit) {
       &.center-form {
         margin: 50px auto;

fittrackee_client/src/locales/en/administration.json

@@ -1,3 +1,11 @@
 {
-  "ADMIN": "Admin"
+  "ADMIN_RIGHTS_DELETE_USER_ACCOUNT": "Add/remove admin rights, delete user account.",
+  "ADMIN": "Admin",
+  "ADMINISTRATION": "Administration",
+  "APPLICATION": "Application",
+  "ENABLE_DISABLE_SPORTS": "Enable/disable sports.",
+  "REGISTRATION_DISABLED": "Registration is currently disabled.",
+  "REGISTRATION_ENABLED": "Registration is currently enabled.",
+  "UPDATE_APPLICATION_DESCRIPTION": "Update application configuration (maximum number of registered users, maximum files size).",
+  "USER": "user | users"
 }

fittrackee_client/src/locales/en/en.ts

@@ -10,7 +10,7 @@ import UserTranslations from './user.json'
 import WorkoutsTranslations from './workouts.json'
 
 export default {
-  administration: AdministrationTranslations,
+  admin: AdministrationTranslations,
   api: ApiTranslations,
   buttons: ButtonsTranslations,
   common: CommonTranslations,

fittrackee_client/src/locales/fr/administration.json

@@ -1,3 +1,11 @@
 {
-  "ADMIN": "Admin"
+  "ADMIN_RIGHTS_DELETE_USER_ACCOUNT": "Ajouter/retirer des droits d'adminsitration, supprimer des comptes utilisateurs.",
+  "ADMIN": "Admin",
+  "ADMINISTRATION": "Administration",
+  "APPLICATION": "Application",
+  "ENABLE_DISABLE_SPORTS": "Activer/désactiver des sports.",
+  "REGISTRATION_DISABLED": "Les inscriptions sont actuellement désactivées.",
+  "REGISTRATION_ENABLED": "Les inscriptions sont actuellement activées.",
+  "UPDATE_APPLICATION_DESCRIPTION": "Configurer l'application (nombre maximum d'utilisateurs inscrits, taille maximale des fichers).",
+  "USER": "utilisateur | utilisateurs"
 }

fittrackee_client/src/locales/fr/fr.ts

@@ -10,7 +10,7 @@ import UserTranslations from './user.json'
 import WorkoutsTranslations from './workouts.json'
 
 export default {
-  administration: AdministrationTranslations,
+  admin: AdministrationTranslations,
   api: ApiTranslations,
   buttons: ButtonsTranslations,
   common: CommonTranslations,

fittrackee_client/src/router/index.ts

@@ -162,6 +162,12 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: 'workouts' */ '@/views/workouts/AddWorkout.vue'
       ),
   },
+  {
+    path: '/admin',
+    name: 'Administration',
+    component: () =>
+      import(/* webpackChunkName: 'admin' */ '@/views/AdminView.vue'),
+  },
   {
     path: '/:pathMatch(.*)*',
     name: 'not-found',

fittrackee_client/src/scss/base.scss

@@ -195,30 +195,31 @@ button {
 
 .description-list {
   dl {
-    overflow: hidden;
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    padding: 0 $default-padding;
     dt {
       font-weight: bold;
-      float: left;
-      width: 25%;
     }
     dd {
-      float: left;
+      margin-bottom: $default-margin;
-    }
+    }
-  }
+  }
-  @media screen and (max-width: $x-small-limit) {
+}
-    dl {
+
-      overflow: auto;
+.center-card {
-      width: initial;
+  margin: 0 auto;
-      dt {
+  width: 700px;
-        font-weight: bold;
+  &.with-margin {
-        float: none;
+    margin-top: 100px;
-        width: initial;
+  }
-      }
+
-      dd {
+  @media screen and (max-width: $medium-limit) {
-        float: none;
+    width: 100%;
-      }
+    margin: 0 auto 50px auto;
+
+    &.with-margin {
+      margin-top: 0;
     }
   }
 }

fittrackee_client/src/store/modules/root/actions.ts

@@ -28,4 +28,22 @@ export const actions: ActionTree<IRootState, IRootState> & IRootActions = {
         context.commit(ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_LOADING, false)
       )
   },
+  [ROOT_STORE.ACTIONS.GET_APPLICATION_STATS](
+    context: ActionContext<IRootState, IRootState>
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    authApi
+      .get('stats/all')
+      .then((res) => {
+        if (res.data.status === 'success') {
+          context.commit(
+            ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_STATS,
+            res.data.data
+          )
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+  },
 }

fittrackee_client/src/store/modules/root/enums.ts

@@ -1,10 +1,12 @@
 export enum RootActions {
   GET_APPLICATION_CONFIG = 'GET_APPLICATION_CONFIG',
+  GET_APPLICATION_STATS = 'GET_APPLICATION_STATS',
 }
 
 export enum RootGetters {
   APP_CONFIG = 'APP_CONFIG',
   APP_LOADING = 'APP_LOADING',
+  APP_STATS = 'APP_STATS',
   ERROR_MESSAGES = 'ERROR_MESSAGES',
   LANGUAGE = 'LANGUAGE',
   LOCALE = 'LOCALE', // date-fns
@@ -15,5 +17,6 @@ export enum RootMutations {
   SET_ERROR_MESSAGES = 'SET_ERROR_MESSAGES',
   UPDATE_APPLICATION_CONFIG = 'UPDATE_APPLICATION_CONFIG',
   UPDATE_APPLICATION_LOADING = 'UPDATE_APPLICATION_LOADING',
+  UPDATE_APPLICATION_STATS = 'UPDATE_APPLICATION_STATS',
   UPDATE_LANG = 'UPDATE_LANG',
 }

fittrackee_client/src/store/modules/root/getters.ts

@@ -10,6 +10,9 @@ export const getters: GetterTree<IRootState, IRootState> & IRootGetters = {
   [ROOT_STORE.GETTERS.APP_LOADING]: (state: IRootState) => {
     return state.appLoading
   },
+  [ROOT_STORE.GETTERS.APP_STATS]: (state: IRootState) => {
+    return state.application.statistics
+  },
   [ROOT_STORE.GETTERS.ERROR_MESSAGES]: (state: IRootState) => {
     return state.errorMessages
   },

fittrackee_client/src/store/modules/root/mutations.ts

@@ -2,7 +2,7 @@ import { MutationTree } from 'vuex'
 
 import { ROOT_STORE } from '@/store/constants'
 import { IRootState, TRootMutations } from '@/store/modules/root/types'
-import { IAppConfig } from '@/types/application'
+import { IAppConfig, IAppStatistics } from '@/types/application'
 import { localeFromLanguage } from '@/utils/locales'
 
 export const mutations: MutationTree<IRootState> & TRootMutations = {
@@ -27,6 +27,12 @@ export const mutations: MutationTree<IRootState> & TRootMutations = {
   ) {
     state.appLoading = loading
   },
+  [ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_STATS](
+    state: IRootState,
+    statistics: IAppStatistics
+  ) {
+    state.application.statistics = statistics
+  },
   [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: IRootState, language: string) {
     state.language = language
     state.locale = localeFromLanguage[language]

fittrackee_client/src/store/modules/root/types.ts

@@ -7,7 +7,7 @@ import {
 } from 'vuex'
 
 import { ROOT_STORE } from '@/store/constants'
-import { IAppConfig, IApplication } from '@/types/application'
+import { IAppConfig, IApplication, IAppStatistics } from '@/types/application'
 
 export interface IRootState {
   root: boolean
@@ -22,6 +22,9 @@ export interface IRootActions {
   [ROOT_STORE.ACTIONS.GET_APPLICATION_CONFIG](
     context: ActionContext<IRootState, IRootState>
   ): void
+  [ROOT_STORE.ACTIONS.GET_APPLICATION_STATS](
+    context: ActionContext<IRootState, IRootState>
+  ): void
 }
 
 export interface IRootGetters {
@@ -29,6 +32,8 @@ export interface IRootGetters {
 
   [ROOT_STORE.GETTERS.APP_LOADING](state: IRootState): boolean
 
+  [ROOT_STORE.GETTERS.APP_STATS](state: IRootState): IAppStatistics
+
   [ROOT_STORE.GETTERS.ERROR_MESSAGES](
     state: IRootState
   ): string | string[] | null
@@ -44,6 +49,18 @@ export type TRootMutations<S = IRootState> = {
     state: S,
     errorMessages: string
   ): void
+  [ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_CONFIG](
+    state: S,
+    config: IAppConfig
+  ): void
+  [ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_LOADING](
+    state: S,
+    loading: boolean
+  ): void
+  [ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_STATS](
+    state: S,
+    statistics: IAppStatistics
+  ): void
   [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: S, language: string): void
 }
 

fittrackee_client/src/store/modules/user/enums.ts

@@ -15,6 +15,7 @@ export enum UserActions {
 export enum UserGetters {
   AUTH_TOKEN = 'AUTH_TOKEN',
   AUTH_USER_PROFILE = 'AUTH_USER_PROFILE',
+  IS_ADMIN = 'IS_ADMIN',
   IS_AUTHENTICATED = 'IS_AUTHENTICATED',
   USER_LOADING = 'USER_LOADING',
 }

fittrackee_client/src/store/modules/user/getters.ts

@@ -14,6 +14,9 @@ export const getters: GetterTree<IUserState, IRootState> & IUserGetters = {
   [USER_STORE.GETTERS.IS_AUTHENTICATED]: (state: IUserState) => {
     return state.authToken !== null
   },
+  [USER_STORE.GETTERS.IS_ADMIN]: (state: IUserState) => {
+    return state.authUserProfile && state.authUserProfile.admin
+  },
   [USER_STORE.GETTERS.USER_LOADING]: (state: IUserState) => {
     return state.loading
   },

fittrackee_client/src/store/modules/user/types.ts

@@ -82,6 +82,8 @@ export interface IUserGetters {
 
   [USER_STORE.GETTERS.AUTH_USER_PROFILE](state: IUserState): IAuthUserProfile
 
+  [USER_STORE.GETTERS.IS_ADMIN](state: IUserState): boolean
+
   [USER_STORE.GETTERS.IS_AUTHENTICATED](state: IUserState): boolean
 
   [USER_STORE.GETTERS.USER_LOADING](state: IUserState): boolean

fittrackee_client/src/views/AdminView.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="admin">
+    <div class="container" v-if="!userLoading">
+      <AdministrationMenu
+        v-if="isAuthUserAmin"
+        :appStatistics="appStatistics"
+      />
+      <NotFound v-else />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, ComputedRef, defineComponent, onBeforeMount } from 'vue'
+
+  import AdministrationMenu from '@/components/Administration/AdminMenu.vue'
+  import NotFound from '@/components/Common/NotFound.vue'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { IAppStatistics } from '@/types/application'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'Admin',
+    components: {
+      AdministrationMenu,
+      NotFound,
+    },
+    setup() {
+      const store = useStore()
+
+      onBeforeMount(() =>
+        store.dispatch(ROOT_STORE.ACTIONS.GET_APPLICATION_STATS)
+      )
+
+      const appLoading: ComputedRef<boolean> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.APP_LOADING]
+      )
+      const appStatistics: ComputedRef<IAppStatistics> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.APP_STATS]
+      )
+      const isAuthUserAmin: ComputedRef<boolean> = computed(
+        () => store.getters[USER_STORE.GETTERS.IS_ADMIN]
+      )
+      const userLoading: ComputedRef<boolean> = computed(
+        () => store.getters[USER_STORE.GETTERS.USER_LOADING]
+      )
+
+      return { appLoading, appStatistics, isAuthUserAmin, userLoading }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+</style>