feat: migrate course UI from supabase (#615)

* chore: fix storybook build * chore: implement theming * community list not showing properly * refactor: migrate Chip component to @cio/ui/custom/chip - Updated imports for the Chip component across multiple files to use the new location in the @cio/ui package. - Replaced the previous Chip implementation with a new version that utilizes a Badge for better styling and functionality. - Adjusted related components to ensure consistent usage of the updated Chip component. * fix: align course sidebar design to match organization design (#611) * fix: align course sidebar design to match organization design * feat: add hideSearch prop to AppHeader and update sidebar layout --------- Co-authored-by: Rotimi Best <[email protected]> * refactor: replace PrimaryButton with Button component across multiple files - Updated various components to use the new Button component from @cio/ui/base/button instead of the deprecated PrimaryButton. - Ensured consistent button usage throughout the application for improved styling and functionality. - Removed the PrimaryButton component and its associated constants from the codebase. * refactor: standardize button and input usage across components - Replaced instances of deprecated components such as TextField, TextArea, and IconButton with their updated counterparts (InputField, TextareaField, and updated IconButton). - Ensured consistent event handling by changing `onClick` to `onclick` for better alignment with Svelte's event binding conventions. - Removed unused components and streamlined imports to enhance code maintainability and readability. * chore: themeing, course card, use $features * refactor: centralize UI components and update modal implementations - Refactored various components to centralize UI elements, improving discoverability and maintainability. - Replaced deprecated modal components with the new Dialog component for consistent modal behavior across the application. - Removed unused components and streamlined imports to enhance code clarity and reduce complexity. * feat: add new documentation and refactor org and lms UI components - Introduced new documentation files for Auth Flow, Breadcrumbs Refactoring, Page and Route Creation, and Route Page Setup to enhance developer onboarding and reference. - Refactored various UI components, including the Course Sidebar and Lesson Modal, to improve layout and functionality. - Removed deprecated components and streamlined imports for better maintainability. - Updated translations across multiple languages to ensure consistency in user experience. * refactor: update UI components and improve styling consistency - Refactored various components to enhance styling consistency, including updates to button and text color classes. - Removed deprecated components and streamlined imports for better maintainability. - Replaced instances of PageBody with a more flexible Page component structure across multiple routes. - Updated translations and UI elements to align with the new design system. - Deleted unused components to reduce code complexity and improve clarity. * update output.css --------- Co-authored-by: Abdulmuizz Hamzat <[email protected]>
2025-12-22 02:36:48 +01:00
parent e6a3cf9332
commit 9fb6c7cbaa
401 changed files with 10489 additions and 11679 deletions
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { onMount, untrack } from 'svelte';
+  import type { Course } from '$lib/utils/types';
+  import { profile } from '$lib/utils/store/user';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { t } from '$lib/utils/functions/translations';
+  import { CoursesPage } from '$features/course/pages';
+  import { courseMetaDeta } from '$features/course/utils/store';
+  import { fetchExploreCourses } from '$lib/utils/services/courses';
+
+  let searchValue = $state('');
+  let selectedId: string | undefined = $state('');
+  let hasFetched = false;
+  let exploreCourseList: Course[] = $state([]);
+
+  const filteredExploreCourses: Course[] = $derived(filterCourses(searchValue, selectedId || '', exploreCourseList));
+
+  function getCourses(userId?: string, orgId?: string) {
+    if (hasFetched || !userId || !orgId) {
+      return;
+    }
+
+    untrack(async () => {
+      $courseMetaDeta.isLoading = true;
+
+      const coursesResult = await fetchExploreCourses(userId, orgId);
+
+      $courseMetaDeta.isLoading = false;
+
+      if (!coursesResult) return;
+
+      exploreCourseList = coursesResult.allCourses;
+      hasFetched = true;
+    });
+  }
+
+  function filterCourses(searchValue: string, _selectedId: string | null, courses: Course[]) {
+    if (_selectedId) {
+      localStorage.setItem('classroomio_filter_course_key', _selectedId);
+    }
+
+    const coursesFiltered = courses.filter((course) => {
+      if (!searchValue || course.title.toLowerCase().includes(searchValue.toLowerCase())) {
+        return true;
+      }
+
+      return false;
+    });
+
+    if (_selectedId === '0') {
+      return coursesFiltered.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+    } else if (_selectedId === '1') {
+      return coursesFiltered.sort((a, b) => (b.total_lessons ?? 0) - (a.total_lessons ?? 0));
+    }
+
+    return coursesFiltered;
+  }
+
+  onMount(() => {
+    const courseView = localStorage.getItem('courseView') as 'grid' | 'list' | null;
+
+    if (courseView) {
+      $courseMetaDeta.view = courseView;
+    }
+
+    selectedId = localStorage.getItem('classroomio_filter_course_key') || '0';
+  });
+
+  $effect(() => {
+    getCourses($profile.id, $currentOrg.id);
+  });
+</script>
+
+<CoursesPage
+  courses={filteredExploreCourses}
+  emptyTitle={$t('explore.empty_heading')}
+  emptyDescription={$t('explore.empty_description')}
+  isExplore={true}
+  isLMS={true}
+  bind:searchValue
+  bind:selectedId
+/>