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

Merge pull request #4475 from Budibase/table-column-config 

Table column config
This commit is contained in:
Andrew Kingston 2022-02-14 17:57:56 +00:00 committed by GitHub
parent 410e8a2888 f433343dc4
commit bd99ffb5b7
7 changed files with 268 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -74,4 +74,12 @@
align-items: flex-start; align-items: flex-start;
gap: var(--spacing-xs); gap: var(--spacing-xs);
} }
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
}
</style> </style>

178
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte Normal file
View File

@ -0,0 +1,178 @@
<script>
import {
Button,
Icon,
DrawerContent,
Layout,
Input,
Select,
Label,
Body,
} from "@budibase/bbui"
import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action"
import { generate } from "shortid"
export let columns = []
export let options = []
const flipDurationMs = 150
let dragDisabled = true
$: unselectedColumns = getUnselectedColumns(options, columns)
$: columns.forEach(column => {
if (!column.id) {
column.id = generate()
}
})
const getUnselectedColumns = (allColumns, selectedColumns) => {
let optionsObj = {}
allColumns.forEach(option => {
optionsObj[option] = true
})
selectedColumns?.forEach(column => {
delete optionsObj[column.name]
})
return Object.keys(optionsObj)
}
const getRemainingColumnOptions = selectedColumn => {
if (!selectedColumn || unselectedColumns.includes(selectedColumn)) {
return unselectedColumns
}
return [selectedColumn, ...unselectedColumns]
}
const addColumn = () => {
columns = [...columns, {}]
}
const removeColumn = id => {
columns = columns.filter(column => column.id !== id)
}
const updateColumnOrder = e => {
columns = e.detail.items
}
const handleFinalize = e => {
updateColumnOrder(e)
dragDisabled = true
}
const reset = () => {
columns = options.map(col => ({
name: col,
displayName: col,
}))
}
</script>
<DrawerContent>
<div class="container">
<Layout noPadding gap="S">
{#if columns?.length}
<Layout noPadding gap="XS">
<div class="column">
<div />
<Label size="L">Column</Label>
<Label size="L">Label</Label>
<div />
</div>
<div
class="columns"
use:dndzone={{
items: columns,
flipDurationMs,
dropTargetStyle: { outline: "none" },
dragDisabled,
}}
on:finalize={handleFinalize}
on:consider={updateColumnOrder}
>
{#each columns as column (column.id)}
<div class="column" animate:flip={{ duration: flipDurationMs }}>
<div
class="handle"
aria-label="drag-handle"
style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
on:mousedown={() => (dragDisabled = false)}
>
<Icon name="DragHandle" size="XL" />
</div>
<Select
bind:value={column.name}
placeholder="Column"
options={getRemainingColumnOptions(column.name)}
on:change={e => (column.displayName = e.detail)}
/>
<Input bind:value={column.displayName} placeholder="Label" />
<Icon
name="Close"
hoverable
size="S"
on:click={() => removeColumn(column.id)}
disabled={columns.length === 1}
/>
</div>
{/each}
</div>
</Layout>
{:else}
<div class="column">
<div />
<Body size="S">Add the first column to your table.</Body>
</div>
{/if}
<div class="columns">
<div class="column">
<div />
<div class="buttons">
<Button secondary icon="Add" on:click={addColumn}>
Add column
</Button>
<Button secondary quiet on:click={reset}>Reset columns</Button>
</div>
</div>
</div>
</Layout>
</div>
</DrawerContent>
<style>
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.columns {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-m);
}
.column {
gap: var(--spacing-l);
display: grid;
grid-template-columns: 20px 1fr 1fr 20px;
align-items: center;
border-radius: var(--border-radius-s);
transition: background-color ease-in-out 130ms;
}
.column:hover {
background-color: var(--spectrum-global-color-gray-100);
}
.handle {
display: grid;
place-items: center;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
}
</style>

64
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte Normal file
View File

@ -0,0 +1,64 @@
<script>
import { Button, ActionButton, Drawer } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import ColumnDrawer from "./ColumnDrawer.svelte"
import { cloneDeep } from "lodash/fp"
import {
getDatasourceForProvider,
getSchemaForDatasource,
} from "builderStore/dataBinding"
import { currentAsset } from "builderStore"
export let componentInstance
export let value = []
const dispatch = createEventDispatcher()
let drawer
let boundValue
$: datasource = getDatasourceForProvider($currentAsset, componentInstance)
$: schema = getSchemaForDatasource($currentAsset, datasource).schema
$: options = Object.keys(schema || {})
$: sanitisedValue = getValidColumns(value, options)
$: updateBoundValue(sanitisedValue)
const updateBoundValue = value => {
boundValue = cloneDeep(value)
}
const getValidColumns = (columns, options) => {
// If no columns then default to all columns
if (!Array.isArray(columns) || !columns.length) {
return options.map(col => ({
name: col,
displayName: col,
}))
}
// We need to account for legacy configs which would just be an array
// of strings
if (typeof columns[0] === "string") {
columns = columns.map(col => ({
name: col,
displayName: col,
}))
}
return columns.filter(column => {
return options.includes(column.name)
})
}
const save = () => {
dispatch("change", getValidColumns(boundValue, options))
drawer.hide()
}
</script>
<ActionButton on:click={drawer.show}>Configure columns</ActionButton>
<Drawer bind:this={drawer} title="Table Columns">
<svelte:fragment slot="description">
Configure the columns in your table.
</svelte:fragment>
<Button cta slot="buttons" on:click={save}>Save</Button>
<ColumnDrawer slot="body" bind:columns={boundValue} {options} />
</Drawer>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte
View File

@ -15,7 +15,7 @@
} }
</script> </script>
<ActionButton on:click={drawer.show}>Configure Links</ActionButton> <ActionButton on:click={drawer.show}>Configure links</ActionButton>
<Drawer bind:this={drawer} title={"Navigation Links"}> <Drawer bind:this={drawer} title={"Navigation Links"}>
<svelte:fragment slot="description"> <svelte:fragment slot="description">
Configure the links in your navigation bar. Configure the links in your navigation bar.

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
View File

@ -18,6 +18,7 @@ import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
import FormFieldSelect from "./FormFieldSelect.svelte" import FormFieldSelect from "./FormFieldSelect.svelte"
import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte" import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte" import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
import ColumnEditor from "./ColumnEditor/ColumnEditor.svelte"
const componentMap = { const componentMap = {
text: DrawerBindableCombobox, text: DrawerBindableCombobox,
@ -40,6 +41,7 @@ const componentMap = {
navigation: NavigationEditor, navigation: NavigationEditor,
filter: FilterEditor, filter: FilterEditor,
url: URLSelect, url: URLSelect,
columns: ColumnEditor,
"field/string": FormFieldSelect, "field/string": FormFieldSelect,
"field/number": FormFieldSelect, "field/number": FormFieldSelect,
"field/options": FormFieldSelect, "field/options": FormFieldSelect,

7
packages/client/manifest.json
View File

@ -2680,11 +2680,10 @@
"defaultValue": 8 "defaultValue": 8
}, },
{ {
"type": "multifield", "type": "columns",
"label": "Columns", "label": "Columns",
"key": "columns", "key": "columns",
"dependsOn": "dataProvider", "dependsOn": "dataProvider"
"placeholder": "All columns"
}, },
{ {
"type": "select", "type": "select",
@ -2951,7 +2950,7 @@
"defaultValue": 8 "defaultValue": 8
}, },
{ {
"type": "multifield", "type": "columns",
"label": "Table Columns", "label": "Table Columns",
"key": "tableColumns", "key": "tableColumns",
"dependsOn": "dataSource", "dependsOn": "dataSource",

16
packages/client/src/components/app/table/Table.svelte
View File

@ -40,7 +40,8 @@
// Check for an invalid column selection // Check for an invalid column selection
let invalid = false let invalid = false
customColumns?.forEach(column => { customColumns?.forEach(column => {
if (schema[column] == null) { const columnName = typeof column === "string" ? column : column.name
if (schema[columnName] == null) {
invalid = true invalid = true
} }
}) })
@ -75,9 +76,16 @@
} }
fields.forEach(field => { fields.forEach(field => {
newSchema[field] = schema[field] const columnName = typeof field === "string" ? field : field.name
if (schema[field] && UnsortableTypes.indexOf(schema[field].type) !== -1) { if (!schema[columnName]) {
newSchema[field].sortable = false return
}
newSchema[columnName] = schema[columnName]
if (UnsortableTypes.includes(schema[columnName].type)) {
newSchema[columnName].sortable = false
}
if (field?.displayName) {
newSchema[columnName].displayName = field?.displayName
} }
}) })
return newSchema return newSchema