CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-05 12:34:50 +13:00
Code Issues Projects Releases Wiki Activity

Add quick actions for adding all column or for resetting column selection back to default

Browse source
This commit is contained in:
Andrew Kingston 2022-02-18 12:36:12 +00:00
parent f45715d61b
commit 6237af2826
2 changed files with 54 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
View file

@ -15,6 +15,7 @@
export let columns = []
export let options = []
export let schema = {}
const flipDurationMs = 150
let dragDisabled = true
@ -61,11 +62,22 @@
dragDisabled = true
}
const addAllColumns = () => {
let newColumns = []
options.forEach(field => {
const fieldSchema = schema[field]
if (!fieldSchema?.autocolumn) {
newColumns.push({
name: field,
displayName: field,
})
}
})
columns = newColumns
}
const reset = () => {
columns = options.map(col => ({
name: col,
displayName: col,
}))
columns = []
}
</script>
@ -78,6 +90,7 @@
<div />
<Label size="L">Column</Label>
<Label size="L">Label</Label>
<Label size="L">Width</Label>
<div />
</div>
<div
@ -108,6 +121,7 @@
on:change={e => (column.displayName = e.detail)}
/>
<Input bind:value={column.displayName} placeholder="Label" />
<Input bind:value={column.width} placeholder="Auto" />
<Icon
name="Close"
hoverable
@ -121,19 +135,25 @@
</Layout>
{:else}
<div class="column">
<div />
<Body size="S">Add the first column to your table.</Body>
<div class="wide">
<Body size="S">
By default, all table columns will automatically be shown.
<br />
You can manually control which columns are included in your table,
and their widths, by adding them below.
</Body>
</div>
</div>
{/if}
<div class="columns">
<div class="column">
<div />
<div class="buttons">
<Button secondary icon="Add" on:click={addColumn}>
Add column
</Button>
<div class="column">
<div class="buttons wide">
<Button secondary icon="Add" on:click={addColumn}>Add column</Button>
<Button secondary quiet on:click={addAllColumns}>
Add all columns
</Button>
{#if columns?.length}
<Button secondary quiet on:click={reset}>Reset columns</Button>
</div>
{/if}
</div>
</div>
</Layout>
@ -143,7 +163,7 @@
<style>
.container {
width: 100%;
max-width: 600px;
max-width: 800px;
margin: 0 auto;
}
.columns {
@ -156,7 +176,7 @@
.column {
gap: var(--spacing-l);
display: grid;
grid-template-columns: 20px 1fr 1fr 20px;
grid-template-columns: 20px 1fr 1fr 1fr 20px;
align-items: center;
border-radius: var(--border-radius-s);
transition: background-color ease-in-out 130ms;
@ -168,6 +188,9 @@
display: grid;
place-items: center;
}
.wide {
grid-column: 2 / -1;
}
.buttons {
display: flex;
flex-direction: row;

22
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
View file

@ -18,22 +18,30 @@
let boundValue
$: datasource = getDatasourceForProvider($currentAsset, componentInstance)
$: schema = getSchemaForDatasource($currentAsset, datasource).schema
$: schema = getSchema($currentAsset, datasource)
$: options = Object.keys(schema || {})
$: sanitisedValue = getValidColumns(value, options)
$: updateBoundValue(sanitisedValue)
const getSchema = (asset, datasource) => {
const schema = getSchemaForDatasource(asset, datasource).schema
// Don't show ID and rev in tables
if (schema) {
delete schema._id
delete schema._rev
}
return schema
}
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,
}))
return []
}
// We need to account for legacy configs which would just be an array
// of strings
@ -60,5 +68,5 @@
Configure the columns in your table.
</svelte:fragment>
<Button cta slot="buttons" on:click={save}>Save</Button>
<ColumnDrawer slot="body" bind:columns={boundValue} {options} />
<ColumnDrawer slot="body" bind:columns={boundValue} {options} {schema} />
</Drawer>