CLASSROOMIO-T-4: Add deadline and show it was late or early

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

@@ -35,6 +35,7 @@
     QUESTION_TYPES,
   } from '../../../../Question/constants';
   import { filterOutDeleted } from './functions';
+  import Date from '../../../../Form/Date.svelte';
   // import EditContent from "../../../../EditContent/index.svelte";
   // import readme from "../../readme.js";
 
@@ -100,11 +101,12 @@
     />
     <DateTime
       label="Due by"
-      bind:value={$questionnaire.due_by}
-      placeholder="2021-03-25"
       className="w-50"
-      useTime={true}
-      onChange={() => ($questionnaire.is_due_by_dirty = true)}
+      value={$questionnaire.due_by}
+      onInput={(e) => {
+        $questionnaire.due_by = e.target.value;
+        $questionnaire.is_due_by_dirty = true;
+      }}
     />
     <EditContent
       writeLabel="Description"

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

@@ -116,7 +116,22 @@
       <div
         class="hover:bg-gray-100 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
       >
-        <p class="font-bold text-lg">Details</p>
+        <p class="font-bold text-lg">
+          Details
+          {#if data.isEarly}
+            <span
+              class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"
+            >
+              early
+            </span>
+          {:else}
+            <span
+              class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"
+            >
+              late
+            </span>
+          {/if}
+        </p>
       </div>
 
       <div class="flex items-center text-sm p-3">
@@ -148,3 +163,9 @@
     </div>
   </div>
 </Modal>
+
+<style>
+  .badge {
+    width: fit-content;
+  }
+</style>

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

@@ -1,4 +1,5 @@
 <script>
+  import marked from 'marked';
   import { fly } from 'svelte/transition';
   import { group, course } from '../../../store';
   import { questionnaire } from '../store/exercise';
@@ -198,14 +199,23 @@
       </p>
       |
       <p class="mx-2">All required</p>
+      {#if $questionnaire.due_by}
+        |
+        <p class="mx-2">
+          <strong>Due by:</strong>
+          {new Date($questionnaire.due_by).toLocaleString()}
+        </p>
+      {/if}
     </div>
 
-    <p class="text-lg mt-3">{$questionnaire.description}</p>
+    <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"
+      className="my-5 float-right"
       type="button"
     />
   </div>

src/components/Form/DateTime.svelte

@@ -3,16 +3,17 @@
   export let placeholder;
   export let value;
   export let className = '';
-  export let onChange = () => {}; // This is to know if element is 'dirty'
+  export let onInput = () => {};
+  $: console.log(`value`, value);
 </script>
 
 <label class="block {className}">
   <span class="text-gray-700">{label}</span>
   <input
     bind:value
+    on:input={onInput}
     {placeholder}
     type="datetime-local"
     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-    on:blur={onChange}
   />
 </label>

src/components/Navigation/index.svelte

@@ -142,6 +142,7 @@
 
   a {
     text-decoration: none;
+    color: var(--main-primary-color);
     padding: 0 1.5em;
     font-weight: 700;
     display: flex;

src/components/Tailwindcss.svelte

@@ -61,6 +61,10 @@
     fill: var(--main-primary-color);
   }
 
+  .prose a {
+    color: var(--main-primary-color);
+  }
+
   .success :global(svg.carbon-icon) {
     fill: green;
   }