neckfire/streakfit-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: déballage resource {data} + clé useAsyncData sur détail exercice/séance
Build & Deploy / build (push) Successful in 6s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
neckfire
2026-07-19 03:24:37 +02:00
co-authored by Claude Opus 4.8
parent 34f6ec5299
commit d8fc93ff5d
2 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/exercises/[id].vue
+19 -17
View File
@@ -6,7 +6,7 @@ const route = useRoute()
interface ExerciseDetail {
id: number
name: string
body_part: string | null
body_part?: string | null
category: string | null
equipment: string | null
target: string | null
@@ -18,10 +18,12 @@ interface ExerciseDetail {
attribution: string | null
}
const { data, pending } = await useAsyncData(
() => `exercise-${route.params.id}`,
() => api<ExerciseDetail>(`/api/exercises/${route.params.id}`, { query: { locale: locale.value } }),
{ watch: [locale] }
// L'API enveloppe la resource dans { data: {...} } → on déballe.
const { data: ex, pending } = await useAsyncData(
`exercise-${route.params.id}`,
() => api<{ data: ExerciseDetail }>(`/api/exercises/${route.params.id}`, { query: { locale: locale.value } })
.then(r => r.data),
{ watch: [() => route.params.id, locale] }
)
</script>
@@ -29,38 +31,38 @@ const { data, pending } = await useAsyncData(
<div class="space-y-5">
<UButton to="/exercises" icon="i-lucide-arrow-left" color="neutral" variant="ghost" :label="t('common.back')" />
<div v-if="pending && !data" class="flex justify-center py-16"><SfLogo :size="56" loader /></div>
<div v-if="pending && !ex" class="flex justify-center py-16"><SfLogo :size="56" loader /></div>
<template v-else-if="data">
<template v-else-if="ex">
<div class="rounded-2xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-square max-w-sm mx-auto">
<img v-if="data.gif_url || data.image_url" :src="data.gif_url || data.image_url || ''" :alt="data.name" class="w-full h-full object-cover">
<img v-if="ex.gif_url || ex.image_url" :src="ex.gif_url || ex.image_url || ''" :alt="ex.name" class="w-full h-full object-cover">
</div>
<div>
<h1 class="text-2xl font-black tracking-tight capitalize">{{ data.name }}</h1>
<h1 class="text-2xl font-black tracking-tight capitalize">{{ ex.name }}</h1>
<div class="flex flex-wrap gap-2 mt-2">
<UBadge v-if="data.target" color="primary" variant="soft" class="capitalize">{{ data.target }}</UBadge>
<UBadge v-if="data.equipment" color="neutral" variant="soft" class="capitalize">{{ data.equipment }}</UBadge>
<UBadge v-if="data.body_part" color="neutral" variant="outline" class="capitalize">{{ data.body_part }}</UBadge>
<UBadge v-if="ex.target" color="primary" variant="soft" class="capitalize">{{ ex.target }}</UBadge>
<UBadge v-if="ex.equipment" color="neutral" variant="soft" class="capitalize">{{ ex.equipment }}</UBadge>
<UBadge v-if="ex.body_part || ex.category" color="neutral" variant="outline" class="capitalize">{{ ex.body_part || ex.category }}</UBadge>
</div>
</div>
<div v-if="data.secondary_muscles?.length">
<div v-if="ex.secondary_muscles?.length">
<h2 class="text-sm font-semibold text-zinc-500 mb-1">{{ t('exercises.secondaryMuscles') }}</h2>
<p class="text-sm capitalize">{{ data.secondary_muscles.join(', ') }}</p>
<p class="text-sm capitalize">{{ ex.secondary_muscles.join(', ') }}</p>
</div>
<div v-if="data.instructions?.length">
<div v-if="ex.instructions?.length">
<h2 class="text-sm font-semibold text-zinc-500 mb-2">{{ t('exercises.instructions') }}</h2>
<ol class="space-y-2">
<li v-for="(step, i) in data.instructions" :key="i" class="flex gap-3">
<li v-for="(step, i) in ex.instructions" :key="i" class="flex gap-3">
<span class="shrink-0 size-6 rounded-full sf-flame-bg text-white text-xs font-bold flex items-center justify-center">{{ i + 1 }}</span>
<span class="text-sm">{{ step }}</span>
</li>
</ol>
</div>
<p v-if="data.attribution" class="text-xs text-zinc-400 pt-4">{{ data.attribution }}</p>
<p v-if="ex.attribution" class="text-xs text-zinc-400 pt-4">{{ ex.attribution }}</p>
</template>
</div>
</template>