diff --git a/packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte b/packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte
index 18e3538ad0..3b0c4e17ec 100644
--- a/packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte
@@ -9,7 +9,7 @@
let editColumnModal
const updateColumns = () => {
- rows.actions.refreshTableDefinition()
+ rows.actions.refreshData()
}
const editColumn = column => {
diff --git a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
index a799a70859..5f0e4655fc 100644
--- a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
@@ -47,7 +47,6 @@
{/if}
-
{#if selectedUser && !focused}
{selectedUser.label}
@@ -72,6 +71,8 @@
position: relative;
width: 0;
}
+
+ /* Cell border */
.cell.focused:after,
.cell.error:after,
.cell.selected-other:not(.focused):after {
@@ -86,7 +87,20 @@
border-radius: 2px;
box-sizing: border-box;
}
- .cell:hover {
+
+ /* Cell border for cells with labels */
+ .cell.error:after,
+ .cell.selected-other:not(.focused):after {
+ border-radius: 0 2px 2px 2px;
+ }
+ .cell[data-row="0"].error:after,
+ .cell[data-row="0"].selected-other:not(.focused):after {
+ border-radius: 2px 2px 2px 0;
+ }
+
+ /* Cell z-index */
+ .cell.error,
+ .cell.selected-other:not(.focused) {
z-index: 1;
}
.cell.focused {
@@ -96,13 +110,7 @@
border-color: var(--spectrum-global-color-blue-400);
}
.cell.error:after {
- border-color: var(--spectrum-global-color-red-400);
- }
- .cell.selected-other:not(.focused) {
- z-index: 1;
- }
- .cell.selected-other:not(.focused):after {
- border-color: var(--spectrum-global-color-red-400);
+ border-color: var(--spectrum-global-color-red-500);
}
.cell:not(.focused) {
user-select: none;
@@ -134,16 +142,15 @@
height: calc(var(--row-height) + 2px);
}
- /* Other user email */
+ /* Label for additional text */
.label {
position: absolute;
bottom: 100%;
left: 0;
- margin: 0 0 -2px 0;
padding: 1px 4px 3px 4px;
background: var(--user-color);
- border-radius: 2px;
- display: none;
+ border-radius: 2px 2px 0 0;
+ display: block;
color: white;
font-size: 12px;
font-weight: 600;
@@ -158,15 +165,8 @@
top: 100%;
border-radius: 0 2px 2px 2px;
padding: 2px 4px 2px 4px;
- margin: -2px 0 0 0;
- }
- .cell:hover .label {
- display: block;
}
.error .label {
- background: var(--spectrum-global-color-red-400);
- }
- .error.focused .label {
- display: block;
+ background: var(--spectrum-global-color-red-500);
}
diff --git a/packages/frontend-core/src/components/sheet/stores/rows.js b/packages/frontend-core/src/components/sheet/stores/rows.js
index 7d10a98910..f99a3e7611 100644
--- a/packages/frontend-core/src/components/sheet/stores/rows.js
+++ b/packages/frontend-core/src/components/sheet/stores/rows.js
@@ -80,6 +80,7 @@ export const deriveStores = context => {
// Reset everything when table ID changes
let unsubscribe = null
+ let lastResetKey = null
tableId.subscribe($tableId => {
// Unsub from previous fetch if one exists
unsubscribe?.()
@@ -109,7 +110,8 @@ export const deriveStores = context => {
// Subscribe to changes of this fetch model
unsubscribe = newFetch.subscribe($fetch => {
if ($fetch.loaded && !$fetch.loading) {
- const resetRows = $fetch.pageNumber === 0
+ const resetRows = $fetch.resetKey !== lastResetKey
+ lastResetKey = $fetch.resetKey
// Reset scroll state when data changes
if (!get(instanceLoaded)) {
@@ -211,6 +213,7 @@ export const deriveStores = context => {
}
}
+ // Duplicates a row, inserting the duplicate row after the existing one
const duplicateRow = async row => {
let clone = { ...row }
delete clone._id
@@ -313,10 +316,10 @@ export const deriveStores = context => {
}
return state.slice()
})
- rowChangeCache.update(state => ({
- ...state,
- [rowId]: null,
- }))
+ rowChangeCache.update(state => {
+ delete state[rowId]
+ return state
+ })
} catch (error) {
handleValidationError(rowId, error)
}
@@ -391,11 +394,11 @@ export const deriveStores = context => {
// Wipe the row change cache when changing row
previousFocusedRowId.subscribe(id => {
- if (!get(inProgressChanges)[id]) {
- rowChangeCache.update(state => ({
- ...state,
- [id]: null,
- }))
+ if (id && !get(inProgressChanges)[id]) {
+ rowChangeCache.update(state => {
+ delete state[id]
+ return state
+ })
}
})
diff --git a/packages/frontend-core/src/fetch/DataFetch.js b/packages/frontend-core/src/fetch/DataFetch.js
index 6bf453a6dd..657dae096f 100644
--- a/packages/frontend-core/src/fetch/DataFetch.js
+++ b/packages/frontend-core/src/fetch/DataFetch.js
@@ -56,6 +56,7 @@ export default class DataFetch {
pageNumber: 0,
cursor: null,
cursors: [],
+ resetKey: Math.random(),
})
// Merge options with their default values
@@ -185,6 +186,7 @@ export default class DataFetch {
info: page.info,
cursors: paginate && page.hasNextPage ? [null, page.cursor] : [null],
error: page.error,
+ resetKey: Math.random(),
}))
}