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

View File

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

View File

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

View File

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