Split columns setting button/content
This commit is contained in:
Adria Navarro
parent
205a50156b
commit
3685c6dbe5
|
|
@ -1,95 +1,17 @@
|
||||||
<script>
|
<script>
|
||||||
import { getContext } from "svelte"
|
import { getContext } from "svelte"
|
||||||
import { ActionButton, Popover, Icon, notifications } from "@budibase/bbui"
|
import { ActionButton, Popover } from "@budibase/bbui"
|
||||||
import { getColumnIcon } from "../lib/utils"
|
import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
|
||||||
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
|
|
||||||
import { helpers } from "@budibase/shared-core"
|
|
||||||
|
|
||||||
export let allowViewReadonlyColumns = false
|
export let allowViewReadonlyColumns = false
|
||||||
|
|
||||||
const { columns, datasource, dispatch } = getContext("grid")
|
const { columns } = getContext("grid")
|
||||||
|
|
||||||
let open = false
|
let open = false
|
||||||
let anchor
|
let anchor
|
||||||
|
|
||||||
$: restrictedColumns = $columns.filter(col => !col.visible || col.readonly)
|
$: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
|
||||||
$: anyRestricted = restrictedColumns.length
|
|
||||||
$: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
|
$: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
|
||||||
|
|
||||||
const toggleColumn = async (column, permission) => {
|
|
||||||
const visible = permission !== PERMISSION_OPTIONS.HIDDEN
|
|
||||||
const readonly = permission === PERMISSION_OPTIONS.READONLY
|
|
||||||
|
|
||||||
await datasource.actions.addSchemaMutation(column.name, {
|
|
||||||
visible,
|
|
||||||
readonly,
|
|
||||||
})
|
|
||||||
try {
|
|
||||||
await datasource.actions.saveSchemaMutations()
|
|
||||||
} catch (e) {
|
|
||||||
notifications.error(e.message)
|
|
||||||
} finally {
|
|
||||||
await datasource.actions.resetSchemaMutations()
|
|
||||||
await datasource.actions.refreshDefinition()
|
|
||||||
}
|
|
||||||
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") {
|
|
||||||
options.push({
|
|
||||||
icon: "Visibility",
|
|
||||||
value: PERMISSION_OPTIONS.READONLY,
|
|
||||||
tooltip: allowViewReadonlyColumns
|
|
||||||
? requiredTooltip || "Read only"
|
|
||||||
: "Read only (premium feature)",
|
|
||||||
disabled: !allowViewReadonlyColumns || isRequired,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
options.push({
|
|
||||||
icon: "VisibilityOff",
|
|
||||||
value: PERMISSION_OPTIONS.HIDDEN,
|
|
||||||
disabled: c.primaryDisplay || isRequired,
|
|
||||||
tooltip:
|
|
||||||
(c.primaryDisplay && "Display column cannot be hidden") ||
|
|
||||||
requiredTooltip ||
|
|
||||||
"Hidden",
|
|
||||||
})
|
|
||||||
|
|
||||||
return { ...c, options }
|
|
||||||
})
|
|
||||||
|
|
||||||
function columnToPermissionOptions(column) {
|
|
||||||
if (!column.schema.visible) {
|
|
||||||
return PERMISSION_OPTIONS.HIDDEN
|
|
||||||
}
|
|
||||||
|
|
||||||
if (column.schema.readonly) {
|
|
||||||
return PERMISSION_OPTIONS.READONLY
|
|
||||||
}
|
|
||||||
|
|
||||||
return PERMISSION_OPTIONS.WRITABLE
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={anchor}>
|
<div bind:this={anchor}>
|
||||||
|
|
@ -106,51 +28,5 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Popover bind:open {anchor} align="left">
|
<Popover bind:open {anchor} align="left">
|
||||||
<div class="content">
|
<ColumnsSettingContent columns={$columns} {allowViewReadonlyColumns} />
|
||||||
<div class="columns">
|
|
||||||
{#each displayColumns as column}
|
|
||||||
<div class="column">
|
|
||||||
<Icon size="S" name={getColumnIcon(column)} />
|
|
||||||
<div class="column-label" title={column.label}>
|
|
||||||
{column.label}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ToggleActionButtonGroup
|
|
||||||
on:click={e => toggleColumn(column, e.detail)}
|
|
||||||
value={columnToPermissionOptions(column)}
|
|
||||||
options={column.options}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
||||||
<style>
|
|
||||||
.content {
|
|
||||||
padding: 12px 12px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.columns {
|
|
||||||
display: grid;
|
|
||||||
align-items: center;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
grid-row-gap: 8px;
|
|
||||||
grid-column-gap: 24px;
|
|
||||||
}
|
|
||||||
.columns :global(.spectrum-Switch) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.column {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.column-label {
|
|
||||||
min-width: 80px;
|
|
||||||
max-width: 200px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
<script>
|
||||||
|
import { getContext } from "svelte"
|
||||||
|
import { Icon, notifications } from "@budibase/bbui"
|
||||||
|
import { getColumnIcon } from "../lib/utils"
|
||||||
|
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
|
||||||
|
import { helpers } from "@budibase/shared-core"
|
||||||
|
|
||||||
|
export let allowViewReadonlyColumns = false
|
||||||
|
|
||||||
|
const { columns, datasource, dispatch } = getContext("grid")
|
||||||
|
|
||||||
|
const toggleColumn = async (column, permission) => {
|
||||||
|
const visible = permission !== PERMISSION_OPTIONS.HIDDEN
|
||||||
|
const readonly = permission === PERMISSION_OPTIONS.READONLY
|
||||||
|
|
||||||
|
await datasource.actions.addSchemaMutation(column.name, {
|
||||||
|
visible,
|
||||||
|
readonly,
|
||||||
|
})
|
||||||
|
try {
|
||||||
|
await datasource.actions.saveSchemaMutations()
|
||||||
|
} catch (e) {
|
||||||
|
notifications.error(e.message)
|
||||||
|
} finally {
|
||||||
|
await datasource.actions.resetSchemaMutations()
|
||||||
|
await datasource.actions.refreshDefinition()
|
||||||
|
}
|
||||||
|
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") {
|
||||||
|
options.push({
|
||||||
|
icon: "Visibility",
|
||||||
|
value: PERMISSION_OPTIONS.READONLY,
|
||||||
|
tooltip: allowViewReadonlyColumns
|
||||||
|
? requiredTooltip || "Read only"
|
||||||
|
: "Read only (premium feature)",
|
||||||
|
disabled: !allowViewReadonlyColumns || isRequired,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
options.push({
|
||||||
|
icon: "VisibilityOff",
|
||||||
|
value: PERMISSION_OPTIONS.HIDDEN,
|
||||||
|
disabled: c.primaryDisplay || isRequired,
|
||||||
|
tooltip:
|
||||||
|
(c.primaryDisplay && "Display column cannot be hidden") ||
|
||||||
|
requiredTooltip ||
|
||||||
|
"Hidden",
|
||||||
|
})
|
||||||
|
|
||||||
|
return { ...c, options }
|
||||||
|
})
|
||||||
|
|
||||||
|
function columnToPermissionOptions(column) {
|
||||||
|
if (!column.schema.visible) {
|
||||||
|
return PERMISSION_OPTIONS.HIDDEN
|
||||||
|
}
|
||||||
|
|
||||||
|
if (column.schema.readonly) {
|
||||||
|
return PERMISSION_OPTIONS.READONLY
|
||||||
|
}
|
||||||
|
|
||||||
|
return PERMISSION_OPTIONS.WRITABLE
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="columns">
|
||||||
|
{#each displayColumns as column}
|
||||||
|
<div class="column">
|
||||||
|
<Icon size="S" name={getColumnIcon(column)} />
|
||||||
|
<div class="column-label" title={column.label}>
|
||||||
|
{column.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ToggleActionButtonGroup
|
||||||
|
on:click={e => toggleColumn(column, e.detail)}
|
||||||
|
value={columnToPermissionOptions(column)}
|
||||||
|
options={column.options}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
padding: 12px 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.columns {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
grid-row-gap: 8px;
|
||||||
|
grid-column-gap: 24px;
|
||||||
|
}
|
||||||
|
.columns :global(.spectrum-Switch) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.column-label {
|
||||||
|
min-width: 80px;
|
||||||
|
max-width: 200px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue