Add readonly option in view columns
This commit is contained in:
parent
466a365ac1
commit
896c262c94
|
@ -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 />
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue