Client - fix type errors

fittrackee_client/src/components/Administration/AppStatsCards.vue

@@ -37,7 +37,7 @@
 
   const { appStatistics } = toRefs(props)
   const uploadDirSize = computed(() =>
-    getReadableFileSize(appStatistics.value.uploads_dir_size, false)
+    getReadableFileSize(appStatistics.value.uploads_dir_size)
   )
 </script>
 

fittrackee_client/src/components/Common/CustomTextArea.vue

@@ -33,8 +33,8 @@
 
   const text = ref('')
 
-  function updateText(event: Event & { target: HTMLInputElement }) {
-    emit('updateValue', event.target.value)
+  function updateText(event: Event) {
+    emit('updateValue', (event.target as HTMLInputElement).value)
   }
 
   watch(

fittrackee_client/src/components/Common/FilterSelects.vue

@@ -60,8 +60,12 @@
   const { order_by, query, sort, message } = toRefs(props)
   const perPage = [10, 25, 50, 100]
 
-  function onSelectUpdate(event: Event & { target: HTMLInputElement }) {
-    emit('updateSelect', event.target.id, event.target.value)
+  function onSelectUpdate(event: Event) {
+    emit(
+      'updateSelect',
+      (event.target as HTMLInputElement).id,
+      (event.target as HTMLInputElement).value
+    )
   }
 </script>
 

fittrackee_client/src/components/Common/Images/SportImage/index.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-  import { inject, toRefs, withDefaults } from 'vue'
+  import { inject, toRefs } from 'vue'
 
   import CyclingSport from '@/components/Common/Images/SportImage/CyclingSport.vue'
   import CyclingTransport from '@/components/Common/Images/SportImage/CyclingTransport.vue'
@@ -55,5 +55,5 @@
   })
 
   const { color, sportLabel, title } = toRefs(props)
-  const sportColors = inject('sportColors')
+  const sportColors = inject('sportColors') as Record<string, string>
 </script>

fittrackee_client/src/components/Common/Modal.vue

@@ -50,7 +50,7 @@
     strongMessage?: string | null
   }
   const props = withDefaults(defineProps<Props>(), {
-    strongMessage: () => null,
+    strongMessage: () => '',
   })
 
   const emit = defineEmits(['cancelAction', 'confirmAction'])
@@ -63,7 +63,7 @@
   )
   let confirmButton: HTMLElement | null = null
   let cancelButton: HTMLElement | null = null
-  let previousFocusedElement: Element | null = null
+  let previousFocusedElement: HTMLInputElement | null = null
 
   function focusTrap(e: KeyboardEvent) {
     if (e.key === 'Tab' || e.keyCode === 9) {
@@ -77,7 +77,7 @@
   }
 
   onMounted(() => {
-    previousFocusedElement = document.activeElement
+    previousFocusedElement = document.activeElement as HTMLInputElement | null
     cancelButton = document.getElementById('cancel-button')
     confirmButton = document.getElementById('confirm-button')
     if (cancelButton) {

fittrackee_client/src/components/Common/Pagination.vue

@@ -50,6 +50,7 @@
 
 <script setup lang="ts">
   import { toRefs } from 'vue'
+  import type { LocationQuery } from 'vue-router'
 
   import type { IPagination, TPaginationPayload } from '@/types/api'
   import type { IOauth2ClientsPayload } from '@/types/oauth'
@@ -65,13 +66,10 @@
 
   const { pagination, path, query } = toRefs(props)
 
-  function getQuery(
-    page: number,
-    cursor?: number
-  ): TPaginationPayload | IOauth2ClientsPayload {
+  function getQuery(page: number, cursor?: number): LocationQuery {
     const newQuery = Object.assign({}, query.value)
     newQuery.page = cursor ? page + cursor : page
-    return newQuery
+    return newQuery as LocationQuery
   }
 </script>
 

fittrackee_client/src/components/Common/PasswordInput.vue

@@ -62,8 +62,8 @@
   function togglePassword() {
     showPassword.value = !showPassword.value
   }
-  function updatePassword(event: Event & { target: HTMLInputElement }) {
-    emit('updatePassword', event.target.value)
+  function updatePassword(event: Event) {
+    emit('updatePassword', (event.target as HTMLInputElement).value)
   }
   function invalidPassword() {
     emit('passwordError')

fittrackee_client/src/components/Common/StatsChart/index.vue

@@ -163,12 +163,9 @@
           params: apiParams,
         })
       }
-      function updateDisplayData(
-        event: Event & {
-          target: HTMLInputElement & { name: TStatisticsDatasetKeys }
-        }
-      ) {
-        displayedData.value = event.target.name
+      function updateDisplayData(event: Event) {
+        displayedData.value = (event.target as HTMLInputElement)
+          .name as TStatisticsDatasetKeys
       }
       function getApiParams(
         chartParams: IStatisticsDateParams,

fittrackee_client/src/components/Dashboard/Timeline.vue

@@ -40,14 +40,14 @@
   import NoWorkouts from '@/components/Workouts/NoWorkouts.vue'
   import { WORKOUTS_STORE } from '@/store/constants'
   import type { ISport } from '@/types/sports'
-  import type { IUserProfile } from '@/types/user'
+  import type { IAuthUserProfile } from '@/types/user'
   import type { IWorkout } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { defaultOrder } from '@/utils/workouts'
 
   interface Props {
     sports: ISport[]
-    user: IUserProfile
+    user: IAuthUserProfile
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue

@@ -16,7 +16,7 @@
   }
   const props = defineProps<Props>()
 
-  const days = []
+  const days: Date[] = []
   for (let i = 0; i < 7; i++) {
     days.push(addDays(props.startDate, i))
   }

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue

@@ -20,7 +20,9 @@
             .filter((record) =>
               displayHARecord ? true : record.record_type !== 'HA'
             )
-            .map((record) => ` ${$t(`workouts.RECORD_${record.record_type}`)}`)
+            .map(
+              (record) => ` ${$t(`workouts.RECORD_${record.record_type}`)}`
+            )[0]
         "
       />
     </sup>

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkouts.vue

@@ -20,6 +20,7 @@
           :sports="sports"
           :datasets="chartDatasets"
           :colors="colors"
+          :displayHARecord="displayHARecord"
         />
       </div>
     </div>
@@ -30,6 +31,7 @@
           :sports="sports"
           :datasets="chartDatasets"
           :colors="colors"
+          :displayHARecord="displayHARecord"
         />
       </div>
     </div>

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue

@@ -14,6 +14,7 @@
         <CalendarWorkout
           v-for="(workout, index) in workouts"
           :key="index"
+          :displayHARecord="displayHARecord"
           :workout="workout"
           :sportLabel="getSportLabel(workout, sports)"
           :sportColor="getSportColor(workout, sports)"
@@ -37,13 +38,14 @@
     datasets: Record<number, Record<string, number>>
     sports: ISport[]
     workouts: IWorkout[]
+    displayHARecord: boolean
   }
   const props = defineProps<Props>()
 
   const { colors, datasets, sports, workouts } = toRefs(props)
   const isHidden = ref(true)
 
-  function togglePane(event: Event & { target: HTMLElement }) {
+  function togglePane(event: Event) {
     event.stopPropagation()
     isHidden.value = !isHidden.value
   }

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -21,11 +21,11 @@
 
   import StatChart from '@/components/Common/StatsChart/index.vue'
   import type { ISport } from '@/types/sports'
-  import type { IUserProfile } from '@/types/user'
+  import type { IAuthUserProfile } from '@/types/user'
 
   interface Props {
     sports: ISport[]
-    user: IUserProfile
+    user: IAuthUserProfile
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue

@@ -35,11 +35,11 @@
   import { toRefs } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import type { ICardRecord, IRecord, IRecordsBySports } from '@/types/workouts'
+  import type { ICardRecord, IRecord, IRecordsBySport } from '@/types/workouts'
   import { sortRecords } from '@/utils/records'
 
   interface Props {
-    records: IRecordsBySports
+    records: IRecordsBySport
     sportTranslatedLabel: string
   }
   const props = defineProps<Props>()

fittrackee_client/src/components/NavBar.vue

@@ -99,6 +99,7 @@
   import UserPicture from '@/components/User/UserPicture.vue'
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
   import type { IDropdownOption } from '@/types/forms'
+  import type { TLanguage } from '@/types/locales'
   import type { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { availableLanguages } from '@/utils/locales'
@@ -130,7 +131,7 @@
   function updateLanguage(option: IDropdownOption) {
     store.dispatch(
       ROOT_STORE.ACTIONS.UPDATE_APPLICATION_LANGUAGE,
-      option.value.toString()
+      option.value as TLanguage
     )
   }
   function logout() {

fittrackee_client/src/components/Statistics/StatsSportsMenu.vue

@@ -39,7 +39,7 @@
 
   const { t } = useI18n()
 
-  const sportColors: Record<string, string> | undefined = inject('sportColors')
+  const sportColors = inject('sportColors') as Record<string, string>
   const { selectedSportIds } = toRefs(props)
   const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
     translateSports(props.userSports, t)

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

@@ -125,6 +125,7 @@
 
   import { AUTH_USER_STORE, ROOT_STORE, USERS_STORE } from '@/store/constants'
   import type { TAppConfig } from '@/types/application'
+  import type { TLanguage } from '@/types/locales'
   import type { IAuthUserProfile, IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { formatDate, getDateFormat } from '@/utils/dates'
@@ -141,7 +142,7 @@
   const store = useStore()
 
   const { user, fromAdmin } = toRefs(props)
-  const language: ComputedRef<string> = computed(
+  const language: ComputedRef<TLanguage> = computed(
     () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
   )
   const authUser: ComputedRef<IAuthUserProfile> = computed(

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

@@ -60,6 +60,7 @@
   import type { ComputedRef } from 'vue'
 
   import { ROOT_STORE } from '@/store/constants'
+  import type { TLanguage } from '@/types/locales'
   import type { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { getDateFormat } from '@/utils/dates'
@@ -72,7 +73,7 @@
 
   const store = useStore()
 
-  const appLanguage: ComputedRef<string> = computed(
+  const appLanguage: ComputedRef<TLanguage> = computed(
     () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
   )
   const userLanguage = computed(() =>

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

@@ -60,16 +60,16 @@
     isOpen.value = false
     emit('updateTimezone', value)
   }
-  function onEnter(event: Event & { target: HTMLInputElement }) {
+  function onEnter(event: Event) {
     event.preventDefault()
     if (tzList.value?.firstElementChild?.innerHTML) {
       onUpdateTimezone(tzList.value?.firstElementChild?.innerHTML)
     }
   }
-  function openDropdown(event: Event & { target: HTMLInputElement }) {
+  function openDropdown(event: Event) {
     event.preventDefault()
     isOpen.value = true
-    timezone.value = event.target.value.trim()
+    timezone.value = (event.target as HTMLInputElement).value.trim()
   }
 
   watch(

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

@@ -87,7 +87,7 @@
           >
             <i class="fa fa-download" aria-hidden="true" />
             {{ $t('user.EXPORT_REQUEST.DOWNLOAD_ARCHIVE') }}
-            ({{ getReadableFileSize(exportRequest.file_size) }})
+            ({{ getReadableFileSizeAsText(exportRequest.file_size) }})
           </span>
           <span v-else>
             {{ $t(`user.EXPORT_REQUEST.STATUS.${exportRequest.status}`) }}
@@ -126,7 +126,7 @@
   } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { formatDate } from '@/utils/dates'
-  import { getReadableFileSize } from '@/utils/files'
+  import { getReadableFileSizeAsText } from '@/utils/files'
 
   interface Props {
     user: IAuthUserProfile

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

@@ -41,7 +41,7 @@
   import type { TAppConfig } from '@/types/application'
   import type { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
-  import { getReadableFileSize } from '@/utils/files'
+  import { getReadableFileSizeAsText } from '@/utils/files'
 
   interface Props {
     user: IUserProfile
@@ -58,16 +58,18 @@
     () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
   )
   const fileSizeLimit = appConfig.value.max_single_file_size
-    ? getReadableFileSize(appConfig.value.max_single_file_size)
+    ? getReadableFileSizeAsText(appConfig.value.max_single_file_size)
     : ''
   const pictureFile: Ref<File | null> = ref(null)
 
   function deleteUserPicture() {
     store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_PICTURE)
   }
-  function updatePictureFile(event: Event & { target: HTMLInputElement }) {
-    if (event.target.files) {
-      pictureFile.value = event.target.files[0]
+  function updatePictureFile(event: Event) {
+    if ((event.target as HTMLInputElement).files !== null) {
+      pictureFile.value = (
+        (event.target as HTMLInputElement).files as FileList
+      )[0]
     }
   }
   function updateUserPicture() {

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

@@ -185,10 +185,12 @@
   const userForm: IUserPreferencesPayload = reactive({
     display_ascent: true,
     imperial_units: false,
-    language: '',
+    language: 'en',
     timezone: 'Europe/Paris',
     date_format: 'dd/MM/yyyy',
     weekm: false,
+    start_elevation_at_zero: false,
+    use_raw_gpx_speed: false,
   })
   const weekStart = [
     {

fittrackee_client/src/components/User/UserApps/AddUserApp.vue

@@ -104,6 +104,7 @@
     client_name: '',
     client_uri: '',
     client_description: '',
+    description: '',
     redirect_uri: '',
   })
   const scopes: string[] = reactive([])

fittrackee_client/src/components/User/UserApps/UserApp.vue

@@ -122,8 +122,8 @@
   import { useRoute } from 'vue-router'
 
   import { OAUTH2_STORE, ROOT_STORE } from '@/store/constants'
-  import { IOAuth2Client } from '@/types/oauth'
-  import { IAuthUserProfile } from '@/types/user'
+  import type { IOAuth2Client } from '@/types/oauth'
+  import type { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
   import { formatDate } from '@/utils/dates'
 
@@ -145,7 +145,7 @@
     () => store.getters[OAUTH2_STORE.GETTERS.REVOCATION_SUCCESSFUL]
   )
   const displayModal: Ref<boolean> = ref(false)
-  const messageToDisplay: Ref<string | null> = ref(null)
+  const messageToDisplay: Ref<string> = ref('')
   const idCopied: Ref<boolean> = ref(false)
   const secretCopied: Ref<boolean> = ref(false)
   const clipboardSupport: Ref<boolean> = ref(false)
@@ -176,7 +176,7 @@
   function updateDisplayModal(value: boolean) {
     displayModal.value = value
     if (!value) {
-      messageToDisplay.value = null
+      messageToDisplay.value = ''
     }
   }
   function confirmAction(clientId: number) {

fittrackee_client/src/components/User/UserSportPreferences.vue

@@ -186,7 +186,7 @@
 
   const { isEdition, user } = toRefs(props)
   const defaultColor = '#838383'
-  const sportColors: Record<string, string> | undefined = inject('sportColors')
+  const sportColors = inject('sportColors') as Record<string, string>
   const sports: ComputedRef<ISport[]> = computed(
     () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
   )
@@ -223,14 +223,16 @@
   function isSportInEdition(sportId: number) {
     return sportPayload.sport_id === sportId
   }
-  function updateColor(event: Event & { target: HTMLInputElement }) {
-    sportPayload.color = event.target.value
+  function updateColor(event: Event) {
+    sportPayload.color = (event.target as HTMLInputElement).value
   }
-  function updateThreshold(event: Event & { target: HTMLInputElement }) {
-    sportPayload.stopped_speed_threshold = parseFloat(event.target.value)
+  function updateThreshold(event: Event) {
+    sportPayload.stopped_speed_threshold = parseFloat(
+      (event.target as HTMLInputElement).value
+    )
   }
-  function updateIsActive(event: Event & { target: HTMLInputElement }) {
-    sportPayload.is_active = event.target.checked
+  function updateIsActive(event: Event) {
+    sportPayload.is_active = (event.target as HTMLInputElement).checked
   }
   function resetSportPayload() {
     sportPayload.sport_id = 0

fittrackee_client/src/components/Workout/WorkoutCard.vue

@@ -73,7 +73,7 @@
       >
         <div class="img">
           <SportImage
-            v-if="sport.label"
+            v-if="sport?.label"
             :sport-label="sport.label"
             :color="sport.color"
           />
@@ -147,16 +147,16 @@
   import UserPicture from '@/components/User/UserPicture.vue'
   import { ROOT_STORE } from '@/store/constants'
   import type { ISport } from '@/types/sports'
-  import type { IUserProfile } from '@/types/user'
+  import type { IAuthUserProfile } from '@/types/user'
   import type { IWorkout } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { formatDate } from '@/utils/dates'
 
   interface Props {
-    user: IUserProfile
+    user: IAuthUserProfile
     useImperialUnits: boolean
     workout?: IWorkout
-    sport?: ISport
+    sport?: ISport | null
   }
   const props = withDefaults(defineProps<Props>(), {
     workout: () => ({}) as IWorkout,

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutNotes.vue

@@ -24,7 +24,7 @@
     notes?: string | null
   }
   const props = withDefaults(defineProps<Props>(), {
-    notes: () => null,
+    notes: () => '',
   })
 
   const { notes } = toRefs(props)

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -11,6 +11,7 @@
     <Card>
       <template #title>
         <WorkoutCardTitle
+          v-if="sport"
           :sport="sport"
           :workoutObject="workoutObject"
           @displayModal="updateDisplayModal(true)"
@@ -84,7 +85,7 @@
       ? props.sports.find(
           (sport) => sport.id === props.workoutData.workout.sport_id
         )
-      : {}
+      : ({} as ISport)
   )
   const workoutObject = computed(() =>
     getWorkoutObject(workout.value, segment.value)

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -281,12 +281,12 @@
 
   import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
   import type { TAppConfig } from '@/types/application'
-  import type { ISport } from '@/types/sports'
+  import type { ISport, ITranslatedSport } from '@/types/sports'
   import type { IAuthUserProfile } from '@/types/user'
   import type { IWorkout, IWorkoutForm } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
-  import { getReadableFileSize } from '@/utils/files'
+  import { getReadableFileSizeAsText } from '@/utils/files'
   import { translateSports } from '@/utils/sports'
   import { convertDistance } from '@/utils/units'
 
@@ -308,7 +308,7 @@
   const router = useRouter()
 
   const { authUser, workout, isCreation, loading } = toRefs(props)
-  const translatedSports: ComputedRef<ISport[]> = computed(() =>
+  const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
     translateSports(
       props.sports,
       t,
@@ -320,11 +320,11 @@
     () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
   )
   const fileSizeLimit = appConfig.value.max_single_file_size
-    ? getReadableFileSize(appConfig.value.max_single_file_size)
+    ? getReadableFileSizeAsText(appConfig.value.max_single_file_size)
     : ''
   const gpx_limit_import = appConfig.value.gpx_limit_import
   const zipSizeLimit = appConfig.value.max_zip_file_size
-    ? getReadableFileSize(appConfig.value.max_zip_file_size)
+    ? getReadableFileSizeAsText(appConfig.value.max_zip_file_size)
     : ''
   const errorMessages: ComputedRef<string | string[] | null> = computed(
     () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
@@ -369,9 +369,9 @@
     withGpx.value = !withGpx.value
     formErrors.value = false
   }
-  function updateFile(event: Event & { target: HTMLInputElement }) {
-    if (event.target.files) {
-      gpxFile = event.target.files[0]
+  function updateFile(event: Event) {
+    if ((event.target as HTMLInputElement).files) {
+      gpxFile = ((event.target as HTMLInputElement).files as FileList)[0]
     }
   }
   function formatWorkoutForm(workout: IWorkout) {

fittrackee_client/src/components/Workouts/WorkoutsFilters.vue

@@ -192,7 +192,7 @@
   import { useRoute, useRouter } from 'vue-router'
   import type { LocationQuery } from 'vue-router'
 
-  import type { ISport } from '@/types/sports'
+  import type { ISport, ITranslatedSport } from '@/types/sports'
   import type { IAuthUserProfile } from '@/types/user'
   import { translateSports } from '@/utils/sports'
   import { units } from '@/utils/units'
@@ -214,7 +214,7 @@
   const toUnit = authUser.value.imperial_units
     ? units['km'].defaultTarget
     : 'km'
-  const translatedSports: ComputedRef<ISport[]> = computed(() =>
+  const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
     translateSports(props.sports, t)
   )
   let params: LocationQuery = Object.assign({}, route.query)
@@ -226,11 +226,13 @@
     }
   })
 
-  function handleFilterChange(event: Event & { target: HTMLInputElement }) {
-    if (event.target.value === '') {
-      delete params[event.target.name]
+  function handleFilterChange(event: Event) {
+    const name = (event.target as HTMLInputElement).name
+    const value = (event.target as HTMLInputElement).value
+    if (value === '') {
+      delete params[name]
     } else {
-      params[event.target.name] = event.target.value
+      params[name] = value
     }
   }
   function onFilter() {

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -5,7 +5,7 @@
         <span class="total-label">
           {{ $t('common.TOTAL').toLowerCase() }}:
         </span>
-        <span v-if="pagination.total !== null">
+        <span v-if="pagination.total">
           {{ pagination.total }}
           {{ $t('workouts.WORKOUT', pagination.total) }}
         </span>
@@ -47,7 +47,7 @@
                 <SportImage
                   v-if="sports.length > 0"
                   :title="
-                    sports.find((s) => s.id === workout.sport_id)
+                    sports.filter((s) => s.id === workout.sport_id)[0]
                       .translatedLabel
                   "
                   :sport-label="getSportLabel(workout, sports)"