People: filter, add student id, submit homework

src/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte

@@ -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

@@ -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

@@ -1,4 +1,20 @@
 export const STATUS = {
-  IN_PROGRESS: 0,
+  PENDING: 0,
-  REVIEWED: 1,
+  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

@@ -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

@@ -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

@@ -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

@@ -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">
+<label class="block {className}">
-  {#if label} <span class="text-gray-700">{label}</span> {/if}
+  {#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

@@ -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

@@ -36,8 +36,8 @@
 
 {#if $snackbarStore.open}
   <div
-    transition:fly={{ y: 200, duration: 1000 }}
+    transition:fly={{ y: 200, duration: 500 }}
-    class="root text-white rounded-md flex justify-between items-center z-50 absolute {severityColor}"
+    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

@@ -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,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

@@ -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 type {
-  import { ROLE, ROLE_LABEL } from '../../../utils/constants/roles';
+    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 w-2/4">Name</p>
-        <p class="text-lg text-center w-1/4">Email</p>
+        <p class="text-lg w-1/4 ">Role</p>
-        <p class="text-lg text-center w-1/4 ">Role</p>
+        <p class="text-lg w-20" />
-        <p class="text-lg w-20 text-center" />
       </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>
+            <div class="break-all w-2/4 mx-2">
-            <a
+              <p class="text-lg">{person.profile.fullname}</p>
-              href="mailto:{person.profile.email}"
+              <a
-              class="text-md w-1/4 mx-2 text-blue-600"
+                href="mailto:{person.profile.email}"
-            >
+                class="text-md text-blue-600"
-              {person.profile.email}
+              >
-            </a>
+                {person.profile.email}
+              </a>
+            </div>
           {:else}
-            <p
+            <div class="break-all w-2/4 mx-2">
-              class="bg-yellow-500 w-1/4 text-sm text-center rounded-xl text-white"
+              <p
-            >
+                class="bg-yellow-500 pending text-sm text-center rounded-xl text-white"
-              Pending Invite
+              >
-            </p>
+                Pending Invite
-            <a
+              </p>
-              href="mailto:{person.email}"
+              <a href="mailto:{person.email}" class="text-md text-blue-600">
-              class="text-md w-1/4 mx-2 text-blue-600"
+                {person.email}
-            >
+              </a>
-              {person.email}
+            </div>
-            </a>
           {/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

@@ -1,5 +0,0 @@
-export const STATUS = {
-  PENDING: 0,
-  IN_PROGRESS: 1,
-  REVIEWED: 2,
-};

src/utils/constants/roles.js

@@ -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

@@ -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;
+  const groupMember = group.people.find(
-
+    (person) => person.profile_id === profile.id
-  if (Array.isArray(group.tutors)) {
+  );
-    groupMember = group.tutors.find(
-      (student) => student.profile_id === profile.id
-    );
-  }
   console.log(`groupMember`, groupMember);
   if (!groupMember) {
     return;