Add sorting and filtering

src/lib/components/Courses/components/Card/index.svelte

@@ -50,47 +50,43 @@
 <a
   rel="prefetch"
   href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
-  class=" text-black w-full"
+  class="text-black border border-gray rounded w-full max-w-[320px] relative hover:shadow-lg transition-all ease-in-out"
 >
-  <div
+  <div class="p-4">
-    class="border border-gray rounded w-full max-w-[350px] relative hover:shadow-lg transition-all ease-in-out"
+    <div class=" mb-5">
-  >
+      <ImageLoader
-    <div class="p-4">
+        src={bannerImage}
-      <div class=" mb-5">
+        alt="Course Logo"
-        <ImageLoader
+        class="h-[200px] w-full rounded dark:border dark:border-white"
-          src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'}
+      >
-          alt="Course Logo"
+        <svelte:fragment slot="loading">
-          class="h-[200px] w-full rounded dark:border dark:border-white"
+          <SkeletonPlaceholder style="width: 100%; height: 200px;" />
-        >
+        </svelte:fragment>
-          <svelte:fragment slot="loading">
+        <svelte:fragment slot="error">An error occurred.</svelte:fragment>
-            <SkeletonPlaceholder style="width: 100%; height: 200px;" />
+      </ImageLoader>
-          </svelte:fragment>
-          <svelte:fragment slot="error">An error occurred.</svelte:fragment>
-        </ImageLoader>
-      </div>
-
-      <h3 class="text-xl dark:text-white title">{title}</h3>
-      <p class="mt-2 text-sm text-gray-500 dark:text-gray-300 description">
-        {description}
-      </p>
     </div>
 
-    <div class="px-4 border border-gray border-b-0 border-l-0 border-r-0 footer">
+    <h3 class="text-xl dark:text-white title">{title}</h3>
-      <p class="text-xs pt-2 pl-2 dark:text-white">{totalLessons} lessons</p>
+    <p class="mt-2 text-sm text-gray-500 dark:text-gray-300 description">
-      <p class="text-xs py-2">
+      {description}
-        {#if isOnLandingPage}
+    </p>
-          <span class="px-2">{!cost ? 'Free' : formatter.format(cost)}</span>
+  </div>
-        {:else}
+
-          <Tag type={isPublished ? 'green' : 'cool-gray'}>
+  <div class="px-4 border border-gray border-b-0 border-l-0 border-r-0 footer">
-            {#if isPublished}
+    <p class="text-xs pt-2 pl-2 dark:text-white">{totalLessons} lessons</p>
-              Published
+    <p class="text-xs py-2">
-            {:else}
+      {#if isOnLandingPage}
-              Unpublished
+        <span class="px-2">{!cost ? 'Free' : formatter.format(cost)}</span>
-            {/if}
+      {:else}
-          </Tag>
+        <Tag type={isPublished ? 'green' : 'cool-gray'}>
-        {/if}
+          {#if isPublished}
-      </p>
+            Published
-    </div>
+          {:else}
+            Unpublished
+          {/if}
+        </Tag>
+      {/if}
+    </p>
   </div>
 </a>
 

src/lib/components/Courses/index.svelte

@@ -1,38 +1,41 @@
-<script>
+<script lang="ts">
   import Box from '../Box/index.svelte';
   import Card from './components/Card/index.svelte';
   import CardLoader from './components/Card/Loader.svelte';
   import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
   import CopyCourseModal from './components/CopyCourseModal/index.svelte';
-  import { courses, courseMetaDeta } from './store';
+  import { courseMetaDeta } from './store';
+  import type { Course } from '$lib/utils/types';
+
+  export let courses: Course[] = [];
 </script>
 
 <CopyCourseModal />
 
-<div
+<div class={`w-full ${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} my-4 mx-auto`}>
-  class={`w-full ${$courseMetaDeta.isLoading || $courses ? 'cards-container' : ''} my-4 mx-auto`}
->
   {#if $courseMetaDeta.isLoading}
     <CardLoader />
     <CardLoader />
     <CardLoader />
   {:else}
-    {#each $courses as courseData}
+    {#each courses as courseData}
-      <Card
+      {#key courseData.id}
-        id={courseData.id}
+        <Card
-        bannerImage={courseData.logo}
+          id={courseData.id}
-        title={courseData.title}
+          bannerImage={courseData.logo || '/images/classroomio-course-img-template.jpg'}
-        description={courseData.description}
+          title={courseData.title}
-        role_id={courseData.role_id}
+          description={courseData.description}
-        isPublished={courseData.is_published}
+          role_id={courseData.role_id}
-        cost={courseData.cost}
+          isPublished={courseData.is_published}
-        currency={courseData.currency}
+          cost={courseData.cost}
-        totalLessons={courseData.total_lessons}
+          currency={courseData.currency}
-      />
+          totalLessons={courseData.total_lessons}
+        />
+      {/key}
     {/each}
   {/if}
 </div>
-{#if !$courseMetaDeta.isLoading && !$courses.length}
+{#if !$courseMetaDeta.isLoading && !courses.length}
   <Box className="w-full">
     <CoursesEmptyIcon />
     <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>

src/lib/utils/types/index.ts

@@ -91,8 +91,8 @@ export interface Course {
   description: string; // type unknown;
   overview?: any; // type unknown;
   id?: string /* primary key */;
-  created_at?: string;
+  created_at: string;
-  updated_at?: string;
+  updated_at: string;
   group_id?: string /* foreign key to group.id */;
   is_template?: boolean;
   organization_id?: string /* foreign key to organization.id */;

src/routes/org/[slug]/courses/+page.svelte

@@ -1,5 +1,6 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
+  import { Search, Dropdown } from 'carbon-components-svelte';
   import { page } from '$app/stores';
   import { profile } from '$lib/utils/store/user';
   import { fetchCourses } from '$lib/components/Courses/api';
@@ -11,9 +12,14 @@
   import { Add } from 'carbon-icons-svelte';
   import { isMobile } from '$lib/utils/store/useMobile';
   import { isOrgAdmin } from '$lib/utils/store/org';
+  import type { Course } from '$lib/utils/types';
+  import { browser } from '$app/environment';
 
   export let data;
   let { allCourses, cantFetch } = data;
+  let searchValue = '';
+  let selectedId: string;
+  let filteredCourses: Course[];
 
   const urlParams = new URLSearchParams($page.url.search);
 
@@ -21,7 +27,7 @@
     $createCourseModal.open = true;
   }
 
-  async function getCourses(userId, orgId) {
+  async function getCourses(userId: string | null, orgId: string) {
     if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length && orgId) {
       $courseMetaDeta.isLoading = true;
 
@@ -36,10 +42,41 @@
     }
   }
 
+  function filterCourses(searchValue: string, _selectedId: string, courses: Course[]) {
+    if (browser) {
+      if (!selectedId) {
+        selectedId = localStorage.getItem('classroomio_filter_course_key') || '0';
+      } else {
+        localStorage.setItem('classroomio_filter_course_key', _selectedId);
+      }
+    }
+
+    filteredCourses = courses.filter((course) => {
+      if (!searchValue || course.title.toLowerCase().includes(searchValue)) {
+        return true;
+      }
+
+      return false;
+    });
+
+    if (_selectedId === '0') {
+      filteredCourses = filteredCourses.sort(
+        (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+      );
+    } else if (_selectedId === '1') {
+      filteredCourses = filteredCourses.sort((a, b) => b.is_published - a.is_published);
+    } else if (_selectedId === '2') {
+      filteredCourses = filteredCourses.sort((a, b) => b.total_lessons - a.total_lessons);
+    }
+
+    console.log('filteredCourses', filteredCourses);
+  }
+
   onMount(() => {
     courses.set(allCourses);
   });
 
+  $: filterCourses(searchValue, selectedId, $courses);
   $: getCourses($profile.id, $currentOrg.id);
 </script>
 
@@ -49,7 +86,7 @@
 
 <section class="w-full md:max-w-6xl md:mx-auto">
   <div class="py-2 md:py-10 px-2 md:px-5">
-    <div class="flex items-center justify-between mb-10">
+    <div class="flex items-center justify-between mb-5">
       <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Courses</h1>
       {#if $isMobile}
         <PrimaryButton isDisabled={!$isOrgAdmin} onClick={() => ($createCourseModal.open = true)}>
@@ -63,9 +100,35 @@
         />
       {/if}
     </div>
+    <div class="flex flex-row-reverse mb-5">
+      <div class="flex items-end justify-start">
+        <Search
+          placeholder="Find course"
+          bind:value={searchValue}
+          searchClass="mr-2"
+          class=" bg-gray-100 dark:bg-neutral-800"
+        />
+        <Dropdown
+          class="h-full"
+          bind:selectedId
+          items={[
+            { id: '0', text: 'Date Created' },
+            { id: '1', text: 'Published' },
+            { id: '2', text: 'Lessons' }
+          ]}
+        />
+      </div>
+    </div>
 
     <NewCourseModal />
 
-    <Courses />
+    <Courses bind:courses={filteredCourses} />
   </div>
 </section>
+
+<style>
+  :global(.bx--dropdown) {
+    max-height: unset;
+    height: 100%;
+  }
+</style>