diff --git a/packages/tools/src/dbKeysLoader.ts b/packages/tools/src/dbKeysLoader.ts index 21be3681d..80c93c9c0 100644 --- a/packages/tools/src/dbKeysLoader.ts +++ b/packages/tools/src/dbKeysLoader.ts @@ -1,7 +1,7 @@ import _omit from 'lodash/omit'; import _sortBy from 'lodash/sortBy'; -const SHOW_INCREMENT = 100; +export const DB_KEYS_SHOW_INCREMENT = 100; export interface DbKeysNodeModelBase { text?: string; @@ -247,6 +247,20 @@ export function dbKeys_markNodeExpanded(tree: DbKeysTreeModel, root: string, isE }; } +export function dbKeys_showNextItems(tree: DbKeysTreeModel, root: string): DbKeysTreeModel { + const node = tree.dirStateByKey[root]; + return { + ...tree, + dirStateByKey: { + ...tree.dirStateByKey, + [root]: { + ...node, + visibleCount: (node?.visibleCount ?? DB_KEYS_SHOW_INCREMENT) + DB_KEYS_SHOW_INCREMENT, + }, + }, + }; +} + export function dbKeys_createNewModel(treeKeySeparator: string): DbKeysTreeModel { const root: DbKeysFolderNodeModel = { level: 0, @@ -265,7 +279,7 @@ export function dbKeys_createNewModel(treeKeySeparator: string): DbKeysTreeModel dirStateByKey: { '': { key: '', - visibleCount: SHOW_INCREMENT, + visibleCount: DB_KEYS_SHOW_INCREMENT, isExpanded: true, }, }, diff --git a/packages/web/src/widgets/DbKeysSubTree.svelte b/packages/web/src/widgets/DbKeysSubTree.svelte index 8da6fe199..078338c45 100644 --- a/packages/web/src/widgets/DbKeysSubTree.svelte +++ b/packages/web/src/widgets/DbKeysSubTree.svelte @@ -4,7 +4,12 @@ import AppObjectCore from '../appobj/AppObjectCore.svelte'; import DbKeysTreeNode from './DbKeysTreeNode.svelte'; - import { dbKeys_markNodeExpanded, DbKeysChangeModelFunction, DbKeysTreeModel } from 'dbgate-tools'; + import { + DB_KEYS_SHOW_INCREMENT, + dbKeys_showNextItems, + DbKeysChangeModelFunction, + DbKeysTreeModel, + } from 'dbgate-tools'; export let key; export let connection; @@ -20,9 +25,10 @@ export let parentRoots = []; $: items = model.childrenByKey[key] ?? []; + $: visibleCount = model.dirStateByKey[key]?.visibleCount ?? DB_KEYS_SHOW_INCREMENT; -{#each items as item} +{#each items.slice(0, visibleCount) as item} {/each} -{#if model.dirsByKey[key]?.shouldLoadNext} - -{:else if model.dirsByKey[key]?.hasNext} +{#if model.childrenByKey[key]?.length > visibleCount} { - changeModel(model => dbKeys_markNodeExpanded(model, key, true), false); + changeModel(model => dbKeys_showNextItems(model, key), false); }} /> {/if}