v1 of deadline feature

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

@@ -18,11 +18,12 @@
   import TextField from '../../../../Form/TextField.svelte';
   import TextArea from '../../../../Form/TextArea.svelte';
   import Checkbox from '../../../../Form/Checkbox.svelte';
+  import DateTime from '../../../../Form/DateTime.svelte';
   import RadioItem from '../../../../Form/RadioItem.svelte';
   import IconButton from '../../../../IconButton/index.svelte';
   import ErrorMessage from '../../../../ErrorMessage/index.svelte';
   import PrimaryButton from '../../../../PrimaryButton/index.svelte';
-  import Dropdown from '../../../../Dropdown/index.svelte';
+  import EditContent from '../../../../EditContent/index.svelte';
   import { VARIANTS } from '../../../../PrimaryButton/constants';
   import Select from '../../../../Form/Select.svelte';
   import QuestionContainer from '../../../../QuestionContainer/index.svelte';
@@ -75,17 +76,22 @@
       placeholder="Title"
       bind:value={$questionnaire.title}
       className="mb-2"
-      onChange={() => {
-        console.log('title dirty');
-        $questionnaire.is_title_dirty = true;
-      }}
+      onChange={() => ($questionnaire.is_title_dirty = true)}
     />
-    <TextArea
-      placeholder="Description and Rules"
+    <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)}
+    />
+    <EditContent
+      writeLabel="Description"
       bind:value={$questionnaire.description}
-      onChange={() => {
-        $questionnaire.is_description_dirty = true;
-      }}
+      placeholder="Start typing your lesson"
+      textAreaHeight="100px"
+      onInputChange={() => ($questionnaire.is_description_dirty = true)}
     />
   </QuestionContainer>
 

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

@@ -68,7 +68,7 @@
       .from('exercise')
       .select(
         `
-        id, title, description,
+        id, title, description, due_by,
         questions:question(
           *,
           options:option(*),
@@ -89,6 +89,7 @@
 
     data.is_title_dirty = false;
     data.is_description_dirty = false;
+    data.is_due_by_dirty = false;
 
     questionnaire.set(data);
     console.log('getExercise', exerciseId, $questionnaire);

src/components/Course/components/Lesson/store/exercise.js

@@ -13,6 +13,8 @@ export const questionnaireValidation = writable({});
 
 export const questionnaire = writable({
   title: '',
+  due_by: '',
+  is_due_by_dirty: false,
   is_title_dirty: false,
   description: '',
   is_description_dirty: false,

src/components/EditContent/index.svelte

@@ -6,6 +6,7 @@
   export let value;
   export let placeholder = ``;
   export let onInputChange = () => {};
+  export let textAreaHeight = '';
   const activeClassName = 'border-b-2 border-blue-700';
 
   const handleTabClick = (tab) => () => {
@@ -33,12 +34,13 @@
       <textarea
         bind:value
         {placeholder}
+        style="height: {textAreaHeight}"
         class="border border-gray rounded-md p-2"
         on:change={onInputChange}
       />
     {:else}
       <article class="preview prose prose-sm sm:prose p-2">
-        {@html marked(value)}
+        {@html marked(value || 'Nothing to preview')}
       </article>
     {/if}
   </div>
@@ -81,7 +83,6 @@
 <style>
   .root {
     width: 100%;
-    min-height: 200px;
   }
 
   .form-item {

src/components/Form/Date.svelte

@@ -2,14 +2,17 @@
   export let label;
   export let placeholder;
   export let value;
+  export let className = '';
+  export let onChange = () => {}; // This is to know if element is 'dirty'
 </script>
 
-<label class="block">
+<label class="block {className}">
   <span class="text-gray-700">{label}</span>
   <input
     bind:value
     {placeholder}
     type="date"
     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/Form/DateTime.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+  export let className = '';
+  export let onChange = () => {}; // This is to know if element is 'dirty'
+</script>
+
+<label class="block {className}">
+  <span class="text-gray-700">{label}</span>
+  <input
+    bind:value
+    {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/utils/services/courses/index.js

@@ -178,16 +178,19 @@ export async function upsertExercise(questionnaire, exerciseId) {
     questions,
     title,
     description,
+    due_by,
     is_title_dirty,
     is_description_dirty,
+    is_due_by_dirty,
   } = questionnaire;
 
-  if (is_description_dirty || is_title_dirty) {
+  if (is_description_dirty || is_title_dirty || is_due_by_dirty) {
     await supabase
       .from('exercise')
       .update({
         title,
         description,
+        due_by,
       })
       .match({ id: exerciseId });
   }