mirror of https://github.com/Budibase/budibase.git
Michael Shanks
6 years ago
5 changed files with 67 additions and 214 deletions
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue