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

Prompt to create queries (#11045)

This commit is contained in:
Gerard Burns 2023-06-27 16:49:33 +01:00 committed by GitHub
parent f7cdf5f2bc
commit 80efb355bd
3 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte
View File

@ -22,7 +22,11 @@
store.stage === null ? modal?.hide() : modal?.show() store.stage === null ? modal?.hide() : modal?.show()
if (store.finished) { if (store.finished) {
goto(`./datasource/${store.datasource._id}`) const queryString =
store.datasource.plus || store.datasource.source === "REST"
? ""
: "?promptQuery=true"
goto(`./datasource/${store.datasource._id}${queryString}`)
} }
} }

61
packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/PromptQueryModal.svelte Normal file
View File

@ -0,0 +1,61 @@
<script>
import { goto as gotoStore, params as paramsStore } from "@roxi/routify"
import { Modal, ModalContent, Body, Heading } from "@budibase/bbui"
import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
const handleOpen = (modal, params) => {
if (params["?promptQuery"] && modal?.show) {
modal.show()
history.replaceState({}, null, window.location.pathname)
}
}
let modal
$: params = $paramsStore
$: goto = $gotoStore
$: handleOpen(modal, params)
</script>
<Modal bind:this={modal}>
<ModalContent
size="L"
cancelText="Cancel"
confirmText="Create new query"
onConfirm={() => goto(`../../query/new/${params["datasourceId"]}`)}
showCloseIcon={false}
>
<div slot="header" class="header">
<FontAwesomeIcon name="fa-solid fa-circle-check" />
<Heading size="M">You're ready to query your data!</Heading>
</div>
<div class="body">
<Body>Your database is connected and ready to use.</Body>
<Body
>Create a query using <span>Create</span>, <span>Read</span>,
<span>Update</span>
and <span>Delete</span> functions.</Body
>
</div>
</ModalContent>
</Modal>
<style>
.header {
display: flex;
align-items: center;
}
.header :global(svg) {
margin-right: 10px;
margin-bottom: 1px;
color: #009562;
}
.body :global(p:first-child) {
margin-bottom: 16px;
}
.body :global(span) {
font-weight: bold;
}
</style>

3
packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
View File

@ -9,6 +9,7 @@
import RestHeadersPanel from "./_components/panels/Headers.svelte" import RestHeadersPanel from "./_components/panels/Headers.svelte"
import RestAuthenticationPanel from "./_components/panels/Authentication/index.svelte" import RestAuthenticationPanel from "./_components/panels/Authentication/index.svelte"
import RestVariablesPanel from "./_components/panels/Variables/index.svelte" import RestVariablesPanel from "./_components/panels/Variables/index.svelte"
import PromptQueryModal from "./_components/PromptQueryModal.svelte"
let selectedPanel = null let selectedPanel = null
let panelOptions = [] let panelOptions = []
@ -41,6 +42,8 @@
} }
</script> </script>
<PromptQueryModal />
<section> <section>
<Layout noPadding> <Layout noPadding>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>