Ensure all sheet feature flags work as expected and fix multi row deletion
This commit is contained in:
parent
58141b5183
commit
dbf5bfe83d
6 changed files with 51 additions and 25 deletions
|
@ -6,6 +6,9 @@ let clickHandlers = []
|
||||||
*/
|
*/
|
||||||
const handleClick = event => {
|
const handleClick = event => {
|
||||||
// Ignore click if this is an ignored class
|
// Ignore click if this is an ignored class
|
||||||
|
if (event.target.closest('[data-ignore-click-outside="true"]')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
for (let className of ignoredClasses) {
|
for (let className of ignoredClasses) {
|
||||||
if (event.target.closest(className)) {
|
if (event.target.closest(className)) {
|
||||||
return
|
return
|
||||||
|
@ -29,7 +32,7 @@ const handleClick = event => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
document.documentElement.addEventListener("click", handleClick, true)
|
document.documentElement.addEventListener("click", handleClick, true)
|
||||||
document.documentElement.addEventListener("contextmenu", handleClick, true)
|
// document.documentElement.addEventListener("contextmenu", handleClick, true)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds or updates a click handler
|
* Adds or updates a click handler
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
import SheetCell from "./SheetCell.svelte"
|
import SheetCell from "./SheetCell.svelte"
|
||||||
import { getCellRenderer } from "../lib/renderers"
|
import { getCellRenderer } from "../lib/renderers"
|
||||||
|
|
||||||
const { rows, selectedCellId, menu, selectedCellAPI } = getContext("sheet")
|
const { rows, selectedCellId, menu, selectedCellAPI, config } =
|
||||||
|
getContext("sheet")
|
||||||
|
|
||||||
export let rowSelected
|
export let rowSelected
|
||||||
export let rowHovered
|
export let rowHovered
|
||||||
|
@ -22,10 +23,13 @@
|
||||||
let api
|
let api
|
||||||
let error
|
let error
|
||||||
|
|
||||||
|
// Determine if the cell is editable
|
||||||
|
$: readonly = column.schema.autocolumn || (!$config.allowEditRows && row._id)
|
||||||
|
|
||||||
// Build cell API
|
// Build cell API
|
||||||
$: cellAPI = {
|
$: cellAPI = {
|
||||||
...api,
|
...api,
|
||||||
isReadonly: () => !!column.schema.autocolumn,
|
isReadonly: () => readonly,
|
||||||
isRequired: () => !!column.schema.constraints?.presence,
|
isRequired: () => !!column.schema.constraints?.presence,
|
||||||
updateValue: value => {
|
updateValue: value => {
|
||||||
error = null
|
error = null
|
||||||
|
@ -80,7 +84,7 @@
|
||||||
schema={column.schema}
|
schema={column.schema}
|
||||||
{selected}
|
{selected}
|
||||||
onChange={cellAPI.updateValue}
|
onChange={cellAPI.updateValue}
|
||||||
readonly={column.schema.autocolumn}
|
{readonly}
|
||||||
{invert}
|
{invert}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -98,6 +98,7 @@
|
||||||
}
|
}
|
||||||
textarea.invert {
|
textarea.invert {
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
|
top: calc(100% + 1px);
|
||||||
}
|
}
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { getContext } from "svelte"
|
import { getContext } from "svelte"
|
||||||
|
|
||||||
const { selectedRows, rows } = getContext("sheet")
|
const { selectedRows, rows, config } = getContext("sheet")
|
||||||
|
|
||||||
let modal
|
let modal
|
||||||
|
|
||||||
|
@ -31,12 +31,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if selectedRowCount}
|
{#if selectedRowCount}
|
||||||
<div
|
<div class="delete-button" data-ignore-click-outside="true">
|
||||||
class="delete-button"
|
<ActionButton
|
||||||
on:click|stopPropagation
|
icon="Delete"
|
||||||
on:mousedown|stopPropagation={modal.show}
|
size="S"
|
||||||
|
on:click={modal.show}
|
||||||
|
disabled={!$config.allowEditRows}
|
||||||
>
|
>
|
||||||
<ActionButton icon="Delete" size="S">
|
|
||||||
Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
|
Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
</div>
|
</div>
|
||||||
|
@ -56,12 +57,16 @@
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.delete-button {
|
.delete-button :global(.spectrum-ActionButton:not(:disabled) *) {
|
||||||
}
|
|
||||||
.delete-button :global(.spectrum-ActionButton *) {
|
|
||||||
color: var(--spectrum-global-color-red-400);
|
color: var(--spectrum-global-color-red-400);
|
||||||
}
|
}
|
||||||
.delete-button :global(.spectrum-ActionButton) {
|
.delete-button :global(.spectrum-ActionButton:not(:disabled)) {
|
||||||
border-color: var(--spectrum-global-color-red-400);
|
border-color: var(--spectrum-global-color-red-400);
|
||||||
}
|
}
|
||||||
|
/*.delete-button.disabled :global(.spectrum-ActionButton *) {*/
|
||||||
|
/* color: var(--spectrum-global-color-gray-600);*/
|
||||||
|
/*}*/
|
||||||
|
/*.delete-button.disabled :global(.spectrum-ActionButton) {*/
|
||||||
|
/* border-color: var(--spectrum-global-color-gray-400);*/
|
||||||
|
/*}*/
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -36,6 +36,7 @@
|
||||||
export let allowAddColumns = true
|
export let allowAddColumns = true
|
||||||
export let allowEditColumns = true
|
export let allowEditColumns = true
|
||||||
export let allowExpandRows = true
|
export let allowExpandRows = true
|
||||||
|
export let allowEditRows = true
|
||||||
|
|
||||||
// Sheet constants
|
// Sheet constants
|
||||||
const cellHeight = 36
|
const cellHeight = 36
|
||||||
|
@ -50,6 +51,7 @@
|
||||||
allowAddColumns,
|
allowAddColumns,
|
||||||
allowEditColumns,
|
allowEditColumns,
|
||||||
allowExpandRows,
|
allowExpandRows,
|
||||||
|
allowEditRows,
|
||||||
})
|
})
|
||||||
|
|
||||||
// Build up spreadsheet context
|
// Build up spreadsheet context
|
||||||
|
@ -88,6 +90,7 @@
|
||||||
allowAddColumns,
|
allowAddColumns,
|
||||||
allowEditColumns,
|
allowEditColumns,
|
||||||
allowExpandRows,
|
allowExpandRows,
|
||||||
|
allowEditRows,
|
||||||
})
|
})
|
||||||
|
|
||||||
// Set context for children to consume
|
// Set context for children to consume
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { clickOutside, Menu, MenuItem, notifications } from "@budibase/bbui"
|
||||||
clickOutside,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
notifications,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import { getContext } from "svelte"
|
import { getContext } from "svelte"
|
||||||
|
|
||||||
const { selectedCellRow, menu, rows, columns, selectedCellId, stickyColumn } =
|
const {
|
||||||
getContext("sheet")
|
selectedCellRow,
|
||||||
|
menu,
|
||||||
|
rows,
|
||||||
|
columns,
|
||||||
|
selectedCellId,
|
||||||
|
stickyColumn,
|
||||||
|
config,
|
||||||
|
} = getContext("sheet")
|
||||||
|
|
||||||
$: style = makeStyle($menu)
|
$: style = makeStyle($menu)
|
||||||
|
|
||||||
|
@ -39,8 +41,16 @@
|
||||||
{#if $menu.visible}
|
{#if $menu.visible}
|
||||||
<div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
|
<div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
|
||||||
<Menu>
|
<Menu>
|
||||||
<MenuItem icon="Delete" on:click={deleteRow}>Delete row</MenuItem>
|
<MenuItem
|
||||||
<MenuItem icon="Duplicate" on:click={duplicate}>Duplicate row</MenuItem>
|
icon="Delete"
|
||||||
|
disabled={!$config.allowEditRows}
|
||||||
|
on:click={deleteRow}>Delete row</MenuItem
|
||||||
|
>
|
||||||
|
<MenuItem
|
||||||
|
icon="Duplicate"
|
||||||
|
disabled={!$config.allowAddRows}
|
||||||
|
on:click={duplicate}>Duplicate row</MenuItem
|
||||||
|
>
|
||||||
</Menu>
|
</Menu>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
Loading…
Reference in a new issue