feat: move lesson comments under lesson note

This commit is contained in:
Rotimi Best
2025-01-04 05:55:14 +01:00
parent 5f367a9540
commit 32ba251b77
44 changed files with 760 additions and 682 deletions
+2 -2
View File
@@ -10,7 +10,7 @@
import LMSNavigation from '$lib/components/Navigation/lms.svelte';
import OrgLandingPage from '$lib/components/Org/LandingPage/index.svelte';
import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
import Restricted from '$lib/components/Page/Restricted.svelte';
import { PageRestricted } from '$lib/components/Page';
import PageLoadProgressBar from '$lib/components/Progress/PageLoadProgressBar.svelte';
import Snackbar from '$lib/components/Snackbar/index.svelte';
import UpgradeModal from '$lib/components/Upgrade/Modal.svelte';
@@ -129,7 +129,7 @@
<Snackbar />
{#if data.org?.is_restricted || $currentOrg.is_restricted}
<Restricted />
<PageRestricted />
{:else if data.skipAuth}
<PlayQuiz />
{:else if data.isOrgSite && !path}
+2 -2
View File
@@ -1,10 +1,10 @@
<script>
import { page } from '$app/stores';
import NotFound from '$lib/components/NotFound/NotFound.svelte';
import { PageNotFound } from '$lib/components/Page';
$: query = new URLSearchParams($page.url.search);
$: isOrg = query.get('type') === 'org';
</script>
<NotFound {isOrg} />
<PageNotFound {isOrg} />
@@ -1,39 +1,37 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import PinFilled from 'carbon-icons-svelte/lib/PinFilled.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import { group } from '$lib/components/Course/store';
import { profile } from '$lib/utils/store/user';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { isNewFeedModal } from '$lib/components/Course/components/NewsFeed/store';
import NewsFeedCard from '$lib/components/Course/components/NewsFeed/NewsFeedCard.svelte';
import Box from '$lib/components/Box/index.svelte';
import NewFeedModal from '$lib/components/Course/components/NewsFeed/NewFeedModal.svelte';
import NewsFeedCard from '$lib/components/Course/components/NewsFeed/NewsFeedCard.svelte';
import NewsFeedLoader from '$lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte';
import { isNewFeedModal, newsFeed } from '$lib/components/Course/components/NewsFeed/store';
import { group } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import { supabase } from '$lib/utils/functions/supabase';
import { t } from '$lib/utils/functions/translations';
import {
createComment,
deleteNewsFeedComment,
deleteNewsFeed,
deleteNewsFeedComment,
fetchNewsFeedReaction,
fetchNewsFeeds,
handleEditFeed,
toggleFeedIsPinned,
fetchNewsFeedReaction
toggleFeedIsPinned
} from '$lib/utils/services/newsfeed';
import { newsFeed } from '$lib/components/Course/components/NewsFeed/store';
import Box from '$lib/components/Box/index.svelte';
import { supabase } from '$lib/utils/functions/supabase';
import { snackbar } from '$lib/components/Snackbar/store';
import type { Feed } from '$lib/utils/types/feed';
import {
NOTIFICATION_NAME,
triggerSendEmail
} from '$lib/utils/services/notification/notification';
import NewsFeedLoader from '$lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte';
import { t } from '$lib/utils/functions/translations';
import { currentOrg } from '$lib/utils/store/org';
import { profile } from '$lib/utils/store/user';
import type { Feed } from '$lib/utils/types/feed';
import type { CurrentOrg } from '$lib/utils/types/org';
import { goto } from '$app/navigation';
import PinFilled from 'carbon-icons-svelte/lib/PinFilled.svelte';
export let data;
@@ -280,10 +278,10 @@
</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">
<div class="flex w-[90%] flex-col items-center justify-between md:w-96">
<img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
<h2 class="my-1.5 text-xl font-normal">{$t('course.navItem.news_feed.body_header')}</h2>
<p class="text-center text-sm text-slate-500">
{$t('course.navItem.news_feed.body_content')}
</p>
</div>
@@ -291,7 +289,7 @@
{:else}
{#each $newsFeed as feed}
{#if feed.isPinned}
<div class="flex items-center gap-2 mb-3">
<div class="mb-3 flex items-center gap-2">
<PinFilled size={16} />
<p class="text-sm">{$t('course.navItem.news_feed.pinned')}</p>
@@ -1,31 +1,30 @@
<script lang="ts">
import { browser } from '$app/environment';
import Box from '$lib/components/Box/index.svelte';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { getLectureNo } from '$lib/components/Course/function.js';
import { course, group } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import { snackbar } from '$lib/components/Snackbar/store';
import { ROLE } from '$lib/utils/constants/roles';
import { t } from '$lib/utils/functions/translations';
import { takeAttendance } from '$lib/utils/services/attendance';
import { globalStore } from '$lib/utils/store/app';
import { attendance } from '$lib/utils/store/attendance';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson, Lesson } from '$lib/utils/types/index';
import {
Search,
Checkbox,
Pagination,
Search,
StructuredList,
StructuredListBody,
StructuredListCell,
StructuredListHead,
StructuredListRow,
Pagination
StructuredListRow
} from 'carbon-components-svelte';
import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
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 Box from '$lib/components/Box/index.svelte';
import { course, group } from '$lib/components/Course/store';
import { getLectureNo } from '$lib/components/Course/function.js';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { ROLE } from '$lib/utils/constants/roles';
import { takeAttendance } from '$lib/utils/services/attendance';
import { snackbar } from '$lib/components/Snackbar/store';
import { attendance } from '$lib/utils/store/attendance';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson, Lesson } from '$lib/utils/types/index';
import { browser } from '$app/environment';
import { globalStore } from '$lib/utils/store/app';
import { t } from '$lib/utils/functions/translations';
export let data;
@@ -140,12 +139,12 @@
<CourseContainer bind:courseId={data.courseId}>
<PageNav title={$t('course.navItem.attendance.title')} />
<PageBody width="w-full max-w-6xl md:w-11/12">
<section class="flex items-center mx-2 lg:mx-9 my-5">
<section class="mx-2 my-5 flex items-center lg:mx-9">
<div
class="flex flex-col lg:flex-row items-start gap-2 lg:items-center justify-between w-full"
class="flex w-full flex-col items-start justify-between gap-2 lg:flex-row lg:items-center"
>
<div class="flex">
<p class="flex items-center mr-5">
<p class="mr-5 flex items-center">
<Checkbox checked disabled />
{$t('course.navItem.attendance.present')}
</p>
@@ -164,8 +163,8 @@
</div>
</section>
<section class="my-5 mx-2 lg:mx-9">
<StructuredList class="m-0 relative">
<section class="mx-2 my-5 lg:mx-9">
<StructuredList class="relative m-0">
<!-- Moved the lesson headers outside the students loop -->
<StructuredListHead class="bg-primary-100">
<StructuredListRow head class="mx-7">
@@ -186,8 +185,8 @@
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
<div class="w-1/4 flex items-center">
<p class="dark:text-white font-semibold">
<div class="flex w-1/4 items-center">
<p class="font-semibold dark:text-white">
{student.profile.fullname}
</p>
</div>
@@ -213,7 +212,7 @@
{#if students.length === 0}
<Box className="h-[300px] w-full">
<AudioConsoleIcon size={32} class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500 dark:text-white text-center">
<h3 class="text-center text-3xl text-gray-500 dark:text-white">
{$t('course.navItem.attendance.no_student')}
</h3>
</Box>
@@ -1,9 +1,8 @@
<script lang="ts">
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 IssueCertificateModal from '$lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
// import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
import Design from '$lib/components/Course/components/Ceritficate/Design.svelte';
// import Reports from '$lib/components/Course/components/Ceritficate/Reports.svelte';
@@ -1,29 +1,28 @@
<script lang="ts">
import { page } from '$app/stores';
import PageNav from '$lib/components/PageNav/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import {
lessons,
handleDelete,
lessonSections
} from '$lib/components/Course/components/Lesson/store/lessons';
import PageBody from '$lib/components/PageBody/index.svelte';
import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
import { course } from '$lib/components/Course/store';
import type { Lesson } from '$lib/utils/types';
import { t } from '$lib/utils/functions/translations';
import { goto } from '$app/navigation';
import { COURSE_VERSION } from '$lib/utils/types';
import { profile } from '$lib/utils/store/user';
import { page } from '$app/stores';
import Box from '$lib/components/Box/index.svelte';
import ActivateSectionsModal from '$lib/components/Course/components/Lesson/ActivateSectionsModal.svelte';
import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
import LessonList from '$lib/components/Course/components/Lesson/LessonList.svelte';
import LessonSectionList from '$lib/components/Course/components/Lesson/LessonSectionList.svelte';
import NewLessonModal from '$lib/components/Course/components/Lesson/NewLessonModal.svelte';
import ActivateSectionsModal from '$lib/components/Course/components/Lesson/ActivateSectionsModal.svelte';
import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
import {
handleDelete,
lessons,
lessonSections
} from '$lib/components/Course/components/Lesson/store/lessons';
import { course } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { t } from '$lib/utils/functions/translations';
import { profile } from '$lib/utils/store/user';
import type { Lesson } from '$lib/utils/types';
import { COURSE_VERSION } from '$lib/utils/types';
export let data;
@@ -135,7 +134,7 @@
</Box>
{:else if lessonsLength > 0}
{#if reorder}
<p class="text-gray-400 text-center dark:text-white italic text-xs">
<p class="text-center text-xs italic text-gray-400 dark:text-white">
{$t('course.navItem.lessons.drag')}
</p>
{/if}
@@ -147,10 +146,10 @@
{/if}
{:else}
<Box className="w-full lg:w-11/12 lg:px-4 m-auto">
<div class="flex justify-between flex-col items-center">
<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.lessons.body_header')}</h2>
<p class="text-sm text-center text-slate-500">
<div class="flex flex-col items-center justify-between">
<img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
<h2 class="my-1.5 text-xl font-normal">{$t('course.navItem.lessons.body_header')}</h2>
<p class="text-center text-sm text-slate-500">
{$t('course.navItem.lessons.body_content')}
</p>
</div>
@@ -1,53 +1,50 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { env } from '$env/dynamic/public';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import {
checkExercisesComplete,
fetchLesson,
updateLessonCompletion,
checkExercisesComplete
updateLessonCompletion
} from '$lib/utils/services/courses';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
import { globalStore } from '$lib/utils/store/app';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import { Dropdown } from 'carbon-components-svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
import LessonVersionHistory from '$lib/components/Course/components/Lesson/LessonVersionHistory.svelte';
import MODES from '$lib/utils/constants/mode';
import { group, course } from '$lib/components/Course/store';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
import ResultOld from 'carbon-icons-svelte/lib/ResultOld.svelte';
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
import { browser } from '$app/environment';
import { apps } from '$lib/components/Apps/store';
import APPS_CONSTANTS from '$lib/components/Apps/constants';
import IconButton from '$lib/components/IconButton/index.svelte';
import { getGroupMemberId } from '$lib/components/Course/function';
import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
import LessonVersionHistory from '$lib/components/Course/components/Lesson/LessonVersionHistory.svelte';
import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
import {
lesson,
lessons,
lessonByTranslation,
lessons,
lessonSections
} from '$lib/components/Course/components/Lesson/store/lessons';
import { browser } from '$app/environment';
import { currentOrg } from '$lib/utils/store/org';
import { getGroupMemberId } from '$lib/components/Course/function';
import { course, group } from '$lib/components/Course/store';
import IconButton from '$lib/components/IconButton/index.svelte';
import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import { COURSE_VERSION, type LessonCompletion, type Lesson } from '$lib/utils/types';
import { profile } from '$lib/utils/store/user';
import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
import { t } from '$lib/utils/functions/translations';
import MODES from '$lib/utils/constants/mode';
import { LANGUAGES } from '$lib/utils/constants/translation';
import { t } from '$lib/utils/functions/translations';
import { currentOrg } from '$lib/utils/store/org';
import { profile } from '$lib/utils/store/user';
import { COURSE_VERSION, type Lesson, type LessonCompletion } from '$lib/utils/types';
import { Dropdown } from 'carbon-components-svelte';
import { ChevronLeft, ChevronRight, Edit, Save } from 'carbon-icons-svelte';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
import ResultOld from 'carbon-icons-svelte/lib/ResultOld.svelte';
export let data;
@@ -73,7 +70,7 @@
async function fetchReqData(lessonId = '', isMaterialsTabActive: boolean) {
const timeout = setTimeout(() => {
$lesson.isFetching = true;
}, 1000);
}, 500);
let lessonData;
if (isMaterialsTabActive) {
const lesson = await fetchLesson(lessonId);
@@ -84,9 +81,9 @@
console.log({ lessonData });
const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
const totalComments = lessonData?.totalComments?.[0] && lessonData.totalComments[0].count;
setLesson(lessonData, totalExercises || 0, totalComments || 0);
const totalExercises = lessonData?.totalExercises?.[0]?.count || 0;
const totalComments = lessonData?.totalComments?.[0]?.count || 0;
setLesson(lessonData, totalExercises, totalComments);
$lesson.isFetching = false;
}
@@ -321,7 +318,7 @@
$: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
$: if (data.courseId && browser) {
$: if (data.courseId && $profile.id && browser) {
mode = MODES.view;
fetchReqData(data.lessonId, data.isMaterialsTabActive);
}
@@ -414,10 +411,6 @@
{:else if !!data.lessonId}
<PageBody
bind:isPageNavHidden={$globalStore.isStudent}
onClick={() => {
$apps.open = false;
$apps.dropdown = false;
}}
width="lg:w-full xl:w-11/12"
className="overflow-x-hidden"
>
@@ -465,14 +458,6 @@
<CourseIcon />
</button>
{/if}
<button
class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4 disabled:cursor-not-allowed disabled:opacity-10"
on:click={() => handleAppClick(APPS_CONSTANTS.APPS.COMMENTS)}
disabled={$globalStore.isStudent && !$currentOrg.customization.apps.comments}
>
<SendAlt size={24} class="carbon-icon" />
<span class="ml-1">{$lesson.totalComments}</span>
</button>
<button
class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4"
on:click={() => markLessonComplete(data.lessonId)}
@@ -1,31 +1,29 @@
<script lang="ts">
import { goto } from '$app/navigation';
import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
import Papa from 'papaparse';
import { OverflowMenu, OverflowMenuItem, Loading } from 'carbon-components-svelte';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
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';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { fetchExercisesByMarks } from '$lib/utils/services/courses';
import { getLectureNo } from '$lib/components/Course/function.js';
import { fetchMarks } from '$lib/utils/services/marks';
import { profile } from '$lib/utils/store/user';
import { browser } from '$app/environment';
import { course } from '$lib/components/Course/store';
import { goto } from '$app/navigation';
import Box from '$lib/components/Box/index.svelte';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { getLectureNo } from '$lib/components/Course/function.js';
import { course, group } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import { globalStore } from '$lib/utils/store/app';
import { ROLE } from '$lib/utils/constants/roles';
import { t } from '$lib/utils/functions/translations';
import { fetchExercisesByMarks } from '$lib/utils/services/courses';
import { fetchMarks } from '$lib/utils/services/marks';
import { globalStore } from '$lib/utils/store/app';
import { currentOrg } from '$lib/utils/store/org';
import type { CurrentOrg } from '$lib/utils/types/org';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson } from '$lib/utils/types';
import type { CurrentOrg } from '$lib/utils/types/org';
import { Loading, OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import Papa from 'papaparse';
export let data;
@@ -240,19 +238,19 @@
</PageNav>
<PageBody width="w-full max-w-6xl md:w-11/12">
<div id="tableContainer" class="table rounded-md border border-gray-300 w-full">
<div id="tableContainer" class="table w-full rounded-md border border-gray-300">
<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>
<p class="w-40 dark:text-white">{$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}>
<p class="col lesson-number dark:text-white" 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"
class="flex h-full items-center border-b-0 border-l-0 border-r-0 border-t border-gray-300"
>
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
<p
@@ -268,20 +266,20 @@
{/if}
{/each}
<div class="box flex items-center {borderleftGrey}">
<p class="dark:text-white w-20 text-center">{$t('course.navItem.marks.total')}</p>
<p class="w-20 text-center dark:text-white">{$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">
<div class="relative flex cursor-pointer items-center p-3 {borderBottomGrey}">
<div class="flex w-40 items-center">
<img
alt="Student avatar"
src={student.profile.avatar_url}
class="w-8 h-8 rounded-full mr-2"
class="mr-2 h-8 w-8 rounded-full"
/>
<div class="text-sm">
<p class="dark:text-white font-semibold">
<p class="font-semibold dark:text-white">
{student.profile.fullname}
</p>
<p class="dark:text-white">
@@ -293,7 +291,7 @@
{#if lessonMapping[lesson.id]}
<div class="flex items-center">
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
<p class="dark:text-white col">
<p class="col dark:text-white">
{studentMarksByExerciseId[student.id]
? studentMarksByExerciseId[student.id][exerciseId] || '-'
: '-'}
@@ -303,9 +301,9 @@
{/if}
{/each}
<div class="w-20 flex items-center">
<div class="flex w-20 items-center">
<div class="text-sm">
<p class="dark:text-white col">
<p class="col dark:text-white">
{calculateStudentTotal(studentMarksByExerciseId[student.id])}
</p>
</div>
@@ -3,8 +3,7 @@
import { page } from '$app/stores';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { t } from '$lib/utils/functions/translations';
@@ -1,8 +1,7 @@
<script>
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 Settings from '$lib/components/Course/components/Settings/index.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import { t } from '$lib/utils/functions/translations';
export let data;
@@ -1,38 +1,37 @@
<script lang="ts">
import { flip } from 'svelte/animate';
import { dndzone } from 'svelte-dnd-action';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { SkeletonPlaceholder } from 'carbon-components-svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
import Chip from '$lib/components/Chip/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { course } from '$lib/components/Course/store';
import {
fetchSubmissions,
updateSubmission,
updateQuestionAnswer,
deleteSubmission
} from '$lib/utils/services/submissions';
import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
import { formatAnswers } from '$lib/components/Course/function.js';
import { course } from '$lib/components/Course/store';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { PageBody, PageNav } from '$lib/components/Page';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { snackbar } from '$lib/components/Snackbar/store';
import isSubmissionEarly from '$lib/utils/functions/isSubmissionEarly';
import formatDate from '$lib/utils/functions/formatDate';
import {
triggerSendEmail,
NOTIFICATION_NAME
} from '$lib/utils/services/notification/notification';
import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
import { browser } from '$app/environment';
import isSubmissionEarly from '$lib/utils/functions/isSubmissionEarly';
import { t } from '$lib/utils/functions/translations';
import {
NOTIFICATION_NAME,
triggerSendEmail
} from '$lib/utils/services/notification/notification';
import {
deleteSubmission,
fetchSubmissions,
updateQuestionAnswer,
updateSubmission
} from '$lib/utils/services/submissions';
import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
import type {
SubmissionIdData,
SubmissionItem,
SubmissionSection
} from '$lib/utils/types/submission';
import { SkeletonPlaceholder } from 'carbon-components-svelte';
import { dndzone } from 'svelte-dnd-action';
import { flip } from 'svelte/animate';
export let data;
const { courseId } = data;
@@ -373,23 +372,23 @@
<PageNav title={$t('course.navItem.submissions.title')} />
<PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
<div class="flex items-center w-full">
<div class="flex w-full items-center">
{#each sections as { id, title, items }, idx (id)}
<div
class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-600 p-3 h-80 mr-3 overflow-hidden"
class="section mr-3 h-80 overflow-hidden rounded-md border border-gray-50 bg-gray-100 p-3 dark:border-neutral-600 dark:bg-black"
animate:flip={{ duration: flipDurationMs }}
>
<div class="flex items-center mb-2">
<div class="mb-2 flex items-center">
<Chip value={items.length} className="bg-set dark:bg-neutral-800" />
<p class="dark:text-white ml-2 font-bold">{title}</p>
<p class="ml-2 font-bold dark:text-white">{title}</p>
</div>
{#if fetching}
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
<SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
{:else}
<div
class="content pr-2 overflow-y-auto mb-3"
class="content mb-3 overflow-y-auto pr-2"
use:dndzone={{
items,
flipDurationMs,
@@ -402,19 +401,19 @@
<div
class="{item.isEarly
? 'border-none'
: 'border border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3"
: 'border border-red-700'} mx-0 my-2 w-full rounded-md bg-white px-3 py-3 dark:bg-neutral-800"
animate:flip={{ duration: flipDurationMs }}
>
<a
class="flex w-full items-center cursor-pointer text-black mb-2"
class="mb-2 flex w-full cursor-pointer items-center text-black"
href={`${$page.url.pathname}?submissionId=${item.id}`}
>
<img
alt="Student avatar"
class="block rounded-full h-6 w-6"
class="block h-6 w-6 rounded-full"
src={item.student.avatar_url}
/>
<p class="dark:text-white ml-2 text-sm">
<p class="ml-2 text-sm dark:text-white">
{item.student.username}
</p>
</a>
@@ -425,15 +424,15 @@
{item.exercise.title}
</a>
<a
class="flex items-center no-underline hover:underline text-black my-2"
class="my-2 flex items-center text-black no-underline hover:underline"
href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
.id}/exercises/{item.exercise.id}"
>
<p class="dark:text-white text-grey text-sm">
<p class="text-grey text-sm dark:text-white">
#{item.lesson.title}
</p>
</a>
<p class="dark:text-white text-gray-500 text-xs">
<p class="text-xs text-gray-500 dark:text-white">
{item.submittedAt}
</p>
<!-- <div class="badge rounded-md px-2 bg-green-500 text-white">