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

<script>
  import { onMount } from 'svelte';
  import { page } from '$app/stores';
  import { dndzone } from 'svelte-dnd-action';
  import TimeIcon from 'carbon-icons-svelte/lib/Time.svelte';
  import EditIcon from 'carbon-icons-svelte/lib/Edit.svelte';
  import SaveIcon from 'carbon-icons-svelte/lib/Save.svelte';
  import PhoneIcon from 'carbon-icons-svelte/lib/Phone.svelte';
  import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
  import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
  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 PageBody from '$lib/components/PageBody/index.svelte';
  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
  import TextField from '$lib/components/Form/TextField.svelte';
  import IconButton from '$lib/components/IconButton/index.svelte';
  import Select from '$lib/components/Form/Select.svelte';
  import { fetchCourse, updateLesson } from '$lib/utils/services/courses';
  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
  import { profile } from '$lib/utils/store/user';
  import {
    lessons,
    handleAddLesson,
    handleSaveLesson,
    handleDelete
  } from '$lib/components/Course/components/Lesson/store/lessons';
  import { course, setCourse, group } from '$lib/components/Course/store';

  export let data;
  const { courseId } = data;

  let lessonEditing;
  let ref;
  let isStudent = true;

  const flipDurationMs = 300;

  function formatDate(date) {
    const d = new Date(date);

    const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
    const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d);
    const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);

    return `${ye}-${mo}-${da}`;
  }

  // TODO: CRUD of lessons
  function addLesson() {
    handleAddLesson();
    setTimeout(() => {
      lessonEditing = $lessons.length - 1;
      if (ref) {
        ref.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
          inline: 'nearest'
        });
      }
    }, 100);
  }

  function handleDndConsider(e) {
    $lessons = e.detail.items;
  }

  function handleDndFinalize(e) {
    const prevLessonsByOrder = $lessons.reduce((acc, l) => ({ ...acc, [l.id]: l.order }), {});
    $lessons = e.detail.items;

    // Only update the lesson order that changed
    e.detail.items.forEach((item, index) => {
      const order = index + 1;

      if (order !== prevLessonsByOrder[item.id]) {
        $lessons[index].order = order;
        updateLesson({ order }, item.id).then((update) =>
          console.log(`updated lesson order`, update)
        );
      }
    });
  }

  function getLessonOrder(id) {
    const index = $lessons.findIndex((lesson) => lesson.id === id);

    return index + 1;
  }

  onMount(async () => {
    if ($course.id) return;
    const { data: _data } = await fetchCourse(courseId);
    setCourse(_data);
  });

  $: {
    const user = $group.people.find((person) => person.profile_id === $profile.id);

    if (user) {
      isStudent = user.role_id === 3;
    }
  }
</script>

<CourseContainer bind:isStudent>
  <PageNav title="Lessons">
    <div slot="widget">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
        <PrimaryButton label="Add" onClick={addLesson} isDisabled={!!lessonEditing} />
      </RoleBasedSecurity>
    </div>
  </PageNav>

  <PageBody padding="p-0">
    <section
      class="w-full lg:w-11/12 py-3 px-3 lg:px-4 m-auto lesson-list"
      use:dndzone={{
        items: $lessons,
        flipDurationMs,
        dragDisabled: isStudent,
        dropTargetStyle: {
          border: '2px #1d4ed8 solid',
          'border-style': 'dashed'
        }
      }}
      on:consider={handleDndConsider}
      on:finalize={handleDndFinalize}
    >
      {#each $lessons as lesson (lesson.id)}
        <div
          bind:this={ref}
          class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mb-4 flex items-center hover:shadow-md shadow-xl transition delay-150 duration-300 ease-in-out dark:bg-gray-700"
        >
          <!-- Complete or Not complete icon -->
          <div class="absolute -left-6 -top-6 success">
            <IconButton
              disabled={isStudent}
              onClick={() => {
                lesson.is_complete = !lesson.is_complete;
                handleSaveLesson(lesson, $course.id);
              }}
              toolTipProps={isStudent
                ? {}
                : {
                    title: `Click to ${lesson.is_complete ? 'lock' : 'unlock'}`,
                    direction: 'right'
                  }}
            >
              {#if lesson.is_complete}
                <CheckmarkFilled24 class="carbon-icon" />
              {:else}
                <span class="text-2xl">🔒</span>
              {/if}
            </IconButton>
          </div>

          <RoleBasedSecurity allowedRoles={[1, 2]}>
            <!-- Edit/Save -->
            <div class="absolute -top-2 -right-2">
              {#if lessonEditing === lesson.id}
                <IconButton
                  onClick={() => {
                    lessonEditing = null;
                    handleSaveLesson(lesson, $course.id);
                  }}
                >
                  <SaveIcon size={24} class="carbon-icon" />
                </IconButton>
              {:else}
                <IconButton onClick={() => (lessonEditing = lesson.id)}>
                  <EditIcon size={24} class="carbon-icon" />
                </IconButton>
              {/if}
            </div>
          </RoleBasedSecurity>

          <div class="">
            <h3 class="dark:text-white text-3xl font-bold">
              {getLessonOrder(lesson.id)}.
            </h3>
          </div>
          <div class="ml-8 w-4/5">
            {#if lessonEditing === lesson.id}
              <TextField bind:value={lesson.title} autofocus={true} />
            {:else}
              <h3 class="dark:text-white text-2xl m-0 flex items-center">
                <a
                  href={isStudent && !lesson.is_complete
                    ? $page.url.pathname
                    : '/courses/' + $course.id + '/lessons/' + lesson.id}
                  class="dark:text-white hover:underline text-black {isStudent &&
                  !lesson.is_complete
                    ? 'cursor-not-allowed'
                    : ''}"
                >
                  {lesson.title}
                </a>
              </h3>
            {/if}
            <!-- <div class="flex items-center mb-2">
              <div class="flex items-center mr-2">
                {resources.map((r) => `${r.value} ${r.label}`).join(', ')}
              </div>
            </div> -->

            <div
              class="flex items-start justify-between flex-col lg:flex-row lg:items-center mt-6 w-full"
            >
              <div class="mb-3 lg:mb-0">
                {#if lessonEditing === lesson.id}
                  <Select bind:value={lesson.profile} options={$group.tutors} labelKey="fullname" />
                {:else if !lesson.profile}
                  <p class="dark:text-white ml-2 text-sm">No tutor added</p>
                {:else}
                  <a href="." class="flex items-center hover:underline">
                    <img
                      alt="Placeholder"
                      class="block rounded-full"
                      width="24"
                      height="20"
                      src={lesson.profile.avatar_url}
                    />
                    <p class="dark:text-white ml-2 text-sm">
                      {lesson.profile.fullname}
                    </p>
                  </a>
                {/if}
              </div>

              <div class="flex items-center mb-3 lg:mb-0">
                {#if lessonEditing === lesson.id}
                  <input
                    type="date"
                    name="lesson-date-picker"
                    class="p-2 rounded-md w-40"
                    value={formatDate(lesson.lesson_at)}
                    on:input={(e) => (lesson.lesson_at = e.target.value)}
                  />
                {:else}
                  <TimeIcon size={24} class="carbon-icon" />
                  <p class="dark:text-white text-md ml-2">
                    {new Date(lesson.lesson_at).toDateString()}
                  </p>
                {/if}
              </div>

              <div class="flex items-center mb-3 lg:mb-0">
                {#if lessonEditing === lesson.id}
                  <TextField
                    bind:value={lesson.call_url}
                    autofocus={true}
                    className="w-40"
                    placeholder="https://meet.google.com/mga-dsjs-fmb"
                  />
                {:else}
                  <PhoneIcon size={24} class="carbon-icon" />
                  <a class="text-md ml-2" href={lesson.call_url || '#'} target="_blank">
                    {lesson.call_url ? 'Join lesson' : 'No link'}
                  </a>
                {/if}
              </div>
            </div>
          </div>

          <RoleBasedSecurity allowedRoles={[1, 2]}>
            <div class="absolute bottom-2 right-0">
              <IconButton onClick={handleDelete(lesson.id)}>
                <TrashCanIcon size={24} class="carbon-icon" />
              </IconButton>
            </div>
          </RoleBasedSecurity>
        </div>
      {:else}
        <Box>
          <div class="flex justify-between flex-col items-center w-96">
            <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
            <h2 class="text-xl my-1.5 font-normal">No lessons yet</h2>
            <p class="text-sm text-center text-slate-500">
              Share your knowledge with the world by creating engaging lessons. Start by clicking on
              the New Lesson button.
            </p>
          </div>
        </Box>
      {/each}
    </section>
  </PageBody>
</CourseContainer>

<style>
  .lesson-list {
    overflow-y: auto;
    height: 84vh;
  }
  .group {
    min-height: 170px;
  }
</style>