Client - add application administration

2021-10-24 20:13:28 +02:00
parent 04cf43cfd2
commit 2ba931dcf7
20 changed files with 351 additions and 28 deletions
--- a/fittrackee_client/src/components/Administration/AdminApplication.vue
+++ b/fittrackee_client/src/components/Administration/AdminApplication.vue
@ -0,0 +1,153 @@
+<template>
+  <div id="admin-app" class="admin-card">
+    <Card>
+      <template #title>{{ $t('admin.APP_CONFIG.TITLE') }}</template>
+      <template #content>
+        <form class="admin-form" @submit.prevent="onSubmit">
+          <label for="max_users">
+            {{ $t('admin.APP_CONFIG.MAX_USERS_LABEL') }}:
+            <input
+              id="max_users"
+              name="max_users"
+              type="number"
+              min="0"
+              v-model="appData.max_users"
+              :disabled="!edition"
+            />
+          </label>
+          <label for="max_single_file_size">
+            {{ $t('admin.APP_CONFIG.SINGLE_UPLOAD_MAX_SIZE_LABEL') }}:
+            <input
+              id="max_single_file_size"
+              name="max_single_file_size"
+              type="number"
+              step="0.1"
+              min="0"
+              v-model="appData.max_single_file_size"
+              :disabled="!edition"
+            />
+          </label>
+          <label for="max_zip_file_size">
+            {{ $t('admin.APP_CONFIG.ZIP_UPLOAD_MAX_SIZE_LABEL') }}:
+            <input
+              id="max_zip_file_size"
+              name="max_zip_file_size"
+              type="number"
+              step="0.1"
+              min="0"
+              v-model="appData.max_zip_file_size"
+              :disabled="!edition"
+            />
+          </label>
+          <label for="gpx_limit_import">
+            {{ $t('admin.APP_CONFIG.MAX_FILES_IN_ZIP_LABEL') }}:
+            <input
+              id="gpx_limit_import"
+              name="gpx_limit_import"
+              type="number"
+              min="0"
+              v-model="appData.gpx_limit_import"
+              :disabled="!edition"
+            />
+          </label>
+          <ErrorMessage :message="errorMessages" v-if="errorMessages" />
+          <div class="form-buttons" v-if="edition">
+            <button class="confirm" type="submit">
+              {{ $t('buttons.SUBMIT') }}
+            </button>
+            <button class="cancel" @click.prevent="onCancel">
+              {{ $t('buttons.CANCEL') }}
+            </button>
+          </div>
+          <div class="form-buttons" v-else>
+            <button
+              class="confirm"
+              @click.prevent="$router.push('/admin/application/edit')"
+            >
+              {{ $t('buttons.EDIT') }}
+            </button>
+            <button class="cancel" @click.prevent="$router.push('/admin')">
+              {{ $t('admin.BACK_TO_ADMIN') }}
+            </button>
+          </div>
+        </form>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ComputedRef,
+    PropType,
+    computed,
+    defineComponent,
+    reactive,
+    onBeforeMount,
+  } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  import { ROOT_STORE } from '@/store/constants'
+  import { TAppConfig, TAppConfigForm } from '@/types/application'
+  import { useStore } from '@/use/useStore'
+  import { getFileSizeInMB } from '@/utils/files'
+
+  export default defineComponent({
+    name: 'AdminApplication',
+    props: {
+      appConfig: {
+        type: Object as PropType<TAppConfig>,
+        required: true,
+      },
+      edition: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const store = useStore()
+      const router = useRouter()
+      const appData: TAppConfigForm = reactive({
+        max_users: 0,
+        max_single_file_size: 0,
+        max_zip_file_size: 0,
+        gpx_limit_import: 0,
+      })
+      const errorMessages: ComputedRef<string | string[] | null> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+      )
+
+      onBeforeMount(() => {
+        if (props.appConfig) {
+          updateForm(props.appConfig)
+        }
+      })
+
+      function updateForm(appConfig: TAppConfig) {
+        Object.keys(appData).map((key) => {
+          ;['max_single_file_size', 'max_zip_file_size'].includes(key)
+            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              (appData[key] = getFileSizeInMB(appConfig[key]))
+            : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              (appData[key] = appConfig[key])
+        })
+      }
+
+      function onCancel() {
+        updateForm(props.appConfig)
+        store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+        router.push('/admin/application')
+      }
+      function onSubmit() {
+        const formData: TAppConfigForm = Object.assign({}, appData)
+        formData.max_single_file_size *= 1048576
+        formData.max_zip_file_size *= 1048576
+        store.dispatch(ROOT_STORE.ACTIONS.UPDATE_APPLICATION_CONFIG, formData)
+      }
+
+      return { appData, errorMessages, onCancel, onSubmit }
+    },
+  })
+</script>
--- a/fittrackee_client/src/components/Administration/AdminMenu.vue
+++ b/fittrackee_client/src/components/Administration/AdminMenu.vue
@ -6,7 +6,11 @@
        <AppStatsCards :app-statistics="appStatistics" />
        <div class="admin-menu description-list">
          <dl>
-            <dt>{{ $t('admin.APPLICATION') }}</dt>
+            <dt>
+              <router-link to="/admin/application">
+                {{ $t('admin.APPLICATION') }}
+              </router-link>
+            </dt>
            <dd>
              {{ $t('admin.UPDATE_APPLICATION_DESCRIPTION') }}
            </dd>
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
@ -39,7 +39,7 @@

  import UserPicture from '@/components/User/UserPicture.vue'
  import { ROOT_STORE, USER_STORE } from '@/store/constants'
-  import { IAppConfig } from '@/types/application'
+  import { TAppConfig } from '@/types/application'
  import { IAuthUserProfile } from '@/types/user'
  import { useStore } from '@/use/useStore'
  import { getReadableFileSize } from '@/utils/files'
@ -60,7 +60,7 @@
      const errorMessages: ComputedRef<string | string[] | null> = computed(
        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
      )
-      const appConfig: ComputedRef<IAppConfig> = computed(
+      const appConfig: ComputedRef<TAppConfig> = computed(
        () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
      )
      const fileSizeLimit = appConfig.value.max_single_file_size
--- a/fittrackee_client/src/components/User/UserAuthForm.vue
+++ b/fittrackee_client/src/components/User/UserAuthForm.vue
@ -81,7 +81,7 @@
  import { useRoute } from 'vue-router'

  import { ROOT_STORE, USER_STORE } from '@/store/constants'
-  import { IAppConfig } from '@/types/application'
+  import { TAppConfig } from '@/types/application'
  import { ILoginRegisterFormData } from '@/types/user'
  import { useStore } from '@/use/useStore'

@ -113,7 +113,7 @@
      const errorMessages: ComputedRef<string | string[] | null> = computed(
        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
      )
-      const appConfig: ComputedRef<IAppConfig> = computed(
+      const appConfig: ComputedRef<TAppConfig> = computed(
        () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
      )
      const registration_disabled: ComputedRef<boolean> = computed(
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
@ -34,7 +34,7 @@
  import { ComputedRef, PropType, computed, defineComponent, ref } from 'vue'

  import { ROOT_STORE } from '@/store/constants'
-  import { IAppConfig } from '@/types/application'
+  import { TAppConfig } from '@/types/application'
  import { GeoJSONData } from '@/types/geojson'
  import { IWorkoutData, TCoordinates } from '@/types/workouts'
  import { useStore } from '@/use/useStore'
@ -103,7 +103,7 @@
            ]
          : []
      )
-      const appConfig: ComputedRef<IAppConfig> = computed(
+      const appConfig: ComputedRef<TAppConfig> = computed(
        () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
      )
      const center = computed(() => getCenter(bounds))
--- a/fittrackee_client/src/components/Workout/WorkoutEdition.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutEdition.vue
@ -221,7 +221,7 @@
  import { useRouter } from 'vue-router'

  import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
-  import { IAppConfig } from '@/types/application'
+  import { TAppConfig } from '@/types/application'
  import { ISport } from '@/types/sports'
  import { IAuthUserProfile } from '@/types/user'
  import { IWorkout, IWorkoutForm } from '@/types/workouts'
@ -268,7 +268,7 @@
      const translatedSports: ComputedRef<ISport[]> = computed(() =>
        translateSports(props.sports, t)
      )
-      const appConfig: ComputedRef<IAppConfig> = computed(
+      const appConfig: ComputedRef<TAppConfig> = computed(
        () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
      )
      const fileSizeLimit = appConfig.value.max_single_file_size