CLASSROOMIO-T-112:Redesigned the UI of the Exercise page

CLASSROOMIO-T-112:Fixed the page reload for student and tutors

Merge branch 'CLASSROOMIO-T-112' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-112

CLASSROOMIO-T-112:Fixed the Modal button

Merge branch 'CLASSROOMIO-T-112' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-112

CLASSROOMIO-T-112: UX improvement

CLASSROOMIO-T-112:Removed the console log

CLASSROOMIO-T-112:Updated the UI/UX of the exercise page

Merge branch 'main' into CLASSROOMIO-T-112

CLASSROOMIO-T-112:Redesigned the UI of the Exercise page

Merge branch 'CLASSROOMIO-T-112' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-112

CLASSROOMIO-T-112:Made the empty  fit the page

CLASSROOMIO-T-112: Handle cases of options in a question not saving.


Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>
Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>


Merge-request: CLASSROOMIO-MR-60
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte

@@ -19,12 +19,10 @@
   import Modal from '$lib/components/Modal/index.svelte';
   import TextArea from '$lib/components/Form/TextArea.svelte';
   import Checkbox from '$lib/components/Form/Checkbox.svelte';
-  import DateTime from '$lib/components/Form/DateTime.svelte';
   import RadioItem from '$lib/components/Form/RadioItem.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import ErrorMessage from '$lib/components/ErrorMessage/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import EditContent from '$lib/components/EditContent/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import Select from '$lib/components/Form/Select.svelte';
   import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
@@ -34,6 +32,7 @@
   import { filterOutDeleted } from './functions';
   import { deleteExercise } from '$lib/utils/services/courses';
   import { lesson } from '../store/lessons';
+
   // import EditContent from "$lib/components/EditContent/index.svelte";
 
   // let value = readme;
@@ -47,13 +46,12 @@
   let errors = {};
   let questionIdToDelete = null;
   let questions = [];
-  let shouldDelete = false;
   let isDeleting = false;
 
   function shouldScrollToLast(questionId, questions) {
+    const [lastQuestion] = questions.slice(-1);
     const currentQuestionsLength = questions.length;
-    const index = questions.findIndex((question) => question.id === questionId);
+    const isLast = lastQuestion.id === questionId;
-    const isLast = index + 1 === currentQuestionsLength;
 
     return isLast && initialQuestionsLength !== currentQuestionsLength;
   }
@@ -97,8 +95,6 @@
       ..._lesson,
       exercises: _lesson.exercises.filter((exercise) => exercise.id !== exerciseId)
     }));
-
-    shouldDelete = false;
     goBack();
   }
 
@@ -119,62 +115,26 @@
   width="w-2/4"
   modalHeading="Update description"
 >
-  {#if shouldDelete}
+  <form on:submit|preventDefault>
-    <form on:submit|preventDefault={() => (shouldDelete = false)}>
+    <h1 class="dark:text-white text-2xl">Are you sure?</h1>
-      <h1 class="dark:text-white text-2xl">Are you sure?</h1>
 
-      <div class="mt-5 flex items-center justify-between">
+    <div class="mt-5 flex items-center justify-between">
-        <PrimaryButton
+      <PrimaryButton
-          className="px-6 py-3"
+        className="px-6 py-3"
-          variant={VARIANTS.OUTLINED}
+        variant={VARIANTS.OUTLINED}
-          label="No, cancel"
+        label="No, cancel"
-          type="submit"
+        type="submit"
-        />
+        onClick={() => (editDescription = false)}
-        <PrimaryButton
+      />
-          className="px-6 py-3"
+      <PrimaryButton
-          variant={VARIANTS.CONTAINED}
+        className="px-6 py-3"
-          label={isDeleting ? 'Deleting...' : 'Yes, delete'}
+        variant={VARIANTS.CONTAINED}
-          isDisabled={isDeleting}
+        label={isDeleting ? 'Deleting...' : 'Yes, delete'}
-          onClick={handleDelete}
+        isDisabled={isDeleting}
-        />
+        onClick={handleDelete}
-      </div>
+      />
-    </form>
-  {:else}
-    <div>
-      <QuestionContainer isTitle={true}>
-        <TextField
-          placeholder="Title"
-          bind:value={$questionnaire.title}
-          className="mb-2"
-          onChange={() => ($questionnaire.is_title_dirty = true)}
-        />
-        <DateTime
-          label="Due by"
-          className="w-50"
-          value={$questionnaire.due_by}
-          onInput={(e) => {
-            $questionnaire.due_by = e.target.value;
-            $questionnaire.is_due_by_dirty = true;
-          }}
-        />
-        <EditContent
-          writeLabel="Description"
-          bind:value={$questionnaire.description}
-          placeholder="Start typing your lesson"
-          textAreaHeight="100px"
-          onInputChange={() => ($questionnaire.is_description_dirty = true)}
-        />
-      </QuestionContainer>
-      <div class="float-right">
-        <PrimaryButton
-          className="px-6 py-3"
-          variant={VARIANTS.CONTAINED}
-          label="Delete this exercise"
-          onClick={() => (shouldDelete = true)}
-        />
-      </div>
     </div>
-  {/if}
+  </form>
 </Modal>
 
 <div class="w-full">
@@ -207,14 +167,6 @@
             />
           </div>
 
-          <!-- <Dropdown
-          options={extraActions}
-          handleOptionClick={handleOptionClick(question.id)}
-        >
-          <AddFilledIcon class="carbon-icon dark:text-white" />
-          <p class="dark:text-white ml-2 text-gray-600">Add</p>
-        </Dropdown> -->
-
           <Select
             bind:value={question.question_type}
             options={QUESTION_TYPES}
@@ -297,7 +249,7 @@
           {/if}
 
           {#if QUESTION_TYPE.TEXTAREA === question.question_type.id}
-            <TextArea bind:value={question.value} />
+            <TextArea bind:value={question.value} disabled={true} />
           {/if}
 
           {#if getQuestionErrorMsg(errors, question, 'option')}

src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte

@@ -0,0 +1,69 @@
+<script>
+  import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
+  import EditContent from '$lib/components/EditContent/index.svelte';
+  import DateTime from '$lib/components/Form/DateTime.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import { questionnaire } from '../store/exercise';
+  import { marked } from 'marked';
+  export let preview;
+
+  function getTotalPossibleGrade() {
+    return $questionnaire.questions.reduce((acc, question) => {
+      acc += parseFloat(question.points, 10);
+      return acc;
+    }, 0);
+  }
+</script>
+
+<div class="mb-5 px-6">
+  <QuestionContainer isTitle={true}>
+    {#if !preview}
+      <TextField
+        placeholder="Title"
+        bind:value={$questionnaire.title}
+        className="mb-2"
+        onChange={() => ($questionnaire.is_title_dirty = true)}
+      />
+      <DateTime
+        label="Due by"
+        className="w-50"
+        value={$questionnaire.due_by}
+        onInput={(e) => {
+          $questionnaire.due_by = e.target.value;
+          $questionnaire.is_due_by_dirty = true;
+        }}
+      />
+      <EditContent
+        writeLabel="Description"
+        bind:value={$questionnaire.description}
+        placeholder="Start typing your lesson"
+        textAreaHeight="100px"
+        onInputChange={() => ($questionnaire.is_description_dirty = true)}
+      />
+    {:else if preview}
+      <h2 class="my-1">{$questionnaire.title}</h2>
+      <div class="flex items-center">
+        <p class="dark:text-white mx-2">
+          <strong>{$questionnaire.questions.length}</strong> questions
+        </p>
+        |
+        <p class="dark:text-white mx-2">
+          <strong>{getTotalPossibleGrade()}</strong> points.
+        </p>
+        |
+        <p class="dark:text-white mx-2">All required</p>
+        {#if $questionnaire.due_by}
+          |
+          <p class="dark:text-white mx-2">
+            <strong>Due by:</strong>
+            {new Date($questionnaire.due_by).toLocaleString()}
+          </p>
+        {/if}
+      </div>
+
+      <article class="preview prose prose-sm sm:prose p-2">
+        {@html marked($questionnaire.description || 'No description')}
+      </article>
+    {/if}
+  </QuestionContainer>
+</div>

src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -20,6 +20,8 @@
   import { submitExercise } from '$lib/utils/services/courses';
   import { fetchSubmission } from '$lib/utils/services/submissions';
   import { profile } from '$lib/utils/store/user';
+  import MODES from '$lib/utils/constants/mode.js';
+  import { exerciseMode } from './store';
 
   export let preview;
 
@@ -163,10 +165,12 @@
 {/if}
 
 {#if preview}
-  <Preview
+  {#if $exerciseMode.editMode}
-    questions={filterOutDeleted($questionnaire.questions)}
+    <Preview
-    questionnaireMetaData={$questionnaireMetaData}
+      questions={filterOutDeleted($questionnaire.questions)}
-  />
+      questionnaireMetaData={$questionnaireMetaData}
+    />
+  {/if}
 {:else if !$questionnaire.questions.length}
   <Box>
     <img src="/images/empty-exercise-icon.svg" alt="Exercise svg" class="my-2.5" />
@@ -178,34 +182,41 @@
     </p>
   </Box>
 {:else if $questionnaireMetaData.currentQuestionIndex === 0}
-  <div>
+  <RoleBasedSecurity allowedRoles={[3]}>
-    <h2 class="my-1">{$questionnaire.title}</h2>
+    <div>
+      <h2 class="my-1">{$questionnaire.title}</h2>
 
-    <div class="flex items-center">
+      <div class="flex items-center">
-      <p class="dark:text-white mx-2">
+        <p class="dark:text-white mx-2">
-        <strong>{$questionnaire.questions.length}</strong> questions
+          <strong>{$questionnaire.questions.length}</strong> questions
-      </p>
+        </p>
-      |
-      <p class="dark:text-white mx-2">
-        <strong>{getTotalPossibleGrade()}</strong> points.
-      </p>
-      |
-      <p class="dark:text-white mx-2">All required</p>
-      {#if $questionnaire.due_by}
         |
         <p class="dark:text-white mx-2">
-          <strong>Due by:</strong>
+          <strong>{getTotalPossibleGrade()}</strong> points.
-          {new Date($questionnaire.due_by).toLocaleString()}
         </p>
-      {/if}
+        |
+        <p class="dark:text-white mx-2">All required</p>
+        {#if $questionnaire.due_by}
+          |
+          <p class="dark:text-white mx-2">
+            <strong>Due by:</strong>
+            {new Date($questionnaire.due_by).toLocaleString()}
+          </p>
+        {/if}
+      </div>
+
+      <article class="preview prose prose-sm sm:prose p-2">
+        {@html marked($questionnaire.description || 'No desription')}
+      </article>
+
+      <PrimaryButton
+        onClick={handleStart}
+        label="Start"
+        className="my-5 float-right"
+        type="button"
+      />
     </div>
-
+  </RoleBasedSecurity>
-    <article class="preview prose prose-sm sm:prose p-2">
-      {@html marked($questionnaire.description || 'No desription')}
-    </article>
-
-    <PrimaryButton onClick={handleStart} label="Start" className="my-5 float-right" type="button" />
-  </div>
 {:else if $questionnaireMetaData.isFinished}
   <div class="flex items-center justify-between">
     <div class="flex flex-col justify-between w-full">

src/lib/components/Course/components/Lesson/Exercise/index.svelte

@@ -2,7 +2,6 @@
   import { onDestroy } from 'svelte';
   import AddAltIcon from 'carbon-icons-svelte/lib/AddAlt.svelte';
   import TableIcon from 'carbon-icons-svelte/lib/Table.svelte';
-  import SettingsIcon from 'carbon-icons-svelte/lib/Settings.svelte';
   import ViewIcon from 'carbon-icons-svelte/lib/View.svelte';
   import ViewFilledIcon from 'carbon-icons-svelte/lib/ViewFilled.svelte';
   import {
@@ -20,121 +19,128 @@
   import EditMode from './EditMode.svelte';
   import MODES from '$lib/utils/constants/mode.js';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import { upsertExercise } from '$lib/utils/services/courses';
+  import { deleteExercise, upsertExercise } from '$lib/utils/services/courses';
+  import UpdateDescription from './UpdateDescription.svelte';
+  import { TrashCan } from 'carbon-icons-svelte';
+  import { exerciseMode } from './store';
+  import { snackbarStore } from '$lib/components/Snackbar/store';
+  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
 
   export let exerciseId;
   export let refetchExercise = () => {};
   export let goBack = () => {};
 
-  let mode = MODES.view;
   let preview = false;
   let editDescription = false;
+  let isSaving = false;
 
-  async function handleMode() {
+  async function handleSave() {
-    if (mode === MODES.edit) {
+    if ($exerciseMode.editMode) {
       const errors = validateQuestionnaire($questionnaire.questions);
       if (Object.values(errors).length > 0) {
         return;
       }
-
+      isSaving = true;
-      mode = MODES.view;
+      // $exerciseMode.mode = MODES.view;
 
       reset();
+      try {
+        const updatedQuestions = await upsertExercise($questionnaire, exerciseId);
 
-      const updatedQuestions = await upsertExercise($questionnaire, exerciseId);
+        questionnaire.update((q) => ({
-
+          ...q,
-      questionnaire.update((q) => ({
+          is_title_dirty: false,
-        ...q,
+          is_description_dirty: false,
-        is_title_dirty: false,
+          questions: updatedQuestions
-        is_description_dirty: false,
+        }));
-        questions: updatedQuestions
+        $snackbarStore.open = true;
-      }));
+        $snackbarStore.message = 'Saved Successfully';
-    } else {
+        $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
-      mode = MODES.edit;
+      } catch (error) {
-      preview = false;
+        $snackbarStore.open = true;
+        $snackbarStore.message = `An Error Occurred`;
+        $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+      }
+      isSaving = false;
     }
   }
 
-  function handleDeleteExercise() {}
-
-  function onCancel() {
-    mode = MODES.view;
-    refetchExercise();
-  }
-
   onDestroy(() => {
     reset();
   });
+
+  $: $questionnaire.questions.length < 1 && handleAddQuestion();
 </script>
 
-<PageBody padding="px-4">
+<PageBody padding="px-4" headerClassName="bg-gray-100 rounded-md mb-3">
   <svelte:fragment slot="header">
-    <div class="flex items-center">
+    <div class="flex items-center py-2 w-">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
+        {#if $exerciseMode.editMode}
-          className="mr-2"
-          variant={VARIANTS.CONTAINED}
-          label={mode === MODES.edit ? 'Save' : 'Edit'}
-          onClick={handleMode}
-        />
-        {#if mode === MODES.edit}
           <PrimaryButton
             className="mr-2"
-            variant={VARIANTS.OUTLINED}
+            variant={VARIANTS.CONTAINED}
-            label={'Cancel'}
+            label={'Save'}
-            onClick={onCancel}
+            onClick={handleSave}
+            isLoading={isSaving}
           />
         {/if}
+        {#if $exerciseMode.editMode}
+          <IconButton
+            onClick={() => (preview = !preview)}
+            toolTipProps={{ title: 'Toggle preview', direction: 'right' }}
+            selected={preview}
+            contained={true}
+            size="small"
+          >
+            {#if preview}
+              <ViewFilledIcon size={24} class="carbon-icon dark:text-white" />
+            {:else}
+              <ViewIcon size={24} class="carbon-icon dark:text-white" />
+            {/if}
+          </IconButton>
+        {/if}
       </RoleBasedSecurity>
-
-      {#if mode !== MODES.edit}
-        <IconButton
-          onClick={() => (preview = !preview)}
-          toolTipProps={{ title: 'Toggle preview', direction: 'right' }}
-          selected={preview}
-          contained={true}
-        >
-          {#if preview}
-            <ViewFilledIcon size={32} class="carbon-icon dark:text-white" />
-          {:else}
-            <ViewIcon size={32} class="carbon-icon dark:text-white" />
-          {/if}
-        </IconButton>
-      {/if}
     </div>
 
-    {#if mode === MODES.edit}
+    {#if $exerciseMode.editMode}
       <div class="flex items-center">
         <IconButton
-          onClick={handleAddQuestion}
+          onClick={() => handleAddQuestion()}
           toolTipProps={{ title: 'Add question', direction: 'bottom' }}
+          size="small"
         >
-          <AddAltIcon size={32} class="carbon-icon dark:text-white" />
+          <AddAltIcon size={24} class="carbon-icon dark:text-white" />
         </IconButton>
         <IconButton
           onClick={() => ($questionnaireOrder.open = true)}
           toolTipProps={{ title: 'Order questionnaire', direction: 'bottom' }}
+          size="small"
         >
-          <TableIcon size={32} class="carbon-icon dark:text-white" />
+          <TableIcon size={24} class="carbon-icon dark:text-white" />
         </IconButton>
         <IconButton
           onClick={() => (editDescription = true)}
-          toolTipProps={{ title: 'Edit description', direction: 'bottom' }}
+          toolTipProps={{ title: 'Delete Exercise', direction: 'bottom' }}
+          size="small"
         >
-          <SettingsIcon size={32} class="carbon-icon dark:text-white" />
+          <TrashCan size={24} class="carbon-icon dark:text-white" />
         </IconButton>
 
         <!-- <IconButton
-          onClick={handleDeleteExercise}
+              onClick={handleDeleteExercise}
-          toolTipProps={{ title: 'Delete questionnaire', direction: 'bottom' }}
+              toolTipProps={{ title: 'Delete questionnaire', direction: 'bottom' }}
-        >
+            >
-          <Delete32 class="carbon-icon dark:text-white" />
+              <Delete32 class="carbon-icon dark:text-white" />
-        </IconButton> -->
+            </IconButton> -->
       </div>
     {/if}
   </svelte:fragment>
 
-  {#if mode === MODES.edit && !preview}
+  {#if $exerciseMode.editMode}
+    <UpdateDescription {preview} {exerciseId} />
+  {/if}
+  {#if $exerciseMode.editMode && !preview}
     <EditMode bind:editDescription {exerciseId} {goBack} />
   {:else}
     <ViewMode {preview} {exerciseId} />

src/lib/components/Course/components/Lesson/Exercise/store.js

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+import MODES from '$lib/utils/constants/mode.js';
+import { ROLE } from '$lib/utils/constants/roles';
+
+export const exerciseMode = writable({
+  editMode: true
+});

src/lib/components/Course/components/Lesson/Exercises/index.svelte

@@ -14,7 +14,10 @@
   import { createExercise } from '$lib/utils/services/courses';
   import { QUESTION_TYPES } from '$lib/components/Question/constants';
   import { lesson } from '../store/lessons';
-  import { questionnaire, isQuestionnaireFetching } from '../store/exercise';
+  import { questionnaire, isQuestionnaireFetching, handleAddQuestion } from '../store/exercise';
+  import MODES from '$lib/utils/constants/mode.js';
+  import { ROLE } from '$lib/utils/constants/roles';
+  import { exerciseMode } from '../Exercise/store';
 
   export let path;
   export let exerciseId;
@@ -46,7 +49,7 @@
   function handleCancelAddExercise() {
     open = false;
     newExercise = {
-      id: $lesson.exercises.length + 1,
+      id: new Date().getTime(),
       title: '',
       description: ''
     };
@@ -122,6 +125,10 @@
     getExercises();
   });
 
+  const gotoEdit = () => {
+    $exerciseMode.editMode = true;
+  };
+
   $: getExercise(exerciseId);
 </script>
 
@@ -145,15 +152,16 @@
   <PageBody>
     <slot:fragment slot="header">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton className="mr-2" label="Add" onClick={() => (open = !open)} />
+        <PrimaryButton className="mr-2 mb-2" label="Add" onClick={() => (open = !open)} />
       </RoleBasedSecurity>
     </slot:fragment>
 
     <div class="flex flex-wrap">
       {#each $lesson.exercises as exercise}
         <a
-          class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4"
+          class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4 rounded-lg"
           href="{path}/{exercise.id}"
+          on:click={gotoEdit}
         >
           <h3 class="dark:text-white text-xl">{exercise.title}</h3>
           <p class="dark:text-white mt-4 text-sm">Created Jul 3, 2021</p>

src/lib/components/Courses/index.svelte

@@ -9,7 +9,7 @@
 
 <CopyCourseModal />
 
-<div class="w-full cards-container my-4 m-auto">
+<div class={`w-full ${$courseMetaDeta.isLoading || $courses ? 'cards-container' : ''} my-4 m-auto`}>
   {#if $courseMetaDeta.isLoading}
     <CardLoader />
     <CardLoader />

src/lib/components/Form/Select.svelte

@@ -21,7 +21,7 @@
   {/if}
   <select
     bind:value
-    class="form-select block w-auto mt-1 {selectClassName}"
+    class="form-select block w-auto mt-1 dark:text-gray-800 {selectClassName}"
     required={isRequired}
     on:blur={() => {}}
     on:change={onChange}

src/lib/components/Form/TextArea.svelte

@@ -1,5 +1,6 @@
 <script>
   export let label = '';
+  export let disabled = false;
   export let placeholder = 'Write your answer...';
   export let value = '';
   export let rows = '3';
@@ -34,11 +35,12 @@
   </pre> -->
 
   <textarea
+    {disabled}
     {rows}
     {placeholder}
     bind:value
     required={isRequired}
-    class="form-textarea dark:bg-gray-500 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 mt-1 block w-full
+    class="form-textarea dark:bg-gray-500 dark:text-gray-800 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 mt-1 block w-full
     {bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
     on:change={onChange}
   />

src/lib/components/PageBody/index.svelte

@@ -4,11 +4,14 @@
   export let width = 'max-w-4xl w-full lg:w-11/12';
   export let padding = 'pb-5 px-4';
   export let className = '';
+  export let headerClassName = '';
 </script>
 
 <div class="root mt-4 mx-auto {width} {className} relative {padding}">
   {#if $$slots.header}
-    <div class="head dark:bg-gray-800 flex items-center justify-between sticky right-0 w-full px-3">
+    <div
+      class="head dark:bg-gray-800 flex items-center justify-between sticky right-0 w-full px-3 {headerClassName}"
+    >
       <slot name="header" />
     </div>
   {/if}
@@ -19,6 +22,7 @@
 <style>
   .root {
     overflow-y: auto;
+    overflow-x: hidden;
     height: calc(100vh - 127px);
   }
   .head {

src/lib/components/QuestionContainer/index.svelte

@@ -1,20 +1,16 @@
 <script>
-  // import { onMount } from "svelte";
   import TextField from '../Form/TextField.svelte';
-  import CloseButton from '../Buttons/Close/index.svelte';
+  import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+
   export let isTitle = false;
   export let onClose = () => {};
   export let scrollToQuestion = false;
   export let points = undefined;
   export let hasError = false;
   export let onPointsChange = () => {};
-  let ref;
 
-  // onMount(() => {
+  let ref;
-  //   if (scrollToQuestion) {
-  //     ref.scrollIntoView({ block: "end", behavior: "smooth" });
-  //   }
-  // });
 
   $: {
     if (ref && scrollToQuestion) {
@@ -36,18 +32,14 @@
   {#if isTitle}
     <div class="title absolute bg-primary-700" />
   {/if}
-
-  {#if onClose && !isTitle}
-    <div class="close-button hidden absolute -top-6 -right-6">
-      <CloseButton onClick={onClose} contained={true} />
-    </div>
-  {/if}
   <div class="px-4 {isTitle ? 'pt-4' : 'pt-2'} pb-3">
     <slot />
   </div>
 
   {#if typeof points !== 'undefined'}
-    <div class="border-gray border-t-2 border-r-0 border-b-0 border-l-0 p-2">
+    <div
+      class="flex justify-between items-center border-gray border-t-2 border-r-0 border-b-0 border-l-0 p-2"
+    >
       <div class="flex items-center w-40">
         <p class="dark:text-white text-sm mr-2">Points:</p>
         <TextField
@@ -57,14 +49,17 @@
           onChange={onPointsChange}
         />
       </div>
+
+      {#if onClose && !isTitle}
+        <IconButton onClick={onClose}>
+          <TrashCanIcon size={24} />
+        </IconButton>
+      {/if}
     </div>
   {/if}
 </div>
 
 <style>
-  .root:hover .close-button {
-    display: block;
-  }
   .title {
     color: rgba(255, 255, 255, 1);
     border-top-left-radius: 8px;

src/lib/components/UploadImage/index.svelte

@@ -3,7 +3,7 @@
 
   export let avatar = null;
   export let src = null;
-  export let widthHeight = null;
+  export let widthHeight = '';
   export let shape = 'rounded-full';
   export let errorMessage = null;
 

src/lib/utils/services/courses/index.ts

@@ -243,7 +243,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
     let questionSupabaseRes;
 
     if (is_dirty || isNew(id)) {
-      const res = await supabase.from('question').upsert(newQuestion);
+      const res = await supabase.from('question').upsert(newQuestion).select();
 
       if (res.error) {
         console.error(`Upsert question`, res.error);
@@ -293,7 +293,7 @@ export async function upsertExercise(questionnaire: any, exerciseId: Exercise['i
           };
 
           if (is_dirty || isNew(option.id)) {
-            const { data } = await supabase.from('option').upsert(newOption);
+            const { data } = await supabase.from('option').upsert(newOption).select();
             if (Array.isArray(data)) {
               // @ts-ignore
               newQuestion.options.push(data[0]);

src/routes/courses/[id]/lessons/+page.svelte

@@ -30,6 +30,7 @@
   import PageBody from '$lib/components/PageBody/index.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
   import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
+  import { exerciseMode } from '$lib/components/Course/components/Lesson/Exercise/store';
 
   export let data;
   const { courseId } = data;
@@ -108,6 +109,7 @@
       isStudent = user.role_id === 3;
     }
   }
+  $: $exerciseMode.editMode = !isStudent;
 </script>
 
 <CourseContainer bind:isStudent>