CLASSROOMIO-T-21: Course landing page + editor

This commit is contained in:
Rotimi Best
2022-12-30 13:08:54 +01:00
parent 38eae9dafb
commit 963d899adf
80 changed files with 2543 additions and 653 deletions
+2 -6
View File
@@ -11,11 +11,7 @@
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import Box from '../../../components/Box/index.svelte';
import {
course,
group,
setCourseData,
} from '../../../components/Course/store';
import { course, group, setCourse } from '../../../components/Course/store';
import { getLectureNo } from '../../../components/Course/function';
import { fetchCourse } from '../../../utils/services/courses';
import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
@@ -120,7 +116,7 @@
}
const { data } = await fetchCourse(courseId);
setCourseData(data);
setCourse(data);
setAttendance(data);
});
+2 -2
View File
@@ -7,7 +7,7 @@
<script>
import Overview from '../../../components/Course/index.svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import { setCourseData } from '../../../components/Course/store';
import { setCourse } from '../../../components/Course/store';
import { fetchCourse } from '../../../utils/services/courses';
export let courseId;
@@ -19,7 +19,7 @@
const { data } = await fetchCourse(courseId);
setCourseData(data);
setCourse(data);
prevCourseId = courseId;
}
+22 -2
View File
@@ -9,8 +9,28 @@
import CourseLandingPage from '../../../components/CourseLandingPage/index.svelte';
import Editor from '../../../components/CourseLandingPage/components/Editor/index.svelte';
import { isMobile } from '../../../utils/store/useMobile';
import { profile } from '../../../utils/store/user';
import { setCourse, course } from '../../../components/Course/store';
import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
import { fetchCourse } from '../../../utils/services/courses';
export let courseId;
let courseData = {};
async function triggerSetCourse(_profile) {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourse(data);
}
function setCourseData(course, lessons) {
courseData = { ...course, lessons };
}
$: triggerSetCourse($profile);
$: setCourseData($course, $lessons);
$: console.log('courseData changed', courseData);
</script>
<div
@@ -18,9 +38,9 @@
in:fly={{ y: 500, duration: 500 }}
out:fly={{ y: 500, duration: 500 }}
>
<Editor {courseId} />
<Editor {courseId} bind:course={courseData} />
<div class="rightBar" class:isMobile={$isMobile}>
<CourseLandingPage />
<CourseLandingPage bind:courseData />
</div>
</div>
@@ -29,10 +29,7 @@
import Materials from '../../../../../components/Course/components/Lesson/Materials/index.svelte';
import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
import MODES from '../../../../../utils/constants/mode.js';
import {
setCourseData,
course,
} from '../../../../../components/Course/store';
import { setCourse, course } from '../../../../../components/Course/store';
import { lesson } from '../../../../../components/Course/components/Lesson/store/lessons';
export let courseId;
@@ -53,14 +50,10 @@
let lessonData;
if (!$course.id) {
const [_course, lesson] = await Promise.all([
fetchCourse(courseId),
fetchLesson(lessonId),
]);
const { data } = await fetchCourse(courseId);
lessonData = lesson.data;
setCourseData(_course.data);
lessonData = data.lessons.find((lesson) => lesson.id === lessonId);
setCourse(data);
} else if (prevLessonId !== lessonId) {
const lesson = await fetchLesson(lessonId);
lessonData = lesson.data;
+2 -2
View File
@@ -36,7 +36,7 @@
} from '../../../../components/Course/components/Lesson/store/lessons';
import {
course,
setCourseData,
setCourse,
group,
} from '../../../../components/Course/store';
@@ -107,7 +107,7 @@
onMount(async () => {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourseData(data);
setCourse(data);
});
$: {
+2 -6
View File
@@ -12,11 +12,7 @@
import PageBody from '../../../components/PageBody/index.svelte';
import Box from '../../../components/Box/index.svelte';
import { ROLE } from '../../../utils/constants/roles';
import {
setCourseData,
course,
group,
} from '../../../components/Course/store';
import { setCourse, course, group } from '../../../components/Course/store';
import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
import {
fetchCourse,
@@ -50,7 +46,7 @@
onMount(async () => {
if (!$course.id) {
const { data } = await fetchCourse(courseId);
setCourseData(data);
setCourse(data);
}
const { data: marks } = await fetchMarks(courseId);
+2 -6
View File
@@ -25,11 +25,7 @@
import IconButton from '../../../components/IconButton/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte';
import {
setCourseData,
course,
group,
} from '../../../components/Course/store';
import { setCourse, course, group } from '../../../components/Course/store';
import InviationModal from '../../../components/Course/components/People/InviationModal.svelte';
import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
import {
@@ -102,7 +98,7 @@
onMount(async () => {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourseData(data);
setCourse(data);
});
$: sortAndFilterPeople($group.people, filterBy);
+2 -2
View File
@@ -20,12 +20,12 @@
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourseData } from '../../../components/Course/store';
import { setCourse } from '../../../components/Course/store';
export let courseData = {};
onMount(() => {
setCourseData(courseData);
setCourse(courseData);
});
</script>
+3 -3
View File
@@ -16,7 +16,7 @@
import PageBody from '../../../components/PageBody/index.svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import { fetchCourse } from '../../../utils/services/courses';
import { setCourseData, course } from '../../../components/Course/store';
import { setCourse, course } from '../../../components/Course/store';
import {
fetchSubmissions,
updateSubmission,
@@ -182,7 +182,7 @@
onMount(async () => {
if (!$course.id) {
const { data } = await fetchCourse(courseId);
setCourseData(data);
setCourse(data);
}
const { data: submissions } = await fetchSubmissions(
@@ -297,7 +297,7 @@
<div
class="border {item.isEarly
? 'border-grey-700'
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white py-2 px-3"
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white py-3 px-3"
animate:flip={{ duration: flipDurationMs }}
>
<div
+2 -2
View File
@@ -20,12 +20,12 @@
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourseData } from '../../../components/Course/store';
import { setCourse } from '../../../components/Course/store';
export let courseData = {};
onMount(() => {
setCourseData(courseData);
setCourse(courseData);
});
</script>