ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-108: Attendance improvement + complete lms exercise

Browse Source
This commit is contained in:
Rotimi Best
2023-10-01 19:31:18 +01:00
parent 6812895488
commit 21305c5d65
20 changed files with 316 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte
+3 -3
View File
@@ -7,8 +7,8 @@
import { marked } from 'marked';
export let preview;
function getTotalPossibleGrade() {
return $questionnaire.questions.reduce((acc, question) => {
function getTotalPossibleGrade(questions) {
return questions.reduce((acc, question) => {
acc += parseFloat(question.points, 10);
return acc;
}, 0);
@@ -48,7 +48,7 @@
</p>
|
<p class="dark:text-white mx-2">
<strong>{getTotalPossibleGrade()}</strong> points.
<strong>{getTotalPossibleGrade($questionnaire.questions)}</strong> points.
</p>
|
<p class="dark:text-white mx-2">All required</p>
src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte
+5 -5
View File
@@ -63,7 +63,7 @@
// If last question send to server
if (isFinished) {
$questionnaireMetaData.status = 1;
$questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade();
$questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
$questionnaireMetaData.grades = {};
submitExercise(
$questionnaireMetaData.answers,
@@ -87,8 +87,8 @@
return Math.round(((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100) || 0;
}
function getTotalPossibleGrade() {
return $questionnaire.questions.reduce((acc, question) => {
function getTotalPossibleGrade(questions) {
return questions.reduce((acc, question) => {
acc += parseFloat(question.points, 10);
return acc;
}, 0);
@@ -119,7 +119,7 @@
answers: submission.answers
});
$questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade();
$questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
$questionnaireMetaData.currentQuestionIndex = $questionnaire.questions.length;
$questionnaireMetaData.isFinished = true;
@@ -192,7 +192,7 @@
</p>
|
<p class="dark:text-white mx-2">
<strong>{getTotalPossibleGrade()}</strong> points.
<strong>{getTotalPossibleGrade($questionnaire.questions)}</strong> points.
</p>
|
<p class="dark:text-white mx-2">All required</p>
src/lib/components/Course/components/Lesson/Materials/index.svelte
+2
View File
@@ -218,6 +218,8 @@
$: addBadgeValueToTab($lesson.materials);
$: console.log('$lesson.materials', $lesson.materials);
$: updateNoteByCompletion($completion);
$: initPlyr(player, $lesson.materials.videos);
src/lib/components/Course/store.ts
+8 -2
View File
@@ -2,7 +2,7 @@ import { writable } from 'svelte/store';
import type { Writable } from 'svelte/store';
import { lessons } from './components/Lesson/store/lessons';
import { ROLE } from '$lib/utils/constants/roles';
import type { Course } from '$lib/utils/types';
import type { Course, GroupPerson } from '$lib/utils/types';
export const course: Writable<Course> = writable({
id: '',
@@ -16,6 +16,7 @@ export const course: Writable<Course> = writable({
is_published: false,
created_at: new Date().toDateString(),
updated_at: new Date().toDateString(),
attendance: [],
metadata: {
requirements: '',
description: '',
@@ -61,7 +62,12 @@ export const mockGroupMember = {
}
};
export const group = writable({
export const group = writable<{
id: number | null;
tutors: GroupPerson[];
students: GroupPerson[];
people: GroupPerson[];
}>({
id: null,
tutors: [],
students: [],
src/lib/components/PageNav/index.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
</script>
<div
class="header dark:bg-black bg-white flex items-center justify-between {!disableSticky &&
class="header dark:bg-black dark:border-neutral-600 bg-white flex items-center justify-between {!disableSticky &&
'sticky'} {paddingClass} {dynamicRootClass}"
style={overidableStyle}
>
src/lib/components/PrimaryButton/constants.js
+1 -1
View File
@@ -24,7 +24,7 @@ export const VARIANTS_CLASS = {
[VARIANTS.OUTLINED]:
'border border-primary-700 hover:border-black-300 hover:bg-primary-700 text-black dark:text-white',
[VARIANTS.NONE]:
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-neutral-800 text-black',
[VARIANTS.TEXT]: 'text-black hover:underline',
[VARIANTS.LINK]: 'text-primary-500 dark:text-primary-500 hover:underline',
[VARIANTS.TEXT_DANGER]:
src/lib/components/Question/CheckboxQuestion/index.svelte
+2 -4
View File
@@ -82,7 +82,7 @@
<div class="ml-4">
{#each options as option}
<button
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-500 w-full {getValidationClassName(
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-neutral-800 w-full {getValidationClassName(
option
)}"
type="button"
@@ -107,9 +107,7 @@
variant={VARIANTS.OUTLINED}
/>
<PrimaryButton
variant={nextButtonProps.isActive
? VARIANTS.CONTAINED
: VARIANTS.OUTLINED}
variant={nextButtonProps.isActive ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}
type="submit"
label={nextButtonProps.label}
{name}
src/lib/components/Question/RadioQuestion/index.svelte
+1 -1
View File
@@ -91,7 +91,7 @@
<div class={!disableOptContainerMargin && 'ml-4'}>
{#each options as option}
<button
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-500 w-full {getValidationClassName(
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-neutral-800 w-full {getValidationClassName(
option
)}"
type="button"
src/lib/components/Tabs/index.svelte
+6 -6
View File
@@ -7,20 +7,20 @@
</script>
<div class="w-full flex flex-col">
<div class="flex items-center border-b-2 w-full overflow-x-auto">
<div class="flex items-center border-b w-full overflow-x-auto">
{#each tabs as tab}
{#if !tab.icon && !tab.badgeValue}
<button
class="relative {currentTab === tab.value
? 'text-primary-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-4 text-center py-3 px-2"
on:click={onChange(tab.value)}
>
<div class="flex items-center justify-center w-full text-center">
{tab.label}
</div>
<span
class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
@@ -30,7 +30,7 @@
<button
class="relative {currentTab === tab.value
? 'text-primary-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-8 px-2"
on:click={onChange(tab.value)}
>
<div class="grid grid-cols-5 md:grid-cols-4 gap-5 md:gap-3 items-center">
@@ -43,12 +43,12 @@
value={tab.badgeValue}
size="sm"
shape="rounded-full"
className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
className="bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
/>
{/if}
</div>
<span
class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
src/lib/utils/services/courses/index.ts
+9 -6
View File
@@ -10,6 +10,7 @@ import type {
LessonCompletion
} from '$lib/utils/types';
import { STATUS } from '$lib/utils/constants/course';
import type { PostgrestError, PostgrestSingleResponse } from '@supabase/supabase-js';
export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']) {
let match: { slug?: string; id?: string; status?: string } = {};
@@ -22,7 +23,7 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
match.status = STATUS[STATUS.ACTIVE];
const { data, error } = await supabase
const response: PostgrestSingleResponse<Course | null> = await supabase
.from('course')
.select(
`
@@ -53,6 +54,9 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
)
.match(match)
.single();
const { data, error } = response;
console.log(`error`, error);
if (!data || error) {
console.log(`data`, data);
@@ -185,7 +189,6 @@ function isNew(item: any) {
return isNaN(item);
}
// TODO: Add questionnaire type
export async function upsertExercise(questionnaire: any, exerciseId: Exercise['id']) {
const {
questions,
@@ -214,7 +217,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
const { title, id, name, question_type, options, deleted_at, order, points, is_dirty } =
question;
// DELETE /delete/:questionId - Don't delete if answer already given
// "DELETE" /delete/:questionId - Don't delete if answer already given
if (deleted_at) {
// Delete from server only if this question exists in the database
if (!isNew(id)) {
@@ -232,7 +235,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
continue;
}
// INSERT or UPDATE /update/:questionId or /insert/:questionId
// "INSERT" or "UPDATE" /update/:questionId or /insert/:questionId
const newQuestion = {
id: isNew(id) ? undefined : id,
name: isNew(id) ? undefined : name,
@@ -274,7 +277,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
for (const option of options) {
const { deleted_at, is_dirty } = option;
// DELETE /delete/:optionId
// "DELETE" /delete/:optionId
if (deleted_at) {
// if this option exists in the database
if (!isNew(option.id)) {
@@ -285,7 +288,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
continue;
}
// INSERT and UPDATE
// "INSERT" and "UPDATE"
const newOption = {
...option,
is_dirty: undefined,
src/lib/utils/services/lms/exercises.ts
+96
View File
@@ -0,0 +1,96 @@
import { supabase } from '$lib/utils/functions/supabase';
import type { PostgrestError } from '@supabase/supabase-js';
export interface LMSExercise {
id: string;
title: string;
updated_at: string;
submission: {
status_id: number;
updated_at: string;
groupmember: {
id: string;
profile: {
id: string;
}[];
}[];
}[];
lesson: {
id: string;
title: string;
order: number;
course: {
id: string;
title: string;
group: {
organisation: {
id: string;
}[];
}[];
groupmember: {
id: string;
profile: {
id: string;
}[];
}[];
};
};
}
interface FetchLMSExercisesResponse {
exercises: LMSExercise[] | null;
error: PostgrestError | null;
}
export async function fetchLMSExercises(
profileId: string,
orgId: string
): Promise<FetchLMSExercisesResponse> {
const { data, error } = await supabase
.from('exercise')
.select(
`
id,
title,
updated_at,
submission (
status_id,
updated_at,
groupmember:submitted_by!inner (
id,
profile!inner (
id
)
)
),
lesson!inner (
id,
title,
order,
course!inner (
id,
title,
group:group_id!inner (
organisation:organization_id!inner (
id
)
),
groupmember:group_id!inner(
id,
profile!inner (
id
)
)
)
)
`
)
.eq('lesson.course.group.organisation.id', orgId)
.eq('lesson.course.groupmember.profile.id', profileId)
.eq('submission.groupmember.profile.id', profileId);
return {
exercises: data,
error
};
}
src/lib/utils/store/attendance.js
-3
View File
@@ -1,3 +0,0 @@
import { writable } from 'svelte/store';
export const attendance = writable({});
src/lib/utils/store/attendance.ts
+10
View File
@@ -0,0 +1,10 @@
import { writable } from 'svelte/store';
export const attendance = writable<{
[key: string]: {
[key: string]: {
is_present: boolean;
id: number;
};
};
}>({});
src/lib/utils/types/index.ts
+19
View File
@@ -1,6 +1,19 @@
export * from './config';
export * from './dashboard';
//===============Custom Type===============
export interface GroupPerson {
assigned_student_id: number | null;
created_at: string;
email: string | null;
group_id: string;
id: string;
profile: Profile;
profile_id: string;
role_id: Role['id'];
}
//===========================================
interface CourseMetadata {
requirements: string;
description: string;
@@ -109,6 +122,12 @@ export interface Course {
is_published?: boolean;
progress_rate?: number;
total_lessons?: number;
attendance: {
student_id: string;
lesson_id: string;
is_present: boolean;
id: number;
}[];
}
export interface Groupmember {
src/routes/courses/[id]/attendance/+page.svelte
+23 -10
View File
@@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { onMount } from 'svelte';
import {
Search,
@@ -22,16 +22,25 @@
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 { attendance } from '$lib/utils/store/attendance.js';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson, Lesson } from '$lib/utils/types/index';
export let data;
interface CourseData {
attendance: {
student_id: string;
lesson_id: string;
is_present: boolean;
id: number;
}[];
}
let students = [];
let isStudent;
let students: GroupPerson[] = [];
let isStudent: boolean;
let searchValue = '';
function setAttendance(courseData) {
function setAttendance(courseData: CourseData) {
for (const attendanceItem of courseData.attendance) {
const { student_id, lesson_id, is_present, id } = attendanceItem;
@@ -54,10 +63,12 @@
}
}
function handleAttendanceChange(e, student, lesson) {
function handleAttendanceChange(e: any, student: GroupPerson, lesson: Lesson) {
if (isStudent) return;
const attendanceItem = $attendance[student.id] ? $attendance[student.id][lesson.id] || {} : {};
const attendanceItem = $attendance[student.id]
? $attendance[student.id][lesson.id] || { id: undefined }
: { id: undefined };
/*
This validation is useless. We shouldn't assume we already have an attendance item id
@@ -102,7 +113,7 @@
}
// function for the searchbar
function searchStudents(query) {
function searchStudents(query: string) {
const lowercaseQuery = query.toLowerCase();
return students.filter((student) =>
student.profile.fullname.toLowerCase().includes(lowercaseQuery)
@@ -118,6 +129,8 @@
}
const { data: _data } = await fetchCourse(data.courseId);
if (!_data) return;
setCourse(_data);
setAttendance(_data);
});
@@ -125,7 +138,7 @@
$: students = isStudent
? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
console.log(students);
$: console.log(students);
</script>
<CourseContainer bind:isStudent>
@@ -180,7 +193,7 @@
{#each $lessons as lesson}
<StructuredListCell class="">
<Checkbox
class={isStudent && 'cursor-not-allowed'}
class={isStudent ? 'cursor-not-allowed' : ''}
disabled={isStudent}
checked={$attendance[student.id]
? $attendance[student.id][lesson.id]
src/routes/courses/[id]/lessons/+page.svelte
-1
View File
@@ -50,7 +50,6 @@
return `${ye}-${mo}-${da}`;
}
// TODO: CRUD of lessons
function addLesson() {
openModal = true;
}
src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+4 -3
View File
@@ -51,7 +51,7 @@
}
}
async function fetchReqData(lessonId = '') {
async function fetchReqData(lessonId = '', isMaterialsTabActive: false) {
isFetching = true;
let lessonData;
@@ -61,11 +61,12 @@
lessonData = _data?.lessons.find((lesson) => lesson.id === lessonId);
setCourse(_data);
} else if (prevLessonId !== lessonId) {
} else if (isMaterialsTabActive) {
const lesson = await fetchLesson(lessonId);
lessonData = lesson.data;
}
console.log('lessonData', lessonData);
prevLessonId = lessonId;
const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
@@ -197,7 +198,7 @@
$: if (data.courseId && browser) {
mode = MODES.view;
fetchReqData(data.lessonId);
fetchReqData(data.lessonId, data.isMaterialsTabActive);
}
</script>
src/routes/courses/[id]/submissions/+page.svelte
+6 -6
View File
@@ -242,14 +242,14 @@
<PageNav title="Submitted Exercises" />
<PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
<div class="flex items-center w-full overflow-x-scroll">
<div class="flex items-center w-full">
{#each sections as { id, title, items }, idx (id)}
<div
class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
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"
animate:flip={{ duration: flipDurationMs }}
>
<div class="flex items-center mb-2">
<Chip value={items.length} class="bg-set" />
<Chip value={items.length} className="bg-set dark:bg-neutral-800" />
<p class="dark:text-white ml-2 font-bold">{title}</p>
</div>
<div
@@ -264,9 +264,9 @@
>
{#each items as item (item.id)}
<div
class="border {item.isEarly
? 'border-grey-700'
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-black py-3 px-3"
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"
animate:flip={{ duration: flipDurationMs }}
>
<a
src/routes/lms/exercises/+page.svelte
+113 -91
View File
@@ -1,91 +1,120 @@
<script>
import { page } from '$app/stores';
<script lang="ts">
import { cloneDeep } from 'lodash';
import Chip from '$lib/components/Chip/index.svelte';
import { profile } from '$lib/utils/store/user';
import { browser } from '$app/environment';
import { currentOrg } from '$lib/utils/store/org';
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';
let sections = [
dayjs.extend(relativeTime);
const defaultSections = [
{
id: 1,
title: 'Pending',
value: 0,
items: [
{
id: 1,
statusId: 'pending',
isEarly: true,
submittedAt: '5 min ago',
exercise: {
id: 1,
title: 'Ai for dummies'
},
// answers,
student: {
username: 'user'
},
lesson: {
id: 1,
title: 'Introduction to AI'
}
}
],
id: 0,
title: 'Not Submitted',
items: [],
className: 'text-[#E35353] bg-[#FDDFE4]'
},
{
id: 2,
id: 1,
title: 'Submitted',
value: 0,
items: [
{
id: 2,
statusId: 'pending',
isEarly: true,
submittedAt: '5 min ago',
exercise: {
id: 2,
title: 'Digital photography for dummies'
},
// answers,
student: {
username: 'user'
},
lesson: {
id: 2,
title: 'Introduction to Photography'
}
}
],
className: 'text-[#0233BD] bg-[#D9E0F5]'
items: [],
className: 'text-orange-700 bg-orange-200'
},
{
id: 2,
title: 'Grading',
items: [],
className: 'text-yellow-700 bg-yellow-200'
},
{
id: 3,
title: 'Graded',
value: 0,
items: [
{
id: 3,
statusId: 'pending',
isEarly: true,
submittedAt: '5 min ago',
exercise: {
id: 3,
title: 'Landscaping and its deep secrets'
},
// answers,
student: {
username: 'user'
},
lesson: {
id: 1,
title: 'Introduction to Landscape'
}
}
],
className: 'text-[#0F9D58] bg-[#E2FEEA]'
items: [],
className: 'text-green-700 bg-green-200'
}
];
let sections: Section[] = cloneDeep(defaultSections);
interface Section {
id: number;
title: string;
className: string;
items: ExerciseItem[];
}
interface ExerciseItem {
courseTitle: string;
courseURL: string;
exerciseTitle: string;
exerciseId: string;
exerciseURL: string;
lessonNo: string;
lessonURL: string;
submissionStatus: number;
submissionUpdatedAt: string;
}
function generateSections(exercises: LMSExercise[]): Section[] {
const _sections: Section[] = cloneDeep(defaultSections);
for (const exercise of exercises) {
const { id, title, updated_at, submission, lesson } = exercise;
const submissionItem = submission[0] || {
status_id: 0,
updated_at
};
const courseURL = `/courses/${lesson.course.id}`;
const lessonURL = `${courseURL}/lessons/${lesson.id}`;
const exerciseURL = `${lessonURL}/exercises/${id}`;
const item: ExerciseItem = {
exerciseId: id,
courseTitle: lesson.course.title,
courseURL,
exerciseTitle: title,
exerciseURL,
lessonNo: lesson.order < 9 ? '0' + (lesson.order + 1) : `${lesson.order}`,
lessonURL,
submissionStatus: submissionItem.status_id,
submissionUpdatedAt: dayjs(submissionItem.updated_at).fromNow(true) + ` ago`
};
_sections[submissionItem.status_id].items.push(item);
}
return _sections;
}
async function fetchData(profileId: string, orgId: string) {
const { exercises, error } = await fetchLMSExercises(profileId, orgId);
console.log('exercises', exercises);
console.log('error', error);
if (error) {
snackbar.error('Fetching exercises failed, please reload the page');
return;
}
if (!exercises) return;
sections = generateSections(exercises);
}
$: if (browser && $profile.id && $currentOrg.id) {
fetchData($profile.id, $currentOrg.id);
}
</script>
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<div class="p-5">
<div class="flex items-center justify-between mb-10">
<h1 class="dark:text-white text-3xl font-bold">Exercises</h1>
</div>
@@ -94,41 +123,34 @@
<div class="flex items-center w-full">
{#each sections as { title, items, className }}
<div
class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-700 p-3 mr-3 overflow-hidden"
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"
>
<div class="flex items-center mb-2 gap-2">
<p class="dark:text-white ml-2 font-bold">{title}</p>
<Chip value={items.length} {className} />
</div>
<div class="content pr-2 overflow-y-auto mb-3">
{#each items as item (item.id)}
<div class="pr-2 h-full overflow-y-auto pb-3">
{#each items as item}
<div class=" w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3">
<a
class="flex w-full items-center cursor-pointer text-black mb-2"
href={`${$page.url.pathname}?submissionId=${item.id}`}
class="flex w-full items-center cursor-pointer text-primary-600 mb-2"
href={item.courseURL}
>
<p class="dark:text-white ml-2 text-sm">
{item.student.username}
</p>
<p class="text-xs">{item.courseTitle}</p>
</a>
<a class="text-black dark:text-white text-md font-bold" href={item.exerciseURL}>
{item.exerciseTitle}
</a>
<a
class="text-primary-700 dark:text-white text-md font-bold"
href="{$page.url.pathname}?submissionId={item.id}"
>
{item.exercise.title}
</a>
<a
class="flex items-center no-underline hover:underline text-black my-2"
href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
.id}/exercises/{item.exercise.id}"
class="flex items-center no-underline hover:underline text-black my-2 w-fit"
href={item.lessonURL}
>
<p class="dark:text-white text-grey text-sm">
#{item.lesson.title}
{`${item.tutor ? 'created by' + item.tutor.name : ''}`}
#Lesson {item.lessonNo}
</p>
</a>
<p class="dark:text-white text-gray-500 text-xs">
{item.submittedAt}
{item.submissionUpdatedAt}
</p>
</div>
{/each}
src/routes/lms/mylearning/+page.svelte
+7 -2
View File
@@ -7,6 +7,7 @@
import { profile } from '$lib/utils/store/user';
import { currentOrg } from '$lib/utils/store/org';
import { courses, courseMetaDeta, coursesComplete } from '$lib/components/Courses/store';
import { browser } from '$app/environment';
const tabs = [
{
@@ -26,13 +27,15 @@
}
async function getCourses(userId: string | null, orgId: string) {
console.log('hasFetched', hasFetched);
if (hasFetched || !userId || !orgId) {
return;
}
hasFetched = true;
$courseMetaDeta.isLoading = true;
const coursesResult = await fetchCourses(userId, orgId);
console.log(`coursesResult`, coursesResult);
console.log(`get courses result`, coursesResult);
$courseMetaDeta.isLoading = false;
if (!coursesResult) return;
@@ -41,7 +44,9 @@
hasFetched = true;
}
$: getCourses($profile.id, $currentOrg.id);
$: if (browser && $profile.id && $currentOrg.id) {
getCourses($profile.id, $currentOrg.id);
}
</script>
<section class="max-w-6xl mx-auto">