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>

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

@@ -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>

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

@@ -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">

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

@@ -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>

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

@@ -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 {