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/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">