diff --git a/apps/dashboard/src/lib/features/course/components/course-list-row.svelte b/apps/dashboard/src/lib/features/course/components/course-list-row.svelte index a75a1ad7..7c9d1a31 100644 --- a/apps/dashboard/src/lib/features/course/components/course-list-row.svelte +++ b/apps/dashboard/src/lib/features/course/components/course-list-row.svelte @@ -5,6 +5,7 @@ import { Badge } from '@cio/ui/base/badge'; import { Button } from '@cio/ui/base/button'; import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical'; + import { cn } from '@cio/ui/tools'; import { goto } from '$app/navigation'; import { resolve } from '$app/paths'; import { ContentType } from '@cio/utils/constants/content'; @@ -114,31 +115,55 @@ return `Updated ${d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`; }); + const courseUrl = $derived.by(() => { + if (isExplore && onExploreClick) { + return undefined; + } + + if (isExplore) { + if (!slug.trim()) { + return undefined; + } + + return resolve(`/course/${slug}`, {}); + } + + if (isLMS) { + return resolve(`/courses/${id}/lessons?next=true`, {}); + } + + return resolve(`/courses/${id}`, {}); + }); + function handleRowClick() { if (isExplore && onExploreClick) { onExploreClick(); return; } - if (isExplore) { - goto(resolve(`/course/${slug}`, {})); + + if (!courseUrl) { return; } - if (isLMS) { - goto(resolve(`/courses/${id}/lessons?next=true`, {})); + + goto(courseUrl); + } + + function handleRowKeydown(event: KeyboardEvent) { + if (event.key !== 'Enter' && event.key !== ' ') { return; } - goto(resolve(`/courses/${id}`, {})); + + event.preventDefault(); + handleRowClick(); + } + + function stopRowNavigation(event: MouseEvent) { + event.preventDefault(); + event.stopPropagation(); } - +{#snippet rowContent()}
{ - e.stopPropagation(); + onclick={(event) => { + stopRowNavigation(event); onExploreClick?.(); }} > @@ -282,7 +307,7 @@ size="icon" class="size-8" aria-label={$t('courses.course_card.actions_menu_aria')} - onclick={(e) => e.stopPropagation()} + onclick={stopRowNavigation} > @@ -317,4 +342,25 @@
{/if} +{/snippet} + + + {#snippet child({ props })} + {#if courseUrl} + + {@render rowContent()} + + {:else} +
+ {@render rowContent()} +
+ {/if} + {/snippet}