use params to select DB rather than store
This commit is contained in:
kevmodrome
parent
cda1f2671a
commit
b5caa57299
4 changed files with 124 additions and 98 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { tick, onMount } from "svelte"
|
import { tick, onMount } from "svelte"
|
||||||
|
import { goto } from "@sveltech/routify"
|
||||||
import { store, backendUiStore } from "builderStore"
|
import { store, backendUiStore } from "builderStore"
|
||||||
import api from "builderStore/api"
|
import api from "builderStore/api"
|
||||||
import getIcon from "../common/icon"
|
import getIcon from "../common/icon"
|
||||||
|
|
@ -44,7 +45,9 @@
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
class:active={database.id === $backendUiStore.selectedDatabase.id}
|
class:active={database.id === $backendUiStore.selectedDatabase.id}
|
||||||
on:click={() => selectDatabase(database)}>
|
on:click={() => {
|
||||||
|
$goto(`./database/${database.id}`), selectDatabase(database)
|
||||||
|
}}>
|
||||||
{database.name}
|
{database.name}
|
||||||
</button>
|
</button>
|
||||||
<i
|
<i
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script>
|
||||||
|
import ModelDataTable from "components/database/ModelDataTable"
|
||||||
|
import { store, backendUiStore } from "builderStore"
|
||||||
|
import ActionButton from "components/common/ActionButton.svelte"
|
||||||
|
import * as api from "components/database/ModelDataTable/api"
|
||||||
|
|
||||||
|
export let selectedDatabase
|
||||||
|
|
||||||
|
let selectedRecord
|
||||||
|
|
||||||
|
async function selectRecord(record) {
|
||||||
|
selectedRecord = await api.loadRecord(record.key, {
|
||||||
|
appname: $store.appname,
|
||||||
|
instanceId: selectedDatabase,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
$: breadcrumbs = $backendUiStore.breadcrumbs.join(" / ")
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="database-actions">
|
||||||
|
<div class="budibase__label--big">{breadcrumbs}</div>
|
||||||
|
{#if $backendUiStore.selectedDatabase.id}
|
||||||
|
<ActionButton
|
||||||
|
primary
|
||||||
|
on:click={() => {
|
||||||
|
selectedRecord = null
|
||||||
|
backendUiStore.actions.modals.show('RECORD')
|
||||||
|
}}>
|
||||||
|
Create new record
|
||||||
|
</ActionButton>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if $backendUiStore.selectedDatabase.id}
|
||||||
|
<ModelDataTable {selectRecord} />
|
||||||
|
{:else}Please select a database{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.database-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<script>
|
||||||
|
import ModelDataTable from "components/database/ModelDataTable"
|
||||||
|
import { store, backendUiStore } from "builderStore"
|
||||||
|
import getIcon from "components/common/icon"
|
||||||
|
import DropdownButton from "components/common/DropdownButton.svelte"
|
||||||
|
import ActionButton from "components/common/ActionButton.svelte"
|
||||||
|
import Modal from "components/common/Modal.svelte"
|
||||||
|
import * as api from "components/database/ModelDataTable/api"
|
||||||
|
import {
|
||||||
|
CreateEditRecordModal,
|
||||||
|
CreateEditModelModal,
|
||||||
|
CreateEditViewModal,
|
||||||
|
CreateDatabaseModal,
|
||||||
|
DeleteRecordModal,
|
||||||
|
CreateUserModal,
|
||||||
|
} from "components/database/ModelDataTable/modals"
|
||||||
|
|
||||||
|
let selectedRecord
|
||||||
|
|
||||||
|
async function selectRecord(record) {
|
||||||
|
selectedRecord = await api.loadRecord(record.key, {
|
||||||
|
appname: $store.appname,
|
||||||
|
instanceId: $backendUiStore.selectedDatabase.id,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClosed() {
|
||||||
|
backendUiStore.actions.modals.hide()
|
||||||
|
}
|
||||||
|
|
||||||
|
$: recordOpen = $backendUiStore.visibleModal === "RECORD"
|
||||||
|
$: modelOpen = $backendUiStore.visibleModal === "MODEL"
|
||||||
|
$: viewOpen = $backendUiStore.visibleModal === "VIEW"
|
||||||
|
$: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
|
||||||
|
$: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
|
||||||
|
$: userOpen = $backendUiStore.visibleModal === "USER"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
|
||||||
|
{#if recordOpen}
|
||||||
|
<CreateEditRecordModal record={selectedRecord} {onClosed} />
|
||||||
|
{/if}
|
||||||
|
{#if modelOpen}
|
||||||
|
<CreateEditModelModal {onClosed} />
|
||||||
|
{/if}
|
||||||
|
{#if viewOpen}
|
||||||
|
<CreateEditViewModal {onClosed} />
|
||||||
|
{/if}
|
||||||
|
{#if databaseOpen}
|
||||||
|
<CreateDatabaseModal {onClosed} />
|
||||||
|
{/if}
|
||||||
|
{#if deleteRecordOpen}
|
||||||
|
<DeleteRecordModal record={selectedRecord} {onClosed} />
|
||||||
|
{/if}
|
||||||
|
{#if userOpen}
|
||||||
|
<CreateUserModal {onClosed} />
|
||||||
|
{/if}
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<div class="root">
|
||||||
|
<div class="node-view">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.root {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-view {
|
||||||
|
overflow-y: auto;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,97 +1 @@
|
||||||
<script>
|
Please select a database
|
||||||
import ModelDataTable from "components/database/ModelDataTable"
|
|
||||||
import { store, backendUiStore } from "builderStore"
|
|
||||||
import getIcon from "components/common/icon"
|
|
||||||
import DropdownButton from "components/common/DropdownButton.svelte"
|
|
||||||
import ActionButton from "components/common/ActionButton.svelte"
|
|
||||||
import Modal from "components/common/Modal.svelte"
|
|
||||||
import * as api from "components/database/ModelDataTable/api"
|
|
||||||
import {
|
|
||||||
CreateEditRecordModal,
|
|
||||||
CreateEditModelModal,
|
|
||||||
CreateEditViewModal,
|
|
||||||
CreateDatabaseModal,
|
|
||||||
DeleteRecordModal,
|
|
||||||
CreateUserModal,
|
|
||||||
} from "components/database/ModelDataTable/modals"
|
|
||||||
|
|
||||||
let selectedRecord
|
|
||||||
|
|
||||||
async function selectRecord(record) {
|
|
||||||
selectedRecord = await api.loadRecord(record.key, {
|
|
||||||
appname: $store.appname,
|
|
||||||
instanceId: $backendUiStore.selectedDatabase.id,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClosed() {
|
|
||||||
backendUiStore.actions.modals.hide()
|
|
||||||
}
|
|
||||||
|
|
||||||
$: recordOpen = $backendUiStore.visibleModal === "RECORD"
|
|
||||||
$: modelOpen = $backendUiStore.visibleModal === "MODEL"
|
|
||||||
$: viewOpen = $backendUiStore.visibleModal === "VIEW"
|
|
||||||
$: databaseOpen = $backendUiStore.visibleModal === "DATABASE"
|
|
||||||
$: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD"
|
|
||||||
$: userOpen = $backendUiStore.visibleModal === "USER"
|
|
||||||
$: breadcrumbs = $backendUiStore.breadcrumbs.join(" / ")
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Modal isOpen={!!$backendUiStore.visibleModal} {onClosed}>
|
|
||||||
{#if recordOpen}
|
|
||||||
<CreateEditRecordModal record={selectedRecord} {onClosed} />
|
|
||||||
{/if}
|
|
||||||
{#if modelOpen}
|
|
||||||
<CreateEditModelModal {onClosed} />
|
|
||||||
{/if}
|
|
||||||
{#if viewOpen}
|
|
||||||
<CreateEditViewModal {onClosed} />
|
|
||||||
{/if}
|
|
||||||
{#if databaseOpen}
|
|
||||||
<CreateDatabaseModal {onClosed} />
|
|
||||||
{/if}
|
|
||||||
{#if deleteRecordOpen}
|
|
||||||
<DeleteRecordModal record={selectedRecord} {onClosed} />
|
|
||||||
{/if}
|
|
||||||
{#if userOpen}
|
|
||||||
<CreateUserModal {onClosed} />
|
|
||||||
{/if}
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<div class="root">
|
|
||||||
<div class="node-view">
|
|
||||||
<div class="database-actions">
|
|
||||||
<div class="budibase__label--big">{breadcrumbs}</div>
|
|
||||||
{#if $backendUiStore.selectedDatabase.id}
|
|
||||||
<ActionButton
|
|
||||||
primary
|
|
||||||
on:click={() => {
|
|
||||||
selectedRecord = null
|
|
||||||
backendUiStore.actions.modals.show('RECORD')
|
|
||||||
}}>
|
|
||||||
Create new record
|
|
||||||
</ActionButton>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if $backendUiStore.selectedDatabase.id}
|
|
||||||
<ModelDataTable {selectRecord} />
|
|
||||||
{:else}Please select a database{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.root {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-view {
|
|
||||||
overflow-y: auto;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.database-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue