Client - fix focus when no stats to display

This commit is contained in:
Sam 2023-07-13 20:09:42 +02:00
parent d0836cd4ed
commit 739fe8efb0
4 changed files with 33 additions and 6 deletions

View File

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

View File

@ -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,9 +66,11 @@
}
onMounted(() => {
const input = document.getElementById('frame-month')
if (input) {
input.focus()
if (!isDisabled.value) {
const input = document.getElementById('frame-month')
if (input) {
input.focus()
}
}
})
</script>

View File

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

View File

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