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

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