Adding the ability to set a display name for any datasource/query parameter.
This commit is contained in:
parent
f77fe0c75c
commit
4a0ce14f04
4 changed files with 41 additions and 20 deletions
|
@ -32,20 +32,30 @@
|
||||||
.map(([key]) => key)
|
.map(([key]) => key)
|
||||||
|
|
||||||
let addButton
|
let addButton
|
||||||
|
|
||||||
|
function getDisplayName(key) {
|
||||||
|
let name
|
||||||
|
if (schema[key]?.display) {
|
||||||
|
name = schema[key].display
|
||||||
|
} else {
|
||||||
|
name = key
|
||||||
|
}
|
||||||
|
return capitalise(name)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<Layout noPadding gap="S">
|
<Layout noPadding gap="S">
|
||||||
{#if !creating}
|
{#if !creating}
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<Label>{capitalise("Name")}</Label>
|
<Label>Name</Label>
|
||||||
<Input on:change bind:value={datasource.name} />
|
<Input on:change bind:value={datasource.name} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#each configKeys as configKey}
|
{#each configKeys as configKey}
|
||||||
{#if schema[configKey].type === "object"}
|
{#if schema[configKey].type === "object"}
|
||||||
<div class="form-row ssl">
|
<div class="form-row ssl">
|
||||||
<Label>{capitalise(configKey)}</Label>
|
<Label>{getDisplayName(configKey)}</Label>
|
||||||
<Button secondary thin outline on:click={addButton.addEntry()}
|
<Button secondary thin outline on:click={addButton.addEntry()}
|
||||||
>Add</Button
|
>Add</Button
|
||||||
>
|
>
|
||||||
|
@ -59,12 +69,12 @@
|
||||||
/>
|
/>
|
||||||
{:else if schema[configKey].type === "boolean"}
|
{:else if schema[configKey].type === "boolean"}
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<Label>{capitalise(configKey)}</Label>
|
<Label>{getDisplayName(configKey)}</Label>
|
||||||
<Toggle text="" bind:value={config[configKey]} />
|
<Toggle text="" bind:value={config[configKey]} />
|
||||||
</div>
|
</div>
|
||||||
{:else if schema[configKey].type === "longForm"}
|
{:else if schema[configKey].type === "longForm"}
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<Label>{capitalise(configKey)}</Label>
|
<Label>{getDisplayName(configKey)}</Label>
|
||||||
<TextArea
|
<TextArea
|
||||||
type={schema[configKey].type}
|
type={schema[configKey].type}
|
||||||
on:change
|
on:change
|
||||||
|
@ -73,7 +83,7 @@
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<Label>{capitalise(configKey)}</Label>
|
<Label>{getDisplayName(configKey)}</Label>
|
||||||
<Input
|
<Input
|
||||||
type={schema[configKey].type}
|
type={schema[configKey].type}
|
||||||
on:change
|
on:change
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { Icon, Button, Input } from "@budibase/bbui"
|
import { Icon, ActionButton, Input } from "@budibase/bbui"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
|
|
||||||
let dispatch = createEventDispatcher()
|
let dispatch = createEventDispatcher()
|
||||||
|
@ -46,7 +46,9 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if !readOnly && !noAddButton}
|
{#if !readOnly && !noAddButton}
|
||||||
<div>
|
<div>
|
||||||
<Button secondary thin outline on:click={addEntry}>Add</Button>
|
<ActionButton icon="Add" secondary thin outline on:click={addEntry}
|
||||||
|
>Add</ActionButton
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
|
@ -2,29 +2,38 @@
|
||||||
import { Label, Layout, Input } from "@budibase/bbui"
|
import { Label, Layout, Input } from "@budibase/bbui"
|
||||||
import Editor from "./QueryEditor.svelte"
|
import Editor from "./QueryEditor.svelte"
|
||||||
import KeyValueBuilder from "./KeyValueBuilder.svelte"
|
import KeyValueBuilder from "./KeyValueBuilder.svelte"
|
||||||
|
import { capitalise } from "helpers"
|
||||||
|
|
||||||
export let fields = {}
|
export let fields = {}
|
||||||
export let schema
|
export let schema
|
||||||
export let editable
|
export let editable
|
||||||
|
|
||||||
$: schemaKeys = Object.keys(schema.fields)
|
$: schemaKeys = Object.keys(schema?.fields || {})
|
||||||
|
|
||||||
function updateCustomFields({ detail }) {
|
function updateCustomFields({ detail }) {
|
||||||
fields.customData = detail.value
|
fields.customData = detail.value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getDisplayName(field) {
|
||||||
|
let name
|
||||||
|
if (schema.fields[field]?.display) {
|
||||||
|
name = schema.fields[field]?.display
|
||||||
|
} else {
|
||||||
|
name = field
|
||||||
|
}
|
||||||
|
return capitalise(name)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form on:submit|preventDefault>
|
<form on:submit|preventDefault>
|
||||||
<Layout noPadding gap="S">
|
<Layout noPadding gap="S">
|
||||||
{#each schemaKeys as field}
|
{#each schemaKeys as field}
|
||||||
{#if schema.fields[field]?.type === "object"}
|
{#if schema.fields[field]?.type === "object"}
|
||||||
<div>
|
<Label small>{getDisplayName(field)}</Label>
|
||||||
<Label small>{field}</Label>
|
<KeyValueBuilder readOnly={!editable} bind:object={fields[field]} />
|
||||||
<KeyValueBuilder readOnly={!editable} bind:object={fields[field]} />
|
|
||||||
</div>
|
|
||||||
{:else if schema.fields[field]?.type === "json"}
|
{:else if schema.fields[field]?.type === "json"}
|
||||||
<div>
|
<div>
|
||||||
<Label extraSmall grey>{field}</Label>
|
<Label extraSmall grey>{getDisplayName(field)}</Label>
|
||||||
<Editor
|
<Editor
|
||||||
mode="json"
|
mode="json"
|
||||||
on:change={({ detail }) => (fields[field] = detail.value)}
|
on:change={({ detail }) => (fields[field] = detail.value)}
|
||||||
|
@ -34,9 +43,9 @@
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="horizontal">
|
<div class="horizontal">
|
||||||
<Label small>{field}</Label>
|
<Label small>{getDisplayName(field)}</Label>
|
||||||
<Input
|
<Input
|
||||||
placeholder="Enter {field}"
|
placeholder="Enter {getDisplayName(field)}"
|
||||||
outline
|
outline
|
||||||
disabled={!editable}
|
disabled={!editable}
|
||||||
type={schema.fields[field]?.type}
|
type={schema.fields[field]?.type}
|
||||||
|
|
|
@ -38,10 +38,10 @@ module RestModule {
|
||||||
readable: true,
|
readable: true,
|
||||||
displayName: "POST",
|
displayName: "POST",
|
||||||
type: QueryTypes.FIELDS,
|
type: QueryTypes.FIELDS,
|
||||||
urlDisplay: true,
|
|
||||||
fields: {
|
fields: {
|
||||||
path: {
|
path: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
display: "URL",
|
||||||
},
|
},
|
||||||
queryString: {
|
queryString: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
@ -58,10 +58,10 @@ module RestModule {
|
||||||
displayName: "GET",
|
displayName: "GET",
|
||||||
readable: true,
|
readable: true,
|
||||||
type: QueryTypes.FIELDS,
|
type: QueryTypes.FIELDS,
|
||||||
urlDisplay: true,
|
|
||||||
fields: {
|
fields: {
|
||||||
path: {
|
path: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
display: "URL",
|
||||||
},
|
},
|
||||||
queryString: {
|
queryString: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
@ -75,10 +75,10 @@ module RestModule {
|
||||||
displayName: "PUT",
|
displayName: "PUT",
|
||||||
readable: true,
|
readable: true,
|
||||||
type: QueryTypes.FIELDS,
|
type: QueryTypes.FIELDS,
|
||||||
urlDisplay: true,
|
|
||||||
fields: {
|
fields: {
|
||||||
path: {
|
path: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
display: "URL",
|
||||||
},
|
},
|
||||||
queryString: {
|
queryString: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
@ -95,10 +95,10 @@ module RestModule {
|
||||||
displayName: "PATCH",
|
displayName: "PATCH",
|
||||||
readable: true,
|
readable: true,
|
||||||
type: QueryTypes.FIELDS,
|
type: QueryTypes.FIELDS,
|
||||||
urlDisplay: true,
|
|
||||||
fields: {
|
fields: {
|
||||||
path: {
|
path: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
display: "URL",
|
||||||
},
|
},
|
||||||
queryString: {
|
queryString: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
@ -114,10 +114,10 @@ module RestModule {
|
||||||
delete: {
|
delete: {
|
||||||
displayName: "DELETE",
|
displayName: "DELETE",
|
||||||
type: QueryTypes.FIELDS,
|
type: QueryTypes.FIELDS,
|
||||||
urlDisplay: true,
|
|
||||||
fields: {
|
fields: {
|
||||||
path: {
|
path: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
display: "URL",
|
||||||
},
|
},
|
||||||
queryString: {
|
queryString: {
|
||||||
type: DatasourceFieldTypes.STRING,
|
type: DatasourceFieldTypes.STRING,
|
||||||
|
|
Loading…
Reference in a new issue