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

People: filter, add student id, submit homework

Browse Source
This commit is contained in:
rotimi-best
2021-08-31 11:20:41 +03:00
parent 24c81fb87d
commit 0b360e56a6
15 changed files with 209 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
+24 -2
View File
@@ -1,11 +1,17 @@
<script>
import Modal from '../../../../Modal/index.svelte';
import Select from '../../../../Form/Select.svelte';
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 submissionId;
// export let submissionId;
export let data = {};
export let status = SELECTABLE_STATUS[0];
let grades = {};
let total = 0;
@@ -27,6 +33,16 @@
);
}
function handleStatusChange() {
console.log(`status`, status);
$snackbarStore.open = true;
$snackbarStore.message = `Submission updated to '${status.label}'`;
}
onMount(() => {
console.log('mounting');
});
$: setGrades(data);
$: total = calculateTotal(grades);
</script>
@@ -49,7 +65,13 @@
/>
</div>
<div class="ml-10 w-1/3">
<div class="border border-gray-300 rounded-md">
<Select
bind:value={status}
options={SELECTABLE_STATUS}
color="primary"
onChange={handleStatusChange}
/>
<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"
>
src/components/Course/components/Lesson/Exercise/ViewMode.svelte
+4 -4
View File
@@ -1,5 +1,5 @@
<script>
import { fade, fly, slide } from 'svelte/transition';
import { fly } from 'svelte/transition';
import { group, course } from '../../../store';
import { questionnaire } from '../store/exercise';
import { questionnaireMetaData } from '../store/answers';
@@ -150,19 +150,19 @@
<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.IN_PROGRESS === $questionnaireMetaData.status}
{#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.REVIEWED === $questionnaireMetaData.status && getTotalScores() > 0}
{:else if STATUS.GRADED === $questionnaireMetaData.status && getTotalScores() > 0}
<span
class="bg-green-700 text-white rounded-full py-2 px-6 text-center"
title="Status: Pending Review"
>
Reviewed
Graded
</span>
{/if}
</div>
src/components/Course/components/Lesson/Exercise/constants.js
+19 -3
View File
@@ -1,4 +1,20 @@
export const STATUS = {
IN_PROGRESS: 0,
REVIEWED: 1,
};
PENDING: 0,
IN_PROGRESS: 1,
GRADED: 2,
};
export const SELECTABLE_STATUS = [
{
label: 'Submitted',
value: STATUS.PENDING,
},
{
label: 'In progress',
value: STATUS.IN_PROGRESS,
},
{
label: 'Graded',
value: STATUS.GRADED,
},
];
src/components/Course/components/Lesson/store/answers.js
+2 -2
View File
@@ -8,7 +8,7 @@ import { STATUS } from '../Exercise/constants';
// currentQuestionIndex: 5,
// isFinished: true,
// progressValue: 100,
// status: STATUS.REVIEWED,
// status: STATUS.GRADED,
// });
const initAnswerState = {
answers: {},
@@ -16,7 +16,7 @@ const initAnswerState = {
currentQuestionIndex: 0,
isFinished: false,
progressValue: 100,
status: STATUS.IN_PROGRESS,
status: STATUS.PENDING,
};
export const questionnaireMetaData = writable(initAnswerState);
src/components/Course/components/People/types.ts
+7
View File
@@ -10,4 +10,11 @@ export interface Person {
email?: string;
role_id: number;
profile?: Profile;
profile_id?: string;
assigned_student_id: string;
}
export interface ProfileRole {
label: string;
value: string | number;
}
src/components/Course/store.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { writable } from 'svelte/store';
import { lessons } from './components/Lesson/store/lessons';
import { ROLE } from '../../utils/constants/roles';
export const course = writable({});
export const course = writable({ id: '' });
export const mockGroupMember = {
id: '434534534535',
src/components/Form/Select.svelte
+26 -5
View File
@@ -6,6 +6,8 @@
export let options = [];
export let labelKey = 'label';
export let isRequired = false;
export let className = '';
export let color = 'default'; // primary
export let onChange = () => {}; // This is to know if element is 'dirty'
// onMount(() => {
@@ -13,18 +15,37 @@
// });
</script>
<label class="block">
{#if label} <span class="text-gray-700">{label}</span> {/if}
<label class="block {className}">
{#if label} <span class="text-gray-700 mr-2">{label}</span> {/if}
<select
bind:value
class="form-select block w-full mt-1"
class="form-select block w-auto mt-1"
required={isRequired}
on:blur={onChange}
on:change={onChange}
class:primary={color === 'primary'}
>
{#each options as option}
<option value={option}>
<option class="bg-white text-black" value={option}>
{option[labelKey]}
</option>
{/each}
</select>
</label>
<style>
select.primary {
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));
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 {
background-color: #fff;
color: #000;
}
</style>
src/components/PageBody/index.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
<div class="root mt-4 mx-auto {width} {className} relative pb-5">
{#if $$slots.header}
<div
class="head flex bg-white items-center justify-between sticky right-0 w-full py-3"
class="head flex items-center justify-between sticky right-0 w-full py-3"
>
<slot name="header" />
</div>
src/components/Snackbar/index.svelte
+3 -2
View File
@@ -36,8 +36,8 @@
{#if $snackbarStore.open}
<div
transition:fly={{ y: 200, duration: 1000 }}
class="root text-white rounded-md flex justify-between items-center z-50 absolute {severityColor}"
transition:fly={{ y: 200, duration: 500 }}
class="root text-white rounded-md flex justify-between items-center absolute {severityColor}"
>
<div class="flex items-center">
{#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
@@ -64,5 +64,6 @@
min-width: 288px;
padding: 6px 16px;
flex-wrap: wrap;
z-index: 51;
}
</style>
src/routes/_layout.svelte
+2 -2
View File
@@ -96,7 +96,7 @@
allowUser = true;
} else if (!_isMvpUser) {
if (!!path) {
goto('/');
goto('/courses');
}
return;
@@ -113,7 +113,7 @@
getProfile();
} else {
console.log('not logged in, go to login');
return goto('/');
return goto('/courses');
}
}
);
src/routes/api/_db.js
+1 -2
View File
@@ -1,4 +1,3 @@
import { STATUS } from '../../utils/constants/answers';
import { QUESTION_TYPE } from '../../components/Question/constants';
const ROLE = {
@@ -349,7 +348,7 @@ const exercise_answers = [
currentQuestionIndex: 0,
isFinished: false,
progressValue: 100,
status: STATUS.PENDING,
status: 'STATUS.PENDING',
},
];
src/routes/courses/[id]/people.svelte
+90 -31
View File
@@ -2,6 +2,7 @@
import {
fetchCourse,
deleteGroupMember,
updatedGroupMember,
} from '../../../utils/services/courses';
export async function preload({ params }) {
@@ -15,6 +16,8 @@
import Delete24 from 'carbon-icons-svelte/lib/Delete24';
import PageNav from '../../../components/PageNav/index.svelte';
import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
import TextField from '../../../components/Form/TextField.svelte';
import Select from '../../../components/Form/Select.svelte';
import IconButton from '../../../components/IconButton/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import {
@@ -28,8 +31,11 @@
invitationModal,
deleteMemberModal,
} from '../../../components/Course/components/People/store';
import type { Person } from '../../../components/Course/components/People/types';
import { ROLE, ROLE_LABEL } from '../../../utils/constants/roles';
import type {
Person,
ProfileRole,
} from '../../../components/Course/components/People/types';
import { ROLE_LABEL, ROLES } from '../../../utils/constants/roles';
import { profile } from '../../../utils/store/user';
export let courseId: string = '';
@@ -37,6 +43,8 @@
let people: Array<Person> = [];
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
let member: { id?: string; email?: string; profile?: { email: string } } = {};
let shouldEditMemberId = false;
let filterBy: ProfileRole = ROLES[0];
// function setPeople(people: Array<Person>) {
// if (!Array.isArray(people)) return;
@@ -55,13 +63,32 @@
await deleteGroupMember(member.id);
}
async function editMemberId(person: Person) {
console.log(`person`, person);
await updatedGroupMember(
{ assigned_student_id: person.assigned_student_id },
{ id: person.id }
);
shouldEditMemberId = false;
}
function sortAndFilterPeople(_people: Array<Person>, filterBy: ProfileRole) {
people = (_people || [])
.filter((person) => {
if (filterBy.value === 'all') return true;
return person.role_id === filterBy.value;
})
.sort((a: Person, b: Person) => a.role_id - b.role_id);
}
onMount(async () => {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourseData(data);
});
$: people = ($group.people || []).sort((a, b) => a.role_id - b.role_id);
$: sortAndFilterPeople($group.people, filterBy);
</script>
<InviationModal />
@@ -81,49 +108,74 @@
</slot:fragment>
</PageNav>
<PageBody className="">
<div class="table rounded-md border border-gray-300 w-11/12 m-auto">
<div class="mb-3">
<Select
label="Filter by"
bind:value={filterBy}
options={ROLES}
className="flex items-center"
/>
</div>
<div class="table rounded-md border border-gray-300 w-full">
<div
class="flex items-center justify-evenly font-bold border-t-0 {borderBottomGrey} p-3"
class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
>
<span class="mr-2">No</span>
<span class="mr-2 w-20 text-center">ID</span>
<!-- <span class="flex-grow" /> -->
<p class="text-lg text-center w-1/4">Name</p>
<p class="text-lg text-center w-1/4">Email</p>
<p class="text-lg text-center w-1/4 ">Role</p>
<p class="text-lg w-20 text-center" />
<p class="text-lg w-2/4">Name</p>
<p class="text-lg w-1/4 ">Role</p>
<p class="text-lg w-20" />
</div>
{#each people as person, index}
<div
class="flex text-center relative items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}"
>
<span class="mr-2">{index + 1}</span>
{#if !shouldEditMemberId}
<p
class="mr-2 w-20 text-center hover:bg-gray-100 p-3"
on:click={() => (shouldEditMemberId = true)}
>
{person.assigned_student_id || index + 1}
</p>
{:else}
<TextField
bind:value={person.assigned_student_id}
type="string"
placeholder="Unique ID"
className="w-24"
onChange={() => editMemberId(person)}
/>
{/if}
<!-- <span class="flex-grow" /> -->
{#if person.profile}
<p class="text-lg w-1/4 break-all">{person.profile.fullname}</p>
<a
href="mailto:{person.profile.email}"
class="text-md w-1/4 mx-2 text-blue-600"
>
{person.profile.email}
</a>
<div class="break-all w-2/4 mx-2">
<p class="text-lg">{person.profile.fullname}</p>
<a
href="mailto:{person.profile.email}"
class="text-md text-blue-600"
>
{person.profile.email}
</a>
</div>
{:else}
<p
class="bg-yellow-500 w-1/4 text-sm text-center rounded-xl text-white"
>
Pending Invite
</p>
<a
href="mailto:{person.email}"
class="text-md w-1/4 mx-2 text-blue-600"
>
{person.email}
</a>
<div class="break-all w-2/4 mx-2">
<p
class="bg-yellow-500 pending text-sm text-center rounded-xl text-white"
>
Pending Invite
</p>
<a href="mailto:{person.email}" class="text-md text-blue-600">
{person.email}
</a>
</div>
{/if}
<p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
<div class="w-20">
{#if person.profile && person.profile.id !== $profile.id}
{#if person.profile_id !== $profile.id}
<IconButton
onClick={() => {
member = person;
@@ -139,3 +191,10 @@
</div>
</PageBody>
</CourseContainer>
<style>
.pending {
width: fit-content;
padding: 1px 15px;
}
</style>
src/utils/constants/answers.js
-5
View File
@@ -1,5 +0,0 @@
export const STATUS = {
PENDING: 0,
IN_PROGRESS: 1,
REVIEWED: 2,
};
src/utils/constants/roles.js
+19
View File
@@ -9,3 +9,22 @@ export const ROLE_LABEL = {
[ROLE.TUTOR]: 'Tutor',
[ROLE.STUDENT]: 'Student',
};
export const ROLES = [
{
label: 'All',
value: 'all',
},
{
label: ROLE_LABEL[ROLE.ADMIN],
value: ROLE.ADMIN,
},
{
label: ROLE_LABEL[ROLE.TUTOR],
value: ROLE.TUTOR,
},
{
label: ROLE_LABEL[ROLE.STUDENT],
value: ROLE.STUDENT,
},
];
src/utils/services/courses/index.js
+10 -7
View File
@@ -122,6 +122,13 @@ export function addGroupMember(member) {
});
}
export function updatedGroupMember(update, match) {
return supabase
.from('groupmember')
.update(update, { returning: 'minimal' })
.match(match);
}
export function deleteGroupMember(groupMemberId) {
return supabase.from('groupmember').delete().match({ id: groupMemberId });
}
@@ -296,13 +303,9 @@ export async function submitExercise(
group,
profile
) {
let groupMember;
if (Array.isArray(group.tutors)) {
groupMember = group.tutors.find(
(student) => student.profile_id === profile.id
);
}
const groupMember = group.people.find(
(person) => person.profile_id === profile.id
);
console.log(`groupMember`, groupMember);
if (!groupMember) {
return;