forked from tsai/budibase
Martin McKeaveney
6 years ago
24 changed files with 778 additions and 253 deletions
@ -0,0 +1,49 @@ |
|||||
|
<script> |
||||
|
import { DataList } from "@budibase/bbui" |
||||
|
import { createEventDispatcher } from "svelte" |
||||
|
import { store } from "builderStore" |
||||
|
|
||||
|
const dispatch = createEventDispatcher() |
||||
|
|
||||
|
export let value = "" |
||||
|
|
||||
|
$: urls = getUrls() |
||||
|
|
||||
|
const handleBlur = () => dispatch("change", value) |
||||
|
|
||||
|
const getUrls = () => { |
||||
|
return [ |
||||
|
...$store.screens |
||||
|
.filter( |
||||
|
screen => |
||||
|
screen.props._component.endsWith("/rowdetail") || |
||||
|
screen.route.endsWith(":id") |
||||
|
) |
||||
|
.map(screen => ({ |
||||
|
name: screen.props._instanceName, |
||||
|
url: screen.route, |
||||
|
sort: screen.props._component, |
||||
|
})), |
||||
|
] |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div> |
||||
|
<DataList editable secondary thin on:blur={handleBlur} on:change bind:value> |
||||
|
<option value="" /> |
||||
|
{#each urls as url} |
||||
|
<option value={url.url}>{url.name}</option> |
||||
|
{/each} |
||||
|
</DataList> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
div { |
||||
|
flex: 1 1 auto; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
div :global(> div) { |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,91 @@ |
|||||
|
<script> |
||||
|
import { Select, Label } from "@budibase/bbui" |
||||
|
import { store, backendUiStore } from "builderStore" |
||||
|
import fetchBindableProperties from "builderStore/fetchBindableProperties" |
||||
|
|
||||
|
export let parameters |
||||
|
|
||||
|
let idFields |
||||
|
|
||||
|
$: bindableProperties = fetchBindableProperties({ |
||||
|
componentInstanceId: $store.currentComponentInfo._id, |
||||
|
components: $store.components, |
||||
|
screen: $store.currentPreviewItem, |
||||
|
tables: $backendUiStore.tables, |
||||
|
}) |
||||
|
|
||||
|
$: idFields = bindableProperties.filter( |
||||
|
bindable => |
||||
|
bindable.type === "context" && bindable.runtimeBinding.endsWith("._id") |
||||
|
) |
||||
|
|
||||
|
$: { |
||||
|
if (parameters.rowId) { |
||||
|
// Set rev ID |
||||
|
parameters.revId = parameters.rowId.replace("_id", "_rev") |
||||
|
|
||||
|
// Set table ID |
||||
|
const idBinding = bindableProperties.find( |
||||
|
prop => |
||||
|
prop.runtimeBinding === |
||||
|
parameters.rowId |
||||
|
.replace("{{", "") |
||||
|
.replace("}}", "") |
||||
|
.trim() |
||||
|
) |
||||
|
if (idBinding) { |
||||
|
const { instance } = idBinding |
||||
|
const component = $store.components[instance._component] |
||||
|
const tableInfo = instance[component.context] |
||||
|
if (tableInfo) { |
||||
|
parameters.tableId = |
||||
|
typeof tableInfo === "string" ? tableInfo : tableInfo.tableId |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
console.log(parameters) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
{#if idFields.length === 0} |
||||
|
<div class="cannot-use"> |
||||
|
Delete row can only be used within a component that provides data, such as |
||||
|
a List |
||||
|
</div> |
||||
|
{:else} |
||||
|
<Label size="m" color="dark">Datasource</Label> |
||||
|
<Select secondary bind:value={parameters.rowId}> |
||||
|
<option value="" /> |
||||
|
{#each idFields as idField} |
||||
|
<option value={`{{ ${idField.runtimeBinding} }}`}> |
||||
|
{idField.instance._instanceName} |
||||
|
</option> |
||||
|
{/each} |
||||
|
</Select> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.root { |
||||
|
display: grid; |
||||
|
column-gap: var(--spacing-s); |
||||
|
row-gap: var(--spacing-s); |
||||
|
grid-template-columns: auto 1fr auto 1fr auto; |
||||
|
align-items: baseline; |
||||
|
} |
||||
|
|
||||
|
.root :global(> div:nth-child(2)) { |
||||
|
grid-column-start: 2; |
||||
|
grid-column-end: 6; |
||||
|
} |
||||
|
|
||||
|
.cannot-use { |
||||
|
color: var(--red); |
||||
|
font-size: var(--font-size-s); |
||||
|
text-align: center; |
||||
|
width: 70%; |
||||
|
margin: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -1,12 +1,14 @@ |
|||||
<script> |
<script> |
||||
import { Icon } from "@budibase/bbui" |
import { Button } from "@budibase/bbui" |
||||
export let url |
export let url |
||||
|
let link |
||||
</script> |
</script> |
||||
|
|
||||
<a href={url}><Icon name="view" /></a> |
<a href={url} bind:this={link} /> |
||||
|
<Button small translucent on:click={() => link.click()}>View</Button> |
||||
|
|
||||
<style> |
<style> |
||||
a { |
a { |
||||
color: var(--grey-6); |
display: none; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue