From 1c65682c1c472e9f7cc034a53c94703968cb38c0 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 7 Nov 2021 13:44:33 +0200
Subject: [PATCH] Update calendar w/ locked lessons

---
 src/components/Course/function.js |  2 +-
 src/routes/dashboard.svelte       | 38 ++++++++++++++++++++-----------
 src/utils/types/dashboard.ts      |  1 +
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/Course/function.js b/src/components/Course/function.js
index 21b3e374..1b94bbc4 100644
--- a/src/components/Course/function.js
+++ b/src/components/Course/function.js
@@ -27,7 +27,7 @@ export function getLessonsRoute(courseId, lessonId) {
 }
 
 export function getLectureNo(index) {
-  if (index < 9) {
+  if (index <= 9) {
     return `00${index}`;
   }
 
diff --git a/src/routes/dashboard.svelte b/src/routes/dashboard.svelte
index 781230ec..b343a0ac 100644
--- a/src/routes/dashboard.svelte
+++ b/src/routes/dashboard.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
+  import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
 
   import {
     formatUserUpcomingData,
@@ -171,10 +172,19 @@
         <div class="flex items-center justify-between p-5 lesson-data">
           <div class="w-4/5">
             <a
-              class="text-black-700 text-lg font-bold"
-              href="/courses/{lessonData.course_id}/lessons/{lessonData.lesson_id}"
+              class="text-black-700 text-lg font-bold flex items-center"
+              href={`/courses/${lessonData.course_id}/lessons/${
+                lessonData.is_complete ? lessonData.lesson_id : ''
+              }`}
             >
               {lessonData.lesson_title}
+              {#if lessonData.is_complete}
+                <span class="ml-2 success">
+                  <CheckmarkFilled20 class="carbon-icon" />
+                </span>
+              {:else}
+                <span class="text-md ml-2">🔒</span>
+              {/if}
             </a>
             <p class="text-grey text-sm flex items-center">
               <a
@@ -185,17 +195,19 @@
               </a>
             </p>
           </div>
-          <a
-            class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
-              'opacity-50 pointer-events-none cursor-not-allowed'}"
-            href={!!lessonData.call_url ? lessonData.call_url : undefined}
-            target="_blank"
-            title={!!lessonData.call_url
-              ? 'Click to join the call'
-              : 'No call link was added for this lesson. Ask your trainer'}
-          >
-            Join call
-          </a>
+          {#if lessonData.is_complete}
+            <a
+              class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+                'opacity-50 pointer-events-none cursor-not-allowed'}"
+              href={!!lessonData.call_url ? lessonData.call_url : undefined}
+              target="_blank"
+              title={!!lessonData.call_url
+                ? 'Click to join the call'
+                : 'No call link was added for this lesson. Ask your trainer'}
+            >
+              Join call
+            </a>
+          {/if}
         </div>
       {:else}
         <p class="flex items-center justify-center w-full no-data">
diff --git a/src/utils/types/dashboard.ts b/src/utils/types/dashboard.ts
index 25e7bab6..869333bf 100644
--- a/src/utils/types/dashboard.ts
+++ b/src/utils/types/dashboard.ts
@@ -5,6 +5,7 @@ export type UserLessonDataType = {
   lesson_at: string;
   lesson_id: string;
   lesson_title: string;
+  is_complete: boolean;
 };
 
 type LessonByDayType = {