{#if host && connection} ({ id: dbKey, icon: 'db', collCount: Object.keys(connection.databases[dbKey].collections || {}).length || '', children: Object.keys(connection.databases[dbKey].collections).sort().map(collKey => ({ id: collKey, icon: 'list', menu: [ { label: `Drop ${collKey}…`, fn: () => dropCollection(dbKey, collKey) }, { label: `Drop ${dbKey}…`, fn: () => dropDatabase(dbKey) }, { separator: true }, { label: 'New database…', fn: () => dispatch('newDatabase') }, { label: 'New collection…', fn: () => dispatch('newCollection') }, ], })) || [], menu: [ { label: `Drop ${dbKey}…`, fn: () => dropDatabase(dbKey) }, { separator: true }, { label: 'New database…', fn: () => dispatch('newDatabase') }, { label: 'New collection…', fn: () => dispatch('newCollection') }, ], }))} actions={[ { icon: 'reload', fn: reload }, { icon: '+', fn: evt => { if (activeDbKey) { contextMenu.show(evt, [ { label: 'New database…', fn: () => dispatch('newDatabase') }, { label: 'New collection…', fn: () => dispatch('newCollection') }, ]); } else { dispatch('newDatabase'); } } }, { icon: '-', fn: evt => { if (activeCollKey) { contextMenu.show(evt, [ { label: 'Drop database…', fn: () => dropDatabase(activeDbKey) }, { label: 'Drop collection…', fn: () => dropCollection(activeDbKey, activeCollKey) }, ]); } else { dropDatabase(activeDbKey); } }, disabled: !activeDbKey }, ]} bind:activePath={dbAndCollKeys} on:select={e => { if (e.detail?.level === 0) { openDatabase(e.detail.itemKey); } else if (e.detail?.level === 1) { openCollection(e.detail.itemKey); } }} /> {/if}