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

moves the datasources store to it's separate store

This commit is contained in:
Keviin Åberg Kultalahti 2021-03-22 12:02:55 +01:00
parent 98607ca1bd
commit 5b08b31fd6
14 changed files with 100 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/builder/src/builderStore/store/backend.js
View File

@ -20,9 +20,8 @@ export const getBackendUiStore = () => {
reset: () => store.set({ ...INITIAL_BACKEND_UI_STATE }),
database: {
select: async db => {
const [tables, datasources, queries, integrations] = await Promise.all([
const [tables, queries, integrations] = await Promise.all([
api.get(`/api/tables`).then(r => r.json()),
api.get(`/api/datasources`).then(r => r.json()),
api.get(`/api/queries`).then(r => r.json()),
api.get("/api/integrations").then(r => r.json()),
])
@ -30,7 +29,6 @@ export const getBackendUiStore = () => {
store.update(state => {
state.selectedDatabase = db
state.tables = tables
state.datasources = datasources
state.queries = queries
state.integrations = integrations
return state
@ -49,56 +47,6 @@ export const getBackendUiStore = () => {
return state
}),
},
datasources: {
fetch: async () => {
const response = await api.get(`/api/datasources`)
const json = await response.json()
store.update(state => {
state.datasources = json
return state
})
return json
},
select: async datasourceId => {
store.update(state => {
state.selectedDatasourceId = datasourceId
state.selectedQueryId = null
return state
})
},
save: async datasource => {
const response = await api.post("/api/datasources", datasource)
const json = await response.json()
store.update(state => {
const currentIdx = state.datasources.findIndex(
ds => ds._id === json._id
)
if (currentIdx >= 0) {
state.datasources.splice(currentIdx, 1, json)
} else {
state.datasources.push(json)
}
state.datasources = state.datasources
state.selectedDatasourceId = json._id
return state
})
return json
},
delete: async datasource => {
await api.delete(
`/api/datasources/${datasource._id}/${datasource._rev}`
)
store.update(state => {
state.datasources = state.datasources.filter(
existing => existing._id !== datasource._id
)
state.selectedDatasourceId = null
return state
})
},
},
queries: {
fetch: async () => {
const response = await api.get(`/api/queries`)

54
packages/builder/src/builderStore/store/backend/datasources.js Normal file
View File

@ -0,0 +1,54 @@
import { writable } from "svelte/store"
import api from "../../api"
function createDatasourcesStore() {
const { subscribe, update, set } = writable({
sources: [],
selected: null,
})
return {
subscribe,
set,
update,
fetch: async () => {
const response = await api.get(`/api/datasources`)
const json = await response.json()
update(state => ({ ...state, sources: json }))
return json
},
select: async datasourceId => {
update(state => ({ ...state, selected: datasourceId }))
},
save: async datasource => {
const response = await api.post("/api/datasources", datasource)
const json = await response.json()
update(state => {
const currentIdx = state.sources.findIndex(ds => ds._id === json._id)
const sources = state.sources
if (currentIdx >= 0) {
sources.splice(currentIdx, 1, json)
} else {
sources.push(json)
}
return { sources, selected: json._id }
})
return json
},
delete: async datasource => {
await api.delete(`/api/datasources/${datasource._id}/${datasource._rev}`)
update(state => {
const sources = state.sources.filter(
existing => existing._id !== datasource._id
)
return { sources, selected: null }
})
},
}
}
export const datasources = createDatasourcesStore()

2
packages/builder/src/builderStore/store/backend/index.js
View File

@ -1 +1,3 @@
export { permissions } from "./permissions"
export { roles } from "./roles"
export { datasources } from "./datasources"

10
packages/builder/src/builderStore/store/frontend.js
View File

@ -9,6 +9,9 @@ import {
selectedComponent,
selectedAccessRole,
} from "builderStore"
// Backendstores
import {datasources} from 'builderStore/store/backend/'
import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
import api from "../api"
import { FrontendTypes } from "constants"
@ -57,6 +60,13 @@ export const getFrontendStore = () => {
appInstance: application.instance,
}))
await hostingStore.actions.fetch()
// Initialise backend stores
const [sources] = await Promise.all([
api.get(`/api/datasources`).then(r => r.json()),
])
datasources.set({sources, selected: null})
await backendUiStore.actions.database.select(application.instance)
},
routing: {

9
packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
View File

@ -2,13 +2,14 @@
import { onMount } from "svelte"
import { goto } from "@sveltech/routify"
import { backendUiStore } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
import NavItem from "components/common/NavItem.svelte"
import ICONS from "./icons"
function selectDatasource(datasource) {
backendUiStore.actions.datasources.select(datasource._id)
datasources.select(datasource._id)
$goto(`./datasource/${datasource._id}`)
}
@ -21,18 +22,18 @@
}
onMount(() => {
backendUiStore.actions.datasources.fetch()
datasources.fetch()
backendUiStore.actions.queries.fetch()
})
</script>
{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
<div class="hierarchy-items-container">
{#each $backendUiStore.datasources as datasource, idx}
{#each $datasources.sources as datasource, idx}
<NavItem
border={idx > 0}
text={datasource.name}
selected={$backendUiStore.selectedDatasourceId === datasource._id}
selected={$datasources.selected === datasource._id}
on:click={() => selectDatasource(datasource)}>
<div class="datasource-icon" slot="icon">
<svelte:component

8
packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
View File

@ -1,8 +1,8 @@
<script>
import { goto, params } from "@sveltech/routify"
import { backendUiStore, store } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import { notifier } from "builderStore/store/notifications"
import { Input, Label, ModalContent, Button, Spacer } from "@budibase/bbui"
import { Input, Label, ModalContent } from "@budibase/bbui"
import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte"
import analytics from "analytics"
@ -14,7 +14,7 @@
function checkValid(evt) {
const datasourceName = evt.target.value
if (
$backendUiStore.datasources?.some(
$datasources?.sources.some(
datasource => datasource.name === datasourceName
)
) {
@ -28,7 +28,7 @@
const { type, ...config } = integration
// Create datasource
const response = await backendUiStore.actions.datasources.save({
const response = await datasources.save({
name,
source: type,
config,

4
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
View File

@ -1,6 +1,6 @@
<script>
import { goto } from "@sveltech/routify"
import { backendUiStore } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import { notifier } from "builderStore/store/notifications"
import { DropdownMenu } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@ -22,7 +22,7 @@
}
async function deleteDatasource() {
await backendUiStore.actions.datasources.delete(datasource)
await datasources.delete(datasource)
notifier.success("Datasource deleted")
$goto('./datasource')
hideEditor()

5
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DatasourceSelect.svelte
View File

@ -10,6 +10,7 @@
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { store, backendUiStore, currentAsset } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import { notifier } from "builderStore/store/notifications"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
import IntegrationQueryEditor from "components/integration/index.svelte"
@ -81,7 +82,7 @@
}
function fetchQueryDefinition(query) {
const source = $backendUiStore.datasources.find(
const source = $datasources.sources.find(
ds => ds._id === query.datasourceId
).source
return $backendUiStore.integrations[source].query[query.queryVerb]
@ -123,7 +124,7 @@
height={200}
query={value}
schema={fetchQueryDefinition(value)}
datasource={$backendUiStore.datasources.find(ds => ds._id === value.datasourceId)}
datasource={$datasources.sources.find(ds => ds._id === value.datasourceId)}
editable={false} />
<Spacer large />
</div>

7
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
View File

@ -1,6 +1,7 @@
<script>
import { Select, Label, Spacer } from "@budibase/bbui"
import { store, backendUiStore, currentAsset } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import { getBindableProperties } from "builderStore/dataBinding"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
import IntegrationQueryEditor from "components/integration/index.svelte"
@ -8,7 +9,7 @@
export let parameters
$: query = $backendUiStore.queries.find(q => q._id === parameters.queryId)
$: datasource = $backendUiStore.datasources.find(
$: datasource = $datasources.sources.find(
ds => ds._id === parameters.datasourceId
)
$: bindableProperties = getBindableProperties(
@ -17,7 +18,7 @@
)
function fetchQueryDefinition(query) {
const source = $backendUiStore.datasources.find(
const source = $datasources.sources.find(
ds => ds._id === query.datasourceId
).source
return $backendUiStore.integrations[source].query[query.queryVerb]
@ -27,7 +28,7 @@
<Label small>Datasource</Label>
<Select thin secondary bind:value={parameters.datasourceId}>
<option value="" />
{#each $backendUiStore.datasources as datasource}
{#each $datasources as datasource}
<option value={datasource._id}>{datasource.name}</option>
{/each}
</Select>

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

@ -16,6 +16,7 @@
import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
import { backendUiStore } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
const PREVIEW_HEADINGS = [
{
@ -35,13 +36,11 @@
export let query
export let fields = []
let config
let tab = "JSON"
let parameters
let data = []
let popover
$: datasource = $backendUiStore.datasources.find(
$: datasource = $datasources.sources.find(
ds => ds._id === query.datasourceId
)

6
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/_layout.svelte
View File

@ -1,13 +1,13 @@
<script>
import { params } from "@sveltech/routify"
import { backendUiStore } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
if ($params.selectedDatasource) {
const datasource = $backendUiStore.datasources.find(
const datasource = $datasources.sources.find(
m => m._id === $params.selectedDatasource
)
if (datasource) {
backendUiStore.actions.datasources.select(datasource._id)
datasources.select(datasource._id)
}
}
</script>

7
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
View File

@ -2,20 +2,21 @@
import { goto, beforeUrlChange } from "@sveltech/routify"
import { Button, Heading, Body, Spacer } from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import { notifier } from "builderStore/store/notifications"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import ICONS from "components/backend/DatasourceNavigator/icons"
let unsaved = false
$: datasource = $backendUiStore.datasources.find(
ds => ds._id === $backendUiStore.selectedDatasourceId
$: datasource = $datasources.sources.find(
ds => ds._id === $datasources.selected
)
$: integration = datasource && $backendUiStore.integrations[datasource.source]
async function saveDatasource() {
// Create datasource
await backendUiStore.actions.datasources.save(datasource)
await datasources.save(datasource)
notifier.success(`Datasource ${name} saved successfully.`)
unsaved = false
}

8
packages/builder/src/pages/[application]/data/datasource/_layout.svelte
View File

@ -1,5 +1,5 @@
<script>
import { backendUiStore } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import { goto, leftover } from "@sveltech/routify"
import { onMount } from "svelte"
@ -7,10 +7,10 @@
// navigate to first datasource in list, if not already selected
if (
!$leftover &&
$backendUiStore.datasources.length > 0 &&
!$backendUiStore.selectedDatasourceId
$datasources.sources.length > 0 &&
!$datasources.selected
) {
$goto(`./${$backendUiStore.datasources[0]._id}`)
$goto(`./${$datasources.sources[0]._id}`)
}
})
</script>

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

@ -1,11 +1,12 @@
<script>
import { backendUiStore } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import { goto } from "@sveltech/routify"
import { onMount } from "svelte"
onMount(async () => {
// navigate to first table in list, if not already selected
$backendUiStore.datasources.length > 0 && $goto(`../${$backendUiStore.datasources[0]._id}`)
$datasources.sources.length > 0 && $goto(`../${$datasources.sources[0]._id}`)
})
</script>