Merge pull request #1213 from Budibase/labday/dnd-actions

Adds drag and drop to the actions drawer

packages/builder/package.json

@@ -79,6 +79,7 @@
     "posthog-js": "1.4.5",
     "remixicon": "2.5.0",
     "shortid": "2.2.15",
+    "svelte-dnd-action": "^0.8.9",
     "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "0.1.0",
     "uuid": "8.3.1",

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -1,11 +1,22 @@
 <script>
+  import {flip} from "svelte/animate";
+  import {dndzone} from "svelte-dnd-action";
   import { Button, DropdownMenu, Spacer } from "@budibase/bbui"
   import actionTypes from "./actions"
 
+  const flipDurationMs = 150;
+
   const EVENT_TYPE_KEY = "##eventHandlerType"
 
   export let actions
 
+  // dndzone needs an id on the array items, so this adds some temporary ones.
+  if (actions) {
+    actions = actions.map((action, i) => {
+      return {...action, id: i}
+    })
+  }
+
   let addActionButton
   let addActionDropdown
   let selectedAction = actions?.length ? actions[0] : null
@@ -30,19 +41,26 @@
     const newAction = {
       parameters: {},
       [EVENT_TYPE_KEY]: actionType.name,
+      id: actions ? actions.length + 1 : 0
     }
     if (!actions) {
       actions = []
     }
-    actions.push(newAction)
+    actions = [...actions, newAction]
     selectedAction = newAction
-    actions = actions
     addActionDropdown.hide()
   }
 
   const selectAction = action => () => {
     selectedAction = action
   }
+
+  function handleDndConsider(e) {
+        actions = e.detail.items;
+    }
+    function handleDndFinalize(e) {
+        actions = e.detail.items;
+    }
 </script>
 
 <div class="actions-container">
@@ -69,21 +87,23 @@
     </div>
 
     {#if actions && actions.length > 0}
-      {#each actions as action, index}
+      <div class="action-dnd-container" use:dndzone={{items: actions, flipDurationMs, dropTargetStyle: { outline: 'none'}}} on:consider={handleDndConsider} on:finalize={handleDndFinalize}>
-        <div class="action-container">
+        {#each actions as action, index (action.id)}
-          <div
+          <div class="action-container" animate:flip={{duration: flipDurationMs}}>
-            class="action-header"
+            <div
-            class:selected={action === selectedAction}
+              class="action-header"
-            on:click={selectAction(action)}>
+              class:selected={action === selectedAction}
-            {index + 1}.
+              on:click={selectAction(action)}>
-            {action[EVENT_TYPE_KEY]}
+              {index + 1}.
+              {action[EVENT_TYPE_KEY]}
+            </div>
+            <i
+              class="ri-close-fill"
+              style="margin-left: auto;"
+              on:click={() => deleteAction(index)} />
           </div>
-          <i
+        {/each}
-            class="ri-close-fill"
+      </div>
-            style="margin-left: auto;"
-            on:click={() => deleteAction(index)} />
-        </div>
-      {/each}
     {/if}
   </div>
   <div class="action-config">

packages/builder/yarn.lock

@@ -6686,6 +6686,11 @@ supports-color@^7.0.0, supports-color@^7.1.0, supports-color@^7.2.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-dnd-action@^0.8.9:
+  version "0.8.9"
+  resolved "https://registry.yarnpkg.com/svelte-dnd-action/-/svelte-dnd-action-0.8.9.tgz#90fa211057a5d9e832d5521511f9c1b87242d2ae"
+  integrity sha512-4WaLRvERr2JoX6Lh9GnlEZRzFF5eY3h2q0n5+lS4/+nqqQjTIpCwTrncMf9tJNa+M4AGy43I5aq5F+Ohl/nxLg==
+
 svelte-flatpickr@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"