CLASSROOMIO-T-90:Implemented the course settings

only update order when lesson id changes CLASSROOMIO-T-90: Update banner image on course card CLASSROOMIO-T-90: Fix merge conflicts Merge branch 'main' into CLASSROOMIO-T-90 CLASSROOMIO-T-90:removed unused values and console log in the Course Settings CLASSROOMIO-T-90:removed unused import in the Course Settings CLASSROOMIO-T-90:fixed bugs in the Course Settings Merge branch 'main' into CLASSROOMIO-T-90 CLASSROOMIO-T-90:Implemented the Course Settings CLASSROOMIO-T-90:Worked on the course settings Merge branch 'main' into CLASSROOMIO-T-90 CLASSROOMIO-T-90:Fixed the landing page issue CLASSROOMIO-T-146:Made updates to the code following the reviews CLASSROOMIO-T-146:Made updates to the Z-Index Merge branch 'main' into CLASSROOMIO-T-146 Merge branch 'main' into CLASSROOMIO-T-146 CLASSROOMIO-T-146:Made the course page responsive CLASSROOMIO-T-146:working on the course page responsiveness Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-146:Making the course page responsive CLASSROOMIO-T-145: All done and ready CLASSROOMIO-T-145: All done and ready CLASSROOMIO-T-145: Fixed the Z-index issue Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-145: Finished implementing the responsive design for the Main dashboard and LMS dashboard Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-144:Updating the dashboard responsiveness ooth for LMS and the Main dashboard CLASSROOMIO-T-144:Updated the dashboard responsiveness ooth for LMS and the Main dashboard Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-145:Made the LMS dashboard responsive Co-authored-by: Ifeanyi Nwosu <[email protected]> Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-76 Merged-by: Best Admin <[email protected]>
2023-09-24 13:20:04 +00:00
parent e44353ac0a
commit 103a2eda7b
29 changed files with 675 additions and 217 deletions
@@ -5,6 +5,7 @@
  interface Data {
    course: Course;
  }
+
  export let data: Data;

  let courseData: Course;
@@ -2,7 +2,6 @@
  import { fly } from 'svelte/transition';
  import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
  import Editor from '$lib/components/CourseLandingPage/components/Editor/index.svelte';
-  import { isMobile } from '$lib/utils/store/useMobile';
  import { profile } from '$lib/utils/store/user';
  import { setCourse, course } from '$lib/components/Course/store';
  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
@@ -30,7 +29,7 @@
 </script>

 <div
-  class="absolute inset-0 z-50 bg-white"
+  class="absolute flex inset-0 z-50 bg-white"
  in:fly={{ y: 500, duration: 500 }}
  out:fly={{ y: 500, duration: 500 }}
 >
@@ -45,6 +44,7 @@
    flex-grow: 1;
    width: 100%;
    height: 100%;
+    overflow-x: hidden;
    overflow-y: auto;
  }
 </style>
@@ -26,6 +26,7 @@
  import { currentOrg } from '$lib/utils/store/org';
  import { snackbarStore } from '$lib/components/Snackbar/store';
  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
+  import { FaceSatisfied } from 'carbon-icons-svelte';

  export let data;

@@ -55,7 +56,7 @@
    if (!$course.id) {
      const { data: _data } = await fetchCourse(data.courseId);

-      lessonData = _data.lessons.find((lesson = { id: '' }) => lesson.id === lessonId);
+      lessonData = _data?.lessons.find((lesson = { id: '' }) => lesson.id === lessonId);
      setCourse(_data);
    } else if (prevLessonId !== lessonId) {
      const lesson = await fetchLesson(lessonId);
@@ -163,7 +164,7 @@
  }
 </script>

-<CourseContainer {isFetching} {path} isExercisePage={!data.isMaterialsTabActive && data.exerciseId}>
+<CourseContainer {path} isExercisePage={!data.isMaterialsTabActive && data.exerciseId}>
  <PageNav
    navItems={[
      {
@@ -182,7 +183,7 @@
    <svelte:fragment slot="widget">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
        {#if data.isMaterialsTabActive}
-          <div class="lg:hidden">
+          <div class="tab">
            <IconButton onClick={toggleApps} buttonClassName="">
              <OverflowMenuVertical size={24} />
            </IconButton>
@@ -190,7 +191,7 @@
          <div
            class={`flex-row ${
              $apps.dropdown && $apps.open
-                ? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-black p-3 lg:p-0'
+                ? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-slate-800 p-3 lg:p-0'
                : 'hidden'
            } lg:flex items-center`}
          >
@@ -221,7 +222,13 @@
  {#if !data.isMaterialsTabActive}
    <Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
  {:else if !!data.lessonId}
-    <PageBody>
+    <PageBody
+      onClick={() => {
+        $apps.open = false;
+        $apps.dropdown = false;
+      }}
+      width="lg:w-full xl:w-11/12"
+    >
      <Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />

      <div class="w-full flex flex-row-reverse mt-10">
@@ -239,3 +246,11 @@
    </PageBody>
  {/if}
 </CourseContainer>
+
+<style>
+  @media screen and (min-width: 1023px) {
+    .tab {
+      display: none;
+    }
+  }
+</style>
@@ -0,0 +1,5 @@
+export const load = ({ params = { id: '' } }) => {
+  return {
+    courseId: params.id
+  };
+};
@@ -0,0 +1,27 @@
+<script>
+  import { course, setCourse } from '$lib/components/Course/store';
+  import { fetchCourse } from '$lib/utils/services/courses';
+  import { onMount } from 'svelte';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import PageNav from '$lib/components/PageNav/index.svelte';
+  import PageBody from '$lib/components/PageBody/index.svelte';
+  import Settings from '$lib/components/Course/components/Settings/index.svelte';
+
+  export let data;
+
+  const { courseId } = data;
+  let isStudent = false;
+
+  onMount(async () => {
+    if ($course.id) return;
+    const { data } = await fetchCourse(courseId);
+    setCourse(data);
+  });
+</script>
+
+<CourseContainer bind:isStudent>
+  <PageNav title="Settings" />
+  <PageBody>
+    <Settings />
+  </PageBody>
+</CourseContainer>
@@ -20,11 +20,8 @@
  import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';

  export let data;
-  const { orgName } = data;

-  function createCourse() {
-    goto(`/org/${orgName}/courses?create=true`);
-  }
+  const { orgName } = data;

  const theme = {
    calendar: {
@@ -93,6 +90,10 @@
    }
  ];

+  function createCourse() {
+    goto(`/org/${orgName}/courses?create=true`);
+  }
+
  const addDotsToCalendar = (currentMonthIndexInRenderedMonth: number) =>
    setTimeout(() => {
      if (!calendar) calendar = document.getElementById('calendar');