CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 14:01:27 +12:00
Code Issues Projects Releases Wiki Activity

Add empty state to apps screen

Browse source
This commit is contained in:
Andrew Kingston 2021-05-10 16:15:00 +01:00
parent d829462cd9
commit 0c53e3bc39
2 changed files with 81 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/builder/src/pages/builder/portal/_layout.svelte
View file

@ -31,7 +31,6 @@
onMount(() => { onMount(() => {
organisation.init() organisation.init()
apps.load()
getInfo() getInfo()
}) })
@ -162,5 +161,7 @@
} }
.content { .content {
overflow: auto; overflow: auto;
display: grid;
grid-template-rows: 1fr;
} }
</style> </style>

61
packages/builder/src/pages/builder/portal/apps/index.svelte
View file

@ -8,8 +8,10 @@
ButtonGroup, ButtonGroup,
Select, Select,
Modal, Modal,
ModalContent,
Page, Page,
notifications, notifications,
Body,
} from "@budibase/bbui" } from "@budibase/bbui"
import CreateAppModal from "components/start/CreateAppModal.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte"
import api, { del } from "builderStore/api" import api, { del } from "builderStore/api"
@ -27,6 +29,8 @@
let appToDelete let appToDelete
let creationModal let creationModal
let deletionModal let deletionModal
let creatingApp = false
let loaded = false
const checkKeys = async () => { const checkKeys = async () => {
const response = await api.get(`/api/keys/`) const response = await api.get(`/api/keys/`)
@ -36,9 +40,20 @@
} }
} }
const initiateAppCreation = () => {
creationModal.show()
creatingApp = true
}
const initiateAppImport = () => { const initiateAppImport = () => {
template = { fromFile: true } template = { fromFile: true }
creationModal.show() creationModal.show()
creatingApp = true
}
const stopAppCreation = () => {
template = null
creatingApp = false
} }
const openApp = app => { const openApp = app => {
@ -73,19 +88,21 @@
appToDelete = null appToDelete = null
} }
onMount(() => { onMount(async () => {
checkKeys() checkKeys()
apps.load() await apps.load()
loaded = true
}) })
</script> </script>
<Page wide> <Page wide>
{#if $apps.length}
<Layout noPadding> <Layout noPadding>
<div class="title"> <div class="title">
<Heading>Apps</Heading> <Heading>Apps</Heading>
<ButtonGroup> <ButtonGroup>
<Button secondary on:click={initiateAppImport}>Import app</Button> <Button secondary on:click={initiateAppImport}>Import app</Button>
<Button cta on:click={creationModal.show}>Create new app</Button> <Button cta on:click={initiateAppCreation}>Create new app</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
<div class="filter"> <div class="filter">
@ -107,7 +124,6 @@
/> />
</ActionGroup> </ActionGroup>
</div> </div>
{#if $apps.length}
<div <div
class:appGrid={layout === "grid"} class:appGrid={layout === "grid"}
class:appTable={layout === "table"} class:appTable={layout === "table"}
@ -123,16 +139,36 @@
/> />
{/each} {/each}
</div> </div>
{:else}
<div>No apps.</div>
{/if}
</Layout> </Layout>
{/if}
{#if !$apps.length && !creatingApp && loaded}
<div class="empty-wrapper">
<Modal inline>
<ModalContent
title="Create your first app"
confirmText="Create app"
showCancelButton={false}
showCloseIcon={false}
onConfirm={initiateAppCreation}
size="M"
>
<div slot="footer">
<Button on:click={initiateAppImport} secondary>Import app</Button>
</div>
<Body size="S">
The purpose of the Budibase builder is to help you build beautiful,
powerful applications quickly and easily.
</Body>
</ModalContent>
</Modal>
</div>
{/if}
</Page> </Page>
<Modal <Modal
bind:this={creationModal} bind:this={creationModal}
padding={false} padding={false}
width="600px" width="600px"
on:hide={() => (template = null)} on:hide={stopAppCreation}
> >
<CreateAppModal {template} /> <CreateAppModal {template} />
</Modal> </Modal>
@ -183,4 +219,13 @@
.appTable :global(> div:not(.last)) { .appTable :global(> div:not(.last)) {
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
.empty-wrapper {
flex: 1 1 auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style> </style>