classroomio/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte

<script lang="ts">
  import { page } from '$app/stores';
  import PageNav from '$lib/components/PageNav/index.svelte';
  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
  import Box from '$lib/components/Box/index.svelte';
  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
  import {
    lessons,
    handleDelete,
    lessonSections
  } from '$lib/components/Course/components/Lesson/store/lessons';
  import PageBody from '$lib/components/PageBody/index.svelte';
  import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
  import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
  import { course } from '$lib/components/Course/store';
  import type { Lesson } from '$lib/utils/types';
  import { t } from '$lib/utils/functions/translations';
  import { goto } from '$app/navigation';
  import { COURSE_VERSION } from '$lib/utils/types';
  import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
  import { profile } from '$lib/utils/store/user.js';
  import LessonList from '$lib/components/Course/components/Lesson/LessonList.svelte';
  import LessonSectionList from '$lib/components/Course/components/Lesson/LessonSectionList.svelte';
  import NewLessonModal from '$lib/components/Course/components/Lesson/NewLessonModal.svelte';

  export let data;

  const query = new URLSearchParams($page.url.search);

  let lessonEditing: string | undefined;
  let lessonToDelete: Lesson | undefined;
  let openDeleteModal: boolean = false;
  let isFetching: boolean = false;
  let reorder = false;

  function addLesson() {
    $handleAddLessonWidget.open = true;

    $handleAddLessonWidget.isSection = $course.version === COURSE_VERSION.V2;
  }

  function hasUserCompletedLesson(completion) {
    return completion?.find((c) => c.profile_id === $profile.id);
  }

  function findFirstIncompleteLesson() {
    return $lessons.find(
      (lesson) => !hasUserCompletedLesson(lesson.lesson_completion) && lesson.is_unlocked === true
    );
  }

  function onNextQuery(lessons) {
    if (!isFetching && lessons.length > 0) {
      const incompleteLesson = findFirstIncompleteLesson();

      if (incompleteLesson) {
        goto(`/courses/${data.courseId}/lessons/${incompleteLesson.id}`);
      } else {
        goto(`/courses/${data.courseId}/lessons`);
      }
    }
  }

  $: shouldGoToNextLesson = query.get('next') === 'true';
  $: !isFetching && shouldGoToNextLesson && onNextQuery($lessons);
  $: lessonsLength =
    $course.version === COURSE_VERSION.V1 ? $lessons.length : $lessonSections.length;
</script>

<NewLessonModal />

<DeleteLessonConfirmation
  bind:openDeleteModal
  deleteLesson={() => handleDelete(lessonToDelete?.id)}
/>

<CourseContainer bind:isFetching bind:courseId={data.courseId}>
  <PageNav title={$t('course.navItem.lessons.heading')}>
    <div slot="widget" class="flex w-full justify-end gap-2">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
        <PrimaryButton
          label={$t('course.navItem.lessons.add_lesson.button_title')}
          onClick={addLesson}
          isDisabled={!!lessonEditing}
        />
        {#if $course.version === COURSE_VERSION.V1}
          <PrimaryButton
            label={$t(
              `course.navItem.lessons.add_lesson.${reorder ? 'end_reorder' : 'start_reorder'}`
            )}
            variant={VARIANTS.OUTLINED}
            onClick={() => (reorder = !reorder)}
            isDisabled={!!lessonEditing}
          />
        {/if}
      </RoleBasedSecurity>
    </div>
  </PageNav>

  <PageBody width="max-w-6xl" padding="p-0">
    {#if shouldGoToNextLesson}
      <Box className="w-full lg:w-11/12 lg:px-4 m-auto">
        <div class="flex flex-col items-center justify-between">
          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
          <h2 class="my-1.5 text-xl font-normal">{$t('course.navItem.lessons.no_lesson')}</h2>
          <p class="text-center text-sm text-slate-500">
            {$t('course.navItem.lessons.share_your_knowledge')}
          </p>
        </div>
      </Box>
    {:else if lessonsLength > 0}
      {#if reorder}
        <p class="text-gray-400 text-center dark:text-white italic text-xs">
          {$t('course.navItem.lessons.drag')}
        </p>
      {/if}

      {#if $course.version === COURSE_VERSION.V1}
        <LessonList {reorder} {lessonEditing} bind:lessonToDelete bind:openDeleteModal />
      {:else if $course.version === COURSE_VERSION.V2}
        <LessonSectionList {lessonEditing} />
      {/if}
    {:else}
      <Box className="w-full lg:w-11/12 lg:px-4 m-auto">
        <div class="flex justify-between flex-col items-center">
          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
          <h2 class="text-xl my-1.5 font-normal">{$t('course.navItem.lessons.body_header')}</h2>
          <p class="text-sm text-center text-slate-500">
            {$t('course.navItem.lessons.body_content')}
          </p>
        </div>
      </Box>
    {/if}
  </PageBody>
</CourseContainer>