forked from tsai/budibase
Martin McKeaveney
6 years ago
22 changed files with 343 additions and 197 deletions
@ -1,49 +0,0 @@ |
|||||
<script> |
|
||||
import { goto } from "@sveltech/routify" |
|
||||
import { |
|
||||
DropdownMenu, |
|
||||
TextButton as Button, |
|
||||
Icon, |
|
||||
Label, |
|
||||
Modal, |
|
||||
ModalContent, |
|
||||
TextArea, |
|
||||
} from "@budibase/bbui" |
|
||||
import { notifier } from "builderStore/store/notifications" |
|
||||
import { backendUiStore } from "builderStore" |
|
||||
import api from "builderStore/api" |
|
||||
import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte" |
|
||||
// import CreateEditQuery from "components/backend/DataTable/modals/CreateEditQuery.svelte" |
|
||||
|
|
||||
export let query = {} |
|
||||
export let edit |
|
||||
|
|
||||
let modal |
|
||||
let fields = [] |
|
||||
|
|
||||
async function saveQuery() { |
|
||||
try { |
|
||||
await backendUiStore.actions.queries.save(query.datasourceId, query) |
|
||||
notifier.success(`Query created successfully.`) |
|
||||
} catch (err) { |
|
||||
console.error(err) |
|
||||
notifier.danger(`Error creating query. ${err.message}`) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<div> |
|
||||
<Button text small on:click={modal.show}> |
|
||||
<Icon name="filter" /> |
|
||||
{edit ? 'Edit' : 'Create'} Query |
|
||||
</Button> |
|
||||
</div> |
|
||||
<!-- <Modal bind:this={modal}> --> |
|
||||
<!-- <ModalContent |
|
||||
confirmText="Save" |
|
||||
cancelText="Cancel" |
|
||||
onConfirm={saveQuery} |
|
||||
title={edit ? 'Edit Query' : 'Create New Query'}> --> |
|
||||
<!-- <CreateEditQuery bind:query /> --> |
|
||||
<!-- </ModalContent> --> |
|
||||
<!-- </Modal> --> |
|
||||
@ -0,0 +1,29 @@ |
|||||
|
<script> |
||||
|
import { slide } from "svelte/transition" |
||||
|
import Portal from "svelte-portal" |
||||
|
|
||||
|
export let title |
||||
|
export let onClose |
||||
|
</script> |
||||
|
|
||||
|
<Portal> |
||||
|
<section class="drawer" transition:slide> |
||||
|
{#if title} |
||||
|
<heading>{title}</heading> |
||||
|
{/if} |
||||
|
<slot /> |
||||
|
</section> |
||||
|
</Portal> |
||||
|
|
||||
|
<style> |
||||
|
.drawer { |
||||
|
height: 50vh; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
width: 97%; |
||||
|
background: var(--background); |
||||
|
padding: var(--spacing-xl); |
||||
|
border-top: var(--border-light); |
||||
|
z-index: 2; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,52 @@ |
|||||
|
<script> |
||||
|
import { TextArea, Label, Input, Heading } from "@budibase/bbui" |
||||
|
import Editor from "./QueryEditor.svelte" |
||||
|
import BindableInput from "components/userInterface/BindableInput.svelte" |
||||
|
|
||||
|
export let parameters = [] |
||||
|
export let bindings = [] |
||||
|
export let customParams = {} |
||||
|
|
||||
|
function newQueryParameter() { |
||||
|
parameters = [...parameters, {}] |
||||
|
} |
||||
|
|
||||
|
function deleteQueryParameter(idx) { |
||||
|
parameters.splice(idx, 1) |
||||
|
parameters = parameters |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<Heading extraSmall black>Parameters</Heading> |
||||
|
<div class="parameters"> |
||||
|
<Label extraSmall grey>Parameter Name</Label> |
||||
|
<Label extraSmall grey>Default</Label> |
||||
|
<Label extraSmall grey>Value</Label> |
||||
|
<div /> |
||||
|
{#each parameters as parameter, idx} |
||||
|
<Input thin bind:value={parameter.name} /> |
||||
|
<Input thin bind:value={parameter.default} /> |
||||
|
<BindableInput |
||||
|
type="string" |
||||
|
thin |
||||
|
bind:value={customParams[parameter.name]} |
||||
|
{bindings} /> |
||||
|
<i |
||||
|
class="ri-close-circle-line delete" |
||||
|
on:click={() => deleteQueryParameter(idx)} /> |
||||
|
{/each} |
||||
|
</div> |
||||
|
<i class="ri-add-circle-line add" on:click={newQueryParameter} /> |
||||
|
|
||||
|
<style> |
||||
|
.parameters { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr 1fr 5%; |
||||
|
grid-gap: 10px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.add { |
||||
|
margin-top: var(--spacing-m); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,35 @@ |
|||||
|
<script> |
||||
|
import BottomDrawer from "components/common/BottomDrawer.svelte" |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import { slide } from "svelte/transition" |
||||
|
import QueryInterface from "components/integration/QueryViewer.svelte" |
||||
|
|
||||
|
$: query = $backendUiStore.queries.find( |
||||
|
query => query._id === $backendUiStore.selectedQueryId |
||||
|
) |
||||
|
|
||||
|
function closeDatabindingDrawer() { |
||||
|
store.update(state => { |
||||
|
state.bindingDrawerVisible = false |
||||
|
return state |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
{#if query} |
||||
|
<BottomDrawer> |
||||
|
<div class="drawer-contents"> |
||||
|
<i class="ri-close-fill close" on:click={closeDatabindingDrawer} /> |
||||
|
<QueryInterface {query} /> |
||||
|
</div> |
||||
|
</BottomDrawer> |
||||
|
{/if} |
||||
|
|
||||
|
<style> |
||||
|
i { |
||||
|
position: absolute; |
||||
|
top: var(--spacing-xl); |
||||
|
right: var(--spacing-xl); |
||||
|
font-size: var(--font-size-m); |
||||
|
} |
||||
|
</style> |
||||
@ -1,17 +1,26 @@ |
|||||
<script> |
<script> |
||||
import { Button, Modal } from "@budibase/bbui" |
import { Button, Modal } from "@budibase/bbui" |
||||
import EventEditorModal from "./EventEditorModal.svelte" |
|
||||
import { createEventDispatcher } from "svelte" |
import { createEventDispatcher } from "svelte" |
||||
|
import { store } from "builderStore" |
||||
|
import EventEditorModal from "./EventEditorModal.svelte" |
||||
|
import BottomDrawer from "components/common/BottomDrawer.svelte" |
||||
|
|
||||
const dispatch = createEventDispatcher() |
const dispatch = createEventDispatcher() |
||||
|
|
||||
export let value |
export let value |
||||
export let name |
export let name |
||||
|
|
||||
let modal |
let drawerVisible |
||||
|
|
||||
|
function showDrawer() { |
||||
|
drawerVisible = true |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<Button secondary small on:click={modal.show}>Define Actions</Button> |
<Button secondary small on:click={showDrawer}>Define Actions</Button> |
||||
|
|
||||
<Modal bind:this={modal} width="600px"> |
{#if drawerVisible} |
||||
<EventEditorModal event={value} eventType={name} on:change /> |
<BottomDrawer> |
||||
</Modal> |
<EventEditorModal event={value} eventType={name} on:change /> |
||||
|
</BottomDrawer> |
||||
|
{/if} |
||||
|
|||||
Loading…
Reference in new issue