Added new DataSourceSelect component.
This commit is contained in:
Conor Webb
parent
0dfe520193
commit
bb19e48a6d
|
|
@ -32,6 +32,7 @@
|
||||||
import IntegrationQueryEditor from "components/integration/index.svelte"
|
import IntegrationQueryEditor from "components/integration/index.svelte"
|
||||||
import { makePropSafe as safe } from "@budibase/string-templates"
|
import { makePropSafe as safe } from "@budibase/string-templates"
|
||||||
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
|
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
|
||||||
|
import DataSourceSelect from "components/design/settings/controls/DataSourceSelectItem/SelectItem.svelte"
|
||||||
import { API } from "api"
|
import { API } from "api"
|
||||||
|
|
||||||
export let value = {}
|
export let value = {}
|
||||||
|
|
@ -279,243 +280,81 @@
|
||||||
</div>
|
</div>
|
||||||
<Popover bind:this={dropdownRight} anchor={anchorRight}>
|
<Popover bind:this={dropdownRight} anchor={anchorRight}>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<div class="title">
|
<DataSourceSelect
|
||||||
<Heading size="XS">Tables</Heading>
|
heading="Tables"
|
||||||
</div>
|
dataSet={tables}
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
{value}
|
||||||
{#each tables as table}
|
onSelect={handleSelected}
|
||||||
<li
|
/>
|
||||||
class="spectrum-Menu-item"
|
|
||||||
class:is-selected={value?.label === table.label &&
|
|
||||||
value?.type === table.type}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => handleSelected(table)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{table.label}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{#if views?.length}
|
{#if views?.length}
|
||||||
<Divider />
|
<DataSourceSelect
|
||||||
<div class="title">
|
dividerState={true}
|
||||||
<Heading size="XS">Views</Heading>
|
heading="Views"
|
||||||
</div>
|
dataSet={views}
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
{value}
|
||||||
{#each views as view}
|
onSelect={handleSelected}
|
||||||
<li
|
/>
|
||||||
class="spectrum-Menu-item"
|
|
||||||
class:is-selected={value?.label === view.label &&
|
|
||||||
value?.type === view.type}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => handleSelected(view)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{view.label}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if queries?.length}
|
{#if queries?.length}
|
||||||
<Divider />
|
<DataSourceSelect
|
||||||
<div class="title">
|
dividerState={true}
|
||||||
<Heading size="XS">Queries</Heading>
|
heading="Queries"
|
||||||
</div>
|
dataSet={queries}
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
{value}
|
||||||
{#each queries as query}
|
onSelect={handleSelected}
|
||||||
<li
|
/>
|
||||||
class="spectrum-Menu-item"
|
|
||||||
class:is-selected={value?.label === query.label &&
|
|
||||||
value?.type === query.type}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => handleSelected(query)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{query.label}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if links?.length}
|
{#if links?.length}
|
||||||
<Divider />
|
<DataSourceSelect
|
||||||
<div class="title">
|
dividerState={true}
|
||||||
<Heading size="XS">Relationships</Heading>
|
heading="Links"
|
||||||
</div>
|
dataSet={links}
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
{value}
|
||||||
{#each links as link}
|
onSelect={handleSelected}
|
||||||
<li
|
/>
|
||||||
class="spectrum-Menu-item"
|
|
||||||
class:is-selected={value?.label === link.label &&
|
|
||||||
value?.type === link.type}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => handleSelected(link)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{link.label}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if fields?.length}
|
{#if fields?.length}
|
||||||
<Divider />
|
<DataSourceSelect
|
||||||
<div class="title">
|
dividerState={true}
|
||||||
<Heading size="XS">Fields</Heading>
|
heading="Fields"
|
||||||
</div>
|
dataSet={fields}
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
{value}
|
||||||
{#each fields as field}
|
onSelect={handleSelected}
|
||||||
<li
|
/>
|
||||||
class="spectrum-Menu-item"
|
|
||||||
class:is-selected={value?.label === field.label &&
|
|
||||||
value?.type === field.type}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => handleSelected(field)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{field.label}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if jsonArrays?.length}
|
{#if jsonArrays?.length}
|
||||||
<Divider />
|
<DataSourceSelect
|
||||||
<div class="title">
|
dividerState={true}
|
||||||
<Heading size="XS">JSON Arrays</Heading>
|
heading="JSON Arrays"
|
||||||
</div>
|
dataSet={jsonArrays}
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
{value}
|
||||||
{#each jsonArrays as field}
|
onSelect={handleSelected}
|
||||||
<li
|
/>
|
||||||
class="spectrum-Menu-item"
|
|
||||||
class:is-selected={value?.label === field.label &&
|
|
||||||
value?.type === field.type}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => handleSelected(field)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{field.label}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{/if}
|
{/if}
|
||||||
{#if showDataProviders && dataProviders?.length}
|
{#if showDataProviders && dataProviders?.length}
|
||||||
<Divider />
|
<DataSourceSelect
|
||||||
<div class="title">
|
dividerState={true}
|
||||||
<Heading size="XS">Data Providers</Heading>
|
heading="Data Providers"
|
||||||
</div>
|
dataSet={dataProviders}
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
{value}
|
||||||
{#each dataProviders as provider}
|
onSelect={handleSelected}
|
||||||
<li
|
/>
|
||||||
class="spectrum-Menu-item"
|
|
||||||
class:is-selected={value?.label === provider.label &&
|
|
||||||
value?.type === provider.type}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => handleSelected(provider)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{provider.label}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{/if}
|
{/if}
|
||||||
<Divider />
|
<DataSourceSelect
|
||||||
<div class="title">
|
dividerState={true}
|
||||||
<Heading size="XS">Other</Heading>
|
heading="Other"
|
||||||
</div>
|
dataSet={[custom]}
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
{value}
|
||||||
<li
|
onSelect={handleSelected}
|
||||||
class="spectrum-Menu-item"
|
/>
|
||||||
class:is-selected={value?.label === custom.label &&
|
|
||||||
value?.type === custom.type}
|
|
||||||
role="option"
|
|
||||||
aria-selected="true"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => handleSelected(custom)}
|
|
||||||
>
|
|
||||||
<span class="spectrum-Menu-itemLabel">
|
|
||||||
{custom.label}
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
||||||
</svg>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
{#if otherSources?.length}
|
{#if otherSources?.length}
|
||||||
{#each otherSources as source}
|
<DataSourceSelect
|
||||||
<li on:click={() => handleSelected(source)}>{source.label}</li>
|
dividerState={false}
|
||||||
{/each}
|
heading=""
|
||||||
|
dataSet={otherSources}
|
||||||
|
{value}
|
||||||
|
onSelect={handleSelected}
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<script>
|
||||||
|
import { Divider, Heading } from "@budibase/bbui"
|
||||||
|
|
||||||
|
export let dividerState
|
||||||
|
export let heading
|
||||||
|
export let dataSet
|
||||||
|
export let value
|
||||||
|
export let onSelect
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if dividerState}
|
||||||
|
<Divider />
|
||||||
|
{/if}
|
||||||
|
{#if heading.length > 0}
|
||||||
|
<div class="title">
|
||||||
|
<Heading size="XS">{heading}</Heading>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<ul class="spectrum-Menu" role="listbox">
|
||||||
|
{#each dataSet as data}
|
||||||
|
<li
|
||||||
|
class="spectrum-Menu-item"
|
||||||
|
class:is-selected={value?.label === data.label &&
|
||||||
|
value?.type === data.type}
|
||||||
|
role="option"
|
||||||
|
aria-selected="true"
|
||||||
|
tabindex="0"
|
||||||
|
on:click={() => onSelect(data)}
|
||||||
|
on:keydown={e => {
|
||||||
|
if (e.key === "Enter" || e.key === "Space") {
|
||||||
|
onSelect(data)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span class="spectrum-Menu-itemLabel">
|
||||||
|
{data.label}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.title {
|
||||||
|
padding: 0 var(--spacing-m) var(--spacing-s) var(--spacing-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue