feat: add draggable items and error handling in API request

- Make items draggable and apply dragStart function in Item.svelte
- Implement fetch error handling in Kanban.svelte
- Add drag item drop handling to change status in Kanban.svelte

items/src/routes/Item.svelte

@@ -4,10 +4,11 @@
 
   function deleteItem() {
     items.update(items => items.filter(i => i.id !== item.id));
+    // TODO don't renumber
   }
 </script>
 
-<div class="kanban-item">
+<div class="kanban-item" draggable="true" ondragstart="{event => dragStart(event, item)}">
   <p>{item.subject}</p>
   <p>{item.user}</p>
   <p>{item.size}</p>

items/src/routes/Kanban.svelte

@@ -5,14 +5,36 @@
 
   onMount(async () => {
     const response = await fetch('/api/items');
-    const items = await response.json();
-    items.set(items);
+    if (response.ok) {
+      const items = await response.json();
+      items.set(items);
+    } else {
+      console.error(response.status);
+    }
   });
 //  let items = [
 //    { id: 1, status: 'todo', subject: 'Item 1' },
 //    { id: 2, status: 'doing', subject: 'Item 2' },
 //    { id: 3, status: 'done', subject: 'Item 3' }
 //  ];
+
+  let draggedItem = null;
+
+  function dragStart(event, item) {
+    draggedItem = item;
+  }
+
+  function allowDrop(event) {
+    event.preventDefault();
+  }
+
+  function drop(event, status) {
+    event.preventDefault();
+    draggedItem.status = status;
+
+    // TODO: Call server function to update item
+  }
+
 </script>
 
 <style>
@@ -33,21 +55,21 @@
 </style>
 
 <div class="kanban-board">
-  <div class="kanban-column">
+  <div class="kanban-column" ondrop="{event => drop(event, 'todo')}" ondragover="{allowDrop}">
     <h2>To Do</h2>
     {#each $items.filter(item => item.status === 'todo') as item}
       <Item {item} />
     {/each}
   </div>
 
-  <div class="kanban-column">
+  <div class="kanban-column" ondrop="{event => drop(event, 'doing')}" ondragover="{allowDrop}">
     <h2>Doing</h2>
     {#each $items.filter(item => item.status === 'doing') as item}
       <Item {item} />
     {/each}
   </div>
 
-  <div class="kanban-column">
+  <div class="kanban-column" ondrop="{event => drop(event, 'done')}" ondragover="{allowDrop}">
     <h2>Done</h2>
     {#each $items.filter(item => item.status === 'done') as item}
       <Item {item} />