actions fix
This commit is contained in:
Martin McKeaveney
parent
23899840d3
commit
0f18ee70ef
|
|
@ -20,12 +20,9 @@
|
|||
</script>
|
||||
|
||||
<div on:click|stopPropagation bind:this={anchor}>
|
||||
<TextButton
|
||||
text
|
||||
on:click={dropdown.show}
|
||||
active={false}>
|
||||
<Icon name="add" />
|
||||
Add Parameters
|
||||
<TextButton text on:click={dropdown.show} active={false}>
|
||||
<Icon name="add" />
|
||||
Add Parameters
|
||||
</TextButton>
|
||||
<DropdownMenu align="right" {anchor} bind:this={dropdown}>
|
||||
<div class="wrapper">
|
||||
|
|
@ -39,4 +36,4 @@
|
|||
padding: var(--spacing-xl);
|
||||
min-width: 600px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { notificationStore } from "builderStore/store/notifications"
|
||||
import { flip } from 'svelte/animate';
|
||||
import { flip } from "svelte/animate"
|
||||
import { fly } from "svelte/transition"
|
||||
|
||||
export let themes = {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,9 @@
|
|||
parameters: {},
|
||||
[EVENT_TYPE_KEY]: actionType.name,
|
||||
}
|
||||
if (!actions) {
|
||||
actions = []
|
||||
}
|
||||
actions.push(newAction)
|
||||
selectedAction = newAction
|
||||
actions = actions
|
||||
|
|
@ -73,7 +76,8 @@
|
|||
<div class="action-container">
|
||||
<div class="action-header" on:click={selectAction(action)}>
|
||||
<span class:selected={action === selectedAction}>
|
||||
{index + 1}. {action[EVENT_TYPE_KEY]}
|
||||
{index + 1}.
|
||||
{action[EVENT_TYPE_KEY]}
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
|
|
|
|||
|
|
@ -34,15 +34,17 @@
|
|||
}))
|
||||
return [...acc, ...viewsArr]
|
||||
}, [])
|
||||
$: queries = $backendUiStore.queries.filter(query => query.queryVerb === "read").map(query => ({
|
||||
label: query.name,
|
||||
name: query.name,
|
||||
tableId: query._id,
|
||||
...query,
|
||||
schema: query.schema,
|
||||
parameters: query.parameters,
|
||||
type: "query",
|
||||
}))
|
||||
$: queries = $backendUiStore.queries
|
||||
.filter(query => query.queryVerb === "read")
|
||||
.map(query => ({
|
||||
label: query.name,
|
||||
name: query.name,
|
||||
tableId: query._id,
|
||||
...query,
|
||||
schema: query.schema,
|
||||
parameters: query.parameters,
|
||||
type: "query",
|
||||
}))
|
||||
$: bindableProperties = getBindableProperties(
|
||||
$currentAsset.props,
|
||||
$store.selectedComponentId
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
</script>
|
||||
|
||||
<form on:submit|preventDefault>
|
||||
<div class="field">
|
||||
{#each schemaKeys as field}
|
||||
<div class="field">
|
||||
{#each schemaKeys as field}
|
||||
<Input
|
||||
placeholder="Enter {field} name"
|
||||
outline
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
type={schema.fields[field]?.type}
|
||||
required={schema.fields[field]?.required}
|
||||
bind:value={fields[field]} />
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</form>
|
||||
{#if schema.customisable}
|
||||
<Editor
|
||||
|
|
|
|||
|
|
@ -135,17 +135,22 @@
|
|||
<Input placeholder="✎ Edit Query Name" bind:value={query.name} />
|
||||
</div>
|
||||
{#if config}
|
||||
<div class="props">
|
||||
<div class="query-type">Query type: <span class="query-type-span">{config[query.queryVerb].type}</span></div>
|
||||
<div class="select">
|
||||
<Select primary thin bind:value={query.queryVerb}>
|
||||
{#each Object.keys(config) as queryVerb}
|
||||
<option value={queryVerb}>{queryVerb}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</div>
|
||||
<div class="props">
|
||||
<div class="query-type">
|
||||
Query type:
|
||||
<span class="query-type-span">{config[query.queryVerb].type}</span>
|
||||
</div>
|
||||
<div class="select">
|
||||
<Select primary thin bind:value={query.queryVerb}>
|
||||
{#each Object.keys(config) as queryVerb}
|
||||
<option value={queryVerb}>{queryVerb}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<EditQueryParamsPopover bind:parameters={query.parameters} bindable={false} />
|
||||
<EditQueryParamsPopover
|
||||
bind:parameters={query.parameters}
|
||||
bindable={false} />
|
||||
{/if}
|
||||
</header>
|
||||
<Spacer extraLarge />
|
||||
|
|
@ -182,7 +187,11 @@
|
|||
{#each fields as field, idx}
|
||||
<Spacer small />
|
||||
<div class="field">
|
||||
<Input outline placeholder="Field Name" type={'text'} bind:value={field.name} />
|
||||
<Input
|
||||
outline
|
||||
placeholder="Field Name"
|
||||
type={'text'}
|
||||
bind:value={field.name} />
|
||||
<Select thin border bind:value={field.type}>
|
||||
<option value={''}>Select a field type</option>
|
||||
<option value={'STRING'}>Text</option>
|
||||
|
|
@ -195,8 +204,8 @@
|
|||
on:click={() => deleteField(idx)} />
|
||||
</div>
|
||||
{/each}
|
||||
<Spacer small />
|
||||
<Button thin secondary on:click={newField}>Add Field</Button>
|
||||
<Spacer small />
|
||||
<Button thin secondary on:click={newField}>Add Field</Button>
|
||||
{/if}
|
||||
</Switcher>
|
||||
{/if}
|
||||
|
|
@ -206,7 +215,6 @@
|
|||
{/if}
|
||||
|
||||
<style>
|
||||
|
||||
.input {
|
||||
width: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
{#if schema}
|
||||
{#key query._id}
|
||||
{#if schema.type === QueryTypes.SQL}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,14 @@
|
|||
import { writable } from "svelte/store"
|
||||
import { setContext, onMount } from "svelte"
|
||||
import Component from "./Component.svelte"
|
||||
import NotificationDisplay from './NotificationDisplay.svelte'
|
||||
import NotificationDisplay from "./NotificationDisplay.svelte"
|
||||
import SDK from "../sdk"
|
||||
import { createDataStore, initialise, screenStore, notificationStore } from "../store"
|
||||
import {
|
||||
createDataStore,
|
||||
initialise,
|
||||
screenStore,
|
||||
notificationStore,
|
||||
} from "../store"
|
||||
|
||||
// Provide contexts
|
||||
setContext("sdk", SDK)
|
||||
|
|
@ -24,4 +29,4 @@
|
|||
{#if loaded && $screenStore.activeLayout}
|
||||
<Component definition={$screenStore.activeLayout.props} />
|
||||
{/if}
|
||||
<NotificationDisplay />
|
||||
<NotificationDisplay />
|
||||
|
|
|
|||
|
|
@ -1,60 +1,59 @@
|
|||
<script>
|
||||
import { flip } from 'svelte/animate';
|
||||
import { fly } from "svelte/transition"
|
||||
import { getContext } from "svelte"
|
||||
const { notifications } = getContext("sdk")
|
||||
|
||||
export let themes = {
|
||||
danger: "#E26D69",
|
||||
success: "#84C991",
|
||||
warning: "#f0ad4e",
|
||||
info: "#5bc0de",
|
||||
default: "#aaaaaa",
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="notifications">
|
||||
{#each $notifications as notification (notification.id)}
|
||||
<div
|
||||
animate:flip
|
||||
class="toast"
|
||||
style="background: {themes[notification.type]};"
|
||||
transition:fly={{ y: -30 }}>
|
||||
<div class="content">{notification.message}</div>
|
||||
{#if notification.icon}<i class={notification.icon} />{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.notifications {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--border-radius-s);
|
||||
/* The toasts now support being auto sized, so this static width could be removed */
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
import { flip } from "svelte/animate"
|
||||
import { fly } from "svelte/transition"
|
||||
import { getContext } from "svelte"
|
||||
const { notifications } = getContext("sdk")
|
||||
|
||||
export let themes = {
|
||||
danger: "#E26D69",
|
||||
success: "#84C991",
|
||||
warning: "#f0ad4e",
|
||||
info: "#5bc0de",
|
||||
default: "#aaaaaa",
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="notifications">
|
||||
{#each $notifications as notification (notification.id)}
|
||||
<div
|
||||
animate:flip
|
||||
class="toast"
|
||||
style="background: {themes[notification.type]};"
|
||||
transition:fly={{ y: -30 }}>
|
||||
<div class="content">{notification.message}</div>
|
||||
{#if notification.icon}<i class={notification.icon} />{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.notifications {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 10px;
|
||||
border-radius: var(--border-radius-s);
|
||||
/* The toasts now support being auto sized, so this static width could be removed */
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
display: block;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue