MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Making internal database view a bit nicer.

This commit is contained in:
mike12345567 2021-06-17 17:50:40 +01:00
parent f4cdf7fecc
commit c80ad016f2
1 changed files with 66 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/builder/src/pages/builder/app/[application]/data/datasource/bb_internal/index.svelte
View File

@ -1,6 +1,9 @@
<script> <script>
import { Button, Heading, Body, Layout, Modal } from "@budibase/bbui" import { Button, Heading, Body, Layout, Modal, Divider } from "@budibase/bbui"
import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte" import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
import ICONS from "components/backend/DatasourceNavigator/icons"
import { tables, datasources } from "stores/backend"
import { goto } from "@roxi/routify"
let modal let modal
</script> </script>
@ -9,10 +12,66 @@
<CreateTableModal /> <CreateTableModal />
</Modal> </Modal>
<Layout> <section>
<Heading>Budibase Internal DB</Heading> <Layout>
<header>
<svelte:component
this={ICONS.BUDIBASE}
height="26"
width="26"
/>
<Heading size="M">Budibase Internal</Heading>
</header>
<Body size="S" grey lh>Budibase internal tables are part of your app, the data will be stored in your apps context.</Body>
<Divider />
<Heading size="S">Tables</Heading>
<div class="table-list">
{#each $tables.list.filter(table => table.type !== "external") as table}
<div class="table-list-item" on:click={$goto(`../../table/${table._id}`)}>
<Body size="S">{table.name}</Body>
<Body size="S">display column: {table.primaryDisplay}</Body>
</div>
{/each}
</div>
<div> <div>
<Button cta on:click={modal.show}>Create new table</Button> <Button cta on:click={modal.show}>Create new table</Button>
</div> </div>
</Layout> </Layout>
</section>
<style>
section {
margin: 0 auto;
width: 640px;
}
header {
margin: 0 0 var(--spacing-xs) 0;
display: flex;
gap: var(--spacing-l);
align-items: center;
}
.table-list {
display: flex;
flex-direction: column;
gap: var(--spacing-m);
}
.table-list-item {
border-radius: var(--border-radius-m);
background: var(--background);
border: var(--border-dark);
display: grid;
grid-template-columns: 2fr 0.75fr 20px;
align-items: center;
padding: var(--spacing-m);
gap: var(--layout-xs);
transition: 200ms background ease;
}
.table-list-item:hover {
background: var(--grey-1);
cursor: pointer;
}
</style>