2020-11-27 03:43:56 +13:00
|
|
|
<script>
|
2020-12-19 07:19:43 +13:00
|
|
|
import { params } from "@sveltech/routify"
|
2020-11-27 03:43:56 +13:00
|
|
|
import { backendUiStore } from "builderStore"
|
2020-12-19 07:19:43 +13:00
|
|
|
import { notifier } from "builderStore/store/notifications"
|
2020-11-27 03:43:56 +13:00
|
|
|
import * as api from "./api"
|
|
|
|
import Table from "./Table.svelte"
|
2020-12-19 07:19:43 +13:00
|
|
|
import CreateQueryButton from "components/backend/DataTable/buttons/CreateQueryButton.svelte"
|
|
|
|
|
|
|
|
export let datasourceId
|
|
|
|
export let query = {}
|
2020-11-27 03:43:56 +13:00
|
|
|
|
|
|
|
let data = []
|
|
|
|
let loading = false
|
2020-12-19 07:19:43 +13:00
|
|
|
let error = false
|
2020-11-27 03:43:56 +13:00
|
|
|
|
2020-12-19 07:19:43 +13:00
|
|
|
$: datasourceId = $params.selectedDatasource
|
|
|
|
// TODO: refactor
|
|
|
|
// $: query = $backendUiStore.datasources.find(
|
|
|
|
// ds => ds._id === $params.selectedDatasource
|
|
|
|
// ).queries[$params.query]
|
|
|
|
$: title = query.name
|
|
|
|
$: schema = query.schema
|
2020-11-27 03:43:56 +13:00
|
|
|
|
2020-12-19 07:19:43 +13:00
|
|
|
async function fetchData() {
|
|
|
|
try {
|
2020-11-27 03:43:56 +13:00
|
|
|
loading = true
|
2020-12-31 01:58:39 +13:00
|
|
|
const response = await api.fetchDataForQuery(
|
2020-12-19 07:19:43 +13:00
|
|
|
$params.selectedDatasource,
|
|
|
|
$params.query
|
|
|
|
)
|
2020-12-31 01:58:39 +13:00
|
|
|
data = response.rows || []
|
2020-12-19 07:19:43 +13:00
|
|
|
error = false
|
|
|
|
} catch (err) {
|
|
|
|
console.log(err)
|
|
|
|
error = `${query}: Query error. (${err.message}). This could be a problem with your datasource configuration.`
|
|
|
|
notifier.danger(error)
|
|
|
|
} finally {
|
|
|
|
loading = false
|
2020-11-27 03:43:56 +13:00
|
|
|
}
|
|
|
|
}
|
2020-12-19 07:19:43 +13:00
|
|
|
|
|
|
|
// Fetch rows for specified query
|
2020-12-31 01:58:39 +13:00
|
|
|
$: fetchData()
|
2020-11-27 03:43:56 +13:00
|
|
|
</script>
|
|
|
|
|
2020-12-19 07:19:43 +13:00
|
|
|
{#if error}
|
|
|
|
<div class="errors">{error}</div>
|
|
|
|
{/if}
|
2020-11-27 05:46:36 +13:00
|
|
|
<Table {title} {schema} {data} {loading}>
|
2020-12-19 07:19:43 +13:00
|
|
|
<CreateQueryButton {query} />
|
2020-11-27 03:43:56 +13:00
|
|
|
</Table>
|
2020-12-19 07:19:43 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.errors {
|
|
|
|
color: var(--red);
|
|
|
|
background: var(--red-light);
|
|
|
|
padding: var(--spacing-m);
|
|
|
|
border-radius: var(--border-radius-m);
|
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
}
|
|
|
|
</style>
|