Add readonly option in view columns

This commit is contained in:
Adria Navarro 2024-05-30 10:52:17 +02:00
parent 466a365ac1
commit 896c262c94
3 changed files with 33 additions and 12 deletions

View File

@ -28,6 +28,7 @@
showAvatars={false} showAvatars={false}
on:updatedatasource={handleGridViewUpdate} on:updatedatasource={handleGridViewUpdate}
isCloud={$admin.cloud} isCloud={$admin.cloud}
allowReadonlyColumns
> >
<svelte:fragment slot="filter"> <svelte:fragment slot="filter">
<GridFilterButton /> <GridFilterButton />

View File

@ -1,9 +1,11 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { ActionButton, Popover, Icon } from "@budibase/bbui" import { ActionButton, Popover, Icon, notifications } from "@budibase/bbui"
import { getColumnIcon } from "../lib/utils" import { getColumnIcon } from "../lib/utils"
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte" import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
export let allowReadonlyColumns = false
const { columns, datasource, stickyColumn, dispatch } = getContext("grid") const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
let open = false let open = false
@ -14,9 +16,14 @@
const toggleColumn = async (column, permission) => { const toggleColumn = async (column, permission) => {
const visible = permission !== PERMISSION_OPTIONS.HIDDEN const visible = permission !== PERMISSION_OPTIONS.HIDDEN
const readonly = permission === PERMISSION_OPTIONS.READONLY
datasource.actions.addSchemaMutation(column.name, { visible }) datasource.actions.addSchemaMutation(column.name, { visible, readonly })
try {
await datasource.actions.saveSchemaMutations() await datasource.actions.saveSchemaMutations()
} catch (e) {
notifications.error(e.message)
}
dispatch(visible ? "show-column" : "hide-column") dispatch(visible ? "show-column" : "hide-column")
} }
@ -27,17 +34,29 @@
const PERMISSION_OPTIONS = { const PERMISSION_OPTIONS = {
WRITABLE: "writable", WRITABLE: "writable",
READONLY: "readonly",
HIDDEN: "hidden", HIDDEN: "hidden",
} }
const options = [ const EDIT_OPTION = {
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" }, icon: "Edit",
{ value: PERMISSION_OPTIONS.WRITABLE,
tooltip: "Writable",
}
const READONLY_OPTION = {
icon: "Visibility",
value: PERMISSION_OPTIONS.READONLY,
tooltip: "Read only",
}
const HIDDEN_OPTION = {
icon: "VisibilityOff", icon: "VisibilityOff",
value: PERMISSION_OPTIONS.HIDDEN, value: PERMISSION_OPTIONS.HIDDEN,
tooltip: "Hidden", tooltip: "Hidden",
}, }
]
$: options = allowReadonlyColumns
? [EDIT_OPTION, READONLY_OPTION, HIDDEN_OPTION]
: [EDIT_OPTION, HIDDEN_OPTION]
function columnToPermissionOptions(column) { function columnToPermissionOptions(column) {
if (!column.visible) { if (!column.visible) {

View File

@ -57,6 +57,7 @@
export let buttons = null export let buttons = null
export let darkMode export let darkMode
export let isCloud = null export let isCloud = null
export let allowReadonlyColumns = false
// Unique identifier for DOM nodes inside this instance // Unique identifier for DOM nodes inside this instance
const gridID = `grid-${Math.random().toString().slice(2)}` const gridID = `grid-${Math.random().toString().slice(2)}`
@ -153,7 +154,7 @@
<div class="controls-left"> <div class="controls-left">
<slot name="filter" /> <slot name="filter" />
<SortButton /> <SortButton />
<ColumnsSettingButton /> <ColumnsSettingButton {allowReadonlyColumns} />
<SizeButton /> <SizeButton />
<slot name="controls" /> <slot name="controls" />
</div> </div>