forked from tsai/budibase
Andrew Kingston
6 years ago
11 changed files with 7 additions and 343 deletions
@ -1,127 +0,0 @@ |
|||||
<script> |
|
||||
import { keys, map, includes, filter } from "lodash/fp" |
|
||||
import EventEditorModal from "./EventEditorModal.svelte" |
|
||||
import { Modal } from "@budibase/bbui" |
|
||||
|
|
||||
export const EVENT_TYPE = "event" |
|
||||
export let component |
|
||||
|
|
||||
let events = [] |
|
||||
let selectedEvent = null |
|
||||
let modal |
|
||||
|
|
||||
$: { |
|
||||
events = Object.keys(component) |
|
||||
// TODO: use real events |
|
||||
.filter(propName => ["onChange", "onClick", "onLoad"].includes(propName)) |
|
||||
.map(propName => ({ |
|
||||
name: propName, |
|
||||
handlers: component[propName] || [], |
|
||||
})) |
|
||||
} |
|
||||
|
|
||||
const openModal = event => { |
|
||||
selectedEvent = event |
|
||||
modal.show() |
|
||||
} |
|
||||
</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="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> |
|
||||
|
|
||||
<Modal bind:this={modal} width="600px"> |
|
||||
<EventEditorModal eventOptions={events} event={selectedEvent} /> |
|
||||
</Modal> |
|
||||
|
|
||||
<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: var(--background); |
|
||||
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 var(--grey-1); |
|
||||
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> |
|
||||
@ -1,53 +0,0 @@ |
|||||
<script> |
|
||||
import { Input, DataList, Select } from "@budibase/bbui" |
|
||||
import { automationStore, allScreens } from "builderStore" |
|
||||
|
|
||||
export let parameter |
|
||||
|
|
||||
let isOpen = false |
|
||||
|
|
||||
const capitalize = s => { |
|
||||
if (typeof s !== "string") return "" |
|
||||
return s.charAt(0).toUpperCase() + s.slice(1) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div class="handler-option"> |
|
||||
{#if parameter.name === 'automation'}<span>{parameter.name}</span>{/if} |
|
||||
{#if parameter.name === 'automation'} |
|
||||
<Select on:change bind:value={parameter.value}> |
|
||||
<option value="" /> |
|
||||
{#each $automationStore.automations.filter(wf => wf.live) as automation} |
|
||||
<option value={automation._id}>{automation.name}</option> |
|
||||
{/each} |
|
||||
</Select> |
|
||||
{:else if parameter.name === 'url'} |
|
||||
<DataList on:change bind:value={parameter.value}> |
|
||||
<option value="" /> |
|
||||
{#each $allScreens as screen} |
|
||||
<option value={screen.routing.route}> |
|
||||
{screen.props._instanceName} |
|
||||
</option> |
|
||||
{/each} |
|
||||
</DataList> |
|
||||
{:else} |
|
||||
<Input |
|
||||
name={parameter.name} |
|
||||
label={capitalize(parameter.name)} |
|
||||
on:change |
|
||||
value={parameter.value} /> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.handler-option { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
span { |
|
||||
font-size: 18px; |
|
||||
margin-bottom: 10px; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,10 +0,0 @@ |
|||||
<script> |
|
||||
import Input from "./Input.svelte" |
|
||||
export let _bb |
|
||||
|
|
||||
export let label = "" |
|
||||
export let value = "" |
|
||||
export let onchange = () => {} |
|
||||
</script> |
|
||||
|
|
||||
<Input type="text" {_bb} {label} {value} {onchange} /> |
|
||||
Loading…
Reference in new issue