72 lines
2.3 KiB
Svelte
72 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import * as UnderlineTabs from '@cio/ui/custom/underline-tabs';
|
|
import { Button } from '@cio/ui/base/button';
|
|
import { CoursesPage } from '$features/course/pages';
|
|
import { profile } from '$lib/utils/store/user';
|
|
import { currentOrg } from '$lib/utils/store/org';
|
|
import { t } from '$lib/utils/functions/translations';
|
|
import { coursesApi } from '$features/course/api';
|
|
import { isStudentCourseComplete } from '$features/course/utils/compliance-utils';
|
|
|
|
let searchValue = $state('');
|
|
|
|
function isCourseComplete(course: (typeof coursesApi.enrolledCourses)[number]): boolean {
|
|
return isStudentCourseComplete(course);
|
|
}
|
|
|
|
const coursesInProgress = $derived(coursesApi.enrolledCourses.filter((course) => !isCourseComplete(course)));
|
|
const coursesComplete = $derived(coursesApi.enrolledCourses.filter((course) => isCourseComplete(course)));
|
|
|
|
$effect(() => {
|
|
if (!$profile.id || !$currentOrg.id) return;
|
|
|
|
coursesApi.getEnrolledCourses();
|
|
});
|
|
|
|
let tabs = $derived([
|
|
{
|
|
label: `${$t('my_learning.progress')} (${coursesInProgress.length})`,
|
|
value: '1'
|
|
},
|
|
{
|
|
label: `${$t('my_learning.complete')} (${coursesComplete.length})`,
|
|
value: '2'
|
|
}
|
|
]);
|
|
let currentTab = $state('1');
|
|
</script>
|
|
|
|
<UnderlineTabs.Root bind:value={currentTab}>
|
|
<UnderlineTabs.List>
|
|
{#each tabs as tab (tab.value)}
|
|
<UnderlineTabs.Trigger value={tab.value}>
|
|
{$t(tab.label)}
|
|
</UnderlineTabs.Trigger>
|
|
{/each}
|
|
</UnderlineTabs.List>
|
|
<UnderlineTabs.Content value={tabs[0].value}>
|
|
<CoursesPage
|
|
bind:searchValue
|
|
courses={coursesInProgress}
|
|
emptyDescription={$t('my_learning.any_progress')}
|
|
emptyTitle={$t('my_learning.not_in_progress')}
|
|
isLMS={true}
|
|
isLoading={coursesApi.isLoading}
|
|
>
|
|
{#snippet emptyAction()}
|
|
<Button href="/lms/explore">{$t('my_learning.find_courses')}</Button>
|
|
{/snippet}
|
|
</CoursesPage>
|
|
</UnderlineTabs.Content>
|
|
<UnderlineTabs.Content value={tabs[1].value}>
|
|
<CoursesPage
|
|
bind:searchValue
|
|
courses={coursesComplete}
|
|
emptyDescription={$t('my_learning.any_course')}
|
|
emptyTitle={$t('my_learning.not_completed')}
|
|
isLMS={true}
|
|
isLoading={coursesApi.isLoading}
|
|
/>
|
|
</UnderlineTabs.Content>
|
|
</UnderlineTabs.Root>
|