move modal view to backend page layout
This commit is contained in:
parent
2c37f524f9
commit
2245867bef
|
@ -1,12 +1,61 @@
|
||||||
<script>
|
<script>
|
||||||
import { backendUiStore } from "builderStore"
|
import { store, backendUiStore } from "builderStore"
|
||||||
|
import * as api from "components/database/ModelDataTable/api"
|
||||||
|
|
||||||
import BackendNav from "components/nav/BackendNav.svelte"
|
import BackendNav from "components/nav/BackendNav.svelte"
|
||||||
import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte"
|
import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte"
|
||||||
import UserInterface from "components/userInterface/UserInterfaceRoot.svelte"
|
import Modal from "components/common/Modal.svelte"
|
||||||
import ComingSoon from "components/common/ComingSoon.svelte"
|
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>
|
</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="root">
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<BackendNav />
|
<BackendNav />
|
||||||
|
|
|
@ -1,65 +1,6 @@
|
||||||
<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="root">
|
||||||
<div class="node-view">
|
<div class="node-view">
|
||||||
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -73,5 +14,4 @@
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue