Add quick actions for adding all column or for resetting column selection back to default
This commit is contained in:
Andrew Kingston
parent
f1649911b0
commit
0a92aef42a
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue