MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #322 from Budibase/feature/fix-events-modal 

Feature/fix events modal
This commit is contained in:
Kevin Åberg Kultalahti 2020-06-04 09:33:41 +02:00 committed by GitHub
parent 1f9846ab2f db231d0ac0
commit 6c279fab8d
5 changed files with 162 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/builder/src/components/common/Select.svelte
View File

@ -22,7 +22,6 @@
font-size: 14px;
position: relative;
border: var(--grey-dark) 1px solid;
max-width: 256px;
}
.adjusted {

133
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View File

@ -1,5 +1,6 @@
<script>
import { store } from "builderStore"
import { Button } from "@budibase/bbui"
import Modal from "../../common/Modal.svelte"
import HandlerSelector from "./HandlerSelector.svelte"
import IconButton from "../../common/IconButton.svelte"
@ -8,12 +9,12 @@
import Select from "../../common/Select.svelte"
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 open
export let onClose
let eventType = ""
@ -62,20 +63,16 @@
}
</script>
<Modal bind:isOpen={open} onClosed={closeModal}>
<h2>
<div class="container">
<div class="body">
<div class="heading">
<h3>
{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
</h2>
<a href="https://docs.budibase.com/" target="_blank">
Click here to learn more about component events
</a>
</h3>
</div>
<div class="event-options">
<div>
<header>
<h5>Event Type</h5>
{@html getIcon('info', 20)}
</header>
<div class="section">
<h4>Event Type</h4>
<Select bind:value={eventType}>
{#each eventOptions as option}
<option value={option.name}>{option.name}</option>
@ -84,10 +81,8 @@
</div>
</div>
<header>
<h5>Event Action(s)</h5>
{@html getIcon('info', 20)}
</header>
<div class="section">
<h4>Event Action(s)</h4>
<HandlerSelector
newHandler
onChanged={updateDraftEventHandler}
@ -96,6 +91,7 @@
draftEventHandler = { parameters: [] }
}}
handler={draftEventHandler} />
</div>
{#if eventData}
{#each eventData.handlers as handler, index}
<HandlerSelector
@ -106,61 +102,72 @@
{/each}
{/if}
<div class="actions">
<ActionButton
alert
disabled={eventData.handlers.length === 0}
hidden={!eventData.name}
on:click={deleteEvent}>
Delete
</ActionButton>
<ActionButton
disabled={eventData.handlers.length === 0}
on:click={saveEventData}>
Save
</ActionButton>
</div>
</Modal>
<div class="footer">
{#if eventData.name}
<Button
outline
on:click={deleteEvent}
disabled={eventData.handlers.length === 0}>
Delete
</Button>
{/if}
<div class="save">
<Button
primary
on:click={saveEventData}
disabled={eventData.handlers.length === 0}>
Save
</Button>
</div>
</div>
<div class="close-button" on:click={closeModal}>
<CloseIcon />
</div>
</div>
<style>
h2 {
color: var(--primary100);
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
.container {
position: relative;
}
.heading {
margin-bottom: 20px;
}
h5 {
color: rgba(22, 48, 87, 0.6);
font-size: 15px;
margin: 0;
.close-button {
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
}
.close-button :global(svg) {
width: 24px;
height: 24px;
}
.event-options {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.actions,
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.actions {
margin-top: auto;
}
header {
margin-top: 30px;
h4 {
margin-bottom: 10px;
}
a {
color: rgba(22, 48, 87, 0.6);
font-size: 13px;
margin-top: 0;
h3 {
margin: 0;
font-size: 24px;
font-weight: bold;
}
.body {
padding: 40px;
display: grid;
grid-gap: 20px;
}
.footer {
display: flex;
justify-content: flex-end;
padding: 30px 40px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 50px;
background-color: var(--grey-light);
}
.save {
margin-left: 20px;
}
</style>

32
packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
View File

@ -1,4 +1,5 @@
<script>
import { getContext } from "svelte"
import {
keys,
map,
@ -17,7 +18,6 @@
import PlusButton from "components/common/PlusButton.svelte"
import IconButton from "components/common/IconButton.svelte"
import EventEditorModal from "./EventEditorModal.svelte"
import HandlerSelector from "./HandlerSelector.svelte"
import { PencilIcon } from "components/common/Icons"
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@ -26,7 +26,6 @@
export let component
let modalOpen = false
let events = []
let selectedEvent = null
@ -40,14 +39,28 @@
}))
}
// Handle create app modal
const { open, close } = getContext("simple-modal")
const openModal = event => {
selectedEvent = event
modalOpen = true
}
const closeModal = () => {
open(
EventEditorModal,
{
eventOptions: events,
event: selectedEvent,
onClose: () => {
close()
selectedEvent = null
modalOpen = false
},
},
{
closeButton: false,
closeOnEsc: false,
styleContent: { padding: 0 },
closeOnOuterClick: true,
}
)
}
</script>
@ -71,11 +84,6 @@
{/each}
</form>
</div>
<EventEditorModal
open={modalOpen}
onClose={closeModal}
eventOptions={events}
event={selectedEvent} />
<style>
h3 {

32
packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
View File

@ -1,4 +1,5 @@
<script>
import { Button } from "@budibase/bbui"
import IconButton from "components/common/IconButton.svelte"
import PlusButton from "components/common/PlusButton.svelte"
import Select from "components/common/Select.svelte"
@ -85,27 +86,28 @@
</Select>
</div>
{#if parameters}
<br />
{#each parameters as parameter, idx}
<StateBindingCascader onChange={onParameterChanged(idx)} {parameter} />
<StateBindingCascader on:change={onParameterChanged(idx)} {parameter} />
{/each}
{/if}
</div>
<div class="event-action-button">
{#if parameters.length > 0}
<div class="button-container">
{#if newHandler}
<PlusButton on:click={onCreate} />
<Button primary thin on:click={onCreate}>Add Action</Button>
{:else}
<IconButton icon="x" on:click={onRemoved} />
<Button outline thin on:click={onRemoved}>Remove Action</Button>
{/if}
</div>
{/if}
</div>
</div>
<style>
.type-selector-container {
display: flex;
justify-content: space-between;
align-items: center;
display: grid;
grid-gap: 20px;
width: 100%;
background: rgba(223, 223, 223, 0.5);
border: 1px solid #dfdfdf;
margin-bottom: 18px;
@ -122,17 +124,19 @@
.handler-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-template-columns: 1fr;
grid-gap: 20px;
padding: 22px;
}
.event-action-button {
margin-right: 20px;
.button-container {
display: grid;
justify-items: end;
}
span {
font-size: 13px;
margin-bottom: 5px;
font-size: 18px;
margin-bottom: 10px;
font-weight: 500;
}
</style>

59
packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
View File

@ -1,8 +1,8 @@
<script>
import { Input } from "@budibase/bbui"
import IconButton from "components/common/IconButton.svelte"
import PlusButton from "components/common/PlusButton.svelte"
import Select from "components/common/Select.svelte"
import Input from "components/common/Input.svelte"
import { find, map, keys, reduce, keyBy } from "lodash/fp"
import { pipe } from "components/common/core"
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"
@ -10,64 +10,43 @@
import { ArrowDownIcon } from "components/common/Icons/"
export let parameter
export let onChange
let isOpen = false
const capitalize = s => {
if (typeof s !== "string") return ""
return s.charAt(0).toUpperCase() + s.slice(1)
}
</script>
<div class="handler-option">
<span>{parameter.name}</span>
<div class="handler-input">
{#if parameter.name === 'workflow'}
<select
class="budibase__input"
on:change={onChange}
bind:value={parameter.value}>
<span>{parameter.name}</span>
{/if}
{#if parameter.name === 'workflow'}
<Select on:change bind:value={parameter.value}>
{#each $workflowStore.workflows.filter(wf => wf.live) as workflow}
<option value={workflow._id}>{workflow.name}</option>
{/each}
</select>
</Select>
{:else}
<Input {onChange} value={parameter.value} />
<button on:click={() => (isOpen = !isOpen)}>
<div class="icon" style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
<ArrowDownIcon size={36} />
</div>
</button>
<Input
name={parameter.name}
label={capitalize(parameter.name)}
on:change
value={parameter.value} />
{/if}
</div>
</div>
<style>
button {
cursor: pointer;
outline: none;
border: none;
border-radius: 5px;
background: rgba(249, 249, 249, 1);
font-size: 1.6rem;
font-weight: 700;
color: rgba(22, 48, 87, 1);
margin-left: 5px;
}
.icon {
width: 24px;
}
.handler-option {
display: flex;
flex-direction: column;
}
.handler-input {
position: relative;
display: flex;
}
span {
font-size: 13px;
margin-bottom: 5px;
font-size: 18px;
margin-bottom: 10px;
font-weight: 500;
}
</style>