preparing to move items to new location

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/stock/Index.svelte

@@ -10,10 +10,10 @@
     import Notes            from '../notes/RelatedNotes.svelte';
     import Tags             from '../tags/TagList.svelte';
 
-
     let loc_data = $derived.by(loadLocation);
     let item = $state(null);
     let location = $state(null);
+    let draggedItem = $state(null)
 
     $effect(() => {
         // This effect runs whenever `location` changes
@@ -22,6 +22,19 @@
     let properties = $state(null);
     let top_level = $state(null);
 
+    async function move_dragged_to(new_loc){
+        const data = { item : draggedItem, target: new_loc };
+        const url = api('stock/move_item');
+        const res = await fetch(url,{
+            credentials : 'include',
+            method      : 'PATCH',
+            body        : JSON.stringify(data)
+        });
+        if (res.ok){
+            yikes();
+        } else error(res);
+    }
+
     async function loadLocation(){
         if (!location) return null;
         const url = api(`stock/location/${location.id}`)
@@ -76,7 +89,7 @@
         {#each top_level as realm,idx}
         <h3>{realm.name}</h3>
         {#if realm.locations}
-        <Locations locations={realm.locations} parent={realm} bind:selected={location} />
+        <Locations locations={realm.locations} bind:selected={location} {move_dragged_to} />
         {/if}
         {/each}
         {/if}
@@ -88,7 +101,7 @@
         {#if location}
         <h3>{location.name}</h3>
         {/if}
-        <ItemList items={data?.items.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} />
+        <ItemList items={data?.items.sort((a,b) => a.code.localeCompare(b.code))} bind:selected={item} drag_start={item => draggedItem = item} />
     </div>
     <div class="properties">
         <ItemProps {item} {properties} />

frontend/src/routes/stock/ItemList.svelte

@@ -1,7 +1,7 @@
 <script>
     import { t } from '../../translations.svelte';
 
-    let { items, selected = $bindable(null) } = $props();
+    let { items, selected = $bindable(null), drag_start = item => console.log({dragging:item}) } = $props();
 </script>
 <table>
     <thead>
@@ -13,7 +13,7 @@
     </thead>
     <tbody>
     {#each items as item}
-    <tr onclick={ev => selected = item}>
+    <tr onclick={ev => selected = item} ondragstart={e => drag_start(item)} draggable="true">
         <td>{item.id}</td>
         <td>{item.code}</td>
         <td>{item.name}</td>

frontend/src/routes/stock/Locations.svelte

@@ -5,10 +5,22 @@
 
     import LineEditor from '../../Components/LineEditor.svelte';
 
-    let { locations, parent = null, selected = $bindable(null) } = $props();
+    let { locations, move_dragged_to = new_loc => {}, selected = $bindable(null) } = $props();
 
     let show_location_form = $state(false);
     let new_location_name = $state(null);
+    let highlight = $state(null);
+
+    function drag_over(ev,location){
+        ev.stopPropagation();
+        ev.preventDefault();
+        location.highlight = true;
+        return false;
+    }
+
+    function flat(x){
+        return JSON.parse(JSON.stringify(x));
+    }
 
     async function toggleChildren(ev, location){
         ev.preventDefault();
@@ -35,8 +47,6 @@
             name: new_location_name,
             parent: parent.user ? {user:parent.user} : {company:parent.company}
         }
-
-        console.log(data);
     }
 
     function show_loc_form(ev){
@@ -47,6 +57,12 @@
     }
 </script>
 
+<style>
+    .highlight > span{
+        background: lime;
+    }
+</style>
+
 <ul>
     <li>
         {#if show_location_form}
@@ -61,10 +77,14 @@
 
     </li>
     {#each locations as location}
-    <li onclick={e => toggleChildren(e, location)} class={location.locations?'expanded':'collapsed'}>
-        {location.name}
+    <li onclick={e => toggleChildren(e, location)}
+        class="{location.locations?'expanded':'collapsed'} {location.highlight?'highlight':null}"
+        ondragover={e => drag_over(e,location)}
+        ondrop={e => move_dragged_to(location)}
+        ondragleave={e => delete location.highlight}>
+        <span class="name">{location.name}</span>
         {#if location.locations}
-        <svelte:self locations={location.locations} parent={location} bind:selected />
+        <svelte:self locations={location.locations} {move_dragged_to} bind:selected />
         {/if}
     </li>
     {/each}