CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-29 16:51:33 +13:00
Code Issues Projects Releases Wiki Activity

merge fixes

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-05-03 09:24:04 +02:00
commit 27ce375f17
7 changed files with 80 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
View file

@ -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 {

42
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View file

@ -1,7 +1,14 @@
<script>
import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action"
import { Icon, Button, Popover, Layout, DrawerContent } from "@budibase/bbui"
import {
Icon,
Button,
Layout,
DrawerContent,
ActionMenu,
MenuItem,
} from "@budibase/bbui"
import actionTypes from "./actions"
import { generate } from "shortid"
@ -22,8 +29,6 @@
}
}
let addActionButton
let addActionDropdown
let selectedAction = actions?.length ? actions[0] : null
$: selectedActionComponent =
@ -53,7 +58,6 @@
}
actions = [...actions, newAction]
selectedAction = newAction
addActionDropdown.hide()
}
const selectAction = (action) => () => {
@ -71,24 +75,14 @@
<DrawerContent>
<div class="actions-list" slot="sidebar">
<Layout>
<div bind:this={addActionButton}>
<Button wide secondary on:click={addActionDropdown.show}>
Add Action
</Button>
</div>
<Popover
bind:this={addActionDropdown}
anchor={addActionButton}
align="right"
>
<div class="available-actions-container">
{#each actionTypes as actionType}
<div class="available-action" on:click={addAction(actionType)}>
<span>{actionType.name}</span>
</div>
{/each}
</div>
</Popover>
<ActionMenu>
<Button slot="control" secondary>Add Action</Button>
{#each actionTypes as actionType}
<MenuItem on:click={addAction(actionType)}>
{actionType.name}
</MenuItem>
{/each}
</ActionMenu>
{#if actions && actions.length > 0}
<div
@ -148,7 +142,7 @@
.action-header {
margin-bottom: var(--spacing-m);
font-size: var(--font-size-xs);
font-size: var(--font-size-s);
color: var(--grey-7);
font-weight: 500;
}
@ -161,7 +155,7 @@
.available-action {
padding: var(--spacing-s);
font-size: var(--font-size-xs);
font-size: var(--font-size-s);
cursor: pointer;
}

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
View file

@ -51,7 +51,7 @@
}
</script>
<Button primary on:click={drawer.show}>Define Actions</Button>
<Button secondary on:click={drawer.show}>Define Actions</Button>
<Drawer bind:this={drawer} title={'Actions'}>
<svelte:fragment slot="description">
Define what actions to run.

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
View file

@ -35,7 +35,7 @@
}
</script>
<Button secondary wide on:click={drawer.show}>Define Filters</Button>
<Button secondary on:click={drawer.show}>Define Filters</Button>
<Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<DrawerContent slot="body">

42
packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte
View file

@ -80,11 +80,11 @@
"field/link": RelationshipFieldSelect,
}
const getControl = type => {
const getControl = (type) => {
return controlMap[type]
}
const canRenderControl = setting => {
const canRenderControl = (setting) => {
const control = getControl(setting?.type)
if (!control) {
return false
@ -95,7 +95,7 @@
return true
}
const onInstanceNameChange = name => {
const onInstanceNameChange = (name) => {
onChange("_instanceName", name)
}
@ -103,13 +103,13 @@
const form = findClosestMatchingComponent(
$currentAsset.props,
componentInstance._id,
component => component._component.endsWith("/form")
(component) => component._component.endsWith("/form")
)
const dataSource = form?.dataSource
const fields = makeDatasourceFormComponents(dataSource)
onChange(
"_children",
fields.map(field => field.json())
fields.map((field) => field.json())
)
}
</script>
@ -123,7 +123,8 @@
label={def.label}
key={def.key}
value={get(assetInstance, def.key)}
onChange={val => onScreenPropChange(def.key, val)} />
onChange={(val) => onScreenPropChange(def.key, val)}
/>
{/each}
{/if}
@ -134,7 +135,8 @@
label="Name"
key="_instanceName"
value={componentInstance._instanceName}
onChange={onInstanceNameChange} />
onChange={onInstanceNameChange}
/>
{/if}
{#if settings && settings.length > 0}
@ -145,10 +147,12 @@
control={getControl(setting.type)}
label={setting.label}
key={setting.key}
value={componentInstance[setting.key] ?? componentInstance[setting.key]?.defaultValue}
value={componentInstance[setting.key] ??
componentInstance[setting.key]?.defaultValue}
{componentInstance}
onChange={val => onChange(setting.key, val)}
props={{ options: setting.options, placeholder: setting.placeholder }} />
onChange={(val) => onChange(setting.key, val)}
props={{ options: setting.options, placeholder: setting.placeholder }}
/>
{/if}
{/each}
{:else}
@ -157,10 +161,12 @@
</div>
{/if}
{#if componentDefinition?.component?.endsWith('/fieldgroup')}
<Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
Update Form Fields
</Button>
{#if componentDefinition?.component?.endsWith("/fieldgroup")}
<div class="buttonWrapper">
<Button secondary wide on:click={() => confirmResetFieldsDialog?.show()}>
Update Form Fields
</Button>
</div>
{/if}
</div>
<ConfirmDialog
@ -168,7 +174,8 @@
body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`}
okText="Update"
onOk={resetFormFields}
title="Confirm Form Field Update" />
title="Confirm Form Field Update"
/>
<style>
.settings-view-container {
@ -183,4 +190,9 @@
margin-top: var(--spacing-m);
color: var(--grey-6);
}
.buttonWrapper {
margin-top: 10px;
display: flex;
flex-direction: column;
}
</style>

5
packages/client/src/utils/styleable.js
View file

@ -24,7 +24,10 @@ const addBuilderPreviewStyles = (node, styleString, componentId) => {
if (componentId === get(builderStore).selectedComponentId) {
const style = window.getComputedStyle(node)
const property = style?.display === "table-row" ? "outline" : "border"
return styleString + `;${property}: 2px solid #4285f4 !important;`
return (
styleString +
`;${property}: 2px solid #4285f4 !important; border-radius: 4px !important;`
)
} else {
return styleString
}

8
packages/standard-components/src/DataProvider.svelte
View file

@ -103,6 +103,8 @@
}
</script>
<Provider {actions} data={dataContext}>
<slot />
</Provider>
<div use:styleable={$component.styles}>
<Provider {actions} data={dataContext}>
<slot />
</Provider>
</div>