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>