Add chips to tab and page nav

src/components/Chip/index.svelte

@@ -3,7 +3,7 @@
   export let className;
 </script>
 
-<p class={className ? className : "bg-set"}>{value}</p>
+<p class={className ? className : 'bg-set mt-2'}>{value}</p>
 
 <style>
   p {
@@ -16,7 +16,6 @@
     text-align: center;
     border: 1px solid transparent;
     border-radius: 2em;
-    margin: 6px 0 0;
   }
 
   .bg-set {

src/components/Course/components/Lesson/Exercise/index.svelte

@@ -61,8 +61,8 @@
       />
       {#if mode === MODES.edit || preview}
         <PrimaryButton
-          variant={VARIANTS.OUTLINED}
-          label={preview ? 'Edit' : 'Preview'}
+          variant={preview ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
+          label={'Toggle Preview'}
           onClick={() => (preview = !preview)}
         />
       {/if}

src/components/Course/components/Lesson/Materials/constants.js

@@ -2,13 +2,16 @@ export const tabs = [
   {
     label: 'Slide',
     value: 1,
+    badgeValue: 0,
   },
   {
     label: 'Note',
     value: 2,
+    badgeValue: 0,
   },
   {
     label: 'Video',
     value: 3,
+    badgeValue: 0,
   },
 ];

src/components/Course/components/Lesson/Materials/index.svelte

@@ -12,12 +12,13 @@
     handleUpdateLessonMaterials,
     isLessonDirty,
   } from '../store/lessons';
-  import { tabs } from './constants';
+  import * as CONSTANTS from './constants';
 
   export let mode = MODES.view;
   export let prevMode = null;
   export let lessonId;
 
+  let tabs = CONSTANTS.tabs;
   let currentTab = tabs[0].value;
   let errors = {};
 
@@ -57,7 +58,31 @@
     }
   }
 
+  function addBadgeValueToTab(materials) {
+    const { slide_url, video_url, note } = materials;
+
+    tabs = tabs.map((tab) => {
+      let badgeValue;
+
+      if (tab.value === 1) {
+        badgeValue = !!slide_url ? 1 : 0;
+      } else if (tab.value === 2) {
+        badgeValue = !!note ? 1 : 0;
+      } else {
+        badgeValue =
+          typeof video_url === 'string' ? video_url.split(',').length : 0;
+      }
+
+      tab.badgeValue = badgeValue;
+      return tab;
+    });
+
+    console.log(`tabs`, tabs);
+  }
+
   $: handleSave(prevMode);
+
+  $: addBadgeValueToTab($lesson.materials);
 </script>
 
 <Tabs {tabs} {currentTab} {onChange}>

src/components/Course/components/Lesson/store/lessons.js

@@ -8,6 +8,7 @@ import {
 export const lessons = writable([]);
 export const lesson = writable({
   id: null,
+  totalExercises: 0,
   materials: {
     note: null,
     slide_url: null,

src/components/PageNav/index.svelte

@@ -1,6 +1,7 @@
 <script>
   import NewButton from '../PrimaryContainedButton/index.svelte';
   import TextField from '../Form/TextField.svelte';
+  import Chip from '../Chip/index.svelte';
   export let title = '';
   export let overidableStyle = '';
   export let navItems = [];
@@ -55,8 +56,15 @@
   {#if Array.isArray(navItems) && navItems.length}
     <div class="flex justify-evenly items-center">
       {#each navItems as item}
-        <a class="mr-5 text-sm {item.isActive && 'active'}" href={item.href}>
+        <a
+          class="mr-5 text-sm flex items-center {item.isActive && 'active'}"
+          href={item.href}
+        >
           {item.label}
+
+          {#if typeof item.badgeValue === 'number'}
+            <Chip value={item.badgeValue} className="ml-1 bg-gray-300" />
+          {/if}
         </a>
       {/each}
       {#if addButtonHref}

src/components/Tabs/index.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Chip from '../Chip/index.svelte';
   export let tabs = [];
   export let currentTab;
   export let onChange;
@@ -15,6 +16,9 @@
         on:click={onChange(tab.value)}
       >
         {tab.label}
+        {#if typeof tab.badgeValue === 'number'}
+          <Chip value={tab.badgeValue} className="ml-1 bg-gray-300" />
+        {/if}
 
         {#if currentTab === tab.value}
           <span class="absolute w-full top-0 left-0 h-1 bg-blue-500" />

src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte

@@ -64,15 +64,19 @@
     }
 
     prevLessonId = lessonId;
-    setLesson(lessonData);
+
+    const totalExercises =
+      lessonData.totalExercises[0] && lessonData.totalExercises[0].count;
+    setLesson(lessonData, totalExercises);
   }
 
-  function setLesson(lessonData) {
+  function setLesson(lessonData, totalExercises) {
     if (!lessonData) return;
 
     lesson.update((l) => ({
       ...l,
       id: lessonId,
+      totalExercises,
       materials: lessonData,
     }));
   }
@@ -97,6 +101,7 @@
       },
       {
         label: 'Exercises',
+        badgeValue: $lesson.totalExercises,
         isActive: !isMaterialsTabActive,
         href: `${path}/exercises`,
       },

src/utils/services/courses/index.js

@@ -136,7 +136,9 @@ export function deleteGroupMember(groupMemberId) {
 export function fetchLesson(lessonId) {
   return supabase
     .from('lesson')
-    .select(`id, note, video_url, slide_url, call_url`)
+    .select(
+      `id, note, video_url, slide_url, call_url, totalExercises:exercise(count)`
+    )
     .eq('id', lessonId)
     .single();
 }