MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Working commit

This commit is contained in:
Dean 2023-05-03 17:26:58 +01:00
parent eb973386d8
commit 6331299b7b
2 changed files with 91 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
packages/builder/src/components/integration/QueryViewer.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { goto } from "@roxi/routify" import { goto, beforeUrlChange } from "@roxi/routify"
import { import {
Icon, Icon,
Select, Select,
@ -12,6 +12,8 @@
Heading, Heading,
Tabs, Tabs,
Tab, Tab,
Modal,
ModalContent,
} from "@budibase/bbui" } from "@budibase/bbui"
import { notifications, Divider } from "@budibase/bbui" import { notifications, Divider } from "@budibase/bbui"
import ExtraQueryConfig from "./ExtraQueryConfig.svelte" import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
@ -36,6 +38,22 @@
let data = [] let data = []
let saveId let saveId
let currentTab = "JSON" let currentTab = "JSON"
let saveModal
let queryStr = JSON.stringify(query)
let discard = false
let navigateTo = null
$: console.log("GO ", navigateTo)
$: console.log("DISCARD ", discard)
$beforeUrlChange(event => {
const updated = JSON.stringify(query)
if (updated !== queryStr && !discard) {
navigateTo = event.url
saveModal.show()
return false
} else return true
})
$: datasource = $datasources.list.find(ds => ds._id === query.datasourceId) $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
$: query.schema = fieldsToSchema(fields) $: query.schema = fieldsToSchema(fields)
@ -101,22 +119,54 @@
} }
} }
// return the query.
async function saveQuery() { async function saveQuery() {
try { try {
const { _id } = await queries.save(query.datasourceId, query) // const { _id } = await queries.save(query.datasourceId, query)
saveId = _id const response = await queries.save(query.datasourceId, query)
notifications.success(`Query saved successfully`) saveId = response._id
// Go to the correct URL if we just created a new query // notifications.success(`Query saved successfully`)
if (!query._rev) {
$goto(`../../${_id}`) // // Go to the correct URL if we just created a new query
} // if (!query._rev) {
// $goto(`../../${_id}`)
// }
return response
} catch (error) { } catch (error) {
notifications.error("Error saving query") notifications.error("Error saving query")
} }
} }
</script> </script>
<Modal
bind:this={saveModal}
on:hide={() => {
console.log("running")
//navigateTo = null
}}
>
<ModalContent
title="You have unsaved changes"
confirmText="Save and Continue"
cancelText="Discard Changes"
size="L"
onConfirm={async () => {
console.log("CONFIRM")
saveQuery() //needs ascertain success?
discard = true
$goto(`${navigateTo}`)
}}
onCancel={() => {
console.log("CANCEL")
discard = true
$goto(`${navigateTo}`)
}}
>
<Body>Leaving this section will mean losing and changes to your query</Body>
</ModalContent>
</Modal>
<div class="wrapper"> <div class="wrapper">
<Layout gap="S" noPadding> <Layout gap="S" noPadding>
<Heading size="M">Query {integrationInfo?.friendlyName}</Heading> <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
@ -149,18 +199,20 @@
/> />
{/if} {/if}
{#key query.parameters} {#key query.parameters}
<BindingBuilder <div class="binding-wrap">
queryBindings={query.parameters} <BindingBuilder
bindable={false} queryBindings={query.parameters}
on:change={e => { bindable={false}
query.parameters = e.detail.map(binding => { on:change={e => {
return { query.parameters = e.detail.map(binding => {
name: binding.name, return {
default: binding.value, name: binding.name,
} default: binding.value,
}) }
}} })
/> }}
/>
</div>
{/key} {/key}
{/if} {/if}
</div> </div>
@ -203,7 +255,17 @@
<div class="viewer-controls"> <div class="viewer-controls">
<Heading size="S">Results</Heading> <Heading size="S">Results</Heading>
<ButtonGroup gap="XS"> <ButtonGroup gap="XS">
<Button cta disabled={queryInvalid} on:click={saveQuery}> <Button
cta
disabled={queryInvalid}
on:click={async () => {
const saveResponse = await saveQuery()
// Go to the correct URL if we just created a new query
if (saveResponse && !saveResponse._rev) {
$goto(`../../${saveResponse._id}`)
}
}}
>
Save Query Save Query
</Button> </Button>
<Button secondary on:click={previewQuery}>Run Query</Button> <Button secondary on:click={previewQuery}>Run Query</Button>
@ -274,4 +336,9 @@
min-width: 150px; min-width: 150px;
align-items: center; align-items: center;
} }
.binding-wrap :global(div.container) {
padding-left: 0px;
padding-right: 0px;
}
</style> </style>

4
packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
View File

@ -3,8 +3,10 @@
import QueryViewer from "components/integration/QueryViewer.svelte" import QueryViewer from "components/integration/QueryViewer.svelte"
import RestQueryViewer from "components/integration/RestQueryViewer.svelte" import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
import { IntegrationTypes } from "constants/backend" import { IntegrationTypes } from "constants/backend"
import { cloneDeep } from "lodash/fp"
$: query = $queries.selected $: query = $queries.selected
$: editableQuery = cloneDeep(query)
$: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId) $: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
$: isRestQuery = datasource?.source === IntegrationTypes.REST $: isRestQuery = datasource?.source === IntegrationTypes.REST
</script> </script>
@ -13,6 +15,6 @@
{#if isRestQuery} {#if isRestQuery}
<RestQueryViewer queryId={$queries.selectedQueryId} /> <RestQueryViewer queryId={$queries.selectedQueryId} />
{:else} {:else}
<QueryViewer {query} /> <QueryViewer query={editableQuery} />
{/if} {/if}
{/if} {/if}