Moved events back into Settings

& removed Events Panel

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -13,7 +13,6 @@
   } from "components/common/Icons/"
   import CodeEditor from "./CodeEditor.svelte"
   import LayoutEditor from "./LayoutEditor.svelte"
-  import EventsEditor from "./EventsEditor"
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -25,7 +24,6 @@
   let categories = [
     { value: "settings", name: "Settings" },
     { value: "design", name: "Design" },
-    { value: "events", name: "Events" },
   ]
   let selectedCategory = categories[0]
 
@@ -113,8 +111,6 @@
         displayNameField={displayName}
         onChange={onPropChanged}
         screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
-    {:else if selectedCategory.value === 'events'}
-      <EventsEditor component={componentInstance} />
     {/if}
 
   </div>

packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte

@@ -10,28 +10,25 @@
   import Input from "../../common/Input.svelte"
   import getIcon from "../../common/icon"
   import { CloseIcon } from "components/common/Icons/"
-
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
 
-  export let event
+  export let event = []
-  export let eventOptions = []
+  export let eventType
   export let onClose
+  export let onChange
 
-  let eventType = ""
   let draftEventHandler = { parameters: [] }
 
-  $: eventData = event || { handlers: [] }
+  $: handlers = event || []
-  $: if (!eventOptions.includes(eventType) && eventOptions.length > 0)
-    eventType = eventOptions[0].name
 
   const closeModal = () => {
     onClose()
     draftEventHandler = { parameters: [] }
-    eventData = { handlers: [] }
+    handlers = []
   }
 
   const updateEventHandler = (updatedHandler, index) => {
-    eventData.handlers[index] = updatedHandler
+    handlers[index] = updatedHandler
   }
 
   const updateDraftEventHandler = updatedHandler => {
@@ -39,8 +36,7 @@
   }
 
   const deleteEventHandler = index => {
-    eventData.handlers.splice(index, 1)
+    handlers.splice(index, 1)
-    eventData = eventData
   }
 
   const createNewEventHandler = handler => {
@@ -48,17 +44,18 @@
       parameters: {},
       [EVENT_TYPE_MEMBER_NAME]: "",
     }
-    eventData.handlers.push(newHandler)
+    handlers.push(newHandler)
-    eventData = eventData
+    handlers = handlers
   }
 
   const deleteEvent = () => {
-    store.setComponentProp(eventType, [])
+    handlers = []
+    onChange([])
     closeModal()
   }
 
   const saveEventData = () => {
-    store.setComponentProp(eventType, eventData.handlers)
+    onChange(handlers)
     closeModal()
   }
 </script>
@@ -66,19 +63,7 @@
 <div class="container">
   <div class="body">
     <div class="heading">
-      <h3>
+      <h3>{eventType} Event</h3>
-        {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
-      </h3>
-    </div>
-    <div class="event-options">
-      <div class="section">
-        <h4>Event Type</h4>
-        <Select bind:value={eventType}>
-          {#each eventOptions as option}
-            <option value={option.name}>{option.name}</option>
-          {/each}
-        </Select>
-      </div>
     </div>
 
     <div class="section">
@@ -92,31 +77,23 @@
         }}
         handler={draftEventHandler} />
     </div>
-    {#if eventData}
+    {#each handlers as handler, index}
-      {#each eventData.handlers as handler, index}
+      <HandlerSelector
-        <HandlerSelector
+        {index}
-          {index}
+        onChanged={updateEventHandler}
-          onChanged={updateEventHandler}
+        onRemoved={() => deleteEventHandler(index)}
-          onRemoved={() => deleteEventHandler(index)}
+        {handler} />
-          {handler} />
+    {/each}
-      {/each}
-    {/if}
 
   </div>
   <div class="footer">
-    {#if eventData.name}
+
-      <Button
+    <Button outline on:click={deleteEvent} disabled={handlers.length === 0}>
-        outline
+      Delete
-        on:click={deleteEvent}
+    </Button>
-        disabled={eventData.handlers.length === 0}>
+
-        Delete
-      </Button>
-    {/if}
     <div class="save">
-      <Button
+      <Button primary on:click={saveEventData} disabled={handlers.length === 0}>
-        primary
-        on:click={saveEventData}
-        disabled={eventData.handlers.length === 0}>
         Save
       </Button>
     </div>

packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte

@@ -0,0 +1,39 @@
+<script>
+  import { Button } from "@budibase/bbui"
+  import EventEditorModal from "./EventEditorModal.svelte"
+  import { createEventDispatcher, getContext } from "svelte"
+
+  export let value
+  export let name
+
+  const dispatch = createEventDispatcher()
+
+  // Handle create app modal
+  const { open, close } = getContext("simple-modal")
+
+  const openModal = () => {
+    open(
+      EventEditorModal,
+      {
+        event: value,
+        eventType: name,
+        onChange: val => dispatch("change", val),
+        onClose: () => {
+          close()
+        },
+      },
+      {
+        closeButton: false,
+        closeOnEsc: false,
+        styleContent: { padding: 0 },
+        closeOnOuterClick: true,
+      }
+    )
+  }
+</script>
+
+<Button secondary small on:click={openModal}>Define Actions</Button>
+
+<style>
+
+</style>

packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte

@@ -1,161 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import {
-    keys,
-    map,
-    some,
-    includes,
-    cloneDeep,
-    isEqual,
-    sortBy,
-    filter,
-    difference,
-  } from "lodash/fp"
-  import { pipe } from "components/common/core"
-  import Checkbox from "components/common/Checkbox.svelte"
-  import Textbox from "components/common/Textbox.svelte"
-  import Dropdown from "components/common/Dropdown.svelte"
-  import PlusButton from "components/common/PlusButton.svelte"
-  import IconButton from "components/common/IconButton.svelte"
-  import EventEditorModal from "./EventEditorModal.svelte"
-
-  import { PencilIcon } from "components/common/Icons"
-  import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
-
-  export const EVENT_TYPE = "event"
-
-  export let component
-
-  let events = []
-  let selectedEvent = null
-
-  $: {
-    events = Object.keys(component)
-      // TODO: use real events
-      .filter(propName => ["onChange", "onClick", "onLoad"].includes(propName))
-      .map(propName => ({
-        name: propName,
-        handlers: component[propName] || [],
-      }))
-  }
-
-  // Handle create app modal
-  const { open, close } = getContext("simple-modal")
-
-  const openModal = event => {
-    selectedEvent = event
-    open(
-      EventEditorModal,
-      {
-        eventOptions: events,
-        event: selectedEvent,
-        onClose: () => {
-          close()
-          selectedEvent = null
-        },
-      },
-      {
-        closeButton: false,
-        closeOnEsc: false,
-        styleContent: { padding: 0 },
-        closeOnOuterClick: true,
-      }
-    )
-  }
-</script>
-
-<button class="newevent" on:click={() => openModal()}>
-  <i class="icon ri-add-circle-fill" />
-  Create New Event
-</button>
-
-<div class="root">
-  <form on:submit|preventDefault class="uk-form-stacked form-root">
-    {#each events as event, index}
-      {#if event.handlers.length > 0}
-        <div
-          class:selected={selectedEvent && selectedEvent.index === index}
-          class="handler-container budibase__nav-item"
-          on:click={() => openModal({ ...event, index })}>
-          <span class="event-name">{event.name}</span>
-          <span class="edit-text">EDIT</span>
-        </div>
-      {/if}
-    {/each}
-  </form>
-</div>
-
-<style>
-  .root {
-    font-size: 10pt;
-    width: 100%;
-  }
-
-  .newevent {
-    cursor: pointer;
-    border: 1px solid var(--grey-4);
-    border-radius: 3px;
-    width: 100%;
-    padding: 8px 16px;
-    margin: 0px 0px 12px 0px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: white;
-    color: var(--ink);
-    font-size: 14px;
-    font-weight: 500;
-    transition: all 2ms;
-  }
-
-  .newevent:hover {
-    background: var(--grey-1);
-  }
-
-  .icon {
-    color: var(--ink);
-    font-size: 16px;
-    margin-right: 4px;
-  }
-
-  .form-root {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .handler-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    border: 2px solid #f9f9f9;
-    height: 80px;
-    width: 100%;
-  }
-
-  .event-name {
-    margin-top: 5px;
-    font-weight: bold;
-    font-size: 16px;
-    color: rgba(22, 48, 87, 0.6);
-    align-self: end;
-  }
-
-  .edit-text {
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: bold;
-    align-self: end;
-    justify-self: end;
-    font-size: 10px;
-    color: rgba(35, 65, 105, 0.4);
-  }
-
-  .selected {
-    color: var(--blue);
-    background: var(--grey-1) !important;
-  }
-</style>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -2,6 +2,7 @@ import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"
+import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 
 import { all } from "./propertyCategories.js"
 
@@ -196,6 +197,7 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
+              { label: "onClick", key: "onClick", control: Event },
             ],
           },
         },