@ -30,7 +30,7 @@
export let showAllQueries
$: text = value?.label ?? "Choose an option"
$: tables = $tablesStore.list.map(( m) => ({
$: tables = $tablesStore.list.map(m => ({
label: m.name,
tableId: m._id,
type: "table",
@ -46,9 +46,9 @@
}, [])
$: queries = $queriesStore.list
.filter(
( query) => showAllQueries || query.queryVerb === "read" || query.readable
query => showAllQueries || query.queryVerb === "read" || query.readable
)
.map(( query) => ({
.map(query => ({
label: query.name,
name: query.name,
tableId: query._id,
@ -61,15 +61,15 @@
$currentAsset,
$store.selectedComponentId
)
$: queryBindableProperties = bindableProperties.map(( property) => ({
$: queryBindableProperties = bindableProperties.map(property => ({
...property,
category: property.type === "instance" ? "Component" : "Table",
label: property.readableBinding,
path: property.readableBinding,
}))
$: links = bindableProperties
.filter(( x) => x.fieldSchema?.type === "link")
.map(( property) => {
.filter(x => x.fieldSchema?.type === "link")
.map(property => {
return {
providerId: property.providerId,
label: property.readableBinding,
@ -89,7 +89,7 @@
}
function fetchQueryDefinition(query) {
const source = $datasources.list.find(( ds) => ds._id === query.datasourceId)
const source = $datasources.list.find(ds => ds._id === query.datasourceId)
.source
return $integrations[source].query[query.queryVerb]
}
@ -100,20 +100,18 @@
readonly
value={ text }
options={[ text ]}
on:click={ dropdownRight . show }
/>
{ #if value ? . type === "query" }
on:click={ dropdownRight . show } />
{ #if value ? . type === 'query' }
< i class = "ri-settings-5-line" on:click = { drawer . show } / >
< Drawer title = { "Query Parameters" } bind:this= { drawer } >
< Drawer title = { 'Query Parameters' } bind:this= { drawer } >
< Button
slot="buttons"
cta
on:click={() => {
notifications.success("Query parameters saved." )
notifications.success('Query parameters saved.' )
handleSelected(value)
drawer.hide()
}}
>
}}>
Save
< / Button >
< DrawerContent slot = "body" >
@ -121,20 +119,15 @@
{ #if value . parameters . length > 0 }
< ParameterBuilder
bind:customParams={ value . queryParams }
parameters={ queries . find (( query ) => query . _id === value . _id )
.parameters}
bindings={ queryBindableProperties }
/>
parameters={ queries . find ( query => query . _id === value . _id ). parameters }
bindings={ queryBindableProperties } />
{ /if }
< IntegrationQueryEditor
height={ 200 }
query={ value }
schema={ fetchQueryDefinition ( value )}
datasource={ $datasources . list . find (
(ds) => ds._id === value.datasourceId
)}
editable={ false }
/>
datasource={ $datasources . list . find ( ds => ds . _id === value . datasourceId )}
editable={ false } />
< / Layout >
< / DrawerContent >
< / Drawer >
@ -147,12 +140,7 @@
< / div >
< ul >
{ #each tables as table }
< li
class:selected={ value === table }
on:click={() => handleSelected ( table )}
>
{ table . label }
< / li >
< li on:click = {() => handleSelected ( table )} > { table . label } </li >
{ /each }
< / ul >
< Divider size = "S" / >
@ -161,12 +149,7 @@
< / div >
< ul >
{ #each views as view }
< li
class:selected={ value === view }
on:click={() => handleSelected ( view )}
>
{ view . label }
< / li >
< li on:click = {() => handleSelected ( view )} > { view . label } </li >
{ /each }
< / ul >
< Divider size = "S" / >
@ -175,12 +158,7 @@
< / div >
< ul >
{ #each links as link }
< li
class:selected={ value === link }
on:click={() => handleSelected ( link )}
>
{ link . label }
< / li >
< li on:click = {() => handleSelected ( link )} > { link . label } </li >
{ /each }
< / ul >
< Divider size = "S" / >
@ -191,8 +169,7 @@
{ #each queries as query }
< li
class:selected={ value === query }
on:click={() => handleSelected ( query )}
>
on:click={() => handleSelected ( query )} >
{ query . label }
< / li >
{ /each }
@ -205,12 +182,7 @@
< / div >
< ul >
{ #each otherSources as source }
< li
class:selected={ value === source }
on:click={() => handleSelected ( source )}
>
{ source . label }
< / li >
< li on:click = {() => handleSelected ( source )} > { source . label } </li >
{ /each }
< / ul >
{ /if }
@ -246,15 +218,15 @@
cursor: pointer;
margin: 0px;
padding: var(--spacing-s) var(--spacing-m);
font-size: var(--font-size-xs );
font-size: var(--font-size-m );
}
.selected {
background-color: var(--grey-4 );
color: var(--spectrum-global-color-blue-600 );
}
li:hover {
background-color: var(--grey-4 );
background-color: var(--spectrum-global-color-gray-200 );
}
.drawer-contents {
Keviin Åberg Kultalahti
5 years ago