Merge branch 'master' into test-template-import
This commit is contained in:
commit
a271110805
12 changed files with 158 additions and 87 deletions
|
@ -57,6 +57,7 @@
|
|||
class:fullWidth
|
||||
class="spectrum-ActionButton spectrum-ActionButton--size{size}"
|
||||
class:active
|
||||
class:disabled
|
||||
{disabled}
|
||||
on:longPress
|
||||
on:click|preventDefault
|
||||
|
@ -109,19 +110,22 @@
|
|||
background: var(--spectrum-global-color-gray-300);
|
||||
border-color: var(--spectrum-global-color-gray-500);
|
||||
}
|
||||
.noPadding {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.spectrum-ActionButton--quiet {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.spectrum-ActionButton--quiet.is-selected {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
.noPadding {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.is-selected:not(.emphasized) .spectrum-Icon {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
.is-selected.disabled .spectrum-Icon {
|
||||
color: var(--spectrum-global-color-gray-500);
|
||||
}
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
import {
|
||||
decodeJSBinding,
|
||||
encodeJSBinding,
|
||||
processObjectSync,
|
||||
processStringSync,
|
||||
} from "@budibase/string-templates"
|
||||
import { readableToRuntimeBinding } from "dataBinding"
|
||||
|
@ -153,13 +154,6 @@
|
|||
debouncedEval(expression, context, snippets)
|
||||
}
|
||||
|
||||
const getBindingValue = (binding, context, snippets) => {
|
||||
const js = `return $("${binding.runtimeBinding}")`
|
||||
const hbs = encodeJSBinding(js)
|
||||
const res = processStringSync(hbs, { ...context, snippets })
|
||||
return JSON.stringify(res, null, 2)
|
||||
}
|
||||
|
||||
const highlightJSON = json => {
|
||||
return formatHighlight(json, {
|
||||
keyColor: "#e06c75",
|
||||
|
@ -172,11 +166,27 @@
|
|||
}
|
||||
|
||||
const enrichBindings = (bindings, context, snippets) => {
|
||||
return bindings.map(binding => {
|
||||
// Create a single big array to enrich in one go
|
||||
const bindingStrings = bindings.map(binding => {
|
||||
if (binding.runtimeBinding.startsWith('trim "')) {
|
||||
// Account for nasty hardcoded HBS bindings for roles, for legacy
|
||||
// compatibility
|
||||
return `{{ ${binding.runtimeBinding} }}`
|
||||
} else {
|
||||
return `{{ literal ${binding.runtimeBinding} }}`
|
||||
}
|
||||
})
|
||||
const bindingEvauations = processObjectSync(bindingStrings, {
|
||||
...context,
|
||||
snippets,
|
||||
})
|
||||
|
||||
// Enrich bindings with evaluations and highlighted HTML
|
||||
return bindings.map((binding, idx) => {
|
||||
if (!context) {
|
||||
return binding
|
||||
}
|
||||
const value = getBindingValue(binding, context, snippets)
|
||||
const value = JSON.stringify(bindingEvauations[idx], null, 2)
|
||||
return {
|
||||
...binding,
|
||||
value,
|
||||
|
|
|
@ -75,13 +75,6 @@
|
|||
if (!context || !binding.value || binding.value === "") {
|
||||
return
|
||||
}
|
||||
|
||||
// Roles have always been broken for JS. We need to exclude them from
|
||||
// showing a popover as it will show "Error while executing JS".
|
||||
if (binding.category === "Role") {
|
||||
return
|
||||
}
|
||||
|
||||
stopHidingPopover()
|
||||
popoverAnchor = target
|
||||
hoverTarget = {
|
||||
|
|
|
@ -127,7 +127,7 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
label {
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
label.hidden {
|
||||
padding: 0;
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
|
||||
import { ActionButton, Popover, Icon } from "@budibase/bbui"
|
||||
import { getColumnIcon } from "../lib/utils"
|
||||
import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
|
||||
|
||||
const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
|
||||
|
||||
|
@ -11,31 +12,45 @@
|
|||
$: anyHidden = $columns.some(col => !col.visible)
|
||||
$: text = getText($columns)
|
||||
|
||||
const toggleColumn = async (column, visible) => {
|
||||
datasource.actions.addSchemaMutation(column.name, { visible })
|
||||
await datasource.actions.saveSchemaMutations()
|
||||
dispatch(visible ? "show-column" : "hide-column")
|
||||
}
|
||||
const toggleColumn = async (column, permission) => {
|
||||
const visible = permission !== PERMISSION_OPTIONS.HIDDEN
|
||||
|
||||
const toggleAll = async visible => {
|
||||
let mutations = {}
|
||||
$columns.forEach(column => {
|
||||
mutations[column.name] = { visible }
|
||||
})
|
||||
datasource.actions.addSchemaMutations(mutations)
|
||||
datasource.actions.addSchemaMutation(column.name, { visible })
|
||||
await datasource.actions.saveSchemaMutations()
|
||||
dispatch(visible ? "show-column" : "hide-column")
|
||||
}
|
||||
|
||||
const getText = columns => {
|
||||
const hidden = columns.filter(col => !col.visible).length
|
||||
return hidden ? `Hide columns (${hidden})` : "Hide columns"
|
||||
return hidden ? `Columns (${hidden} restricted)` : "Columns"
|
||||
}
|
||||
|
||||
const PERMISSION_OPTIONS = {
|
||||
WRITABLE: "writable",
|
||||
HIDDEN: "hidden",
|
||||
}
|
||||
|
||||
const options = [
|
||||
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
|
||||
{
|
||||
icon: "VisibilityOff",
|
||||
value: PERMISSION_OPTIONS.HIDDEN,
|
||||
tooltip: "Hidden",
|
||||
},
|
||||
]
|
||||
|
||||
function columnToPermissionOptions(column) {
|
||||
if (!column.visible) {
|
||||
return PERMISSION_OPTIONS.HIDDEN
|
||||
}
|
||||
|
||||
return PERMISSION_OPTIONS.WRITABLE
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={anchor}>
|
||||
<ActionButton
|
||||
icon="VisibilityOff"
|
||||
icon="ColumnSettings"
|
||||
quiet
|
||||
size="M"
|
||||
on:click={() => (open = !open)}
|
||||
|
@ -54,25 +69,25 @@
|
|||
<Icon size="S" name={getColumnIcon($stickyColumn)} />
|
||||
{$stickyColumn.label}
|
||||
</div>
|
||||
<Toggle disabled size="S" value={true} />
|
||||
|
||||
<ToggleActionButtonGroup
|
||||
disabled
|
||||
value={PERMISSION_OPTIONS.WRITABLE}
|
||||
{options}
|
||||
/>
|
||||
{/if}
|
||||
{#each $columns as column}
|
||||
<div class="column">
|
||||
<Icon size="S" name={getColumnIcon(column)} />
|
||||
{column.label}
|
||||
</div>
|
||||
<Toggle
|
||||
size="S"
|
||||
value={column.visible}
|
||||
on:change={e => toggleColumn(column, e.detail)}
|
||||
disabled={column.primaryDisplay}
|
||||
<ToggleActionButtonGroup
|
||||
on:click={e => toggleColumn(column, e.detail)}
|
||||
value={columnToPermissionOptions(column)}
|
||||
{options}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<ActionButton on:click={() => toggleAll(true)}>Show all</ActionButton>
|
||||
<ActionButton on:click={() => toggleAll(false)}>Hide all</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
|
||||
|
@ -83,15 +98,11 @@
|
|||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
.columns {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 8px;
|
||||
}
|
||||
.columns :global(.spectrum-Switch) {
|
||||
margin-right: 0;
|
|
@ -0,0 +1,43 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
import { ActionButton, AbsTooltip, TooltipType } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
export let options
|
||||
export let disabled
|
||||
</script>
|
||||
|
||||
<div class="permissionPicker">
|
||||
{#each options as option}
|
||||
<AbsTooltip text={option.tooltip} type={TooltipType.Info}>
|
||||
<ActionButton
|
||||
on:click={() => dispatch("click", option.value)}
|
||||
{disabled}
|
||||
size="S"
|
||||
icon={option.icon}
|
||||
quiet
|
||||
selected={option.value === value}
|
||||
noPadding
|
||||
/>
|
||||
</AbsTooltip>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.permissionPicker {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
padding-left: calc(var(--spacing-xl) * 2);
|
||||
}
|
||||
|
||||
.permissionPicker :global(.spectrum-Icon) {
|
||||
width: 14px;
|
||||
}
|
||||
.permissionPicker :global(.spectrum-ActionButton) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
</style>
|
|
@ -16,9 +16,10 @@
|
|||
scroll,
|
||||
isDragging,
|
||||
buttonColumnWidth,
|
||||
showVScrollbar,
|
||||
} = getContext("grid")
|
||||
|
||||
let measureContainer
|
||||
let container
|
||||
|
||||
$: buttons = $props.buttons?.slice(0, 3) || []
|
||||
$: columnsWidth = $visibleColumns.reduce(
|
||||
|
@ -39,7 +40,7 @@
|
|||
const width = entries?.[0]?.contentRect?.width ?? 0
|
||||
buttonColumnWidth.set(width)
|
||||
})
|
||||
observer.observe(measureContainer)
|
||||
observer.observe(container)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
@ -50,7 +51,7 @@
|
|||
class:hidden={$buttonColumnWidth === 0}
|
||||
>
|
||||
<div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
|
||||
<GridScrollWrapper scrollVertically attachHandlers>
|
||||
<GridScrollWrapper scrollVertically attachHandlers bind:ref={container}>
|
||||
{#each $renderedRows as row}
|
||||
{@const rowSelected = !!$selectedRows[row._id]}
|
||||
{@const rowHovered = $hoveredRowId === row._id}
|
||||
|
@ -59,7 +60,6 @@
|
|||
class="row"
|
||||
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
|
||||
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
|
||||
bind:this={measureContainer}
|
||||
>
|
||||
<GridCell
|
||||
width="auto"
|
||||
|
@ -67,7 +67,7 @@
|
|||
selected={rowSelected}
|
||||
highlighted={rowHovered || rowFocused}
|
||||
>
|
||||
<div class="buttons">
|
||||
<div class="buttons" class:offset={$showVScrollbar}>
|
||||
{#each buttons as button}
|
||||
<Button
|
||||
newStyles
|
||||
|
@ -121,6 +121,9 @@
|
|||
gap: var(--cell-padding);
|
||||
height: inherit;
|
||||
}
|
||||
.buttons.offset {
|
||||
padding-right: calc(var(--cell-padding) + 2 * var(--scroll-bar-size) - 2px);
|
||||
}
|
||||
.buttons :global(.spectrum-Button-Label) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
import UserAvatars from "./UserAvatars.svelte"
|
||||
import KeyboardManager from "../overlays/KeyboardManager.svelte"
|
||||
import SortButton from "../controls/SortButton.svelte"
|
||||
import HideColumnsButton from "../controls/HideColumnsButton.svelte"
|
||||
import ColumnsSettingButton from "../controls/ColumnsSettingButton.svelte"
|
||||
import SizeButton from "../controls/SizeButton.svelte"
|
||||
import NewRow from "./NewRow.svelte"
|
||||
import { createGridWebsocket } from "../lib/websocket"
|
||||
|
@ -29,6 +29,7 @@
|
|||
Padding,
|
||||
SmallRowHeight,
|
||||
ControlsHeight,
|
||||
ScrollBarSize,
|
||||
} from "../lib/constants"
|
||||
|
||||
export let API = null
|
||||
|
@ -145,14 +146,14 @@
|
|||
class:quiet
|
||||
on:mouseenter={() => gridFocused.set(true)}
|
||||
on:mouseleave={() => gridFocused.set(false)}
|
||||
style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px;"
|
||||
style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-overflow:{MaxCellRenderOverflow}px; --content-lines:{$contentLines}; --min-height:{$minHeight}px; --controls-height:{ControlsHeight}px; --scroll-bar-size:{ScrollBarSize}px;"
|
||||
>
|
||||
{#if showControls}
|
||||
<div class="controls">
|
||||
<div class="controls-left">
|
||||
<slot name="filter" />
|
||||
<SortButton />
|
||||
<HideColumnsButton />
|
||||
<ColumnsSettingButton />
|
||||
<SizeButton />
|
||||
<slot name="controls" />
|
||||
</div>
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
export let scrollVertically = false
|
||||
export let scrollHorizontally = false
|
||||
export let attachHandlers = false
|
||||
export let ref
|
||||
|
||||
// Used for tracking touch events
|
||||
let initialTouchX
|
||||
|
@ -109,7 +110,7 @@
|
|||
on:touchmove={attachHandlers ? handleTouchMove : null}
|
||||
on:click|self={() => ($focusedCellId = null)}
|
||||
>
|
||||
<div {style} class="inner">
|
||||
<div {style} class="inner" bind:this={ref}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -119,7 +119,7 @@
|
|||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="v-scrollbar"
|
||||
style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
|
||||
style="top:{barTop}px; height:{barHeight}px;"
|
||||
on:mousedown={startVDragging}
|
||||
on:touchstart={startVDragging}
|
||||
class:dragging={isDraggingV}
|
||||
|
@ -129,7 +129,7 @@
|
|||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="h-scrollbar"
|
||||
style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
|
||||
style="left:{barLeft}px; width:{barWidth}px;"
|
||||
on:mousedown={startHDragging}
|
||||
on:touchstart={startHDragging}
|
||||
class:dragging={isDraggingH}
|
||||
|
@ -149,11 +149,11 @@
|
|||
opacity: 1;
|
||||
}
|
||||
.v-scrollbar {
|
||||
width: var(--size);
|
||||
right: var(--size);
|
||||
width: var(--scroll-bar-size);
|
||||
right: var(--scroll-bar-size);
|
||||
}
|
||||
.h-scrollbar {
|
||||
height: var(--size);
|
||||
bottom: var(--size);
|
||||
height: var(--scroll-bar-size);
|
||||
bottom: var(--scroll-bar-size);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -404,8 +404,11 @@ export const createActions = context => {
|
|||
|
||||
// Save change
|
||||
try {
|
||||
// Mark as in progress
|
||||
inProgressChanges.update(state => ({ ...state, [rowId]: true }))
|
||||
// Increment change count for this row
|
||||
inProgressChanges.update(state => ({
|
||||
...state,
|
||||
[rowId]: (state[rowId] || 0) + 1,
|
||||
}))
|
||||
|
||||
// Update row
|
||||
const changes = get(rowChangeCache)[rowId]
|
||||
|
@ -423,17 +426,25 @@ export const createActions = context => {
|
|||
await refreshRow(saved.id)
|
||||
}
|
||||
|
||||
// Wipe row change cache now that we've saved the row
|
||||
// Wipe row change cache for any values which have been saved
|
||||
const liveChanges = get(rowChangeCache)[rowId]
|
||||
rowChangeCache.update(state => {
|
||||
delete state[rowId]
|
||||
Object.keys(changes || {}).forEach(key => {
|
||||
if (changes[key] === liveChanges?.[key]) {
|
||||
delete state[rowId][key]
|
||||
}
|
||||
})
|
||||
return state
|
||||
})
|
||||
} catch (error) {
|
||||
handleValidationError(rowId, error)
|
||||
}
|
||||
|
||||
// Mark as completed
|
||||
inProgressChanges.update(state => ({ ...state, [rowId]: false }))
|
||||
// Decrement change count for this row
|
||||
inProgressChanges.update(state => ({
|
||||
...state,
|
||||
[rowId]: (state[rowId] || 1) - 1,
|
||||
}))
|
||||
}
|
||||
|
||||
// Updates a value of a row
|
||||
|
@ -553,7 +564,6 @@ export const initialise = context => {
|
|||
previousFocusedCellId,
|
||||
rows,
|
||||
validation,
|
||||
focusedCellId,
|
||||
} = context
|
||||
|
||||
// Wipe the row change cache when changing row
|
||||
|
@ -571,20 +581,12 @@ export const initialise = context => {
|
|||
if (!id) {
|
||||
return
|
||||
}
|
||||
// Stop if we changed row
|
||||
const split = parseCellID(id)
|
||||
const oldRowId = split.id
|
||||
const oldColumn = split.field
|
||||
const { id: newRowId } = parseCellID(get(focusedCellId))
|
||||
if (oldRowId !== newRowId) {
|
||||
return
|
||||
}
|
||||
// Otherwise we just changed cell in the same row
|
||||
const hasChanges = oldColumn in (get(rowChangeCache)[oldRowId] || {})
|
||||
const hasErrors = validation.actions.rowHasErrors(oldRowId)
|
||||
const isSavingChanges = get(inProgressChanges)[oldRowId]
|
||||
if (oldRowId && !hasErrors && hasChanges && !isSavingChanges) {
|
||||
await rows.actions.applyRowChanges(oldRowId)
|
||||
const { id: rowId, field } = parseCellID(id)
|
||||
const hasChanges = field in (get(rowChangeCache)[rowId] || {})
|
||||
const hasErrors = validation.actions.rowHasErrors(rowId)
|
||||
const isSavingChanges = get(inProgressChanges)[rowId]
|
||||
if (rowId && !hasErrors && hasChanges && !isSavingChanges) {
|
||||
await rows.actions.applyRowChanges(rowId)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -109,6 +109,7 @@ export const initialise = context => {
|
|||
maxScrollTop,
|
||||
scrollLeft,
|
||||
maxScrollLeft,
|
||||
buttonColumnWidth,
|
||||
} = context
|
||||
|
||||
// Ensure scroll state never goes invalid, which can happen when changing
|
||||
|
@ -194,8 +195,10 @@ export const initialise = context => {
|
|||
|
||||
// Ensure column is not cutoff on right edge
|
||||
else {
|
||||
const $buttonColumnWidth = get(buttonColumnWidth)
|
||||
const rightEdge = column.left + column.width
|
||||
const rightBound = $bounds.width + $scroll.left - FocusedCellMinOffset
|
||||
const rightBound =
|
||||
$bounds.width + $scroll.left - FocusedCellMinOffset - $buttonColumnWidth
|
||||
delta = rightEdge - rightBound
|
||||
if (delta > 0) {
|
||||
scroll.update(state => ({
|
||||
|
|
Loading…
Reference in a new issue