From 93f674b04b6b216f765161334615dee6e35426dc Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Mon, 2 Oct 2023 04:15:01 +0100
Subject: [PATCH] CLASSROOMIO-T-108: Add grading score to Graded column

---
 .../components/CourseLandingPage/index.svelte |  8 ++---
 src/lib/components/Org/Community/index.svelte |  7 ++---
 src/lib/components/Org/Quiz/QuizCard.svelte   |  7 ++---
 src/lib/utils/functions/date.ts               |  8 +++++
 src/lib/utils/services/lms/exercises.ts       |  8 ++++-
 src/routes/lms/community/[slug]/+page.svelte  | 11 +++----
 src/routes/lms/exercises/+page.svelte         | 29 ++++++++++++-------
 .../org/[slug]/community/[slug]/+page.svelte  | 11 +++----
 8 files changed, 48 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/utils/functions/date.ts

diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index cf7fee80..acab0dd2 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/src/lib/components/CourseLandingPage/index.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
-  // import paystack from 'paystack';
   import get from 'lodash/get';
   import { observeIntersection } from './components/IntersectionObserver';
   import { onMount, onDestroy } from 'svelte';
   import pluralize from 'pluralize';
   import { page } from '$app/stores';
-  import dayjs from 'dayjs';
-  import relativeTime from 'dayjs/plugin/relativeTime';
   import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte'; //note
   import PresentationFile from 'carbon-icons-svelte/lib/PresentationFile.svelte'; // exercise
   import Video from 'carbon-icons-svelte/lib/Video.svelte'; //video
@@ -24,8 +21,7 @@
   import { reviewsModalStore } from './store';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
-
-  dayjs.extend(relativeTime);
+  import { calDateDiff } from '$lib/utils/functions/date';
 
   export let editMode = false;
   export let courseData: Course;
@@ -378,7 +374,7 @@
                         <div class="flex flex-row">
                           <img src="/images/rating-full.svg" alt="" class="mr-2" />
                           <p class="text-xs text-gray-600">
-                            {dayjs(review.created_at).fromNow(true)} ago
+                            {calDateDiff(review.created_at)}
                           </p>
                         </div>
                         <div
diff --git a/src/lib/components/Org/Community/index.svelte b/src/lib/components/Org/Community/index.svelte
index c0cd2576..887e58e5 100644
--- a/src/lib/components/Org/Community/index.svelte
+++ b/src/lib/components/Org/Community/index.svelte
@@ -1,7 +1,5 @@
 <script>
   import { goto } from '$app/navigation';
-  import dayjs from 'dayjs';
-  import relativeTime from 'dayjs/plugin/relativeTime';
   import AddCommentIcon from 'carbon-icons-svelte/lib/AddComment.svelte';
   import CommunityLoader from './Loader.svelte';
   import Vote from '$lib/components/Vote/index.svelte';
@@ -10,14 +8,13 @@
   import Space from '$lib/components/Space/index.svelte';
   import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
   import { supabase } from '$lib/utils/functions/supabase';
+  import { calDateDiff } from '$lib/utils/functions/date';
 
   export let isLMS = false;
 
   let isLoading = false;
   let discussions = [];
 
-  dayjs.extend(relativeTime);
-
   async function fetchCommunityQuestions(orgId) {
     if (!orgId) return;
     isLoading = true;
@@ -54,7 +51,7 @@
         author: discussion?.author?.profile?.fullname,
         comments: discussion.comments?.[0]?.count || 0,
         votes: discussion.votes,
-        createdAt: dayjs(discussion.created_at).fromNow(true)
+        createdAt: calDateDiff(discussion.created_at)
       })) || [];
   }
 
diff --git a/src/lib/components/Org/Quiz/QuizCard.svelte b/src/lib/components/Org/Quiz/QuizCard.svelte
index 5708e521..02b9f0fd 100644
--- a/src/lib/components/Org/Quiz/QuizCard.svelte
+++ b/src/lib/components/Org/Quiz/QuizCard.svelte
@@ -2,16 +2,13 @@
   import pluralize from 'pluralize';
   import { ImageLoader } from 'carbon-components-svelte';
   import OverflowMenuHorizontalIcon from 'carbon-icons-svelte/lib/OverflowMenuHorizontal.svelte';
-  import dayjs from 'dayjs';
-  import relativeTime from 'dayjs/plugin/relativeTime';
   import { currentOrgPath } from '$lib/utils/store/org';
   import Dropdown from '$lib/components/Dropdown/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { onRename, onDelete } from '$lib/utils/services/org/quiz';
   import { themeImages } from '$lib/utils/constants/quiz';
-
-  dayjs.extend(relativeTime);
+  import { calDateDiff } from '$lib/utils/functions/date';
 
   export let quiz;
   export let totalQuestions;
@@ -80,7 +77,7 @@
       <div class="flex md:flex-row flex-col justify-between">
         <div>
           <p class="mb-2">{pluralize('question', totalQuestions, true)}</p>
-          <p class="mb-2 md:mb-0">Updated {dayjs(quiz.updated_at).fromNow(true)} ago</p>
+          <p class="mb-2 md:mb-0">Updated {calDateDiff(quiz.updated_at)}</p>
         </div>
 
         <PrimaryButton
diff --git a/src/lib/utils/functions/date.ts b/src/lib/utils/functions/date.ts
new file mode 100644
index 00000000..a6ad4f29
--- /dev/null
+++ b/src/lib/utils/functions/date.ts
@@ -0,0 +1,8 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+
+export const calDateDiff = (date: string | number | Date): string => {
+  return dayjs(date).fromNow(true) + ` ago`;
+};
diff --git a/src/lib/utils/services/lms/exercises.ts b/src/lib/utils/services/lms/exercises.ts
index cbde720d..064b5394 100644
--- a/src/lib/utils/services/lms/exercises.ts
+++ b/src/lib/utils/services/lms/exercises.ts
@@ -5,9 +5,13 @@ export interface LMSExercise {
   id: string;
   title: string;
   updated_at: string;
+  questions: {
+    points: number;
+  }[];
   submission: {
     status_id: number;
     updated_at: string;
+    total: number;
     groupmember: {
       id: string;
       profile: {
@@ -53,9 +57,11 @@ export async function fetchLMSExercises(
       id,
       title,
       updated_at,
+      questions:question(points),
       submission (
         status_id,
         updated_at,
+        total,
         groupmember:submitted_by!inner (
           id,
           profile!inner (
@@ -90,7 +96,7 @@ export async function fetchLMSExercises(
     .eq('submission.groupmember.profile.id', profileId);
 
   return {
-    exercises: data,
+    exercises: data as LMSExercise[] | null,
     error
   };
 }
diff --git a/src/routes/lms/community/[slug]/+page.svelte b/src/routes/lms/community/[slug]/+page.svelte
index 1f4ccc63..58b45b85 100644
--- a/src/routes/lms/community/[slug]/+page.svelte
+++ b/src/routes/lms/community/[slug]/+page.svelte
@@ -1,9 +1,7 @@
 <script>
   import { marked } from 'marked';
   import { goto } from '$app/navigation';
-  import dayjs from 'dayjs';
   import pluralize from 'pluralize';
-  import relativeTime from 'dayjs/plugin/relativeTime';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
@@ -24,8 +22,7 @@
   import TextField from '$lib/components/Form/TextField.svelte';
   import DeleteCommentModal from '$lib/components/Org/Community/DeleteCommentModal.svelte';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
-
-  dayjs.extend(relativeTime);
+  import { calDateDiff } from '$lib/utils/functions/date';
 
   export let data;
   const { slug } = data;
@@ -59,7 +56,7 @@
         avatar: data?.author?.profile?.avatar_url || ''
       },
       body: data.body,
-      createdAt: dayjs(data.created_at).fromNow(true),
+      createdAt: calDateDiff(data.created_at),
       comments: data.comments.map((c) => ({
         id: c.id,
         authorId: c.author?.profile?.id || '',
@@ -67,7 +64,7 @@
         avatar: c.author?.profile?.avatar_url || '',
         votes: c.votes,
         comment: c.body,
-        createdAt: dayjs(c.created_at).fromNow(true)
+        createdAt: calDateDiff(c.created_at)
       })),
       totalComments: 0
     };
@@ -148,7 +145,7 @@
           avatar: $profile?.avatar_url || '',
           votes: 0,
           comment: _c.body,
-          createdAt: dayjs(_c.created_at).fromNow(true)
+          createdAt: calDateDiff(_c.created_at)
         }
       ];
 
diff --git a/src/routes/lms/exercises/+page.svelte b/src/routes/lms/exercises/+page.svelte
index 59cf1435..465feb03 100644
--- a/src/routes/lms/exercises/+page.svelte
+++ b/src/routes/lms/exercises/+page.svelte
@@ -7,10 +7,7 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import { fetchLMSExercises } from '$lib/utils/services/lms/exercises';
   import type { LMSExercise } from '$lib/utils/services/lms/exercises';
-  import dayjs from 'dayjs';
-  import relativeTime from 'dayjs/plugin/relativeTime';
-
-  dayjs.extend(relativeTime);
+  import { calDateDiff } from '$lib/utils/functions/date';
 
   const defaultSections = [
     {
@@ -27,7 +24,7 @@
     },
     {
       id: 2,
-      title: 'Grading',
+      title: 'Grading In Progress',
       items: [],
       className: 'text-yellow-700 bg-yellow-200'
     },
@@ -51,9 +48,10 @@
   interface ExerciseItem {
     courseTitle: string;
     courseURL: string;
-    exerciseTitle: string;
     exerciseId: string;
+    exerciseTitle: string;
     exerciseURL: string;
+    grade: string;
     lessonNo: string;
     lessonURL: string;
     submissionStatus: number;
@@ -64,17 +62,23 @@
     const _sections: Section[] = cloneDeep(defaultSections);
 
     for (const exercise of exercises) {
-      const { id, title, updated_at, submission, lesson } = exercise;
+      const { id, title, updated_at, submission, lesson, questions } = exercise;
 
       const submissionItem = submission[0] || {
         status_id: 0,
-        updated_at
+        updated_at,
+        total: 0
       };
 
       const courseURL = `/courses/${lesson.course.id}`;
       const lessonURL = `${courseURL}/lessons/${lesson.id}`;
       const exerciseURL = `${lessonURL}/exercises/${id}`;
 
+      const grade = `${submissionItem.total}/${questions.reduce(
+        (acc, cur) => (acc += cur.points),
+        0
+      )}`;
+
       const item: ExerciseItem = {
         exerciseId: id,
         courseTitle: lesson.course.title,
@@ -84,7 +88,8 @@
         lessonNo: lesson.order < 9 ? '0' + (lesson.order + 1) : `${lesson.order}`,
         lessonURL,
         submissionStatus: submissionItem.status_id,
-        submissionUpdatedAt: dayjs(submissionItem.updated_at).fromNow(true) + ` ago`
+        submissionUpdatedAt: calDateDiff(submissionItem.updated_at),
+        grade
       };
 
       _sections[submissionItem.status_id].items.push(item);
@@ -106,6 +111,7 @@
     if (!exercises) return;
 
     sections = generateSections(exercises);
+    console.log('sections', sections);
   }
 
   $: if (browser && $profile.id && $currentOrg.id) {
@@ -121,7 +127,7 @@
 
     <div>
       <div class="flex items-center w-full">
-        {#each sections as { title, items, className }}
+        {#each sections as { title, items, className, id }}
           <div
             class="min-w-[355px] max-w-[355px] h-[70vh] rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-700 p-3 mr-3 overflow-hidden"
           >
@@ -139,6 +145,9 @@
                     <p class="text-xs">{item.courseTitle}</p>
                   </a>
                   <a class="text-black dark:text-white text-md font-bold" href={item.exerciseURL}>
+                    {#if id === 3}
+                      ({item.grade}) -
+                    {/if}
                     {item.exerciseTitle}
                   </a>
                   <a
diff --git a/src/routes/org/[slug]/community/[slug]/+page.svelte b/src/routes/org/[slug]/community/[slug]/+page.svelte
index 8c8e6769..1e51478a 100644
--- a/src/routes/org/[slug]/community/[slug]/+page.svelte
+++ b/src/routes/org/[slug]/community/[slug]/+page.svelte
@@ -1,8 +1,6 @@
 <script>
   import { marked } from 'marked';
-  import dayjs from 'dayjs';
   import pluralize from 'pluralize';
-  import relativeTime from 'dayjs/plugin/relativeTime';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
@@ -23,8 +21,7 @@
   import TextField from '$lib/components/Form/TextField.svelte';
   import DeleteCommentModal from '$lib/components/Org/Community/DeleteCommentModal.svelte';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
-
-  dayjs.extend(relativeTime);
+  import { calDateDiff } from '$lib/utils/functions/date';
 
   export let data;
   const { slug } = data;
@@ -58,7 +55,7 @@
         avatar: data?.author?.profile?.avatar_url || ''
       },
       body: data.body,
-      createdAt: dayjs(data.created_at).fromNow(true),
+      createdAt: calDateDiff(data.created_at),
       comments: data.comments.map((c) => ({
         id: c.id,
         authorId: c.author?.profile?.id || '',
@@ -66,7 +63,7 @@
         avatar: c.author?.profile?.avatar_url || '',
         votes: c.votes,
         comment: c.body,
-        createdAt: dayjs(c.created_at).fromNow(true)
+        createdAt: calDateDiff(c.created_at)
       })),
       totalComments: 0
     };
@@ -147,7 +144,7 @@
           avatar: $profile?.avatar_url || '',
           votes: 0,
           comment: _c.body,
-          createdAt: dayjs(_c.created_at).fromNow(true)
+          createdAt: calDateDiff(_c.created_at)
         }
       ];