@budibase/frontend-core 2.30.6 → 2.30.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@budibase/frontend-core",
|
|
3
|
-
"version": "2.30.
|
|
3
|
+
"version": "2.30.7",
|
|
4
4
|
"description": "Budibase frontend core libraries used in builder and client",
|
|
5
5
|
"author": "Budibase",
|
|
6
6
|
"license": "MPL-2.0",
|
|
7
7
|
"svelte": "src/index.js",
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@budibase/bbui": "2.30.
|
|
10
|
-
"@budibase/shared-core": "2.30.
|
|
11
|
-
"@budibase/types": "2.30.
|
|
9
|
+
"@budibase/bbui": "2.30.7",
|
|
10
|
+
"@budibase/shared-core": "2.30.7",
|
|
11
|
+
"@budibase/types": "2.30.7",
|
|
12
12
|
"dayjs": "^1.10.8",
|
|
13
13
|
"lodash": "4.17.21",
|
|
14
14
|
"shortid": "2.2.15",
|
|
15
15
|
"socket.io-client": "^4.7.5"
|
|
16
16
|
},
|
|
17
|
-
"gitHead": "
|
|
17
|
+
"gitHead": "f0b9414abd5385e53127ff91eb90b64ff4d3fb42"
|
|
18
18
|
}
|
|
@@ -1,95 +1,17 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { getContext } from "svelte"
|
|
3
|
-
import { ActionButton, Popover
|
|
4
|
-
import
|
|
5
|
-
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
|
|
6
|
-
import { helpers } from "@budibase/shared-core"
|
|
3
|
+
import { ActionButton, Popover } from "@budibase/bbui"
|
|
4
|
+
import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
|
|
7
5
|
|
|
8
6
|
export let allowViewReadonlyColumns = false
|
|
9
7
|
|
|
10
|
-
const { columns
|
|
8
|
+
const { columns } = getContext("grid")
|
|
11
9
|
|
|
12
10
|
let open = false
|
|
13
11
|
let anchor
|
|
14
12
|
|
|
15
|
-
$:
|
|
16
|
-
$: anyRestricted = restrictedColumns.length
|
|
13
|
+
$: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
|
|
17
14
|
$: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
|
|
18
|
-
|
|
19
|
-
const toggleColumn = async (column, permission) => {
|
|
20
|
-
const visible = permission !== PERMISSION_OPTIONS.HIDDEN
|
|
21
|
-
const readonly = permission === PERMISSION_OPTIONS.READONLY
|
|
22
|
-
|
|
23
|
-
await datasource.actions.addSchemaMutation(column.name, {
|
|
24
|
-
visible,
|
|
25
|
-
readonly,
|
|
26
|
-
})
|
|
27
|
-
try {
|
|
28
|
-
await datasource.actions.saveSchemaMutations()
|
|
29
|
-
} catch (e) {
|
|
30
|
-
notifications.error(e.message)
|
|
31
|
-
} finally {
|
|
32
|
-
await datasource.actions.resetSchemaMutations()
|
|
33
|
-
await datasource.actions.refreshDefinition()
|
|
34
|
-
}
|
|
35
|
-
dispatch(visible ? "show-column" : "hide-column")
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const PERMISSION_OPTIONS = {
|
|
39
|
-
WRITABLE: "writable",
|
|
40
|
-
READONLY: "readonly",
|
|
41
|
-
HIDDEN: "hidden",
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
$: displayColumns = $columns.map(c => {
|
|
45
|
-
const isRequired = helpers.schema.isRequired(c.schema.constraints)
|
|
46
|
-
const requiredTooltip = isRequired && "Required columns must be writable"
|
|
47
|
-
const editEnabled =
|
|
48
|
-
!isRequired ||
|
|
49
|
-
columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE
|
|
50
|
-
const options = [
|
|
51
|
-
{
|
|
52
|
-
icon: "Edit",
|
|
53
|
-
value: PERMISSION_OPTIONS.WRITABLE,
|
|
54
|
-
tooltip: (!editEnabled && requiredTooltip) || "Writable",
|
|
55
|
-
disabled: !editEnabled,
|
|
56
|
-
},
|
|
57
|
-
]
|
|
58
|
-
if ($datasource.type === "viewV2") {
|
|
59
|
-
options.push({
|
|
60
|
-
icon: "Visibility",
|
|
61
|
-
value: PERMISSION_OPTIONS.READONLY,
|
|
62
|
-
tooltip: allowViewReadonlyColumns
|
|
63
|
-
? requiredTooltip || "Read only"
|
|
64
|
-
: "Read only (premium feature)",
|
|
65
|
-
disabled: !allowViewReadonlyColumns || isRequired,
|
|
66
|
-
})
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
options.push({
|
|
70
|
-
icon: "VisibilityOff",
|
|
71
|
-
value: PERMISSION_OPTIONS.HIDDEN,
|
|
72
|
-
disabled: c.primaryDisplay || isRequired,
|
|
73
|
-
tooltip:
|
|
74
|
-
(c.primaryDisplay && "Display column cannot be hidden") ||
|
|
75
|
-
requiredTooltip ||
|
|
76
|
-
"Hidden",
|
|
77
|
-
})
|
|
78
|
-
|
|
79
|
-
return { ...c, options }
|
|
80
|
-
})
|
|
81
|
-
|
|
82
|
-
function columnToPermissionOptions(column) {
|
|
83
|
-
if (!column.schema.visible) {
|
|
84
|
-
return PERMISSION_OPTIONS.HIDDEN
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
if (column.schema.readonly) {
|
|
88
|
-
return PERMISSION_OPTIONS.READONLY
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
return PERMISSION_OPTIONS.WRITABLE
|
|
92
|
-
}
|
|
93
15
|
</script>
|
|
94
16
|
|
|
95
17
|
<div bind:this={anchor}>
|
|
@@ -106,51 +28,5 @@
|
|
|
106
28
|
</div>
|
|
107
29
|
|
|
108
30
|
<Popover bind:open {anchor} align="left">
|
|
109
|
-
<
|
|
110
|
-
<div class="columns">
|
|
111
|
-
{#each displayColumns as column}
|
|
112
|
-
<div class="column">
|
|
113
|
-
<Icon size="S" name={getColumnIcon(column)} />
|
|
114
|
-
<div class="column-label" title={column.label}>
|
|
115
|
-
{column.label}
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
<ToggleActionButtonGroup
|
|
119
|
-
on:click={e => toggleColumn(column, e.detail)}
|
|
120
|
-
value={columnToPermissionOptions(column)}
|
|
121
|
-
options={column.options}
|
|
122
|
-
/>
|
|
123
|
-
{/each}
|
|
124
|
-
</div>
|
|
125
|
-
</div>
|
|
31
|
+
<ColumnsSettingContent columns={$columns} {allowViewReadonlyColumns} />
|
|
126
32
|
</Popover>
|
|
127
|
-
|
|
128
|
-
<style>
|
|
129
|
-
.content {
|
|
130
|
-
padding: 12px 12px;
|
|
131
|
-
display: flex;
|
|
132
|
-
flex-direction: column;
|
|
133
|
-
gap: 12px;
|
|
134
|
-
}
|
|
135
|
-
.columns {
|
|
136
|
-
display: grid;
|
|
137
|
-
align-items: center;
|
|
138
|
-
grid-template-columns: 1fr auto;
|
|
139
|
-
grid-row-gap: 8px;
|
|
140
|
-
grid-column-gap: 24px;
|
|
141
|
-
}
|
|
142
|
-
.columns :global(.spectrum-Switch) {
|
|
143
|
-
margin-right: 0;
|
|
144
|
-
}
|
|
145
|
-
.column {
|
|
146
|
-
display: flex;
|
|
147
|
-
gap: 8px;
|
|
148
|
-
}
|
|
149
|
-
.column-label {
|
|
150
|
-
min-width: 80px;
|
|
151
|
-
max-width: 200px;
|
|
152
|
-
text-overflow: ellipsis;
|
|
153
|
-
white-space: nowrap;
|
|
154
|
-
overflow: hidden;
|
|
155
|
-
}
|
|
156
|
-
</style>
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getContext } from "svelte"
|
|
3
|
+
import { Icon, notifications } from "@budibase/bbui"
|
|
4
|
+
import { getColumnIcon } from "../lib/utils"
|
|
5
|
+
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
|
|
6
|
+
import { helpers } from "@budibase/shared-core"
|
|
7
|
+
|
|
8
|
+
export let allowViewReadonlyColumns = false
|
|
9
|
+
|
|
10
|
+
const { columns, datasource, dispatch } = getContext("grid")
|
|
11
|
+
|
|
12
|
+
const toggleColumn = async (column, permission) => {
|
|
13
|
+
const visible = permission !== PERMISSION_OPTIONS.HIDDEN
|
|
14
|
+
const readonly = permission === PERMISSION_OPTIONS.READONLY
|
|
15
|
+
|
|
16
|
+
await datasource.actions.addSchemaMutation(column.name, {
|
|
17
|
+
visible,
|
|
18
|
+
readonly,
|
|
19
|
+
})
|
|
20
|
+
try {
|
|
21
|
+
await datasource.actions.saveSchemaMutations()
|
|
22
|
+
} catch (e) {
|
|
23
|
+
notifications.error(e.message)
|
|
24
|
+
} finally {
|
|
25
|
+
await datasource.actions.resetSchemaMutations()
|
|
26
|
+
await datasource.actions.refreshDefinition()
|
|
27
|
+
}
|
|
28
|
+
dispatch(visible ? "show-column" : "hide-column")
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const PERMISSION_OPTIONS = {
|
|
32
|
+
WRITABLE: "writable",
|
|
33
|
+
READONLY: "readonly",
|
|
34
|
+
HIDDEN: "hidden",
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
$: displayColumns = $columns.map(c => {
|
|
38
|
+
const isRequired = helpers.schema.isRequired(c.schema.constraints)
|
|
39
|
+
const requiredTooltip = isRequired && "Required columns must be writable"
|
|
40
|
+
const editEnabled =
|
|
41
|
+
!isRequired ||
|
|
42
|
+
columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE
|
|
43
|
+
const options = [
|
|
44
|
+
{
|
|
45
|
+
icon: "Edit",
|
|
46
|
+
value: PERMISSION_OPTIONS.WRITABLE,
|
|
47
|
+
tooltip: (!editEnabled && requiredTooltip) || "Writable",
|
|
48
|
+
disabled: !editEnabled,
|
|
49
|
+
},
|
|
50
|
+
]
|
|
51
|
+
if ($datasource.type === "viewV2") {
|
|
52
|
+
options.push({
|
|
53
|
+
icon: "Visibility",
|
|
54
|
+
value: PERMISSION_OPTIONS.READONLY,
|
|
55
|
+
tooltip: allowViewReadonlyColumns
|
|
56
|
+
? requiredTooltip || "Read only"
|
|
57
|
+
: "Read only (premium feature)",
|
|
58
|
+
disabled: !allowViewReadonlyColumns || isRequired,
|
|
59
|
+
})
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
options.push({
|
|
63
|
+
icon: "VisibilityOff",
|
|
64
|
+
value: PERMISSION_OPTIONS.HIDDEN,
|
|
65
|
+
disabled: c.primaryDisplay || isRequired,
|
|
66
|
+
tooltip:
|
|
67
|
+
(c.primaryDisplay && "Display column cannot be hidden") ||
|
|
68
|
+
requiredTooltip ||
|
|
69
|
+
"Hidden",
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
return { ...c, options }
|
|
73
|
+
})
|
|
74
|
+
|
|
75
|
+
function columnToPermissionOptions(column) {
|
|
76
|
+
if (column.schema.visible === false) {
|
|
77
|
+
return PERMISSION_OPTIONS.HIDDEN
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
if (column.schema.readonly) {
|
|
81
|
+
return PERMISSION_OPTIONS.READONLY
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
return PERMISSION_OPTIONS.WRITABLE
|
|
85
|
+
}
|
|
86
|
+
</script>
|
|
87
|
+
|
|
88
|
+
<div class="content">
|
|
89
|
+
<div class="columns">
|
|
90
|
+
{#each displayColumns as column}
|
|
91
|
+
<div class="column">
|
|
92
|
+
<Icon size="S" name={getColumnIcon(column)} />
|
|
93
|
+
<div class="column-label" title={column.label}>
|
|
94
|
+
{column.label}
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<ToggleActionButtonGroup
|
|
98
|
+
on:click={e => toggleColumn(column, e.detail)}
|
|
99
|
+
value={columnToPermissionOptions(column)}
|
|
100
|
+
options={column.options}
|
|
101
|
+
/>
|
|
102
|
+
{/each}
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<style>
|
|
107
|
+
.content {
|
|
108
|
+
padding: 12px 12px;
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
gap: 12px;
|
|
112
|
+
}
|
|
113
|
+
.columns {
|
|
114
|
+
display: grid;
|
|
115
|
+
align-items: center;
|
|
116
|
+
grid-template-columns: 1fr auto;
|
|
117
|
+
grid-row-gap: 8px;
|
|
118
|
+
grid-column-gap: 24px;
|
|
119
|
+
}
|
|
120
|
+
.columns :global(.spectrum-Switch) {
|
|
121
|
+
margin-right: 0;
|
|
122
|
+
}
|
|
123
|
+
.column {
|
|
124
|
+
display: flex;
|
|
125
|
+
gap: 8px;
|
|
126
|
+
}
|
|
127
|
+
.column-label {
|
|
128
|
+
min-width: 80px;
|
|
129
|
+
max-width: 200px;
|
|
130
|
+
text-overflow: ellipsis;
|
|
131
|
+
white-space: nowrap;
|
|
132
|
+
overflow: hidden;
|
|
133
|
+
}
|
|
134
|
+
</style>
|