CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 05:20:32 +12:00
Code Issues Projects Releases Wiki Activity

Moved events back into Settings

Browse source 
& removed Events Panel
This commit is contained in:
Michael Shanks 2020-08-10 16:08:46 +01:00
parent 1855febc57
commit f1a6671eb3
5 changed files with 67 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View file

@ -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>

75
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View file

@ -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 eventOptions = []
export let event = []
export let eventType
export let onClose
export let onChange
let eventType = ""
let draftEventHandler = { parameters: [] }
$: eventData = event || { handlers: [] }
$: if (!eventOptions.includes(eventType) && eventOptions.length > 0)
eventType = eventOptions[0].name
$: handlers = event || []
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)
eventData = eventData
handlers.splice(index, 1)
}
const createNewEventHandler = handler => {
@ -48,17 +44,18 @@
parameters: {},
[EVENT_TYPE_MEMBER_NAME]: "",
}
eventData.handlers.push(newHandler)
eventData = eventData
handlers.push(newHandler)
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>
{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>
<h3>{eventType} Event</h3>
</div>
<div class="section">
@ -92,31 +77,23 @@
}}
handler={draftEventHandler} />
</div>
{#if eventData}
{#each eventData.handlers as handler, index}
<HandlerSelector
{index}
onChanged={updateEventHandler}
onRemoved={() => deleteEventHandler(index)}
{handler} />
{/each}
{/if}
{#each handlers as handler, index}
<HandlerSelector
{index}
onChanged={updateEventHandler}
onRemoved={() => deleteEventHandler(index)}
{handler} />
{/each}
</div>
<div class="footer">
{#if eventData.name}
<Button
outline
on:click={deleteEvent}
disabled={eventData.handlers.length === 0}>
Delete
</Button>
{/if}
<Button outline on:click={deleteEvent} disabled={handlers.length === 0}>
Delete
</Button>
<div class="save">
<Button
primary
on:click={saveEventData}
disabled={eventData.handlers.length === 0}>
<Button primary on:click={saveEventData} disabled={handlers.length === 0}>
Save
</Button>
</div>

39
packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte Normal file
View file

@ -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>

161
packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
View file

@ -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>

2
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -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 },
],
},
},