drag & drop - change order in pinned dbs #227

packages/web/src/appobj/AppObjectCore.svelte

@@ -76,6 +76,10 @@
   on:dragstart={e => {
     e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data));
   }}
+  on:dragstart
+  on:dragenter
+  on:dragend
+  on:drop
 >
   {#if checkedObjectsStore}
     <CheckboxField

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -330,6 +330,10 @@
   isBold={_.get($currentDatabase, 'connection._id') == _.get(data.connection, '_id') &&
     _.get($currentDatabase, 'name') == data.name}
   on:click={() => ($currentDatabase = data)}
+  on:dragstart
+  on:dragenter
+  on:dragend
+  on:drop
   on:middleclick={() => {
     createMenu()
       .find(x => x.isNewQuery)

packages/web/src/appobj/PinnedAppObject.svelte

@@ -8,14 +8,43 @@
     }
     return data.connection._id;
   };
+
+  function dragExchange(dragged, data, pinned, setPinned, compare) {
+
+  }
 </script>
 
 <script lang="ts">
+  import _ from 'lodash';
+  import { draggedPinnedObject, pinnedDatabases } from '../stores';
+
   export let data;
 </script>
 
 {#if data.objectTypeField}
-  <DatabaseObjectAppObject {...$$props} />
+  <DatabaseObjectAppObject {...$$props} 
+  />
 {:else}
-  <DatabaseAppObject {...$$props} />
+  <DatabaseAppObject
+    {...$$props}
+    on:dragstart={() => {
+      $draggedPinnedObject = data;
+    }}
+    on:dragenter={e => {
+      const dragged = $draggedPinnedObject;
+      if (dragged?.connection?._id != data?.connection?._id || dragged?.name != data?.name) {
+        const dbs = $pinnedDatabases;
+        const i1 = _.findIndex(dbs, x => x?.name == dragged?.name && x?.connection?._id == dragged?.connection?._id);
+        const i2 = _.findIndex(dbs, x => x?.name == data?.name && x?.connection?._id == data?.connection?._id);
+        const newDbs = [...dbs];
+        const tmp = newDbs[i1];
+        newDbs[i1] = newDbs[i2];
+        newDbs[i2] = tmp;
+        $pinnedDatabases = newDbs;
+      }
+    }}
+    on:dragend={() => {
+      $draggedPinnedObject = null;
+    }}
+  />
 {/if}

packages/web/src/stores.ts

@@ -85,6 +85,7 @@ export const visibleToolbar = writable(false);
 export const leftPanelWidth = writableWithStorage(300, 'leftPanelWidth');
 export const currentDropDownMenu = writable(null);
 export const openedModals = writable([]);
+export const draggedPinnedObject = writable(null);
 export const openedSnackbars = writable([]);
 export const nullStore = readable(null, () => {});
 export const currentArchive = writableWithStorage('default', 'currentArchive');

packages/web/src/widgets/PinnedObjectsList.svelte

@@ -5,7 +5,6 @@
   import { currentDatabase, pinnedDatabases, pinnedTables } from '../stores';
   import * as pinnedAppObject from '../appobj/PinnedAppObject.svelte';
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
-  import AboutModal from '../modals/AboutModal.svelte';
 
   const connectionColorFactory = useConnectionColorFactory(3);