From 60d0c6d837300b8b0df6c824770700d31d6616e5 Mon Sep 17 00:00:00 2001 From: Rotimi Best Date: Wed, 2 Aug 2023 21:17:17 +0000 Subject: [PATCH] CLASSROOMIO-T-79: Implement empty state pages Co-authored-by: Rotimi Best Merge-request: CLASSROOMIO-MR-32 Merged-by: Best Admin --- .vscode/settings.json | 10 --- src/lib/components/Box/index.svelte | 2 +- .../Lesson/Exercise/ViewMode.svelte | 64 +++++--------- .../components/Lesson/Exercises/index.svelte | 54 ++++-------- .../components/Lesson/Materials/index.svelte | 42 ++++++---- src/routes/+layout.svelte | 84 ++++++++----------- src/routes/courses/[id]/lessons/+page.svelte | 49 ++++------- .../[id]/lessons/[...lessonParams]/+page.js | 3 +- .../lessons/[...lessonParams]/+page.svelte | 29 ++----- static/images/empty-exercise-icon.svg | 3 + static/images/empty-lesson-icon.svg | 5 ++ static/images/empty-note-icon.svg | 18 ++++ static/images/empty-slide-icon.svg | 3 + static/images/empty-video-icon.svg | 4 + 14 files changed, 161 insertions(+), 209 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 static/images/empty-exercise-icon.svg create mode 100644 static/images/empty-lesson-icon.svg create mode 100644 static/images/empty-note-icon.svg create mode 100644 static/images/empty-slide-icon.svg create mode 100644 static/images/empty-video-icon.svg diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 1e7abf9d..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "prettier.jsxSingleQuote": true, - "prettier.singleQuote": true, - "svelte.plugin.svelte.format.config.singleQuote": true, - "editor.formatOnPaste": false, - "[svelte]": { - "editor.defaultFormatter": "svelte.svelte-vscode" - }, - "editor.formatOnSave": true -} diff --git a/src/lib/components/Box/index.svelte b/src/lib/components/Box/index.svelte index 29305ffc..8386894f 100644 --- a/src/lib/components/Box/index.svelte +++ b/src/lib/components/Box/index.svelte @@ -3,7 +3,7 @@
diff --git a/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte b/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte index 50dbf3b5..3d37bcd7 100644 --- a/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte +++ b/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte @@ -9,16 +9,14 @@ import CheckboxQuestion from '$lib/components/Question/CheckboxQuestion/index.svelte'; import TextareaQuestion from '$lib/components/Question/TextareaQuestion/index.svelte'; import PrimaryButton from '$lib/components/PrimaryButton/index.svelte'; + import Box from '$lib/components/Box/index.svelte'; import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte'; import Progress from '$lib/components/Progress/index.svelte'; import { removeDuplicate } from '$lib/utils/functions/removeDuplicate'; import { QUESTION_TYPE } from '$lib/components/Question/constants'; import { STATUS } from './constants'; import { getPropsForQuestion, filterOutDeleted } from './functions'; - import { - formatAnswers, - getGroupMemberId, - } from '$lib/components/Course/function'; + import { formatAnswers, getGroupMemberId } from '$lib/components/Course/function'; import { submitExercise } from '$lib/utils/services/courses'; import { fetchSubmission } from '$lib/utils/services/submissions'; import { profile } from '$lib/utils/store/user'; @@ -42,21 +40,18 @@ const prevAnswer = answers[id] || []; const formattedAnswer = - typeof value === 'string' - ? value - : removeDuplicate([...prevAnswer, ...(value || [])]); + typeof value === 'string' ? value : removeDuplicate([...prevAnswer, ...(value || [])]); $questionnaireMetaData.answers = { ...answers, - [id]: formattedAnswer, + [id]: formattedAnswer }; if (moveToNextQuestion) { $questionnaireMetaData.currentQuestionIndex += 1; } - const isFinished = - !questions[$questionnaireMetaData.currentQuestionIndex - 1]; + const isFinished = !questions[$questionnaireMetaData.currentQuestionIndex - 1]; console.log(`isFinished`, isFinished); console.log( `$questionnaireMetaData.currentQuestionIndex`, @@ -87,11 +82,7 @@ return 100; } - return ( - Math.round( - ((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100 - ) || 0 - ); + return Math.round(((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100) || 0; } function getTotalPossibleGrade() { @@ -113,7 +104,7 @@ const args = { exerciseId, courseId, - submittedBy: getGroupMemberId(people, profileId), + submittedBy: getGroupMemberId(people, profileId) }; const { data } = await fetchSubmission(args); hasSubmission = true; @@ -123,31 +114,26 @@ $questionnaireMetaData.answers = formatAnswers({ questions: $questionnaire.questions, - answers: submission.answers, + answers: submission.answers }); $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade(); - $questionnaireMetaData.currentQuestionIndex = - $questionnaire.questions.length; + $questionnaireMetaData.currentQuestionIndex = $questionnaire.questions.length; $questionnaireMetaData.isFinished = true; $questionnaireMetaData.status = submission.status_id; $questionnaireMetaData.finalTotalGrade = 0; - $questionnaireMetaData.grades = submission.answers.reduce( - (acc, answer) => { - acc[answer.question_id] = answer.point; - $questionnaireMetaData.finalTotalGrade += answer.point; + $questionnaireMetaData.grades = submission.answers.reduce((acc, answer) => { + acc[answer.question_id] = answer.point; + $questionnaireMetaData.finalTotalGrade += answer.point; - return acc; - }, - {} - ); + return acc; + }, {}); } } $: { - currentQuestion = - $questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1]; + currentQuestion = $questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1]; if ($questionnaireMetaData.currentQuestionIndex > 0 && !currentQuestion) { $questionnaireMetaData.isFinished = true; } @@ -182,16 +168,15 @@ questionnaireMetaData={$questionnaireMetaData} /> {:else if !$questionnaire.questions.length} -
-

- No questions added.
+ + Exercise svg +

No question added for this exercise

+

Click the Edit button to add. -

-
+

+ {:else if $questionnaireMetaData.currentQuestionIndex === 0}

{$questionnaire.title}

@@ -219,12 +204,7 @@ {@html marked($questionnaire.description || 'No desription')} - +
{:else if $questionnaireMetaData.isFinished}
diff --git a/src/lib/components/Course/components/Lesson/Exercises/index.svelte b/src/lib/components/Course/components/Lesson/Exercises/index.svelte index ef739756..1556aa75 100644 --- a/src/lib/components/Course/components/Lesson/Exercises/index.svelte +++ b/src/lib/components/Course/components/Lesson/Exercises/index.svelte @@ -1,7 +1,6 @@ - + @@ -104,11 +95,7 @@ {#if !data.isMaterialsTabActive} - + {:else if !!data.lessonId} diff --git a/static/images/empty-exercise-icon.svg b/static/images/empty-exercise-icon.svg new file mode 100644 index 00000000..3dcbaf01 --- /dev/null +++ b/static/images/empty-exercise-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/empty-lesson-icon.svg b/static/images/empty-lesson-icon.svg new file mode 100644 index 00000000..f17857b6 --- /dev/null +++ b/static/images/empty-lesson-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/images/empty-note-icon.svg b/static/images/empty-note-icon.svg new file mode 100644 index 00000000..07491b61 --- /dev/null +++ b/static/images/empty-note-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/static/images/empty-slide-icon.svg b/static/images/empty-slide-icon.svg new file mode 100644 index 00000000..094e6728 --- /dev/null +++ b/static/images/empty-slide-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/images/empty-video-icon.svg b/static/images/empty-video-icon.svg new file mode 100644 index 00000000..8e6561c2 --- /dev/null +++ b/static/images/empty-video-icon.svg @@ -0,0 +1,4 @@ + + + +