Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - init administration + refacto

Browse Source
This commit is contained in:
Sam 2021-10-23 21:34:02 +02:00
parent ffa673b3bc
commit 04cf43cfd2
26 changed files with 321 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
fittrackee_client/src/components/Administration/AdminMenu.vue Normal file
View File

@ -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>

73
fittrackee_client/src/components/Administration/AppStatsCards.vue Normal file
View File

@ -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>

6
fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue → fittrackee_client/src/components/Common/StatCard.vue
View File

@ -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) {

12
fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue
View File

@ -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: {

10
fittrackee_client/src/components/NavBar.vue
View File

@ -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>

7
fittrackee_client/src/components/User/PasswordReset/PasswordActionDone.vue
View File

@ -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;

8
fittrackee_client/src/components/User/PasswordReset/PasswordResetForm.vue
View File

@ -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 {

10
fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
View File

@ -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 }}

4
fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
View File

@ -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>

15
fittrackee_client/src/components/User/ProfileEdition/index.vue
View File

@ -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>

7
fittrackee_client/src/components/Workout/WorkoutEdition.vue
View File

@ -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;

10
fittrackee_client/src/locales/en/administration.json
View File

@ -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"
}

2
fittrackee_client/src/locales/en/en.ts
View File

@ -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,

10
fittrackee_client/src/locales/fr/administration.json
View File

@ -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"
}

2
fittrackee_client/src/locales/fr/fr.ts
View File

@ -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,

6
fittrackee_client/src/router/index.ts
View File

@ -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',

37
fittrackee_client/src/scss/base.scss
View File

@ -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;
width: initial;
dt {
font-weight: bold;
float: none;
width: initial;
}
dd {
float: none;
}
}
.center-card {
margin: 0 auto;
width: 700px;
&.with-margin {
margin-top: 100px;
}
@media screen and (max-width: $medium-limit) {
width: 100%;
margin: 0 auto 50px auto;
&.with-margin {
margin-top: 0;
}
}
}
}

18
fittrackee_client/src/store/modules/root/actions.ts
View File

@ -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))
},
}

3
fittrackee_client/src/store/modules/root/enums.ts
View File

@ -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',
}

3
fittrackee_client/src/store/modules/root/getters.ts
View File

@ -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
},

8
fittrackee_client/src/store/modules/root/mutations.ts
View File

@ -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]

19
fittrackee_client/src/store/modules/root/types.ts
View File

@ -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
}

1
fittrackee_client/src/store/modules/user/enums.ts
View File

@ -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',
}

3
fittrackee_client/src/store/modules/user/getters.ts
View File

@ -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
},

2
fittrackee_client/src/store/modules/user/types.ts
View File

@ -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

55
fittrackee_client/src/views/AdminView.vue Normal file
View File

@ -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>