Add UI functionality of questionnaire builder

2021-06-21 19:21:43 +03:00
parent b24b87d6d1
commit 1ceb5442bc
20 changed files with 504 additions and 5599 deletions
@@ -0,0 +1,150 @@
+<script>
+  import Delete24 from "carbon-icons-svelte/lib/Delete24";
+  import AddFilled24 from "carbon-icons-svelte/lib/AddFilled24";
+
+  import TextField from "../../../../Form/TextField.svelte";
+  import Checkbox from "../../../../Form/Checkbox.svelte";
+  import RadioItem from "../../../../Form/RadioItem.svelte";
+  import IconButton from "../../../../IconButton/index.svelte";
+  import Select from "../../../../Form/Select.svelte";
+  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
+  import {
+    QUESTION_TYPE,
+    QUESTION_TYPES,
+  } from "../../../../Question/constants";
+  // import EditContent from "../../../../EditContent/index.svelte";
+  // import readme from "../../readme.js";
+
+  // let value = readme;
+
+  let questions = [
+    {
+      id: 1,
+      title: "",
+      type: QUESTION_TYPE.RADIO,
+      options: [
+        {
+          id: 1,
+          value: "",
+        },
+      ],
+    },
+  ];
+
+  function handleAddOption(id) {
+    return () => {
+      questions = questions.map((question) => {
+        if (question.id === id) {
+          return {
+            ...question,
+            options: [
+              ...question.options,
+              {
+                id: question.options.length + 1,
+                value: "",
+              },
+            ],
+          };
+        }
+
+        return question;
+      });
+    };
+  }
+
+  function handleOptionRemove(questionId, optionId) {
+    return () => {
+      questions = questions.map((question) => {
+        if (question.id === questionId) {
+          return {
+            ...question,
+            options: [
+              ...question.options.filter((option) => option.id !== optionId),
+            ],
+          };
+        }
+
+        return question;
+      });
+    };
+  }
+
+  function handleAddQuestion() {
+    questions = [
+      ...questions,
+      {
+        id: questions.length + 1,
+        title: "",
+        type: QUESTION_TYPE.RADIO,
+        options: [
+          {
+            id: 1,
+            value: "",
+          },
+        ],
+      },
+    ];
+  }
+</script>
+
+{#each questions as question}
+  <div
+    class="border-2 border-gray border-r-2 rounded-md px-4 py-2 mb-4 w-3/5 inline-block"
+  >
+    <div class="flex">
+      <div class="mr-2">
+        <TextField placeholder="Question" bind:value={question.title} />
+      </div>
+      <Select bind:value={question.type} options={QUESTION_TYPES} />
+    </div>
+
+    <div class="flex flex-col">
+      {#each question.options as option}
+        {#if QUESTION_TYPE.RADIO === question.type}
+          <RadioItem
+            isEditable={true}
+            name={question.title || "radio-name"}
+            bind:label={option.value}
+          >
+            <div slot="iconbutton">
+              <IconButton
+                value={option.id}
+                onClick={handleOptionRemove(question.id, option.id)}
+              >
+                <Delete24 class="carbon-icon" />
+              </IconButton>
+            </div>
+          </RadioItem>
+        {/if}
+
+        {#if QUESTION_TYPE.CHECKBOX === question.type}
+          <Checkbox
+            isEditable={true}
+            name={question || "checkbox-name"}
+            bind:label={option.value}
+          >
+            <div slot="iconbutton">
+              <IconButton
+                value={option.id}
+                onClick={handleOptionRemove(question.id)}
+              >
+                <Delete24 class="carbon-icon" />
+              </IconButton>
+            </div>
+          </Checkbox>
+        {/if}
+      {/each}
+    </div>
+
+    <div class="flex items-center">
+      <IconButton onClick={handleAddOption(question.id)}>
+        <AddFilled24 class="carbon-icon" />
+      </IconButton>
+      <p class="italic">Add option</p>
+    </div>
+  </div>
+{/each}
+
+<div class="flex justify-end mt-2">
+  <PrimaryButton onClick={handleAddQuestion} label="Add Question" />
+</div>
@@ -1,6 +1,7 @@
 <script>
-  import RadioQuestion from "../../../RadioQuestion/index.svelte";
-  import PrimaryButton from "../../../PrimaryButton/index.svelte";
+  import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
+  import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
+  import PrimaryButton from "../../../../PrimaryButton/index.svelte";

  let answers = {};
  let currentQuestionIndex = 0;
@@ -110,6 +111,17 @@
    currentQuestionIndex += 1;
  }

+  function onCheckboxSubmit(name, value) {
+    if (!value) return;
+
+    answers = {
+      ...answers,
+      [name]: value,
+    };
+
+    currentQuestionIndex += 1;
+  }
+
  $: currentQuestion = questions[currentQuestionIndex - 1];

  function onPrevious() {
@@ -138,7 +150,7 @@
    <code>{JSON.stringify(answers)}</code>
  </pre>
 {:else}
-  <RadioQuestion
+  <!-- <RadioQuestion
    title={currentQuestionIndex + ". " + currentQuestion.title}
    name={currentQuestion.name}
    options={currentQuestion.options}
@@ -147,5 +159,15 @@
    {onPrevious}
    disablePreviousButton={currentQuestionIndex === 1}
    isLast={currentQuestionIndex === questions.length}
+  /> -->
+  <CheckboxQuestion
+    title={currentQuestionIndex + ". " + currentQuestion.title}
+    name={currentQuestion.name}
+    options={currentQuestion.options}
+    defaultValue={answers[currentQuestion.name] || []}
+    onSubmit={onCheckboxSubmit}
+    {onPrevious}
+    disablePreviousButton={currentQuestionIndex === 1}
+    isLast={currentQuestionIndex === questions.length}
  />
 {/if}
@@ -0,0 +1,13 @@
+<script>
+  import MODES from "../../../../../utils/constants/mode.js";
+  import EditMode from "./EditMode.svelte";
+  import ViewMode from "./ViewMode.svelte";
+
+  export let mode = "";
+</script>
+
+{#if mode === MODES.edit}
+  <EditMode />
+{:else}
+  <ViewMode />
+{/if}
@@ -1,8 +1,16 @@
 <script>
-  import EditContent from "../../../../EditContent/index.svelte";
-  import readme from "../../readme.js";
+  // import EditContent from "../../../../EditContent/index.svelte";
+  import TextField from "../../../../Form/TextField.svelte";
+  // import readme from "../../readme.js";

-  let value = readme;
+  // let value = readme;
 </script>

-<EditContent {value} placeholder="Start typing your lesson" />
+
+<TextField label="Slide link" />
+<TextField label="Youtube link" />
+<!-- <EditContent
+  writeLabel="Lecture Note"
+  {value}
+  placeholder="Start typing your lesson"
+/> -->
@@ -1,17 +1,62 @@
+<!--
+    import marked from "marked";
+    {@html marked(readme, { breaks: true, gfm: true })}
+-->
 <script>
-  import marked from "marked";
+  const activeClassName = "border-blue-700";
+  let slideLink = 'https://docs.google.com/presentation/d/e/2PACX-1vS7mulzY5v1X_D0Gz68M2sggq2zjHCuoyY5JI07hcsOA4svDV5rxhLD9V3ckO_Rz7TK1YniQJtu0CXM/embed?start=false&loop=false&delayms=3000';
+  let currentTab = 1;

-  const readme = `
-# Introduction
- Welcome to this course, we are glad you made it here
-
- ## What you'l learn
-
-      1. Build powerful, fast, user-friendly and reactive web apps.
-      2. Provide amazing user experiences by leveraging the power of JavaScript with ease.
-      3. Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now.
-      4. Learn all about React Hooks and React Components.
-`;
+  function handleTabClick(tab) {
+    return () => {
+      currentTab = tab;
+    }
+  }
 </script>

-{@html marked(readme, { breaks: true, gfm: true })}
+<div class="flex mb-2">
+  <button
+    on:click={handleTabClick(1)}
+    class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab === 1 && `${activeClassName}`}"
+  >
+    Slide
+  </button>
+  <button
+    on:click={handleTabClick(2)}
+    class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab === 2 && `${activeClassName}`}"
+  >
+    Video
+  </button>
+</div>
+
+<div class="m-2 mb-0 p-0">
+  {#if currentTab === 1}
+    <iframe
+      title="Embeded Slides"
+      src={slideLink}
+      frameborder="0"
+      width="100%"
+      height="569"
+      allowfullscreen="true"
+      mozallowfullscreen="true"
+      webkitallowfullscreen="true"
+    >
+    </iframe>
+  {:else if currentTab === 2}
+    <iframe
+      width="100%"
+      height="569"
+      src="https://www.youtube.com/embed/luM5uobewhA"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen>
+    </iframe>
+  {/if}
+</div>
+
+<style>
+  button {
+    padding: 12px 12px 8px 12px;
+  }
+</style>
@@ -4,7 +4,6 @@
  import ViewMode from "./ViewMode.svelte";

  export let mode = "";
-  $: console.log("mode", mode);
 </script>

 {#if mode === MODES.edit}
@@ -1,7 +1,7 @@
 <script>
  import PageNav from "../../../PageNav/index.svelte";
  import Classwork from "./Classwork.svelte";
-  import Homework from "./Homework.svelte";
+  import Homework from "./Homework/index.svelte";
  import Readme from "./Readme/index.svelte";
  import PrimaryContainedButton from "../../../PrimaryContainedButton/index.svelte";

@@ -21,29 +21,47 @@
  }
 </script>

+<div>
+  <PageNav
+    navItems={[
+      {
+        label: "README.md",
+        isActive: tab === "lectures",
+        href: `${path}?tab=lectures`,
+      },
+      {
+        label: "Class work",
+        isActive: tab === "classwork",
+        href: `${path}?tab=classwork`,
+      },
+      {
+        label: "Hometasks",
+        isActive: tab === "hometasks",
+        href: `${path}?tab=hometasks`,
+      },
+    ]}
+  >
+    <div slot="widget">
+      <PrimaryContainedButton
+        label={modeLabel}
+        handleClick={handleModeChange}
+      />
+    </div>
+  </PageNav>
+
+  <div class="course">
+    {#if tab === "lectures"}
+      <Readme {mode} />
+    {:else if tab === "classwork"}
+      <Classwork />
+    {:else if tab === "hometasks"}
+      <Homework {mode} />
+    {/if}
+  </div>
+</div>
+
 <style>
  .course {
    padding: 0 40px;
  }
 </style>
-
-<div>
-  <PageNav
-    navItems={[{ label: 'README.md', isActive: tab === 'lectures', href: `${path}?tab=lectures` }, { label: 'Class work', isActive: tab === 'classwork', href: `${path}?tab=classwork` }, { label: 'Hometasks', isActive: tab === 'hometasks', href: `${path}?tab=hometasks` }]}>
-    <div slot="widget">
-      <PrimaryContainedButton
-        label={modeLabel}
-        handleClick={handleModeChange} />
-    </div>
-  </PageNav>
-
-  <div class="course">
-    {#if tab === 'lectures'}
-      <Readme {mode} />
-    {:else if tab === 'classwork'}
-      <Classwork />
-    {:else if tab === 'hometasks'}
-      <Homework {mode} />
-    {/if}
-  </div>
-</div>
@@ -1,8 +1,8 @@
 <script>
  import marked from "marked";
-  import PrimaryButton from "../PrimaryButton/index.svelte";

  let isWriteMode = true;
+  export let writeLabel = 'Write';
  export let value;
  export let placeholder = ``;
  const activeClassName = "border-b-2 border-blue-700";
@@ -13,12 +13,12 @@
 </script>

 <div class="root">
-  <div class="flex justify-center">
+  <div class="flex">
    <button
      on:click={handleTabClick(1)}
      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
    >
-      Write
+      {writeLabel}
    </button>
    <button
      on:click={handleTabClick(2)}
@@ -27,46 +27,6 @@
      Preview
    </button>
  </div>
-  <div class="block">
-    <span class="text-gray-700">Radio Buttons</span>
-    <div class="mt-2">
-      <div>
-        <label class="inline-flex items-center">
-          <input
-            class="form-radio"
-            type="radio"
-            checked
-            name="radio-direct"
-            value="1"
-          />
-          <span class="ml-2">Option 1</span>
-        </label>
-      </div>
-      <div>
-        <label class="inline-flex items-center">
-          <input
-            class="form-radio"
-            type="radio"
-            name="radio-direct"
-            value="2"
-          />
-          <span class="ml-2">Option 2</span>
-        </label>
-      </div>
-      <div>
-        <label class="inline-flex items-center">
-          <input
-            class="form-radio"
-            type="radio"
-            name="radio-direct"
-            value="3"
-          />
-          <span class="ml-2">Option 3</span>
-        </label>
-      </div>
-    </div>
-  </div>
-
  <div class="m-2 mb-0 p-0">
    {#if isWriteMode}
      <textarea
@@ -113,6 +73,11 @@
    min-height: 200px;
  }

+  .form-item {
+    display: flex;
+    align-items: flex-end;
+  }
+
  textarea {
    width: 100%;
    height: 500px;
@@ -3,6 +3,7 @@
  export let value;
  export let checked;
  export let name;
+  export let isEditable = false;
 </script>

 <label class="inline-flex items-center">
@@ -11,7 +12,19 @@
    class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
    {name}
    {value}
+    disabled={isEditable}
    bind:checked
  />
-  <span class="ml-2">{label}</span>
+  {#if isEditable}
+    <input
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      type="text"
+      placeholder="Your option"
+      bind:value={label}
+    />
+  {:else}
+    <span class="ml-2">{label}</span>
+  {/if}
+
+  <slot name="iconbutton" />
 </label>
@@ -3,9 +3,28 @@
  export let value;
  export let checked;
  export let name;
+  export let isEditable = false;
 </script>

 <label class="inline-flex items-center">
-  <input class="form-radio" type="radio" {checked} {name} {value} />
-  <span class="ml-2">{label}</span>
+  <input
+    class="form-radio"
+    type="radio"
+    {checked}
+    {name}
+    {value}
+    disabled={isEditable}
+  />
+  {#if isEditable}
+    <input
+      class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+      type="text"
+      placeholder="Your option"
+      bind:value={label}
+    />
+  {:else}
+    <span class="ml-2">{label}</span>
+  {/if}
+
+  <slot name="iconbutton" />
 </label>
@@ -1,12 +1,11 @@
 <script>
  export let label;
-  export let placeholder;
  export let value;
  export let options = [];
 </script>

 <label class="block">
-  <span class="text-gray-700">{label}</span>
+  {#if label} <span class="text-gray-700">{label}</span> {/if}
  <select bind:value class="form-select block w-full mt-1">
    {#each options as option}
      <option value={option.id}>
@@ -5,10 +5,10 @@
  export let onKeyDown;
 </script>

-<label class="block">
-  {#if label}<span class="text-gray-700">{label}</span>{/if}
+<label class="block mb-3">
+  {#if label}<h4 class="m-0">{label}</h4>{/if}
  <input
-    class="form-input p-4 mt-1 block w-full rounded-t-lg bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
+    class="form-input p-2 mt-1 block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
    type="text"
    on:keydown={onKeyDown}
    {placeholder}
@@ -0,0 +1,60 @@
+<script>
+  import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import Checkbox from "../../Form/Checkbox.svelte";
+
+  export let title = "";
+  export let name = "";
+  export let options = [];
+  export let onSubmit = () => {};
+  export let onPrevious = () => {};
+  export let defaultValue = [];
+  export let disablePreviousButton = false;
+  export let isLast = false;
+
+  function getRadioVal(form, name) {
+    let values = [];
+    const radios = form.elements[name];
+
+    for (let i = 0, len = radios.length; i < len; i++) {
+      if (radios[i].checked) {
+        values.push(radios[i].value);
+      }
+    }
+
+    return values;
+  }
+
+  function handleFormSubmit(event) {
+    const values = getRadioVal(event.target, name);
+    onSubmit(name, values);
+    event.target.reset();
+  }
+
+  function handlePrevious(event) {
+    event.preventDefault();
+    onPrevious();
+  }
+</script>
+
+<form on:submit|preventDefault={handleFormSubmit}>
+  <h2>{title}</h2>
+
+  <div class="ml-4">
+    {#each options as option}
+      <div>
+        <Checkbox
+          {name}
+          value={option.value}
+          checked={defaultValue.includes(option.value)}
+          label={option.label}
+        />
+      </div>
+    {/each}
+  </div>
+  <div class="mt-3">
+    {#if disablePreviousButton === false}
+      <PrimaryButton onClick={handlePrevious} label="Previous" />
+    {/if}
+    <PrimaryButton type="submit" label={isLast ? "Finish" : "Next"} {name} />
+  </div>
+</form>
@@ -1,6 +1,6 @@
 <script>
-  import PrimaryButton from "../PrimaryButton/index.svelte";
-  import RadioItem from "../Form/RadioItem.svelte";
+  import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import RadioItem from "../../Form/RadioItem.svelte";

  export let title = "";
  export let name = "";
@@ -0,0 +1,20 @@
+export const QUESTION_TYPE = {
+  RADIO: "RADIO",
+  CHECKBOX: "CHECKBOX",
+  TEXTAREA: "TEXTAREA",
+};
+
+export const QUESTION_TYPES = [
+  {
+    id: QUESTION_TYPE.RADIO,
+    text: "Single answer",
+  },
+  {
+    id: QUESTION_TYPE.CHECKBOX,
+    text: "Multiple answers",
+  },
+  {
+    id: QUESTION_TYPE.TEXTAREA,
+    text: "Paragraph",
+  },
+];
@@ -1,67 +0,0 @@
-<script context="module">
-  export async function preload({ params }) {
-    let [slug, courseNavItem, lectureId] = params.id;
-
-    return { slug, courseNavItem, lectureId };
-  }
-</script>
-
-<script>
-  import { stores } from "@sapper/app";
-  import Lecture from "../../components/Course/components/Lecture/index.svelte";
-  import HomeTask from "../../components/Course/components/HomeTask.svelte";
-  import Overview from "../../components/Course/index.svelte";
-  import People from "../../components/Course/components/People.svelte";
-  import Scoreboard from "../../components/Course/components/Scoreboard.svelte";
-  import TimeTable from "../../components/Course/components/TimeTable.svelte";
-  import CourseNav from "../../components/Course/components/CourseNav.svelte";
-  import Apps from "../../components/Apps/index.svelte";
-
-  // export let slug;
-  export let courseNavItem;
-  // export let lectureId;
-
-  const { page } = stores();
-  let tab = "";
-  let mode = "";
-
-  $: tab = $page.query.tab || "lectures";
-  $: mode = $page.query.mode;
-</script>
-
-<style>
-  .root {
-    display: flex;
-    border-right: 1px solid var(--border-color);
-    width: 100%;
-  }
-
-  .rightBar {
-    width: 80%;
-  }
-</style>
-
-<svelte:head>
-  <title>ReactJS</title>
-</svelte:head>
-
-<div class="root">
-  <CourseNav />
-  <div class="rightBar">
-    {#if !courseNavItem}
-      <Overview />
-    {:else if courseNavItem === 'score'}
-      <Scoreboard />
-    {:else if courseNavItem === 'timetable'}
-      <TimeTable />
-    {:else if courseNavItem === 'hometasks'}
-      <HomeTask />
-    {:else if courseNavItem === 'lecture'}
-      <Lecture path={$page.path} {tab} {mode} />
-    {:else if courseNavItem === 'people'}
-      <People />
-    {/if}
-  </div>
-
-  <Apps />
-</div>
@@ -0,0 +1,68 @@
+<script context="module">
+    export async function preload({ params }) {
+      let [slug, courseNavItem, lectureId] = params.id;
+  
+      return { slug, courseNavItem, lectureId };
+    }
+  </script>
+  
+  <script>
+    import { stores } from "@sapper/app";
+    import Lecture from "../../../components/Course/components/Lecture/index.svelte";
+    import HomeTask from "../../../components/Course/components/HomeTask.svelte";
+    import Overview from "../../../components/Course/index.svelte";
+    import People from "../../../components/Course/components/People.svelte";
+    import Scoreboard from "../../../components/Course/components/Scoreboard.svelte";
+    import TimeTable from "../../../components/Course/components/TimeTable.svelte";
+    import CourseNav from "../../../components/Course/components/CourseNav.svelte";
+    import Apps from "../../../components/Apps/index.svelte";
+  
+    // export let slug;
+    export let courseNavItem;
+    // export let lectureId;
+  
+    const { page } = stores();
+    let tab = "";
+    let mode = "";
+  
+    $: tab = $page.query.tab || "lectures";
+    $: mode = $page.query.mode;
+  </script>
+  
+  <style>
+    .root {
+      display: flex;
+      border-right: 1px solid var(--border-color);
+      width: 100%;
+    }
+  
+    .rightBar {
+      width: 80%;
+    }
+  </style>
+  
+  <svelte:head>
+    <title>ReactJS</title>
+  </svelte:head>
+  
+  <div class="root">
+    <CourseNav />
+    <div class="rightBar">
+      {#if !courseNavItem}
+        <Overview />
+      {:else if courseNavItem === 'score'}
+        <Scoreboard />
+      {:else if courseNavItem === 'timetable'}
+        <TimeTable />
+      {:else if courseNavItem === 'hometasks'}
+        <HomeTask />
+      {:else if courseNavItem === 'lecture'}
+        <Lecture path={$page.path} {tab} {mode} />
+      {:else if courseNavItem === 'people'}
+        <People />
+      {/if}
+    </div>
+  
+    <Apps />
+  </div>
+