MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update multiple settings components to enable more generic usage of column selectors and remove some bespoke copy from generic components. Enable display names for grid columns

This commit is contained in:
Andrew Kingston 2023-06-19 18:49:57 +01:00
parent e436c1da1c
commit 9fd04cc2c7
6 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
View File

@ -2,9 +2,4 @@
import ColumnEditor from "./ColumnEditor.svelte" import ColumnEditor from "./ColumnEditor.svelte"
</script> </script>
<ColumnEditor <ColumnEditor {...$$props} on:change allowCellEditing={false} />
{...$$props}
on:change
allowCellEditing={false}
subject="Dynamic Filter"
/>

6
packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
View File

@ -142,10 +142,10 @@
<div class="column"> <div class="column">
<div class="wide"> <div class="wide">
<Body size="S"> <Body size="S">
By default, all table columns will automatically be shown. By default, all columns will automatically be shown.
<br /> <br />
You can manually control which columns are included in your table, You can manually control which columns are included by adding them
and their appearance, by adding them below. below.
</Body> </Body>
</div> </div>
</div> </div>

6
packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
View File

@ -13,7 +13,6 @@
export let componentInstance export let componentInstance
export let value = [] export let value = []
export let allowCellEditing = true export let allowCellEditing = true
export let subject = "Table"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -78,10 +77,7 @@
<div class="column-editor"> <div class="column-editor">
<ActionButton on:click={open}>Configure columns</ActionButton> <ActionButton on:click={open}>Configure columns</ActionButton>
</div> </div>
<Drawer bind:this={drawer} title="{subject} Columns"> <Drawer bind:this={drawer} title="Columns">
<svelte:fragment slot="description">
Configure the columns in your {subject.toLowerCase()}.
</svelte:fragment>
<Button cta slot="buttons" on:click={save}>Save</Button> <Button cta slot="buttons" on:click={save}>Save</Button>
<ColumnDrawer <ColumnDrawer
slot="body" slot="body"

2
packages/builder/src/components/design/settings/controls/FieldConfiguration.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { Button, ActionButton, Drawer } from "@budibase/bbui" import { Button, ActionButton, Drawer } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import ColumnDrawer from "./ColumnDrawer.svelte" import ColumnDrawer from "./ColumnEditor/ColumnDrawer.svelte"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
import { import {
getDatasourceForProvider, getDatasourceForProvider,

7
packages/client/manifest.json
View File

@ -5243,11 +5243,10 @@
"required": true "required": true
}, },
{ {
"type": "multifield", "type": "columns/basic",
"label": "Columns", "label": "Columns",
"key": "columnWhitelist", "key": "columns",
"dependsOn": "table", "dependsOn": "table"
"placeholder": "All columns"
}, },
{ {
"type": "filter", "type": "filter",

16
packages/client/src/components/app/GridBlock.svelte
View File

@ -13,10 +13,23 @@
export let initialSortColumn = null export let initialSortColumn = null
export let initialSortOrder = null export let initialSortOrder = null
export let initialRowHeight = null export let initialRowHeight = null
export let columnWhitelist = null export let columns = null
const component = getContext("component") const component = getContext("component")
const { styleable, API, builderStore } = getContext("sdk") const { styleable, API, builderStore } = getContext("sdk")
$: columnWhitelist = columns?.map(col => col.name)
$: schemaOverrides = getSchemaOverrides(columns)
const getSchemaOverrides = columns => {
let overrides = {}
columns?.forEach(column => {
overrides[column.name] = {
displayName: column.displayName || column.name,
}
})
return overrides
}
</script> </script>
<div <div
@ -35,6 +48,7 @@
{initialSortOrder} {initialSortOrder}
{initialRowHeight} {initialRowHeight}
{columnWhitelist} {columnWhitelist}
{schemaOverrides}
showControls={false} showControls={false}
allowExpandRows={false} allowExpandRows={false}
allowSchemaChanges={false} allowSchemaChanges={false}