feat: customize the LMS from dashboard (#304)

* Done with the customization of the LMS task * generated custom_lms migration file * updated the migration file * copy improvements * update wording * made updates based on reviews,i hope i didnt miss anything * updated the translations and migration files * refactoring * disabled improvements for apps * more improvements * more custom improvements * pr refactoring --------- Co-authored-by: Rotimi Best <best@classroomio.com>
2024-05-17 01:28:59 +01:00
parent 78db68fa51
commit 73eb0ad4b1
30 changed files with 1013 additions and 200 deletions
@@ -28,7 +28,7 @@
  import { getOrganizations } from '$lib/utils/services/org';
  import { toggleBodyByMode } from '$lib/utils/functions/app';
  import { globalStore } from '$lib/utils/store/app';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
  import { setTheme } from '$lib/utils/functions/theme';
  import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
  import shouldRedirectOnAuth from '$lib/utils/functions/routes/shouldRedirectOnAuth';
@@ -38,6 +38,7 @@
  import { handleLocaleChange } from '$lib/utils/functions/translations';

  import '../app.postcss';
+  import { ROLE } from '$lib/utils/constants/roles';

  export let data;

@@ -175,6 +176,8 @@

      const orgRes = await getOrganizations(profileData.id, data.isOrgSite, data.orgSiteName);

+      const isStudentAccount = parseInt(orgRes.currentOrg.role_id) === ROLE.STUDENT;
+
      // student redirect
      if (data.isOrgSite) {
        if (params.has('redirect')) {
@@ -183,8 +186,16 @@
          goto('/lms');
        }
      } else {
-        // Not on invite page or no org, go to onboarding
-        if (isEmpty(orgRes.orgs) && !path.includes('invite')) {
+        if (isStudentAccount) {
+          // Check if the student logged into the dashboard.
+          console.log('Student logged into dashboard');
+          if (dev) {
+            goto('/lms');
+          } else {
+            window.location.replace(`${$currentOrgDomain}/lms`);
+          }
+        } else if (isEmpty(orgRes.orgs) && !path.includes('invite')) {
+          // Not on invite page or no org, go to onboarding
          goto(ROUTE.ONBOARDING);
        } else if (params.has('redirect')) {
          goto(params.get('redirect') || '');
@@ -31,6 +31,8 @@
  } from '$lib/utils/services/notification/notification';
  import NewsFeedLoader from '$lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte';
  import { t } from '$lib/utils/functions/translations.js';
+  import { currentOrg } from '$lib/utils/store/org.js';
+  import { redirectToLesson } from '$lib/utils/redirect.js';

  export let data;

@@ -221,6 +223,7 @@
    };
  }

+  $: redirectToLesson($currentOrg?.customization?.course?.newsfeed, data.courseId);
  $: initNewsFeed(data.courseId);

  $: setAuthor($group, $profile.id);
@@ -228,70 +231,72 @@
  $: $newsFeed = $newsFeed.sort((a, b) => Number(b.isPinned) - Number(a.isPinned));
 </script>

-<CourseContainer bind:courseId={data.courseId}>
-  <PageNav title={$t('course.navItem.news_feed.heading')} disableSticky={true}>
-    <slot:fragment slot="widget">
+<RoleBasedSecurity allowedRoles={[1, 2, $currentOrg?.customization?.course?.newsfeed ? 3 : 0]}>
+  <CourseContainer bind:courseId={data.courseId}>
+    <PageNav title={$t('course.navItem.news_feed.heading')} disableSticky={true}>
+      <slot:fragment slot="widget">
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
+          <PrimaryButton
+            className="mr-2"
+            label={$t('course.navItem.news_feed.heading_button.title')}
+            onClick={() => ($isNewFeedModal.open = true)}
+          />
+        </RoleBasedSecurity>
+      </slot:fragment>
+    </PageNav>
+
+    <PageBody width="max-w-4xl px-3">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
-          className="mr-2"
-          label={$t('course.navItem.news_feed.heading_button.title')}
-          onClick={() => ($isNewFeedModal.open = true)}
-        />
-      </RoleBasedSecurity>
-    </slot:fragment>
-  </PageNav>
-
-  <PageBody width="max-w-4xl px-3">
-    <RoleBasedSecurity allowedRoles={[1, 2]}>
-      <NewFeedModal
-        courseId={data.courseId}
-        {author}
-        bind:edit
-        bind:editFeed
-        onSave={(newFeed) => {
-          $newsFeed = [newFeed, ...$newsFeed];
-        }}
-        {onEdit}
-      />
-    </RoleBasedSecurity>
-    {#if isLoading}
-      <div>
-        <NewsFeedLoader />
-        <NewsFeedLoader />
-        <NewsFeedLoader />
-      </div>
-    {:else if !$newsFeed.length}
-      <Box>
-        <div class="flex justify-between flex-col items-center w-[90%] md: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">{$t('course.navItem.news_feed.body_header')}</h2>
-          <p class="text-sm text-center text-slate-500">
-            {$t('course.navItem.news_feed.body_content')}
-          </p>
-        </div>
-      </Box>
-    {:else}
-      {#each $newsFeed as feed}
-        {#if feed.isPinned}
-          <div class="flex items-center gap-2 mb-3">
-            <PinFilled size={16} />
-
-            <p class="text-sm">{$t('course.navItem.news_feed.pinned')}</p>
-          </div>
-        {/if}
-        <NewsFeedCard
-          {feed}
-          {deleteFeed}
-          {addNewComment}
-          {deleteComment}
-          {addNewReaction}
-          {onPin}
+        <NewFeedModal
+          courseId={data.courseId}
          {author}
          bind:edit
          bind:editFeed
-          isActive={feedId === feed.id}
+          onSave={(newFeed) => {
+            $newsFeed = [newFeed, ...$newsFeed];
+          }}
+          {onEdit}
        />
-      {/each}
-    {/if}
-  </PageBody>
-</CourseContainer>
+      </RoleBasedSecurity>
+      {#if isLoading}
+        <div>
+          <NewsFeedLoader />
+          <NewsFeedLoader />
+          <NewsFeedLoader />
+        </div>
+      {:else if !$newsFeed.length}
+        <Box>
+          <div class="flex justify-between flex-col items-center w-[90%] md: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">{$t('course.navItem.news_feed.body_header')}</h2>
+            <p class="text-sm text-center text-slate-500">
+              {$t('course.navItem.news_feed.body_content')}
+            </p>
+          </div>
+        </Box>
+      {:else}
+        {#each $newsFeed as feed}
+          {#if feed.isPinned}
+            <div class="flex items-center gap-2 mb-3">
+              <PinFilled size={16} />
+
+              <p class="text-sm">{$t('course.navItem.news_feed.pinned')}</p>
+            </div>
+          {/if}
+          <NewsFeedCard
+            {feed}
+            {deleteFeed}
+            {addNewComment}
+            {deleteComment}
+            {addNewReaction}
+            {onPin}
+            {author}
+            bind:edit
+            bind:editFeed
+            isActive={feedId === feed.id}
+          />
+        {/each}
+      {/if}
+    </PageBody>
+  </CourseContainer>
+</RoleBasedSecurity>
@@ -165,7 +165,7 @@
      >
        {#each $lessons as lesson (lesson.id)}
          <div
-            class="relative m-auto mb-4 flex max-w-xl items-center rounded-md border-2 border-gray-200 dark:border-neutral-600 p-5 dark:border-neutral-700 dark:bg-neutral-800"
+            class="relative m-auto mb-4 flex max-w-xl items-center rounded-md border-2 border-gray-200 dark:border-neutral-600 p-5 dark:bg-neutral-800"
          >
            <!-- Number Chip -->
            <div class="mr-5">
@@ -231,6 +231,12 @@
  }

  function handleAppClick(appName: string) {
+    if ($apps.selectedApp === appName) {
+      $apps.selectedApp = undefined;
+      $apps.open = false;
+      return;
+    }
+
    $apps.selectedApp = appName;
    $apps.open = true;
  }
@@ -345,7 +351,7 @@
        {isStudent}
      />

-      {#if isStudent}
+      <!-- {#if isStudent}
        <div class="w-full hidden lg:flex flex-row-reverse mt-10">
          <PrimaryButton
            onClick={() => markLessonComplete(data.lessonId)}
@@ -365,11 +371,11 @@
              : $t('course.navItem.lessons.complete')}
          </PrimaryButton>
        </div>
-      {/if}
+      {/if} -->
    </PageBody>
  {/if}
  <!-- Mobile Navigation -->
-  <div class="sticky bottom-5 flex items-center justify-center lg:hidden">
+  <div class="sticky bottom-5 flex items-center justify-center">
    <div
      class="flex items-center gap-2 w-fit rounded-full shadow-xl bg-gray-100 dark:bg-neutral-700 px-5 py-1"
    >
@@ -390,8 +396,9 @@
        </button>
      {/if}
      <button
-        class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
+        class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center disabled:opacity-10 disabled:cursor-not-allowed"
        on:click={() => handleAppClick(APPS_CONSTANTS.APPS.COMMENTS)}
+        disabled={isStudent && !$currentOrg.customization.apps.comments}
      >
        <SendAlt size={24} class="carbon-icon" />
        <span class="ml-1">{$lesson.totalComments}</span>
@@ -3,6 +3,7 @@
  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 RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
  import Box from '$lib/components/Box/index.svelte';
  import { ROLE } from '$lib/utils/constants/roles';
  import { group } from '$lib/components/Course/store';
@@ -16,6 +17,8 @@
  import { snackbar } from '$lib/components/Snackbar/store';
  import { globalStore } from '$lib/utils/store/app';
  import { t } from '$lib/utils/functions/translations.js';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { redirectToLesson } from '$lib/utils/redirect.js';

  export let data;

@@ -83,95 +86,98 @@
    ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
    : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);

+  $: redirectToLesson($currentOrg.customization.course.grading, data.courseId);
  $: browser && $course.id && firstRender($course.id);
 </script>

-<CourseContainer bind:courseId={data.courseId}>
-  <PageNav title={$t('course.navItem.marks.title')} />
+<RoleBasedSecurity allowedRoles={[1, 2, $currentOrg.customization.course.grading ? 3 : 0]}>
+  <CourseContainer bind:courseId={data.courseId}>
+    <PageNav title={$t('course.navItem.marks.title')} />

-  <PageBody width="w-full max-w-6xl md:w-11/12">
-    <div class="table rounded-md border border-gray-300 w-full">
-      <div class="flex items-center {borderBottomGrey}">
-        <div class="box flex items-center p-3">
-          <p class="dark:text-white w-40">{$t('course.navItem.marks.student')}</p>
-        </div>
-        {#each $lessons as lesson, index}
-          {#if lessonMapping[lesson.id]}
-            <div class="box flex flex-col items-center {borderleftGrey}">
-              <p class="dark:text-white col lesson-number" title={lesson.title}>
-                {getLectureNo(index + 1)}
-              </p>
-              <div
-                class="flex h-full items-center border-r-0 border-t border-b-0 border-l-0 border-gray-300"
-              >
-                {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
-                  <p
-                    class="col text-sm dark:text-white {index && borderleftGrey}"
-                    title={lessonMapping[lesson.id][exerciseId].title}
-                  >
-                    {lessonMapping[lesson.id][exerciseId].title}
-                    <span>({lessonMapping[lesson.id][exerciseId].points})</span>
-                  </p>
-                {/each}
-              </div>
-            </div>
-          {/if}
-        {/each}
-        <div class="box flex items-center {borderleftGrey}">
-          <p class="dark:text-white w-20 text-center">{$t('course.navItem.marks.total')}</p>
-        </div>
-      </div>
-
-      {#each students as student}
-        <div class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}">
-          <div class="w-40 flex items-center">
-            <img
-              alt="Student avatar"
-              src={student.profile.avatar_url}
-              class="w-8 h-8 rounded-full mr-2"
-            />
-            <div class="text-sm">
-              <p class="dark:text-white font-semibold">
-                {student.profile.fullname}
-              </p>
-              <p class="dark:text-white">
-                {`${student.assigned_student_id ? '#' + student.assigned_student_id : '-'}`}
-              </p>
-            </div>
+    <PageBody width="w-full max-w-6xl md:w-11/12">
+      <div class="table rounded-md border border-gray-300 w-full">
+        <div class="flex items-center {borderBottomGrey}">
+          <div class="box flex items-center p-3">
+            <p class="dark:text-white w-40">{$t('course.navItem.marks.student')}</p>
          </div>
-          {#each $lessons as lesson}
+          {#each $lessons as lesson, index}
            {#if lessonMapping[lesson.id]}
-              <div class="flex items-center">
-                {#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
-                  <p class="dark:text-white col">
-                    {studentMarksByExerciseId[student.id]
-                      ? studentMarksByExerciseId[student.id][exerciseId] || '-'
-                      : '-'}
-                  </p>
-                {/each}
+              <div class="box flex flex-col items-center {borderleftGrey}">
+                <p class="dark:text-white col lesson-number" title={lesson.title}>
+                  {getLectureNo(index + 1)}
+                </p>
+                <div
+                  class="flex h-full items-center border-r-0 border-t border-b-0 border-l-0 border-gray-300"
+                >
+                  {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
+                    <p
+                      class="col text-sm dark:text-white {index && borderleftGrey}"
+                      title={lessonMapping[lesson.id][exerciseId].title}
+                    >
+                      {lessonMapping[lesson.id][exerciseId].title}
+                      <span>({lessonMapping[lesson.id][exerciseId].points})</span>
+                    </p>
+                  {/each}
+                </div>
              </div>
            {/if}
          {/each}
-
-          <div class="w-20 flex items-center">
-            <div class="text-sm">
-              <p class="dark:text-white col">
-                {calculateStudentTotal(studentMarksByExerciseId[student.id])}
-              </p>
-            </div>
+          <div class="box flex items-center {borderleftGrey}">
+            <p class="dark:text-white w-20 text-center">{$t('course.navItem.marks.total')}</p>
          </div>
        </div>
-      {:else}
-        <Box>
-          <AudioConsoleIcon size={32} class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500 dark:text-white">
-            {$t('course.navItem.marks.no_student')}
-          </h3>
-        </Box>
-      {/each}
-    </div>
-  </PageBody>
-</CourseContainer>
+
+        {#each students as student}
+          <div class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}">
+            <div class="w-40 flex items-center">
+              <img
+                alt="Student avatar"
+                src={student.profile.avatar_url}
+                class="w-8 h-8 rounded-full mr-2"
+              />
+              <div class="text-sm">
+                <p class="dark:text-white font-semibold">
+                  {student.profile.fullname}
+                </p>
+                <p class="dark:text-white">
+                  {`${student.assigned_student_id ? '#' + student.assigned_student_id : '-'}`}
+                </p>
+              </div>
+            </div>
+            {#each $lessons as lesson}
+              {#if lessonMapping[lesson.id]}
+                <div class="flex items-center">
+                  {#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
+                    <p class="dark:text-white col">
+                      {studentMarksByExerciseId[student.id]
+                        ? studentMarksByExerciseId[student.id][exerciseId] || '-'
+                        : '-'}
+                    </p>
+                  {/each}
+                </div>
+              {/if}
+            {/each}
+
+            <div class="w-20 flex items-center">
+              <div class="text-sm">
+                <p class="dark:text-white col">
+                  {calculateStudentTotal(studentMarksByExerciseId[student.id])}
+                </p>
+              </div>
+            </div>
+          </div>
+        {:else}
+          <Box>
+            <AudioConsoleIcon size={32} class="carbon-icon w-80" />
+            <h3 class="text-3xl text-gray-500 dark:text-white">
+              {$t('course.navItem.marks.no_student')}
+            </h3>
+          </Box>
+        {/each}
+      </div>
+    </PageBody>
+  </CourseContainer>
+</RoleBasedSecurity>

 <style>
  .col {
@@ -65,18 +65,22 @@
    <div
      class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-primary-900 my-2"
    >
-      <span>
-        <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
-          {$t('dashboard.lms_dashboard_hero')}
+      <div class="w-full md:w-[75%] lg:w-[80%]">
+        <p class=" text-white text-xs lg:text-xl font-normal mb-5">
+          {$currentOrg.customization.dashboard.bannerText
+            ? $currentOrg.customization.dashboard.bannerText
+            : $t('dashboard.lms_dashboard_hero')}
        </p>
        <PrimaryButton
          label={$t('dashboard.dont')}
          variant={VARIANTS.CONTAINED_WHITE}
          onClick={() => goto('/lms/mylearning')}
        />
-      </span>
+      </div>
      <img
-        src="/images/student-learning.svg"
+        src={$currentOrg.customization.dashboard.bannerImage
+          ? $currentOrg.customization.dashboard.bannerImage
+          : '/images/student-learning.svg'}
        alt="student Learning Pictogram"
        class="w-28 md:block md:w-1/3 lg:w-[275px] lg:h-[205px] mb-3 md:mb-0"
      />
@@ -0,0 +1,24 @@
+<script>
+  import CustomizeLMS from '$lib/components/Org/Settings/CustomizeLMS.svelte';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrgPath } from '$lib/utils/store/org';
+</script>
+
+<svelte:head>
+  <title>Customize LMS - ClassroomIO</title>
+</svelte:head>
+
+<section class="w-full md:max-w-4xl mx-auto">
+  <div class="py-10 px-3 md:px-5">
+    <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
+      >{$t('upgrade.back')}</a
+    >
+    <div class="flex items-center justify-between mb-10">
+      <h1 class="dark:text-white text-3xl font-bold">
+        {$t('components.settings.customize_lms.title')}
+      </h1>
+    </div>
+
+    <CustomizeLMS />
+  </div>
+</section>
@@ -1,5 +1,6 @@
 <script>
  import Domains from '$lib/components/Org/Settings/Domains.svelte';
+  import { t } from '$lib/utils/functions/translations';
  import { currentOrgPath } from '$lib/utils/store/org';
 </script>

@@ -10,10 +11,10 @@
 <section class="w-full md:max-w-4xl mx-auto">
  <div class="py-10 px-3 md:px-5">
    <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
-      >Back to Settings</a
+      >{$t('upgrade.back')}</a
    >
    <div class="flex items-center justify-between mb-10">
-      <h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>
+      <h1 class="dark:text-white text-3xl font-bold">{$t('components.settings.domains.title')}</h1>
    </div>

    <Domains />