Add ToggleActionButtonGroup
This commit is contained in:
parent
be2d63497e
commit
62e1ba28b2
|
@ -2,6 +2,7 @@
|
|||
import { getContext } from "svelte"
|
||||
import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
|
||||
import { getColumnIcon } from "../lib/utils"
|
||||
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
|
||||
|
||||
const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
|
||||
|
||||
|
@ -11,8 +12,11 @@
|
|||
$: anyHidden = $columns.some(col => !col.visible)
|
||||
$: text = getText($columns)
|
||||
|
||||
const toggleColumn = async (column, visible) => {
|
||||
datasource.actions.addSchemaMutation(column.name, { visible })
|
||||
const toggleColumn = async (column, permission) => {
|
||||
const visible = permission !== PERMISSION_OPTIONS.HIDDEN
|
||||
const readonly = permission === PERMISSION_OPTIONS.READONLY
|
||||
|
||||
datasource.actions.addSchemaMutation(column.name, { visible, readonly })
|
||||
await datasource.actions.saveSchemaMutations()
|
||||
dispatch(visible ? "show-column" : "hide-column")
|
||||
}
|
||||
|
@ -21,6 +25,24 @@
|
|||
const hidden = columns.filter(col => !col.visible).length
|
||||
return hidden ? `Columns (${hidden})` : "Columns"
|
||||
}
|
||||
|
||||
const PERMISSION_OPTIONS = {
|
||||
WRITABLE: "writable",
|
||||
READONLY: "readonly",
|
||||
HIDDEN: "hidden",
|
||||
}
|
||||
|
||||
function columnToPermissionOptions(column) {
|
||||
if (!column.visible) {
|
||||
return PERMISSION_OPTIONS.HIDDEN
|
||||
}
|
||||
|
||||
if (column.readonly) {
|
||||
return PERMISSION_OPTIONS.READONLY
|
||||
}
|
||||
|
||||
return PERMISSION_OPTIONS.WRITABLE
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={anchor}>
|
||||
|
@ -51,11 +73,14 @@
|
|||
<Icon size="S" name={getColumnIcon(column)} />
|
||||
{column.label}
|
||||
</div>
|
||||
<Toggle
|
||||
size="S"
|
||||
value={column.visible}
|
||||
<ToggleActionButtonGroup
|
||||
on:change={e => toggleColumn(column, e.detail)}
|
||||
disabled={column.primaryDisplay}
|
||||
value={columnToPermissionOptions(column)}
|
||||
options={[
|
||||
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
|
||||
{ icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
|
||||
{ icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
|
||||
]}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
import { ActionButton } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
export let options
|
||||
|
||||
let dispatch = createEventDispatcher()
|
||||
const onClick = value => {
|
||||
dispatch("change", value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#each options as option}
|
||||
<ActionButton
|
||||
on:click={() => onClick(option.value)}
|
||||
size="S"
|
||||
icon={option.icon}
|
||||
quiet
|
||||
selected={option.value === value}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
Loading…
Reference in New Issue