People: filter, add student id, submit homework

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