diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte index 8c66d9ecfc..b4940c8903 100644 --- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte +++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte @@ -2,16 +2,29 @@ import { getContext } from "svelte" import { ActionButton, Popover } from "@budibase/bbui" import ColumnsSettingContent from "./ColumnsSettingContent.svelte" + import { FieldPermissions } from "../../../constants" export let allowViewReadonlyColumns = false - const { columns } = getContext("grid") + const { columns, datasource } = getContext("grid") let open = false let anchor $: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns" + + $: permissions = + $datasource.type === "viewV2" + ? [ + FieldPermissions.WRITABLE, + FieldPermissions.READONLY, + FieldPermissions.HIDDEN, + ] + : [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN] + $: disabledPermissions = allowViewReadonlyColumns + ? [] + : [FieldPermissions.READONLY]
@@ -28,5 +41,9 @@
- + diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte index a967939bb3..e2d85f7945 100644 --- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte +++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte @@ -6,11 +6,22 @@ import { helpers } from "@budibase/shared-core" import { FieldType } from "@budibase/types" import { tables } from "stores/builder" + import { FieldPermissions } from "../../../constants" - export let allowViewReadonlyColumns + export let permissions = [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN] + export let disabledPermissions = [] export let columns const { datasource, dispatch } = getContext("grid") + $: permissionsObj = permissions.reduce( + (acc, c) => ({ + ...acc, + [c]: { + disabled: disabledPermissions.includes(c), + }, + }), + {} + ) $: allowRelationshipSchemas = true // TODO let relationshipPanelOpen = false @@ -18,8 +29,8 @@ let relationshipPanelColumns = [] const toggleColumn = async (column, permission) => { - const visible = permission !== PERMISSION_OPTIONS.HIDDEN - const readonly = permission === PERMISSION_OPTIONS.READONLY + const visible = permission !== FieldPermissions.HIDDEN + const readonly = permission === FieldPermissions.READONLY await datasource.actions.addSchemaMutation(column.name, { visible, @@ -36,60 +47,63 @@ dispatch(visible ? "show-column" : "hide-column") } - const PERMISSION_OPTIONS = { - WRITABLE: "writable", - READONLY: "readonly", - HIDDEN: "hidden", - } - $: displayColumns = columns.map(c => { const isRequired = helpers.schema.isRequired(c.schema.constraints) const requiredTooltip = isRequired && "Required columns must be writable" const editEnabled = - !isRequired || - columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE - const options = [ - { - icon: "Edit", - value: PERMISSION_OPTIONS.WRITABLE, - tooltip: (!editEnabled && requiredTooltip) || "Writable", - disabled: !editEnabled, - }, - ] - if ($datasource.type === "viewV2") { + !isRequired || columnToPermissionOptions(c) !== FieldPermissions.WRITABLE + const options = [] + + if (permissionsObj[FieldPermissions.WRITABLE]) { options.push({ - icon: "Visibility", - value: PERMISSION_OPTIONS.READONLY, - tooltip: allowViewReadonlyColumns - ? requiredTooltip || "Read only" - : "Read only (premium feature)", - disabled: !allowViewReadonlyColumns || isRequired, + icon: "Edit", + value: FieldPermissions.WRITABLE, + tooltip: (!editEnabled && requiredTooltip) || "Writable", + disabled: + !editEnabled || permissionsObj[FieldPermissions.WRITABLE].disabled, }) } - options.push({ - icon: "VisibilityOff", - value: PERMISSION_OPTIONS.HIDDEN, - disabled: c.primaryDisplay || isRequired, - tooltip: - (c.primaryDisplay && "Display column cannot be hidden") || - requiredTooltip || - "Hidden", - }) + if (permissionsObj[FieldPermissions.READONLY]) { + options.push({ + icon: "Visibility", + value: FieldPermissions.READONLY, + tooltip: !permissionsObj[FieldPermissions.READONLY].disabled + ? requiredTooltip || "Read only" + : "Read only (premium feature)", + disabled: + permissionsObj[FieldPermissions.READONLY].disabled || isRequired, + }) + } + + if (permissionsObj[FieldPermissions.HIDDEN]) { + options.push({ + icon: "VisibilityOff", + value: FieldPermissions.HIDDEN, + disabled: + c.primaryDisplay || + isRequired || + permissionsObj[FieldPermissions.HIDDEN].disabled, + tooltip: + (c.primaryDisplay && "Display column cannot be hidden") || + requiredTooltip || + "Hidden", + }) + } return { ...c, options } }) function columnToPermissionOptions(column) { if (column.schema.visible === false) { - return PERMISSION_OPTIONS.HIDDEN + return FieldPermissions.HIDDEN } if (column.schema.readonly) { - return PERMISSION_OPTIONS.READONLY + return FieldPermissions.READONLY } - return PERMISSION_OPTIONS.WRITABLE + return FieldPermissions.WRITABLE } function onRelationshipOpen(column, domElement) { @@ -109,6 +123,7 @@ schema: { ...column, visible: !!isPrimaryDisplay, + readonly: isPrimaryDisplay || column.readonly, }, } }) @@ -158,8 +173,8 @@ align="right-outside" > {/if} diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js index 22e5e8583a..a8397a9a6f 100644 --- a/packages/frontend-core/src/constants.js +++ b/packages/frontend-core/src/constants.js @@ -161,3 +161,9 @@ export const TypeIconMap = { export const OptionColours = [...new Array(12).keys()].map(idx => { return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, 0.3)` }) + +export const FieldPermissions = { + WRITABLE: "writable", + READONLY: "readonly", + HIDDEN: "hidden", +}