feat: students should move to next lesson on click go to lesson (#230)

* completion * completion * PR Fixes * PR Fixes * fix: progress bug on home page * chore: fix lesson completion issue --------- Co-authored-by: Rotimi Best <[email protected]>
2024-04-16 08:51:53 +01:00
parent db38756cbf
commit 1277bcbfc6
7 changed files with 81 additions and 27 deletions
@@ -9,6 +9,7 @@
  import { profile } from '$lib/utils/store/user';
  import { fetchCourse } from '$lib/utils/services/courses';
  import { globalStore } from '$lib/utils/store/app';
+  import { lessons } from '../Course/components/Lesson/store/lessons';

  export let courseId = '';
  export let path = '';
@@ -23,6 +24,7 @@

    isFetching = true;
    course.set(defaultCourse);
+    lessons.set([]);

    const { data: _data } = await fetchCourse(courseId);

@@ -66,7 +66,7 @@
 <a
  rel="prefetch"
  bind:this={target}
-  href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
+  href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`}
  class="text-black border border-gray dark:border-neutral-600 rounded w-full max-w-[320px] relative hover:scale-95 transition-all ease-in-out"
 >
  <div class="p-4">
@@ -122,7 +122,7 @@

    {#if isLMS}
      <PrimaryButton
-        label={'Continue Course'}
+        label="Continue Course"
        variant={VARIANTS.OUTLINED}
        className="rounded-none text-primary-600"
      />
@@ -7,7 +7,7 @@

  const gotoCourse = (id: string | undefined) => {
    if (!id) return;
-    goto(`/courses/${id}`);
+    goto(`/courses/${id}/lessons?next=true`);
  };
 </script>

@@ -41,7 +41,9 @@
            </span>
            <div class="relative bg-[#EAEAEA] w-full h-1">
              <div
-                style="width:{course.progress_rate}%"
+                style="width: {Math.round(
+                  ((course?.progress_rate ?? 0) / (course?.total_lessons ?? 0)) * 100
+                ) || 0}%"
                class={`absolute top-0 left-0 bg-primary-700 h-full`}
              />
            </div>