2020-12-19 07:19:43 +13:00
|
|
|
<script>
|
|
|
|
import { onMount } from "svelte"
|
2021-09-22 04:21:25 +12:00
|
|
|
import { get } from "svelte/store"
|
2021-09-28 06:25:19 +13:00
|
|
|
import { goto, params } from "@roxi/routify"
|
2021-06-16 06:48:05 +12:00
|
|
|
import { BUDIBASE_INTERNAL_DB } from "constants"
|
2021-09-28 06:25:19 +13:00
|
|
|
import { database, datasources, queries, tables, views } from "stores/backend"
|
2020-12-19 07:19:43 +13:00
|
|
|
import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
|
2021-01-07 01:28:51 +13:00
|
|
|
import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
|
2020-12-19 07:19:43 +13:00
|
|
|
import NavItem from "components/common/NavItem.svelte"
|
2021-06-16 06:48:05 +12:00
|
|
|
import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
|
2022-02-26 03:18:26 +13:00
|
|
|
import {
|
|
|
|
customQueryIconText,
|
|
|
|
customQueryIconColor,
|
|
|
|
customQueryText,
|
|
|
|
} from "helpers/data/utils"
|
2022-08-18 10:13:51 +12:00
|
|
|
import { getIcon } from "./icons"
|
2022-01-25 01:37:22 +13:00
|
|
|
import { notifications } from "@budibase/bbui"
|
2020-12-19 07:19:43 +13:00
|
|
|
|
2021-07-29 21:22:45 +12:00
|
|
|
let openDataSources = []
|
2021-10-07 04:27:46 +13:00
|
|
|
$: enrichedDataSources = Array.isArray($datasources.list)
|
|
|
|
? $datasources.list.map(datasource => {
|
|
|
|
const selected = $datasources.selected === datasource._id
|
|
|
|
const open = openDataSources.includes(datasource._id)
|
|
|
|
const containsSelected = containsActiveEntity(datasource)
|
2022-03-23 23:17:52 +13:00
|
|
|
const onlySource = $datasources.list.length === 1
|
2021-10-07 04:27:46 +13:00
|
|
|
return {
|
|
|
|
...datasource,
|
|
|
|
selected,
|
2022-03-23 23:17:52 +13:00
|
|
|
open: selected || open || containsSelected || onlySource,
|
2021-10-07 04:27:46 +13:00
|
|
|
}
|
|
|
|
})
|
|
|
|
: []
|
2021-09-28 06:25:19 +13:00
|
|
|
$: openDataSource = enrichedDataSources.find(x => x.open)
|
|
|
|
$: {
|
2022-09-14 23:11:20 +12:00
|
|
|
// Ensure the open datasource is always included in the list of open
|
|
|
|
// datasources
|
2021-09-28 06:25:19 +13:00
|
|
|
if (openDataSource) {
|
|
|
|
openNode(openDataSource)
|
|
|
|
}
|
|
|
|
}
|
2021-07-29 21:22:45 +12:00
|
|
|
|
2020-12-19 07:19:43 +13:00
|
|
|
function selectDatasource(datasource) {
|
2021-09-28 06:25:19 +13:00
|
|
|
openNode(datasource)
|
2021-03-23 00:02:55 +13:00
|
|
|
datasources.select(datasource._id)
|
2020-12-19 07:19:43 +13:00
|
|
|
$goto(`./datasource/${datasource._id}`)
|
|
|
|
}
|
|
|
|
|
2021-01-19 04:37:32 +13:00
|
|
|
function onClickQuery(query) {
|
2021-03-23 02:47:21 +13:00
|
|
|
queries.select(query)
|
2021-01-19 04:37:32 +13:00
|
|
|
$goto(`./datasource/${query.datasourceId}/${query._id}`)
|
2020-12-19 07:19:43 +13:00
|
|
|
}
|
|
|
|
|
2021-09-28 06:25:19 +13:00
|
|
|
function closeNode(datasource) {
|
|
|
|
openDataSources = openDataSources.filter(id => datasource._id !== id)
|
|
|
|
}
|
|
|
|
|
|
|
|
function openNode(datasource) {
|
|
|
|
if (!openDataSources.includes(datasource._id)) {
|
|
|
|
openDataSources = [...openDataSources, datasource._id]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-29 21:22:45 +12:00
|
|
|
function toggleNode(datasource) {
|
|
|
|
const isOpen = openDataSources.includes(datasource._id)
|
|
|
|
if (isOpen) {
|
2021-09-28 06:25:19 +13:00
|
|
|
closeNode(datasource)
|
2021-07-29 21:22:45 +12:00
|
|
|
} else {
|
2021-09-28 06:25:19 +13:00
|
|
|
openNode(datasource)
|
2021-07-29 21:22:45 +12:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-26 04:28:31 +13:00
|
|
|
onMount(async () => {
|
2022-01-25 01:37:22 +13:00
|
|
|
try {
|
2022-01-26 04:28:31 +13:00
|
|
|
await datasources.fetch()
|
|
|
|
await queries.fetch()
|
2022-01-25 01:37:22 +13:00
|
|
|
} catch (error) {
|
|
|
|
notifications.error("Error fetching datasources and queries")
|
|
|
|
}
|
2020-12-19 07:19:43 +13:00
|
|
|
})
|
2021-09-22 04:21:25 +12:00
|
|
|
|
2021-09-28 06:25:19 +13:00
|
|
|
const containsActiveEntity = datasource => {
|
2022-09-14 23:11:20 +12:00
|
|
|
// If we're view a query then the datasource ID is in the URL
|
2021-09-28 06:25:19 +13:00
|
|
|
if ($params.selectedDatasource === datasource._id) {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
|
|
|
|
// If there are no entities it can't contain anything
|
2021-09-22 04:21:25 +12:00
|
|
|
if (!datasource.entities) {
|
|
|
|
return false
|
|
|
|
}
|
2021-09-28 06:25:19 +13:00
|
|
|
|
|
|
|
// Get a list of table options
|
|
|
|
let options = datasource.entities
|
|
|
|
if (!Array.isArray(options)) {
|
|
|
|
options = Object.values(options)
|
|
|
|
}
|
|
|
|
|
|
|
|
// Check for a matching table
|
|
|
|
if ($params.selectedTable) {
|
|
|
|
const selectedTable = get(tables).selected?._id
|
|
|
|
return options.find(x => x._id === selectedTable) != null
|
2021-09-22 04:21:25 +12:00
|
|
|
}
|
2021-09-28 06:25:19 +13:00
|
|
|
|
|
|
|
// Check for a matching view
|
|
|
|
const selectedView = get(views).selected?.name
|
|
|
|
const table = options.find(table => {
|
|
|
|
return table.views?.[selectedView] != null
|
|
|
|
})
|
|
|
|
return table != null
|
2021-09-22 04:21:25 +12:00
|
|
|
}
|
2020-12-19 07:19:43 +13:00
|
|
|
</script>
|
|
|
|
|
2021-03-23 04:33:08 +13:00
|
|
|
{#if $database?._id}
|
2022-03-22 06:59:35 +13:00
|
|
|
<div class="hierarchy-items-container">
|
2021-09-22 04:21:25 +12:00
|
|
|
{#each enrichedDataSources as datasource, idx}
|
2020-12-19 07:19:43 +13:00
|
|
|
<NavItem
|
|
|
|
border={idx > 0}
|
|
|
|
text={datasource.name}
|
2021-09-22 04:21:25 +12:00
|
|
|
opened={datasource.open}
|
|
|
|
selected={datasource.selected}
|
2021-07-29 21:22:45 +12:00
|
|
|
withArrow={true}
|
2021-04-23 23:52:34 +12:00
|
|
|
on:click={() => selectDatasource(datasource)}
|
2021-07-29 21:22:45 +12:00
|
|
|
on:iconClick={() => toggleNode(datasource)}
|
2021-04-23 23:52:34 +12:00
|
|
|
>
|
2021-01-13 05:49:11 +13:00
|
|
|
<div class="datasource-icon" slot="icon">
|
|
|
|
<svelte:component
|
2022-08-18 10:13:51 +12:00
|
|
|
this={getIcon(datasource.source, datasource.schema)}
|
2021-01-22 03:57:11 +13:00
|
|
|
height="18"
|
2021-04-23 23:52:34 +12:00
|
|
|
width="18"
|
|
|
|
/>
|
2021-01-13 05:49:11 +13:00
|
|
|
</div>
|
2021-06-16 06:48:05 +12:00
|
|
|
{#if datasource._id !== BUDIBASE_INTERNAL_DB}
|
|
|
|
<EditDatasourcePopover {datasource} />
|
|
|
|
{/if}
|
2020-12-19 07:19:43 +13:00
|
|
|
</NavItem>
|
2021-06-16 06:48:05 +12:00
|
|
|
|
2021-09-22 04:21:25 +12:00
|
|
|
{#if datasource.open}
|
2021-07-29 21:22:45 +12:00
|
|
|
<TableNavigator sourceId={datasource._id} />
|
2021-09-23 18:48:11 +12:00
|
|
|
{#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
|
|
|
|
<NavItem
|
|
|
|
indentLevel={1}
|
|
|
|
icon="SQLQuery"
|
2021-12-10 02:08:16 +13:00
|
|
|
iconText={customQueryIconText(datasource, query)}
|
|
|
|
iconColor={customQueryIconColor(datasource, query)}
|
2022-02-26 03:18:26 +13:00
|
|
|
text={customQueryText(datasource, query)}
|
2021-09-23 18:48:11 +12:00
|
|
|
opened={$queries.selected === query._id}
|
|
|
|
selected={$queries.selected === query._id}
|
|
|
|
on:click={() => onClickQuery(query)}
|
|
|
|
>
|
2022-01-06 07:27:15 +13:00
|
|
|
<EditQueryPopover {query} {onClickQuery} />
|
2021-09-23 18:48:11 +12:00
|
|
|
</NavItem>
|
|
|
|
{/each}
|
2021-07-29 21:22:45 +12:00
|
|
|
{/if}
|
2020-12-19 07:19:43 +13:00
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{/if}
|
2021-01-22 03:57:11 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.datasource-icon {
|
2022-05-13 21:12:16 +12:00
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
flex: 0 0 24px;
|
2021-01-22 03:57:11 +13:00
|
|
|
}
|
|
|
|
</style>
|