CLASSROOMIO-T-49

merge CLASSROOMIO-T-49: Quiz CRUD CLASSROOMIO-T-49: Validate quiz question CLASSROOMIO-T-49: Begin work on quiz preview CLASSROOMIO-T-49: Complete quiz page CLASSROOMIO-T-49: Init quiz work CLASSROOMIO-T-49: Quiz CRUD CLASSROOMIO-T-49: Validate quiz question CLASSROOMIO-T-49: Begin work on quiz preview CLASSROOMIO-T-49: Complete quiz page CLASSROOMIO-T-49: Init quiz work Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com> Merge-request: CLASSROOMIO-MR-14 Merged-by: Best Admin <digdippa@gmail.com>
2023-06-17 19:11:29 +00:00
parent b532ea6d29
commit 1e71a91a54
70 changed files with 10601 additions and 497 deletions
@@ -0,0 +1,110 @@
+<script>
+  import { goto } from '@sapper/app';
+  import pluralize from 'pluralize';
+  import OverflowMenuHorizontal20 from 'carbon-icons-svelte/lib/OverflowMenuHorizontal20';
+  import dayjs from 'dayjs';
+  import relativeTime from 'dayjs/plugin/relativeTime';
+  import { currentOrgPath, quizStore } from '../../../utils/store/org';
+  import Dropdown from '../../Dropdown/index.svelte';
+  import PrimaryButton from '../../PrimaryButton/index.svelte';
+  import { VARIANTS } from '../../PrimaryButton/constants';
+  import {
+    onRename,
+    onMakeCopy,
+    onDelete,
+  } from '../../../utils/services/org/quiz';
+  import { themeImages } from '../../../utils/constants/quiz';
+
+  dayjs.extend(relativeTime);
+
+  export let quiz;
+  export let totalQuestions;
+
+  function getOptions() {
+    return [
+      // {
+      //   label: 'Edit',
+      //   onClick: onEdit(quiz),
+      // },
+      // {
+      //   label: 'Share',
+      //   onClick: onShare(quiz),
+      // },
+      // {
+      //   label: 'Report',
+      //   onClick: onReport(quiz),
+      // },
+      {
+        label: 'Rename',
+        onClick() {
+          onRename(quiz);
+        },
+      },
+      // {
+      //   label: 'Make a copy',
+      //   onClick() {
+      //     onMakeCopy(quiz);
+      //   },
+      // },
+      {
+        label: 'Delete',
+        onClick() {
+          onDelete(quiz);
+        },
+      },
+    ];
+  }
+
+  function startQuiz() {}
+</script>
+
+{#if quiz}
+  <div
+    class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-700 mr-4 mb-5 relative flex p-3"
+  >
+    <img
+      src={themeImages[quiz.theme]?.card || themeImages.standard.card}
+      alt="quiz-card"
+      class=""
+      style="max-width: 300px;"
+    />
+
+    <div class="p-5 flex flex-col justify-between w-full">
+      <div class="flex justify-between">
+        <h4 class="dark:text-white title text-md font-bold">
+          <a href="{$currentOrgPath}/quiz/{quiz.id}">{quiz.title}</a>
+        </h4>
+
+        <Dropdown
+          options={getOptions()}
+          classNames="absolute top-4 right-4"
+          isIcon={true}
+        >
+          <div class="p-1 rounded-full bg-gray-200 dark:bg-gray-600">
+            <OverflowMenuHorizontal20 class="carbon-icon active" />
+          </div>
+        </Dropdown>
+      </div>
+
+      <div class="flex justify-between">
+        <div>
+          <p class="mb-2">{pluralize('question', totalQuestions, true)}</p>
+          <p>Updated {dayjs(quiz.updated_at).fromNow(true)} ago</p>
+        </div>
+
+        <PrimaryButton
+          className="px-6 py-3"
+          variant={VARIANTS.OUTLINED}
+          label="Start Quiz"
+          onClick={startQuiz}
+        />
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .root {
+    height: 180px;
+  }
+</style>