feat: add icon to create a new lesson from side nav (#145)

* feat: classroomio-issue-143 * issue 143: remove bg-color from the add icon * fix: hide the + icon for student --------- Co-authored-by: Rotimi Best <[email protected]>
2024-02-01 20:18:03 +01:00
parent 67db904dae
commit cadfa81913
28 changed files with 123 additions and 100 deletions
@@ -9,7 +9,7 @@
  import Plain from './certificates/Plain.svelte';
  import { course } from '$lib/components/Course/store';
  import { currentOrg } from '$lib/utils/store/org';
-  import { appStore } from '$lib/utils/store/app';
+  import { globalStore } from '$lib/utils/store/app';

  const studentNamePlaceholder = 'Name of student';
  const themes = ['professional', 'plain'];
@@ -94,7 +94,7 @@
          class="my-4"
          size="sm"
        >
-          <span slot="labelA" style={$appStore.isDark ? 'color: white' : 'color: #161616'}
+          <span slot="labelA" style={$globalStore.isDark ? 'color: white' : 'color: #161616'}
            >Locked</span
          >
          <span slot="labelB" style="color: green">Unlocked</span>
@@ -13,8 +13,8 @@
  import TextChip from '$lib/components/Chip/Text.svelte';
  import Modal from '$lib/components/Modal/index.svelte';
  import { goto } from '$app/navigation';
+  import { handleAddLessonWidget } from '../Navigation/store';

-  export let openModal = false;
  export let isStudent = false;
  let errors = {
    title: ''
@@ -49,13 +49,13 @@
      $lessons = [...$lessons, lesson];
      goto('/courses/' + $course.id + '/lessons/' + lesson.id);
    }
-    openModal = false;
+    $handleAddLessonWidget.open = false;
  };
 </script>

 <Modal
-  onClose={() => (openModal = false)}
-  bind:open={openModal}
+  onClose={() => ($handleAddLessonWidget.open = false)}
+  bind:open={$handleAddLessonWidget.open}
  width="w-[80%] md:w-[60%]"
  containerClass="overflow-hidden"
  modalHeading="Add New Lesson"
@@ -2,10 +2,12 @@
  import { slide } from 'svelte/transition';
  import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
  import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
+  import Add from 'carbon-icons-svelte/lib/Add.svelte';
+  import { SkeletonText } from 'carbon-components-svelte';
  import IconButton from '$lib/components/IconButton/index.svelte';
  import { NavClasses } from '$lib/utils/constants/reusableClass';
+  import { handleAddLessonWidget } from './store';
  import NavIcons from './NavIcons.svelte';
-  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';

  export let handleClick = () => {};
  export let label = '';
@@ -13,8 +15,14 @@
  export let isExpanded = true;
  export let total = 0;
  export let isLoading = true;
+  export let isLesson = false;
+  export let isStudent = true;
  // export let subMenuItems = [];

+  function addLesson() {
+    $handleAddLessonWidget.open = true;
+  }
+
  function onClick() {
    handleClick();
  }
@@ -46,7 +54,12 @@
    {/if}
    <span class="grow" />

-    {#if label === 'Lessons' && !isLoading}
+    {#if isLesson && !isLoading}
+      {#if !isStudent}
+        <IconButton onClick={() => addLesson()} size="small">
+          <Add />
+        </IconButton>
+      {/if}
      <IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}>
        {#if isExpanded}
          <ChevronUpIcon class="carbon-icon dark:text-white" />
@@ -15,6 +15,7 @@
  import { sideBar } from '$lib/components/Org/store';
  import { profile } from '$lib/utils/store/user';
  import { getIsLessonComplete } from '../Lesson/functions';
+  import { globalStore } from '$lib/utils/store/app';

  export let path: string;
  export let isStudent: boolean = false;
@@ -23,7 +24,7 @@
    label: string;
    to: string;
    hideSortIcon: boolean;
-    isLecture?: boolean;
+    isLesson?: boolean;
    show?: () => boolean;
  }

@@ -153,7 +154,7 @@
        label: 'Lessons',
        to: getLessonsRoute($course.id),
        hideSortIcon: false,
-        isLecture: true
+        isLesson: true
      },
      {
        label: 'Attendance',
@@ -206,6 +207,8 @@
      }
    ];
  }
+
+  $: console.log({ isStudent: $globalStore.isStudent });
 </script>

 <aside
@@ -236,10 +239,12 @@
            handleClick={handleMainGroupClick(navItem.to)}
            isGroupActive={(path || $page.url.pathname) === navItem.to}
            isExpanded={isLessonActive}
-            total={navItem.isLecture ? ($lessons || []).length : 0}
+            total={navItem.isLesson ? ($lessons || []).length : 0}
            isLoading={!$course.id}
+            isLesson={navItem.isLesson}
+            {isStudent}
          >
-            {#if navItem.isLecture}
+            {#if navItem.isLesson}
              {#each $lessons as item, index}
                <a
                  class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent &&
@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export let handleAddLessonWidget = writable({
+  open: false
+});