mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
5 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> |
|||
import { Button, Modal } from "@budibase/bbui" |
|||
import EventEditorModal from "./EventEditorModal.svelte" |
|||
import { createEventDispatcher } from "svelte" |
|||
import { store } from "builderStore" |
|||
import EventEditorModal from "./EventEditorModal.svelte" |
|||
import BottomDrawer from "components/common/BottomDrawer.svelte" |
|||
|
|||
const dispatch = createEventDispatcher() |
|||
|
|||
export let value |
|||
export let name |
|||
|
|||
let modal |
|||
let drawerVisible |
|||
|
|||
function showDrawer() { |
|||
drawerVisible = true |
|||
} |
|||
</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"> |
|||
<EventEditorModal event={value} eventType={name} on:change /> |
|||
</Modal> |
|||
{#if drawerVisible} |
|||
<BottomDrawer> |
|||
<EventEditorModal event={value} eventType={name} on:change /> |
|||
</BottomDrawer> |
|||
{/if} |
|||
|
|||
Loading…
Reference in new issue