MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Allow reordering columns to be the first column after sticky column

This commit is contained in:
Andrew Kingston 2023-03-01 19:34:26 +00:00
parent c7b8d78c98
commit 36f7d24d42
6 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend-core/src/components/sheet/HeaderRow.svelte
View File

@ -14,9 +14,9 @@
{#each $visibleColumns as column}
<SheetCell
header
reorderSource={$reorder.columnIdx === column.idx}
reorderTarget={$reorder.swapColumnIdx === column.idx}
on:mousedown={e => reorder.actions.startReordering(column.idx, e)}
reorderSource={$reorder.sourceColumn === column.name}
reorderTarget={$reorder.targetColumn === column.name}
on:mousedown={e => reorder.actions.startReordering(column.name, e)}
width={column.width}
left={column.left}
>

4
packages/frontend-core/src/components/sheet/NewRow.svelte
View File

@ -22,8 +22,8 @@
on:click={() => addRow(column)}
width={column.width}
left={column.left}
reorderSource={$reorder.columnIdx === column.idx}
reorderTarget={$reorder.swapColumnIdx === column.idx}
reorderSource={$reorder.sourceColumn === column.name}
reorderTarget={$reorder.targetColumn === column.name}
/>
{/each}
</div>

4
packages/frontend-core/src/components/sheet/SheetRow.svelte
View File

@ -25,8 +25,8 @@
{rowSelected}
{rowHovered}
selected={$selectedCellId === cellIdx}
reorderSource={$reorder.columnIdx === column.idx}
reorderTarget={$reorder.swapColumnIdx === column.idx}
reorderSource={$reorder.sourceColumn === column.name}
reorderTarget={$reorder.targetColumn === column.name}
on:click={() => ($selectedCellId = cellIdx)}
width={column.width}
left={column.left}

1
packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte
View File

@ -89,7 +89,6 @@
<style>
div {
overflow: hidden;
min-width: 100%;
min-height: 100%;
}

4
packages/frontend-core/src/components/sheet/StickyColumn.svelte
View File

@ -14,6 +14,7 @@
selectedCellId,
hoveredRowId,
scroll,
reorder,
} = getContext("spreadsheet")
$: scrollLeft = $scroll.left
@ -66,6 +67,7 @@
sticky
width={$stickyColumn.width}
left={$stickyColumn.left}
reorderTarget={$reorder.targetColumn === $stickyColumn.name}
>
<Icon
size="S"
@ -110,6 +112,7 @@
on:click={() => ($selectedCellId = cellIdx)}
width={$stickyColumn.width}
left="40"
reorderTarget={$reorder.targetColumn === $stickyColumn.name}
>
<svelte:component
this={getCellRenderer($stickyColumn)}
@ -139,6 +142,7 @@
on:click={addRow}
width={$stickyColumn.width}
rowHovered={$hoveredRowId === "new"}
reorderTarget={$reorder.targetColumn === $stickyColumn.name}
/>
{/if}
</div>

54
packages/frontend-core/src/components/sheet/stores/reorder.js
View File

@ -1,29 +1,39 @@
import { get, writable } from "svelte/store"
export const createReorderStores = context => {
const { columns, rand, scroll, bounds } = context
const { columns, rand, scroll, bounds, stickyColumn } = context
const reorderInitialState = {
columnIdx: null,
swapColumnIdx: null,
sourceColumn: null,
targetColumn: null,
breakpoints: [],
initialMouseX: null,
}
const reorder = writable(reorderInitialState)
// Callback when dragging on a colum header and starting reordering
const startReordering = (columnIdx, e) => {
const startReordering = (column, e) => {
const $columns = get(columns)
const $bounds = get(bounds)
const $scroll = get(scroll)
const $stickyColumn = get(stickyColumn)
// Generate new breakpoints for the current columns
let breakpoints = $columns.map(col => col.left + col.width)
let breakpoints = $columns.map(col => ({
x: col.left + col.width,
column: col.name,
}))
if ($stickyColumn) {
breakpoints.unshift({
x: 0,
column: $stickyColumn.name,
})
}
// Update state
reorder.set({
columnIdx,
sourceColumn: column,
targetColumn: null,
breakpoints,
swapColumnIdx: null,
initialMouseX: e.clientX,
scrollLeft: $scroll.left,
sheetLeft: $bounds.left,
@ -41,26 +51,23 @@ export const createReorderStores = context => {
// Callback when moving the mouse when reordering columns
const onReorderMouseMove = e => {
const $reorder = get(reorder)
if ($reorder.columnIdx == null) {
return
}
// Compute the closest breakpoint to the current position
let swapColumnIdx
let targetColumn
let minDistance = Number.MAX_SAFE_INTEGER
const mouseX = e.clientX - $reorder.sheetLeft + $reorder.scrollLeft
$reorder.breakpoints.forEach((point, idx) => {
const distance = Math.abs(point - mouseX)
$reorder.breakpoints.forEach(point => {
const distance = Math.abs(point.x - mouseX)
if (distance < minDistance) {
minDistance = distance
swapColumnIdx = idx
targetColumn = point.column
}
})
if (swapColumnIdx !== $reorder.swapColumnIdx) {
if (targetColumn !== $reorder.targetColumn) {
reorder.update(state => ({
...state,
swapColumnIdx: swapColumnIdx,
targetColumn,
}))
}
}
@ -68,14 +75,17 @@ export const createReorderStores = context => {
// Callback when stopping reordering columns
const stopReordering = () => {
// Swap position of columns
let { columnIdx, swapColumnIdx } = get(reorder)
swapColumnIdx++
const $columns = get(columns)
let { sourceColumn, targetColumn } = get(reorder)
let sourceIdx = $columns.findIndex(x => x.name === sourceColumn)
let targetIdx = $columns.findIndex(x => x.name === targetColumn)
targetIdx++
columns.update(state => {
const removed = state.splice(columnIdx, 1)
if (--swapColumnIdx < columnIdx) {
swapColumnIdx++
const removed = state.splice(sourceIdx, 1)
if (--targetIdx < sourceIdx) {
targetIdx++
}
state.splice(swapColumnIdx, 0, removed[0])
state.splice(targetIdx, 0, removed[0])
let offset = 0
return state.map((col, idx) => {
const newCol = {