moves queries part of backendstore to separate store

This commit is contained in:
Keviin Åberg Kultalahti 2021-03-22 14:47:21 +01:00
parent 17802795d0
commit cb3a4b549a
16 changed files with 113 additions and 42 deletions

View File

@ -21,13 +21,11 @@ export const getBackendUiStore = () => {
select: async db => {
const [tables, queries] = await Promise.all([
api.get(`/api/tables`).then(r => r.json()),
api.get(`/api/queries`).then(r => r.json()),
])
store.update(state => {
state.selectedDatabase = db
state.tables = tables
state.queries = queries
return state
})
},

View File

@ -3,7 +3,7 @@ import api from "../../api"
function createDatasourcesStore() {
const { subscribe, update, set } = writable({
sources: [],
list: [],
selected: null,
})
@ -14,7 +14,7 @@ function createDatasourcesStore() {
fetch: async () => {
const response = await api.get(`/api/datasources`)
const json = await response.json()
update(state => ({ ...state, sources: json }))
update(state => ({ ...state, list: json }))
return json
},
select: async datasourceId => {
@ -25,9 +25,9 @@ function createDatasourcesStore() {
const json = await response.json()
update(state => {
const currentIdx = state.sources.findIndex(ds => ds._id === json._id)
const currentIdx = state.list.findIndex(ds => ds._id === json._id)
const sources = state.sources
const sources = state.list
if (currentIdx >= 0) {
sources.splice(currentIdx, 1, json)
@ -42,7 +42,7 @@ function createDatasourcesStore() {
delete: async datasource => {
await api.delete(`/api/datasources/${datasource._id}/${datasource._rev}`)
update(state => {
const sources = state.sources.filter(
const sources = state.list.filter(
existing => existing._id !== datasource._id
)
return { sources, selected: null }

View File

@ -2,3 +2,4 @@ export { permissions } from "./permissions"
export { roles } from "./roles"
export { datasources } from "./datasources"
export { integrations } from "./integrations"
export { queries } from "./queries"

View File

@ -0,0 +1,69 @@
import { writable } from "svelte/store"
import { datasources, integrations } from "./"
import api from "../../api"
function createQueriesStore() {
const { subscribe, set, update } = writable({list: [], selected: null})
return {
subscribe,
set,
fetch: async () => {
const response = await api.get(`/api/queries`)
const json = await response.json()
update(state => ({...state, list: json}))
return json
},
save: async (datasourceId, query) => {
const _integrations = get(integrations)
const dataSource = get(datasources).list.filter(
ds => ds._id === datasourceId
)
// check if readable attribute is found
if (dataSource.length !== 0) {
const integration = _integrations[dataSource[0].source]
const readable = integration.query[query.queryVerb].readable
if (readable) {
query.readable = readable
}
}
query.datasourceId = datasourceId
const response = await api.post(`/api/queries`, query)
if (response.status !== 200) {
throw new Error("Failed saving query.")
}
const json = await response.json()
update(state => {
const currentIdx = state.list.findIndex(query => query._id === json._id)
const queries = state.list
if (currentIdx >= 0) {
queries.splice(currentIdx, 1, json)
} else {
queries.push(json)
}
return { list: queries, selected: json._id}
})
return json
},
select: query => {
datasources.update(state => ({ ...state, selected: query.datasourceId }))
},
delete: async query => {
await api.delete(`/api/queries/${query._id}/${query._rev}`)
update(state => {
state.list = state.list.filter(
existing => existing._id !== query._id
)
if (state.selected === query._id) {
state.selected = null
}
return state
})
},
}
}
export const queries = createQueriesStore()

View File

@ -10,7 +10,7 @@ import {
selectedAccessRole,
} from "builderStore"
// Backendstores
import { datasources, integrations } from 'builderStore/store/backend/'
import { datasources, integrations, queries } from 'builderStore/store/backend/'
import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
import api from "../api"
@ -62,12 +62,14 @@ export const getFrontendStore = () => {
await hostingStore.actions.fetch()
// Initialise backend stores
const [_datasources, _integrations] = await Promise.all([
const [_datasources, _integrations, _queries] = await Promise.all([
api.get(`/api/datasources`).then(r => r.json()),
api.get("/api/integrations").then(r => r.json())
api.get("/api/integrations").then(r => r.json()),
api.get(`/api/queries`).then(r => r.json())
])
datasources.set({sources: _datasources, selected: null})
datasources.set({ list: _datasources, selected: null })
integrations.set(_integrations)
queries.set({ list: _queries, selected: null })
await backendUiStore.actions.database.select(application.instance)
},

View File

@ -2,7 +2,7 @@
import { onMount } from "svelte"
import { goto } from "@sveltech/routify"
import { backendUiStore } from "builderStore"
import { datasources } from 'builderStore/store/backend/'
import { datasources, queries } from 'builderStore/store/backend/'
import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
import NavItem from "components/common/NavItem.svelte"
@ -17,19 +17,19 @@
if ($backendUiStore.selectedQueryId === query._id) {
return
}
backendUiStore.actions.queries.select(query)
queries.select(query)
$goto(`./datasource/${query.datasourceId}/${query._id}`)
}
onMount(() => {
datasources.fetch()
backendUiStore.actions.queries.fetch()
queries.fetch()
})
</script>
{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
<div class="hierarchy-items-container">
{#each $datasources.sources as datasource, idx}
{#each $datasources.list as datasource, idx}
<NavItem
border={idx > 0}
text={datasource.name}
@ -43,12 +43,12 @@
</div>
<EditDatasourcePopover {datasource} />
</NavItem>
{#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
{#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
<NavItem
indentLevel={1}
icon="ri-eye-line"
text={query.name}
selected={$backendUiStore.selectedQueryId === query._id}
selected={$queries.selected === query._id}
on:click={() => onClickQuery(query)}>
<EditQueryPopover {query} />
</NavItem>

View File

@ -23,7 +23,7 @@
}
async function deleteQuery() {
await backendUiStore.actions.queries.delete(query)
await queries.delete(query)
notifier.success("Query deleted")
hideEditor()
}

View File

@ -37,7 +37,7 @@
}))
return [...acc, ...viewsArr]
}, [])
$: queries = $backendUiStore.queries
$: queries = $queries.list
.filter(
query => showAllQueries || query.queryVerb === "read" || query.readable
)
@ -82,7 +82,7 @@
}
function fetchQueryDefinition(query) {
const source = $datasources.sources.find(
const source = $datasources.list.find(
ds => ds._id === query.datasourceId
).source
return $integrations[source].query[query.queryVerb]
@ -124,7 +124,7 @@
height={200}
query={value}
schema={fetchQueryDefinition(value)}
datasource={$datasources.sources.find(ds => ds._id === value.datasourceId)}
datasource={$datasources.list.find(ds => ds._id === value.datasourceId)}
editable={false} />
<Spacer large />
</div>

View File

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

View File

@ -40,7 +40,7 @@
let parameters
let data = []
$: datasource = $datasources.sources.find(
$: datasource = $datasources.list.find(
ds => ds._id === query.datasourceId
)
@ -114,7 +114,7 @@
async function saveQuery() {
try {
const { _id } = await backendUiStore.actions.queries.save(
const { _id } = await queries.save(
query.datasourceId,
query
)

View File

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

View File

@ -1,6 +1,7 @@
<script>
import { params } from "@sveltech/routify"
import { backendUiStore } from "builderStore"
import { queries } from 'builderStore/store/backend/'
import QueryInterface from "components/integration/QueryViewer.svelte"
async function fetchQueryConfig() {
@ -14,7 +15,7 @@
}
}
$: selectedQuery = $backendUiStore.queries.find(
$: selectedQuery = $queries.list.find(
query => query._id === $backendUiStore.selectedQueryId
) || {
datasourceId: $params.selectedDatasource,

View File

@ -3,7 +3,7 @@
import { datasources } from 'builderStore/store/backend/'
if ($params.selectedDatasource) {
const datasource = $datasources.sources.find(
const datasource = $datasources.list.find(
m => m._id === $params.selectedDatasource
)
if (datasource) {

View File

@ -2,14 +2,14 @@
import { goto, beforeUrlChange } from "@sveltech/routify"
import { Button, Heading, Body, Spacer } from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { datasources, integrations } from 'builderStore/store/backend/'
import { datasources, integrations, queries } 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 = $datasources.sources.find(
$: datasource = $datasources.list.find(
ds => ds._id === $datasources.selected
)
$: integration = datasource && $integrations[datasource.source]
@ -25,7 +25,7 @@
if ($backendUiStore.selectedQueryId === query._id) {
return
}
backendUiStore.actions.queries.select(query)
queries.select(query)
$goto(`../${query._id}`)
}
@ -88,7 +88,7 @@
</div>
<Spacer extraLarge />
<div class="query-list">
{#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
{#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
<div class="query-list-item" on:click={() => onClickQuery(query)}>
<p class="query-name">{query.name}</p>
<p>{query.queryVerb}</p>

View File

@ -7,10 +7,10 @@
// navigate to first datasource in list, if not already selected
if (
!$leftover &&
$datasources.sources.length > 0 &&
$datasources.list.length > 0 &&
!$datasources.selected
) {
$goto(`./${$datasources.sources[0]._id}`)
$goto(`./${$datasources.list[0]._id}`)
}
})
</script>

View File

@ -6,7 +6,7 @@
onMount(async () => {
// navigate to first table in list, if not already selected
$datasources.sources.length > 0 && $goto(`../${$datasources.sources[0]._id}`)
$datasources.list.length > 0 && $goto(`../${$datasources.list[0]._id}`)
})
</script>