ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: list view on courses page (#269)

Browse Source 
* working on the list view

* working on the list view navigation

* worked on the list view for the course page

* worked on the list view for the course page

* clean up

* rename store

---------

Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Em_Dev
2024-04-20 14:40:44 +01:00
committed by GitHub
co-authored by Rotimi Best
parent a95be6d620
commit ec30e076bc
6 changed files with 200 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/Courses/index.svelte
+61 -22
View File
@@ -1,11 +1,20 @@
<script lang="ts">
import Box from '../Box/index.svelte';
import Card from './components/Card/index.svelte';
import List from './components/List/index.svelte';
import CardLoader from './components/Card/Loader.svelte';
import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
import { courseMetaDeta } from './store';
import type { Course } from '$lib/utils/types';
import { globalStore } from '$lib/utils/store/app';
import {
StructuredList,
StructuredListHead,
StructuredListRow,
StructuredListCell,
StructuredListBody
} from 'carbon-components-svelte';
import { isMobile } from '$lib/utils/store/useMobile';
import { t } from '$lib/utils/functions/translations';
export let courses: Course[] = [];
@@ -23,30 +32,60 @@
<!-- <CopyCourseModal /> -->
<div class={`w-full ${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} my-4 mx-auto`}>
<div class={`w-full my-4 mx-auto`}>
{#if $courseMetaDeta.isLoading}
<CardLoader />
<CardLoader />
<CardLoader />
<section class={`${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} `}>
<CardLoader />
<CardLoader />
<CardLoader />
</section>
{:else if $courseMetaDeta.view === 'list'}
<StructuredList selection class="w-full">
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Title</StructuredListCell>
<StructuredListCell head>Description</StructuredListCell>
{#if !$isMobile}
<StructuredListCell head>Lessons</StructuredListCell>
<StructuredListCell head>Students</StructuredListCell>
<StructuredListCell head>Published</StructuredListCell>
{/if}
<StructuredListCell head>{''}</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{#each courses as courseData}
<List
id={courseData.id}
title={courseData.title}
description={courseData.description}
isPublished={courseData.is_published}
totalLessons={courseData.total_lessons}
totalStudents={courseData.total_students}
/>
{/each}
</StructuredListBody>
</StructuredList>
{:else}
{#each courses as courseData}
{#key courseData.id}
<Card
showContextMenu
id={courseData.id}
bannerImage={courseData.logo || '/images/classroomio-course-img-template.jpg'}
title={courseData.title}
description={courseData.description}
isPublished={courseData.is_published}
cost={courseData.cost}
currency={courseData.currency}
totalLessons={courseData.total_lessons}
totalStudents={courseData.total_students}
isLMS={$globalStore.isOrgSite}
progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)}
/>
{/key}
{/each}
<section class={`${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} `}>
{#each courses as courseData}
{#key courseData.id}
<Card
id={courseData.id}
bannerImage={courseData.logo || '/images/classroomio-course-img-template.jpg'}
title={courseData.title}
description={courseData.description}
isPublished={courseData.is_published}
cost={courseData.cost}
currency={courseData.currency}
totalLessons={courseData.total_lessons}
totalStudents={courseData.total_students}
isLMS={$globalStore.isOrgSite}
progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)}
/>
{/key}
{/each}
</section>
{/if}
</div>
{#if !$courseMetaDeta.isLoading && !courses.length}