2020-12-19 07:19:43 +13:00
|
|
|
<script>
|
|
|
|
import { onMount } from "svelte"
|
2021-03-18 00:40:24 +13:00
|
|
|
import { goto } from "@roxi/routify"
|
2021-04-01 22:29:47 +13:00
|
|
|
import { database, datasources, queries } 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-01-13 05:49:11 +13:00
|
|
|
import ICONS from "./icons"
|
2020-12-19 07:19:43 +13:00
|
|
|
|
|
|
|
function selectDatasource(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 04:33:08 +13:00
|
|
|
if ($queries.selected === query._id) {
|
2020-12-19 07:19:43 +13:00
|
|
|
return
|
|
|
|
}
|
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
|
|
|
}
|
|
|
|
|
|
|
|
onMount(() => {
|
2021-03-23 00:02:55 +13:00
|
|
|
datasources.fetch()
|
2021-03-23 02:47:21 +13:00
|
|
|
queries.fetch()
|
2020-12-19 07:19:43 +13:00
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
2021-03-23 04:33:08 +13:00
|
|
|
{#if $database?._id}
|
2020-12-19 07:19:43 +13:00
|
|
|
<div class="hierarchy-items-container">
|
2021-03-23 02:47:21 +13:00
|
|
|
{#each $datasources.list as datasource, idx}
|
2020-12-19 07:19:43 +13:00
|
|
|
<NavItem
|
|
|
|
border={idx > 0}
|
|
|
|
text={datasource.name}
|
2021-03-23 00:02:55 +13:00
|
|
|
selected={$datasources.selected === datasource._id}
|
2021-04-23 23:52:34 +12:00
|
|
|
on:click={() => selectDatasource(datasource)}
|
|
|
|
>
|
2021-01-13 05:49:11 +13:00
|
|
|
<div class="datasource-icon" slot="icon">
|
|
|
|
<svelte:component
|
|
|
|
this={ICONS[datasource.source]}
|
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>
|
2020-12-19 07:19:43 +13:00
|
|
|
<EditDatasourcePopover {datasource} />
|
|
|
|
</NavItem>
|
2021-05-04 22:32:22 +12:00
|
|
|
{#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
|
2020-12-19 07:19:43 +13:00
|
|
|
<NavItem
|
|
|
|
indentLevel={1}
|
2021-04-23 23:52:34 +12:00
|
|
|
icon="SQLQuery"
|
2021-01-07 01:28:51 +13:00
|
|
|
text={query.name}
|
2021-03-23 02:47:21 +13:00
|
|
|
selected={$queries.selected === query._id}
|
2021-04-23 23:52:34 +12:00
|
|
|
on:click={() => onClickQuery(query)}
|
|
|
|
>
|
2021-01-07 01:28:51 +13:00
|
|
|
<EditQueryPopover {query} />
|
2020-12-19 07:19:43 +13:00
|
|
|
</NavItem>
|
|
|
|
{/each}
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{/if}
|
2021-01-22 03:57:11 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.datasource-icon {
|
|
|
|
margin-right: 3px;
|
|
|
|
padding-top: 3px;
|
|
|
|
}
|
|
|
|
</style>
|