Expose loading state of sheet and improve column highlighting logic

This commit is contained in:
Andrew Kingston 2023-03-07 12:05:00 +00:00
parent df757ce09b
commit 0e9fc297fb
4 changed files with 13 additions and 12 deletions

View File

@ -2,11 +2,13 @@
import CreateColumnButton from "../CreateColumnButton.svelte" import CreateColumnButton from "../CreateColumnButton.svelte"
import { getContext, onMount } from "svelte" import { getContext, onMount } from "svelte"
const { rows, columns, subscribe, filter } = getContext("sheet") const { rows, columns, subscribe, filter, loaded } = getContext("sheet")
let createColumnModal let createColumnModal
$: highlighted = !$filter.length && (!$rows.length || !$columns.length) $: hasCols = !$loaded || $columns.length
$: hasRows = !$loaded || $filter.length || $rows.length
$: highlighted = !hasRows || !hasCols
onMount(() => subscribe("add-column", createColumnModal.show)) onMount(() => subscribe("add-column", createColumnModal.show))
</script> </script>

View File

@ -3,10 +3,10 @@
import CreateEditRow from "../../modals/CreateEditRow.svelte" import CreateEditRow from "../../modals/CreateEditRow.svelte"
import { getContext } from "svelte" import { getContext } from "svelte"
const { rows, columns, filter } = getContext("sheet") const { rows, columns, filter, loaded } = getContext("sheet")
$: hasCols = !!$columns.length $: hasCols = !$loaded || $columns.length
$: hasRows = $rows.length || $filter.length $: hasRows = !$loaded || $filter.length || $rows.length
</script> </script>
<CreateRowButton <CreateRowButton

View File

@ -1,7 +1,7 @@
import { get, writable, derived } from "svelte/store" import { get, writable, derived } from "svelte/store"
export const createReorderStores = context => { export const createReorderStores = context => {
const { columns, rand, scroll, bounds, stickyColumn } = context const { columns, scroll, bounds, stickyColumn } = context
const reorderInitialState = { const reorderInitialState = {
sourceColumn: null, sourceColumn: null,
targetColumn: null, targetColumn: null,

View File

@ -10,14 +10,12 @@ export const createRowsStore = context => {
const schema = writable({}) const schema = writable({})
const table = writable(null) const table = writable(null)
const filter = writable([]) const filter = writable([])
const loaded = writable(false)
const sort = writable({ const sort = writable({
column: null, column: null,
order: null, order: null,
}) })
// Flag for whether this is the first time loading our fetch
let loaded = false
// Local cache of row IDs to speed up checking if a row exists // Local cache of row IDs to speed up checking if a row exists
let rowCacheMap = {} let rowCacheMap = {}
@ -37,7 +35,7 @@ export const createRowsStore = context => {
return null return null
} }
// Wipe state and fully hydrate next time our fetch returns data // Wipe state and fully hydrate next time our fetch returns data
loaded = false loaded.set(false)
// Create fetch and load initial data // Create fetch and load initial data
return fetchData({ return fetchData({
@ -63,9 +61,9 @@ export const createRowsStore = context => {
} }
$fetch.subscribe($$fetch => { $fetch.subscribe($$fetch => {
if ($$fetch.loaded) { if ($$fetch.loaded) {
if (!loaded) { if (!get(loaded)) {
// Hydrate initial data // Hydrate initial data
loaded = true loaded.set(true)
rowCacheMap = {} rowCacheMap = {}
rows.set([]) rows.set([])
} }
@ -273,5 +271,6 @@ export const createRowsStore = context => {
schema, schema,
sort, sort,
filter, filter,
loaded,
} }
} }