Client - fix focus when no stats to display

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

@@ -10,6 +10,7 @@
             type="radio"
             name="total_distance"
             :checked="displayedData === 'total_distance'"
+            :disabled="isDisabled"
             @click="updateDisplayData"
           />
           {{ $t('workouts.DISTANCE') }}
@@ -19,6 +20,7 @@
             type="radio"
             name="total_duration"
             :checked="displayedData === 'total_duration'"
+            :disabled="isDisabled"
             @click="updateDisplayData"
           />
           {{ $t('workouts.DURATION') }}
@@ -28,6 +30,7 @@
             type="radio"
             name="nb_workouts"
             :checked="displayedData === 'nb_workouts'"
+            :disabled="isDisabled"
             @click="updateDisplayData"
           />
           {{ $t('workouts.WORKOUT', 2) }}
@@ -37,6 +40,7 @@
             type="radio"
             name="average_speed"
             :checked="displayedData === 'average_speed'"
+            :disabled="isDisabled"
             @click="updateDisplayData"
           />
           {{ $t('workouts.AVERAGE_SPEED') }}
@@ -46,6 +50,7 @@
             type="radio"
             name="total_ascent"
             :checked="displayedData === 'total_ascent'"
+            :disabled="isDisabled"
             @click="updateDisplayData"
           />
           {{ $t('workouts.ASCENT') }}
@@ -55,6 +60,7 @@
             type="radio"
             name="total_descent"
             :checked="displayedData === 'total_descent'"
+            :disabled="isDisabled"
             @click="updateDisplayData"
           />
           {{ $t('workouts.DESCENT') }}
@@ -130,6 +136,10 @@
         type: Boolean,
         default: false,
       },
+      isDisabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
       const store = useStore()

fittrackee_client/src/components/Statistics/StatsMenu.vue

@@ -4,6 +4,7 @@
       class="chart-arrow transparent"
       @click="emit('arrowClick', true)"
       @keydown.enter="emit('arrowClick', true)"
+      :disabled="isDisabled"
     >
       <i class="fa fa-chevron-left" aria-hidden="true" />
     </button>
@@ -21,10 +22,11 @@
               :name="frame"
               :checked="selectedTimeFrame === frame"
               @input="onUpdateTimeFrame(frame)"
+              :disabled="isDisabled"
             />
             <span
               :id="`frame-${frame}`"
-              :tabindex="0"
+              :tabindex="isDisabled ? -1 : 0"
               role="button"
               @keydown.enter="onUpdateTimeFrame(frame)"
             >
@@ -38,6 +40,7 @@
       class="chart-arrow transparent"
       @click="emit('arrowClick', false)"
       @keydown.enter="emit('arrowClick', false)"
+      :disabled="isDisabled"
     >
       <i class="fa fa-chevron-right" aria-hidden="true" />
     </button>
@@ -45,7 +48,12 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue'
+  import { onMounted, ref, toRefs } from 'vue'
+  interface Props {
+    isDisabled: boolean
+  }
+  const props = defineProps<Props>()
+  const { isDisabled } = toRefs(props)
 
   const emit = defineEmits(['arrowClick', 'timeFrameUpdate'])
 
@@ -58,10 +66,12 @@
   }
 
   onMounted(() => {
+    if (!isDisabled.value) {
       const input = document.getElementById('frame-month')
       if (input) {
         input.focus()
       }
+    }
   })
 </script>
 

fittrackee_client/src/components/Statistics/index.vue

@@ -3,6 +3,7 @@
     <StatsMenu
       @timeFrameUpdate="updateTimeFrame"
       @arrowClick="handleOnClickArrows"
+      :isDisabled="isDisabled"
     />
     <StatChart
       :sports="sports"
@@ -10,6 +11,7 @@
       :chartParams="chartParams"
       :displayed-sport-ids="selectedSportIds"
       :fullStats="true"
+      :isDisabled="isDisabled"
     />
     <SportsMenu
       :selected-sport-ids="selectedSportIds"
@@ -35,6 +37,7 @@
   interface Props {
     sports: ISport[]
     user: IAuthUserProfile
+    isDisabled: boolean
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/views/StatisticsView.vue

@@ -5,9 +5,10 @@
         <template #title>{{ $t('statistics.STATISTICS') }}</template>
         <template #content>
           <Statistics
-            :class="{ 'stats-disabled': authUser.nb_workouts === 0 }"
+            :class="{ 'stats-disabled': isDisabled }"
             :user="authUser"
             :sports="sports"
+            :isDisabled="isDisabled"
           />
         </template>
       </Card>
@@ -36,6 +37,9 @@
       authUser.value.sports_list.includes(sport.id)
     )
   )
+  const isDisabled: ComputedRef<boolean> = computed(
+    () => authUser.value.nb_workouts === 0
+  )
 </script>
 
 <style lang="scss" scoped>