CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-13 07:53:31 +12:00
Code Issues Projects Releases Wiki Activity

Unify components

Browse source
This commit is contained in:
Adria Navarro 2024-05-29 15:31:25 +02:00
parent 4262532cb1
commit a689d82b66
2 changed files with 17 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
View file

@ -2,7 +2,6 @@
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")
@ -32,6 +31,12 @@
HIDDEN: "hidden",
}
const options = [
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
{ icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
{ icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
]
function columnToPermissionOptions(column) {
if (!column.visible) {
return PERMISSION_OPTIONS.HIDDEN
@ -73,15 +78,17 @@
<Icon size="S" name={getColumnIcon(column)} />
{column.label}
</div>
<ToggleActionButtonGroup
on:change={e => toggleColumn(column, e.detail)}
value={columnToPermissionOptions(column)}
options={[
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE },
{ icon: "Visibility", value: PERMISSION_OPTIONS.READONLY },
{ icon: "VisibilityOff", value: PERMISSION_OPTIONS.HIDDEN },
]}
/>
<div>
{#each options as option}
<ActionButton
on:click={() => toggleColumn(column, option.value)}
size="S"
icon={option.icon}
quiet
selected={option.value === columnToPermissionOptions(column)}
/>
{/each}
</div>
{/each}
</div>
</div>

25
packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
View file

@ -1,25 +0,0 @@
<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>