Grade home works
This commit is contained in:
rotimi-best
@@ -1,32 +1,35 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Modal from '../../../../Modal/index.svelte';
|
||||
import Select from '../../../../Form/Select.svelte';
|
||||
import PrimaryButton from '../../../../PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '../../../../PrimaryButton/constants';
|
||||
import Preview from './Preview.svelte';
|
||||
import { SELECTABLE_STATUS } from './constants';
|
||||
import { snackbarStore } from '../../../../Snackbar/store';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let open;
|
||||
export let onClose;
|
||||
export let open = false;
|
||||
export let onClose = () => {};
|
||||
export let handleSave = () => {};
|
||||
|
||||
// export let submissionId;
|
||||
export let data = {};
|
||||
export let status = SELECTABLE_STATUS[0];
|
||||
export let updateStatus = () => {};
|
||||
|
||||
let status = SELECTABLE_STATUS[0];
|
||||
|
||||
let grades = {};
|
||||
let total = 0;
|
||||
let gradeTotal = 0;
|
||||
let maxPoints = 0;
|
||||
|
||||
function setGrades(data) {
|
||||
grades = (data.questions || []).reduce(
|
||||
(acc, question) => ({ ...acc, [question.name]: question.points }),
|
||||
{}
|
||||
function getMaxPoints(questions) {
|
||||
return (questions || []).reduce(
|
||||
(acc, question) => acc + question.points,
|
||||
0
|
||||
);
|
||||
|
||||
gradeTotal = calculateTotal(grades);
|
||||
}
|
||||
|
||||
function calculateTotal(grades) {
|
||||
if (!grades) return 0;
|
||||
return Object.values(grades).reduce(
|
||||
(acc, grade) => acc + parseInt(grade),
|
||||
0
|
||||
@@ -34,21 +37,48 @@
|
||||
}
|
||||
|
||||
function handleStatusChange() {
|
||||
console.log(`status`, status);
|
||||
updateStatus({
|
||||
submissionId: data.id,
|
||||
prevStatusId: data.status_id,
|
||||
nextStatusId: status.value,
|
||||
total,
|
||||
});
|
||||
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = `Submission updated to '${status.label}'`;
|
||||
}
|
||||
|
||||
function setStatus(data) {
|
||||
status = SELECTABLE_STATUS.find(
|
||||
(status) => status.value === data.status_id
|
||||
);
|
||||
}
|
||||
|
||||
function getStatusColor(status) {
|
||||
// if (!status)
|
||||
return '';
|
||||
|
||||
// switch (status.value) {
|
||||
// case STATUS.SUBMITTED:
|
||||
// return '';
|
||||
// case STATUS.IN_PROGRESS:
|
||||
// return 'text-white bg-blue-700';
|
||||
// case STATUS.GRADED:
|
||||
// return 'text-white bg-green-700';
|
||||
// }
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
console.log('mounting');
|
||||
});
|
||||
|
||||
$: setGrades(data);
|
||||
$: total = calculateTotal(grades);
|
||||
$: total = calculateTotal(data.questionAnswerByPoint);
|
||||
$: maxPoints = getMaxPoints(data.questions);
|
||||
$: setStatus(data);
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
modalHeading="Lesson 1: How to use props in React.js"
|
||||
modalHeading={data.title}
|
||||
bind:open
|
||||
{onClose}
|
||||
width="w-4/5"
|
||||
@@ -61,16 +91,27 @@
|
||||
answers: data.answers || {},
|
||||
isFinished: true,
|
||||
}}
|
||||
bind:grades
|
||||
bind:grades={data.questionAnswerByPoint}
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-10 w-1/3">
|
||||
<Select
|
||||
bind:value={status}
|
||||
options={SELECTABLE_STATUS}
|
||||
color="primary"
|
||||
onChange={handleStatusChange}
|
||||
/>
|
||||
<div class="ml-4 w-2/5 sticky top-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<Select
|
||||
bind:value={status}
|
||||
options={SELECTABLE_STATUS}
|
||||
selectClassName={getStatusColor(status)}
|
||||
onChange={handleStatusChange}
|
||||
/>
|
||||
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
handleSave(data);
|
||||
}}
|
||||
label="Save"
|
||||
variant={VARIANTS.CONTAINED_SUCCESS}
|
||||
className="py-2 px-8"
|
||||
/>
|
||||
</div>
|
||||
<div class="border border-gray-300 rounded-md mt-2">
|
||||
<div
|
||||
class="hover:bg-gray-100 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
|
||||
@@ -79,24 +120,31 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center text-sm p-3">
|
||||
<p class="font-bold w-1/2">Total grade</p>
|
||||
<p>{total} / {gradeTotal}</p>
|
||||
<p class="font-bold w-2/5">Total grade</p>
|
||||
<p>{total} / {maxPoints}</p>
|
||||
</div>
|
||||
<div class="flex items-center text-sm p-3">
|
||||
<!-- <div class="flex items-center text-sm p-3">
|
||||
<p class="font-bold w-1/2">Status</p>
|
||||
<div class="flex items-center">
|
||||
<p class="rounded-full w-5 h-5 bg-yellow-300 mr-2" />
|
||||
<p>Grading</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex items-center text-sm p-3">
|
||||
<p class="font-bold w-1/2">Student</p>
|
||||
<p>Jeremy Matt</p>
|
||||
<p class="font-bold w-2/5">Student</p>
|
||||
{#if data.student}
|
||||
<img
|
||||
alt="Student avatar"
|
||||
class="block rounded-full h-6 w-6"
|
||||
src={data.student.avatar_url}
|
||||
/>
|
||||
<p class="ml-2 text-sm">{data.student.fullname}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center text-sm p-3">
|
||||
<!-- <div class="flex items-center text-sm p-3">
|
||||
<p class="font-bold w-1/2">Teacher</p>
|
||||
<p>rotimi-best</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
export let onSubmit = () => {};
|
||||
export let onPrevious = () => {};
|
||||
export let handleGrade = () => {};
|
||||
export let disableGrading = false;
|
||||
</script>
|
||||
|
||||
{#each questions as currentQuestion, currentQuestionIndex}
|
||||
@@ -25,9 +26,10 @@
|
||||
onPrevious,
|
||||
true
|
||||
)}
|
||||
bind:grade={grades[currentQuestion.name]}
|
||||
bind:grade={grades[currentQuestion.id]}
|
||||
gradeMax={currentQuestion.points}
|
||||
handleGrade={handleGrade(currentQuestion.name)}
|
||||
handleGrade={handleGrade(currentQuestion.id)}
|
||||
{disableGrading}
|
||||
/>
|
||||
{:else if QUESTION_TYPE.CHECKBOX === currentQuestion.question_type.id}
|
||||
<CheckboxQuestion
|
||||
@@ -40,9 +42,10 @@
|
||||
onPrevious,
|
||||
true
|
||||
)}
|
||||
bind:grade={grades[currentQuestion.name]}
|
||||
bind:grade={grades[currentQuestion.id]}
|
||||
gradeMax={currentQuestion.points}
|
||||
handleGrade={handleGrade(currentQuestion.name)}
|
||||
handleGrade={handleGrade(currentQuestion.id)}
|
||||
{disableGrading}
|
||||
/>
|
||||
{:else if QUESTION_TYPE.TEXTAREA === currentQuestion.question_type.id}
|
||||
<TextareaQuestion
|
||||
@@ -55,9 +58,10 @@
|
||||
onPrevious,
|
||||
true
|
||||
)}
|
||||
bind:grade={grades[currentQuestion.name]}
|
||||
bind:grade={grades[currentQuestion.id]}
|
||||
gradeMax={currentQuestion.points}
|
||||
handleGrade={handleGrade(currentQuestion.name)}
|
||||
handleGrade={handleGrade(currentQuestion.id)}
|
||||
{disableGrading}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
@@ -13,7 +13,9 @@
|
||||
import { QUESTION_TYPE } from '../../../../Question/constants';
|
||||
import { STATUS } from './constants';
|
||||
import { getPropsForQuestion, filterOutDeleted } from './functions';
|
||||
import { formatAnswers } from '../../../function';
|
||||
import { submitExercise } from '../../../../../utils/services/courses';
|
||||
import { fetchSubmission } from '../../../../../utils/services/submissions';
|
||||
import { profile } from '../../../../../utils/store/user';
|
||||
export let preview;
|
||||
|
||||
@@ -21,6 +23,15 @@
|
||||
|
||||
let currentQuestion = {};
|
||||
let renderProps = {};
|
||||
let submission;
|
||||
|
||||
function getGroupMemberId(people, profileId) {
|
||||
const groupMember = people.find(
|
||||
(person) => person.profile_id === profileId
|
||||
);
|
||||
|
||||
return groupMember ? groupMember.id : null;
|
||||
}
|
||||
|
||||
function handleStart() {
|
||||
$questionnaireMetaData.currentQuestionIndex += 1;
|
||||
@@ -55,13 +66,13 @@
|
||||
|
||||
// If last question send to server
|
||||
if (isFinished) {
|
||||
$questionnaireMetaData.status = 1;
|
||||
submitExercise(
|
||||
$questionnaireMetaData.answers,
|
||||
questions,
|
||||
exerciseId,
|
||||
$course.id,
|
||||
$group,
|
||||
$profile
|
||||
getGroupMemberId($group.people, $profile.id)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -70,15 +81,6 @@
|
||||
$questionnaireMetaData.currentQuestionIndex -= 1;
|
||||
}
|
||||
|
||||
function getTotalScores() {
|
||||
let total = 0;
|
||||
for (const score in $questionnaireMetaData.scores) {
|
||||
total += parseInt($questionnaireMetaData.scores[score]);
|
||||
}
|
||||
|
||||
return total;
|
||||
}
|
||||
|
||||
function getProgressValue(currentQuestionIndex) {
|
||||
if ($questionnaireMetaData.isFinished) {
|
||||
return 100;
|
||||
@@ -91,6 +93,55 @@
|
||||
);
|
||||
}
|
||||
|
||||
function getTotalPossibleGrade() {
|
||||
return $questionnaire.questions.reduce((acc, question) => {
|
||||
acc += question.points;
|
||||
return acc;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
async function checkForSubmission(people, profileId, courseId) {
|
||||
console.log('checkForSubmission');
|
||||
|
||||
if (!Array.isArray(people) || !profileId || !courseId || !!submission) {
|
||||
return;
|
||||
}
|
||||
|
||||
const args = {
|
||||
exerciseId,
|
||||
courseId,
|
||||
submittedBy: getGroupMemberId(people, profileId),
|
||||
};
|
||||
const { data } = await fetchSubmission(args);
|
||||
|
||||
if (Array.isArray(data) && data.length) {
|
||||
console.log(`submissions`, data);
|
||||
submission = data[0];
|
||||
|
||||
$questionnaireMetaData.answers = formatAnswers({
|
||||
questions: $questionnaire.questions,
|
||||
answers: submission.answers,
|
||||
});
|
||||
|
||||
$questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade();
|
||||
|
||||
$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;
|
||||
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
currentQuestion =
|
||||
$questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1];
|
||||
@@ -114,6 +165,8 @@
|
||||
$: $questionnaireMetaData.progressValue = getProgressValue(
|
||||
$questionnaireMetaData.currentQuestionIndex
|
||||
);
|
||||
|
||||
$: checkForSubmission($group.people, $profile.id, $course.id);
|
||||
</script>
|
||||
|
||||
{#if !preview && $questionnaire.questions.length && !$questionnaireMetaData.isFinished}
|
||||
@@ -137,7 +190,20 @@
|
||||
{:else if $questionnaireMetaData.currentQuestionIndex === 0}
|
||||
<div>
|
||||
<h2 class="my-1">{$questionnaire.title}</h2>
|
||||
<p>{$questionnaire.description}</p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<p class="mx-2">
|
||||
<strong>{$questionnaire.questions.length}</strong> questions
|
||||
</p>
|
||||
|
|
||||
<p class="mx-2">
|
||||
<strong>{getTotalPossibleGrade()}</strong> points.
|
||||
</p>
|
||||
|
|
||||
<p class="mx-2">All required</p>
|
||||
</div>
|
||||
|
||||
<p class="text-lg mt-3">{$questionnaire.description}</p>
|
||||
|
||||
<PrimaryButton
|
||||
onClick={handleStart}
|
||||
@@ -150,20 +216,20 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col justify-between">
|
||||
<h2 class="text-xl mb-2 mt-0">{$questionnaire.title}</h2>
|
||||
{#if STATUS.PENDING === $questionnaireMetaData.status}
|
||||
<span
|
||||
class="bg-yellow-600 text-white rounded-full py-2 px-6 text-center"
|
||||
title="Status: Pending Review"
|
||||
>
|
||||
Pending
|
||||
</span>
|
||||
{:else if STATUS.GRADED === $questionnaireMetaData.status && getTotalScores() > 0}
|
||||
{#if STATUS.GRADED === $questionnaireMetaData.status}
|
||||
<span
|
||||
class="bg-green-700 text-white rounded-full py-2 px-6 text-center"
|
||||
title="Status: Pending Review"
|
||||
>
|
||||
Graded
|
||||
</span>
|
||||
{:else}
|
||||
<span
|
||||
class="bg-yellow-600 text-white rounded-full py-2 px-6 text-center"
|
||||
title="Status: Pending Review"
|
||||
>
|
||||
Pending
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -171,12 +237,14 @@
|
||||
class="border-2 border-gray-700 rounded-full h-24 w-24 flex items-center justify-center text-2xl"
|
||||
title="Status: Pending Review"
|
||||
>
|
||||
{getTotalScores()}/100
|
||||
{$questionnaireMetaData.finalTotalGrade}/{$questionnaireMetaData.totalPossibleGrade}
|
||||
</span>
|
||||
</div>
|
||||
<Preview
|
||||
questions={$questionnaire.questions}
|
||||
questionnaireMetaData={$questionnaireMetaData}
|
||||
grades={$questionnaireMetaData.grades}
|
||||
disableGrading={true}
|
||||
/>
|
||||
{:else if currentQuestion}
|
||||
{#key currentQuestion.id}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
export const STATUS = {
|
||||
PENDING: 0,
|
||||
IN_PROGRESS: 1,
|
||||
GRADED: 2,
|
||||
SUBMITTED: 1,
|
||||
IN_PROGRESS: 2,
|
||||
GRADED: 3,
|
||||
};
|
||||
|
||||
export const SELECTABLE_STATUS = [
|
||||
{
|
||||
label: 'Submitted',
|
||||
value: STATUS.PENDING,
|
||||
value: STATUS.SUBMITTED,
|
||||
},
|
||||
{
|
||||
label: 'In progress',
|
||||
|
||||
@@ -13,6 +13,9 @@ import { STATUS } from '../Exercise/constants';
|
||||
const initAnswerState = {
|
||||
answers: {},
|
||||
scores: {},
|
||||
grades: {},
|
||||
totalPossibleGrade: 0,
|
||||
finalTotalGrade: 0,
|
||||
currentQuestionIndex: 0,
|
||||
isFinished: false,
|
||||
progressValue: 100,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ROUTES } from "./constants";
|
||||
import { ROUTES } from './constants';
|
||||
|
||||
export function getNavItemRoute(courseId, routeId) {
|
||||
const path = `/${ROUTES.COURSES}/${courseId}`;
|
||||
@@ -27,3 +27,23 @@ export function getLectureNo(index) {
|
||||
|
||||
return `0${index}`;
|
||||
}
|
||||
|
||||
export function formatAnswers(data) {
|
||||
const answers = {};
|
||||
const questionByIdAndName = {};
|
||||
|
||||
for (const question of data.questions) {
|
||||
questionByIdAndName[question.id] = question.name;
|
||||
}
|
||||
|
||||
for (const answer of data.answers) {
|
||||
const questionName = questionByIdAndName[answer.question_id];
|
||||
|
||||
answers[questionName] =
|
||||
Array.isArray(answer.answers) && answer.answers.length
|
||||
? answer.answers
|
||||
: answer.open_answer;
|
||||
}
|
||||
|
||||
return answers;
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
export let labelKey = 'label';
|
||||
export let isRequired = false;
|
||||
export let className = '';
|
||||
export let selectClassName = '';
|
||||
export let color = 'default'; // primary
|
||||
export let onChange = () => {}; // This is to know if element is 'dirty'
|
||||
|
||||
@@ -19,10 +20,10 @@
|
||||
{#if label} <span class="text-gray-700 mr-2">{label}</span> {/if}
|
||||
<select
|
||||
bind:value
|
||||
class="form-select block w-auto mt-1"
|
||||
class="form-select block w-auto mt-1 {selectClassName}"
|
||||
required={isRequired}
|
||||
on:change={onChange}
|
||||
class:primary={color === 'primary'}
|
||||
class:customColor={!!selectClassName}
|
||||
>
|
||||
{#each options as option}
|
||||
<option class="bg-white text-black" value={option}>
|
||||
@@ -33,18 +34,14 @@
|
||||
</label>
|
||||
|
||||
<style>
|
||||
select.primary {
|
||||
select.customColor {
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border-radius: 0.375rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
|
||||
border-radius: 4px;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' class='text-white' viewBox='0 0 20 20'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
select.primary option {
|
||||
select.customColor option {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
export let className = '';
|
||||
</script>
|
||||
|
||||
<div class="root mt-4 mx-auto {width} {className} relative pb-5">
|
||||
<div class="root mt-4 mx-auto {width} {className} relative pb-5 px-4">
|
||||
{#if $$slots.header}
|
||||
<div
|
||||
class="head flex items-center justify-between sticky right-0 w-full py-3"
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
export const VARIANTS = {
|
||||
CONTAINED: 'CONTAINED',
|
||||
CONTAINED_DANGER: 'CONTAINED_DANGER',
|
||||
CONTAINED_SUCCESS: 'CONTAINED_SUCCESS',
|
||||
OUTLINED: 'OUTLINED',
|
||||
};
|
||||
|
||||
export const VARIANTS_CLASS = {
|
||||
[VARIANTS.CONTAINED]: 'bg-blue-700 hover:bg-blue-900 text-white font-bold',
|
||||
[VARIANTS.CONTAINED_SUCCESS]:
|
||||
'bg-green-700 hover:bg-green-900 text-white font-bold',
|
||||
[VARIANTS.CONTAINED_DANGER]:
|
||||
'bg-red-700 hover:bg-red-900 text-white font-bold',
|
||||
[VARIANTS.OUTLINED]:
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
export let nextButtonProps = {};
|
||||
export let grade;
|
||||
export let gradeMax = 0;
|
||||
export let disableGrading = false;
|
||||
|
||||
function getVal(form, name) {
|
||||
let values = [];
|
||||
@@ -67,6 +68,7 @@
|
||||
bind:value={grade}
|
||||
type="number"
|
||||
className="w-20"
|
||||
isDisabled={disableGrading}
|
||||
/>
|
||||
<p class="ml-2 text-lg">/ {gradeMax}</p>
|
||||
</div>
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
export let nextButtonProps = {};
|
||||
export let grade;
|
||||
export let gradeMax = 0;
|
||||
export let disableGrading = false;
|
||||
|
||||
function getRadioVal(form, name) {
|
||||
let val;
|
||||
@@ -67,6 +68,7 @@
|
||||
bind:value={grade}
|
||||
type="number"
|
||||
className="w-20"
|
||||
isDisabled={disableGrading}
|
||||
/>
|
||||
<p class="ml-2 text-lg">/ {gradeMax}</p>
|
||||
</div>
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
export let disabled = false;
|
||||
export let grade;
|
||||
export let gradeMax = 0;
|
||||
export let disableGrading = false;
|
||||
|
||||
function handleFormSubmit(event) {
|
||||
if (isPreview) return;
|
||||
@@ -42,6 +43,7 @@
|
||||
bind:value={grade}
|
||||
type="number"
|
||||
className="w-20"
|
||||
isDisabled={disableGrading}
|
||||
/>
|
||||
<p class="ml-2 text-lg">/ {gradeMax}</p>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export const SNACKBAR_SEVERITY = {
|
||||
ERROR: 'ERROR',
|
||||
WARNING: 'WARNING',
|
||||
DEFAULT: 'DEFAULT',
|
||||
INFO: 'INFO',
|
||||
SUCCESS: 'SUCCESS',
|
||||
};
|
||||
@@ -9,5 +10,6 @@ export const SNACKBAR_SEVERITY_COLOR = {
|
||||
ERROR: 'bg-red-600',
|
||||
WARNING: 'bg-yellow-600',
|
||||
INFO: 'bg-blue-600',
|
||||
DEFAULT: 'bg-gray-600',
|
||||
SUCCESS: 'bg-green-600',
|
||||
};
|
||||
|
||||
@@ -4,7 +4,7 @@ import { SNACKBAR_SEVERITY } from './constants';
|
||||
export const snackbarStore = writable({
|
||||
open: false,
|
||||
message: '',
|
||||
severity: SNACKBAR_SEVERITY.INFO,
|
||||
severity: SNACKBAR_SEVERITY.DEFAULT,
|
||||
handleClose: () => {},
|
||||
autoHideDuration: 6000,
|
||||
});
|
||||
|
||||
@@ -26,7 +26,14 @@
|
||||
import PageBody from '../../../components/PageBody/index.svelte';
|
||||
import CourseContainer from '../../../components/CourseContainer/index.svelte';
|
||||
import { setCourseData, course } from '../../../components/Course/store';
|
||||
import { fetchSubmissions } from '../../../utils/services/submissions';
|
||||
import {
|
||||
fetchSubmissions,
|
||||
updateSubmission,
|
||||
updateQuestionAnswer,
|
||||
} from '../../../utils/services/submissions';
|
||||
import { formatAnswers } from '../../../components/Course/function';
|
||||
import { snackbarStore } from '../../../components/Snackbar/store';
|
||||
|
||||
const flipDurationMs = 300;
|
||||
|
||||
export let courseData = {};
|
||||
@@ -59,18 +66,41 @@
|
||||
const { page } = stores();
|
||||
|
||||
function handleItemFinalize(columnIdx, newItems) {
|
||||
console.log('handleItemFinalize columnIdx=>', columnIdx, newItems);
|
||||
sections[columnIdx].items = newItems;
|
||||
// onFinalUpdate([...sections]);
|
||||
let itemToWithNewStatus;
|
||||
|
||||
const { id } = sections[columnIdx];
|
||||
|
||||
// Set column in the UI
|
||||
sections[columnIdx].items = newItems.map((item) => {
|
||||
if (item.statusId !== id) {
|
||||
itemToWithNewStatus = item;
|
||||
item.statusId = id;
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
|
||||
// Update backend
|
||||
if (itemToWithNewStatus) {
|
||||
// Update key mapping for each submission also
|
||||
submissionIdData[itemToWithNewStatus.id] = {
|
||||
...submissionIdData[itemToWithNewStatus.id],
|
||||
status_id: itemToWithNewStatus.statusId,
|
||||
};
|
||||
console.log(
|
||||
`submissionIdData[itemToWithNewStatus.id]`,
|
||||
submissionIdData[itemToWithNewStatus.id]
|
||||
);
|
||||
|
||||
updateSubmission({
|
||||
id: itemToWithNewStatus.id,
|
||||
status_id: itemToWithNewStatus.statusId,
|
||||
}).then((res) => console.log('Updated submission', res));
|
||||
}
|
||||
}
|
||||
|
||||
function handleDndConsiderCards(columnIdx) {
|
||||
return (e) => {
|
||||
console.warn(
|
||||
'handleDndConsiderCards columnIdx',
|
||||
columnIdx,
|
||||
e.detail.items
|
||||
);
|
||||
return function (e) {
|
||||
sections[columnIdx].items = e.detail.items;
|
||||
};
|
||||
}
|
||||
@@ -83,30 +113,66 @@
|
||||
goto($page.path);
|
||||
}
|
||||
|
||||
function formatAnswers(data) {
|
||||
const answers = {};
|
||||
const questionByIdAndName = {};
|
||||
// Via dialog
|
||||
function updateStatus({ submissionId, prevStatusId, nextStatusId, total }) {
|
||||
let itemToWithNewStatus;
|
||||
|
||||
for (const question of data.questions) {
|
||||
questionByIdAndName[question.id] = question.name;
|
||||
// Remove from current column
|
||||
const { items } = sections[prevStatusId - 1];
|
||||
sections[prevStatusId - 1].items = items.filter((item) => {
|
||||
if (item.id === submissionId) {
|
||||
itemToWithNewStatus = Object.assign(item);
|
||||
itemToWithNewStatus.statusId = nextStatusId;
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
console.log(`itemToWithNewStatus`, itemToWithNewStatus);
|
||||
// Move to right column
|
||||
sections[nextStatusId - 1].items = [
|
||||
...sections[nextStatusId - 1].items,
|
||||
itemToWithNewStatus,
|
||||
];
|
||||
|
||||
// If something changed
|
||||
if (itemToWithNewStatus) {
|
||||
// Update key mapping for each submission also
|
||||
submissionIdData[itemToWithNewStatus.id] = {
|
||||
...submissionIdData[itemToWithNewStatus.id],
|
||||
status_id: itemToWithNewStatus.statusId,
|
||||
};
|
||||
|
||||
// Update backend
|
||||
updateSubmission({
|
||||
id: itemToWithNewStatus.id,
|
||||
status_id: itemToWithNewStatus.statusId,
|
||||
total,
|
||||
}).then((res) => console.log('Updated submission', res));
|
||||
}
|
||||
}
|
||||
|
||||
for (const answer of data.answers) {
|
||||
const questionName = questionByIdAndName[answer.question_id];
|
||||
async function handleSave(submission) {
|
||||
const { questionAnswerByPoint, questionAnswers } = submission;
|
||||
|
||||
answers[questionName] =
|
||||
Array.isArray(answer.answers) && answer.answers.length
|
||||
? answer.answers
|
||||
: answer.open_answer;
|
||||
}
|
||||
const updates = Object.keys(questionAnswerByPoint).map((questionId) => {
|
||||
const questionAnswer = questionAnswers.find(
|
||||
(answer) => answer.question_id == questionId
|
||||
);
|
||||
|
||||
return answers;
|
||||
const point = questionAnswerByPoint[questionId];
|
||||
|
||||
return updateQuestionAnswer({ point }, { id: questionAnswer.id });
|
||||
});
|
||||
|
||||
await Promise.all(updates);
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = `Saved successfully`;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
setCourseData(courseData);
|
||||
console.log(`courseData`, courseData);
|
||||
console.log(`$course`, $course);
|
||||
|
||||
const { data: submissions } = await fetchSubmissions(
|
||||
courseData.id || $course.id
|
||||
);
|
||||
@@ -118,6 +184,7 @@
|
||||
|
||||
const submissionItem = {
|
||||
id,
|
||||
statusId: status_id,
|
||||
exercise: {
|
||||
id: exercise.id,
|
||||
title: exercise.title,
|
||||
@@ -129,10 +196,20 @@
|
||||
title: exercise.lesson.title,
|
||||
},
|
||||
};
|
||||
|
||||
console.log(`answers`, answers);
|
||||
submissionIdData[id] = {
|
||||
id,
|
||||
status_id,
|
||||
title: exercise.title,
|
||||
student: submissionItem.student,
|
||||
questions: exercise.questions,
|
||||
answers: formatAnswers({ questions: exercise.questions, answers }),
|
||||
questionAnswers: answers,
|
||||
questionAnswerByPoint: answers.reduce((acc, answer) => {
|
||||
acc[answer.question_id] = answer.point;
|
||||
|
||||
return acc;
|
||||
}, {}),
|
||||
};
|
||||
|
||||
if (Array.isArray(sectionById[status_id])) {
|
||||
@@ -151,13 +228,11 @@
|
||||
? sectionById[index + 1]
|
||||
: [],
|
||||
}));
|
||||
|
||||
console.log(`submissionIdData`, submissionIdData);
|
||||
});
|
||||
|
||||
$: {
|
||||
submissionId = $page.query.submissionId;
|
||||
openExercise = !!submissionId;
|
||||
openExercise = !!submissionId && submissionIdData[submissionId];
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -165,6 +240,8 @@
|
||||
bind:open={openExercise}
|
||||
onClose={handleModalClose}
|
||||
data={submissionIdData[submissionId] || {}}
|
||||
{handleSave}
|
||||
{updateStatus}
|
||||
{submissionId}
|
||||
/>
|
||||
|
||||
@@ -172,14 +249,14 @@
|
||||
<PageNav title="Submitted Exercises" />
|
||||
|
||||
<PageBody width="w-11/12 overflow-x-auto overflow-y-hidden">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div class="flex items-center w-full">
|
||||
{#each sections as { id, title, items }, idx (id)}
|
||||
<div
|
||||
class="section rounded-md bg-gray-100 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
>
|
||||
<div class="flex items-center mb-2">
|
||||
<Chip value={items.length} />
|
||||
<Chip value={items.length} class="bg-set" />
|
||||
<p class="ml-2 font-bold">{title}</p>
|
||||
</div>
|
||||
<div
|
||||
@@ -197,19 +274,16 @@
|
||||
class="border border-grey-700 w-full my-2 mx-0 rounded-md bg-white py-2 px-3"
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
>
|
||||
<a
|
||||
<div
|
||||
class="flex items-center no-underline hover:underline text-black mb-2"
|
||||
href="{$page.path}?submissionId={item.student.id}"
|
||||
>
|
||||
<img
|
||||
alt="Placeholder"
|
||||
class="block rounded-full"
|
||||
width="24"
|
||||
height="20"
|
||||
alt="Student avatar"
|
||||
class="block rounded-full h-6 w-6"
|
||||
src={item.student.avatar_url}
|
||||
/>
|
||||
<p class="ml-2 text-sm">{item.student.username}</p>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
class="text-blue-700 text-md font-bold"
|
||||
href="{$page.path}?submissionId={item.id}"
|
||||
@@ -219,7 +293,7 @@
|
||||
<a
|
||||
class="flex items-center no-underline hover:underline text-black my-2"
|
||||
href="{$page.path.replace('submissions', 'lessons')}/{item
|
||||
.lesson.id}/exercises"
|
||||
.lesson.id}/exercises/{item.exercise.id}"
|
||||
>
|
||||
<p class="text-grey text-sm">
|
||||
#{item.lesson.title}
|
||||
|
||||
@@ -302,14 +302,9 @@ export async function submitExercise(
|
||||
questions,
|
||||
exerciseId,
|
||||
courseId,
|
||||
group,
|
||||
profile
|
||||
groupMemberId
|
||||
) {
|
||||
const groupMember = group.people.find(
|
||||
(person) => person.profile_id === profile.id
|
||||
);
|
||||
console.log(`groupMember`, groupMember);
|
||||
if (!groupMember) {
|
||||
if (!groupMemberId) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -320,7 +315,7 @@ export async function submitExercise(
|
||||
const questionAnswers = [];
|
||||
|
||||
const { data: submission } = await supabase.from('submission').insert({
|
||||
submitted_by: groupMember.id,
|
||||
submitted_by: groupMemberId,
|
||||
exercise_id: exerciseId,
|
||||
course_id: courseId,
|
||||
});
|
||||
@@ -329,7 +324,7 @@ export async function submitExercise(
|
||||
const value = answers[questionName];
|
||||
|
||||
const questionAnswer = {
|
||||
group_member_id: groupMember.id,
|
||||
group_member_id: groupMemberId,
|
||||
question_id: questionsByName[questionName],
|
||||
open_answer: '',
|
||||
answers: [],
|
||||
|
||||
@@ -31,3 +31,36 @@ export function fetchSubmissions(course_id) {
|
||||
course_id,
|
||||
});
|
||||
}
|
||||
|
||||
export async function fetchSubmission({ courseId, exerciseId, submittedBy }) {
|
||||
return supabase
|
||||
.from('submission')
|
||||
.select(
|
||||
`
|
||||
id,
|
||||
answers:question_answer(*),
|
||||
status_id
|
||||
`
|
||||
)
|
||||
.match({
|
||||
submitted_by: submittedBy,
|
||||
exercise_id: exerciseId,
|
||||
course_id: courseId,
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateSubmission({ id, status_id, total }) {
|
||||
const toUpdate = {
|
||||
status_id,
|
||||
};
|
||||
|
||||
if (typeof total === 'number') {
|
||||
toUpdate.total = total;
|
||||
}
|
||||
|
||||
return supabase.from('submission').update(toUpdate).match({ id });
|
||||
}
|
||||
|
||||
export async function updateQuestionAnswer(update, match) {
|
||||
return supabase.from('question_answer').update(update).match(match);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user