Add drag and drop + all exercise page

2021-07-17 22:29:12 +03:00
parent f84bbc6016
commit f976b81202
14 changed files with 277 additions and 141 deletions
@@ -13,12 +13,110 @@
 </script>

 <script>
-  import PageNav from "../../../components/PageNav/index.svelte";
-  import CourseContainer from "../../../components/CourseContainer/index.svelte";
+  import { flip } from 'svelte/animate';
+  import { dndzone } from 'svelte-dnd-action';
+  import PageNav from '../../../components/PageNav/index.svelte';
+  import Chip from '../../../components/Chip/index.svelte';
+  import PageBody from '../../../components/PageBody/index.svelte';
+  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  const flipDurationMs = 300;

  export let courseData = {};
+
+  let sections = [
+    {
+      id: 1,
+      title: 'Submitted',
+      value: 5,
+      items: [
+        { id: 41, name: 'item41' },
+        { id: 42, name: 'item42' },
+        { id: 43, name: 'item43' },
+        { id: 44, name: 'item44' },
+        { id: 45, name: 'item45' },
+        { id: 46, name: 'item46' },
+        { id: 47, name: 'item47' },
+        { id: 48, name: 'item48' },
+        { id: 49, name: 'item49' },
+      ],
+    },
+    {
+      id: 2,
+      title: 'In Progress',
+      value: 0,
+      items: [],
+    },
+    {
+      id: 3,
+      title: 'Graded',
+      value: 10,
+      items: [],
+    },
+  ];
+
+  function handleItemFinalize(columnIdx, newItems) {
+    sections[columnIdx].items = newItems;
+    // onFinalUpdate([...sections]);
+  }
+
+  function handleDndConsiderCards(columnIdx) {
+    return (e) => {
+      console.warn('got consider');
+      sections[columnIdx].items = e.detail.items;
+    };
+  }
+
+  function handleDndFinalizeCards(columnIdx) {
+    return (e) => handleItemFinalize(columnIdx, e.detail.items);
+  }
 </script>

 <CourseContainer {courseData}>
  <PageNav title="All Exercises" />
+
+  <PageBody width="w-11/12 overflow-x-auto overflow-y-hidden h-3/4">
+    <div class="flex items-center justify-between h-full w-full">
+      {#each sections as { id, title, value, items }, idx (id)}
+        <div
+          class="section rounded-md bg-gray-100 border border-gray-50 p-3 h-full mr-3 overflow-hidden"
+          animate:flip={{ duration: flipDurationMs }}
+        >
+          <div class="flex items-center mb-2">
+            <Chip {value} />
+            <p class="ml-2 font-bold">{title}</p>
+          </div>
+          <div
+            class="content pr-2 overflow-y-auto mb-3"
+            use:dndzone={{
+              items,
+              flipDurationMs,
+              dropTargetStyle: { outline: 'blue' },
+            }}
+            on:consider={handleDndConsiderCards(idx)}
+            on:finalize={handleDndFinalizeCards(idx)}
+          >
+            {#each items as item (item.id)}
+              <div
+                class="w-full h-16 my-2 mx-0 rounded-md bg-white p-2"
+                animate:flip={{ duration: flipDurationMs }}
+              >
+                {item.name}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </PageBody>
 </CourseContainer>
+
+<style>
+  .section {
+    max-width: 355px;
+    min-width: 355px;
+  }
+
+  .content {
+    height: 90%;
+  }
+</style>