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

Add empty state to apps screen

This commit is contained in:
Andrew Kingston 2021-05-10 16:15:00 +01:00
parent 0cd7dfa296
commit 6a2f711e77
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>

113
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,41 +88,42 @@
appToDelete = null appToDelete = null
} }
onMount(() => { onMount(async () => {
checkKeys() checkKeys()
apps.load() await apps.load()
loaded = true
}) })
</script> </script>
<Page wide> <Page wide>
<Layout noPadding> {#if $apps.length}
<div class="title"> <Layout noPadding>
<Heading>Apps</Heading> <div class="title">
<ButtonGroup> <Heading>Apps</Heading>
<Button secondary on:click={initiateAppImport}>Import app</Button> <ButtonGroup>
<Button cta on:click={creationModal.show}>Create new app</Button> <Button secondary on:click={initiateAppImport}>Import app</Button>
</ButtonGroup> <Button cta on:click={initiateAppCreation}>Create new app</Button>
</div> </ButtonGroup>
<div class="filter"> </div>
<div class="select"> <div class="filter">
<Select quiet placeholder="Filter by groups" /> <div class="select">
<Select quiet placeholder="Filter by groups" />
</div>
<ActionGroup>
<ActionButton
on:click={() => (layout = "grid")}
selected={layout === "grid"}
quiet
icon="ClassicGridView"
/>
<ActionButton
on:click={() => (layout = "table")}
selected={layout === "table"}
quiet
icon="ViewRow"
/>
</ActionGroup>
</div> </div>
<ActionGroup>
<ActionButton
on:click={() => (layout = "grid")}
selected={layout === "grid"}
quiet
icon="ClassicGridView"
/>
<ActionButton
on:click={() => (layout = "table")}
selected={layout === "table"}
quiet
icon="ViewRow"
/>
</ActionGroup>
</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} </Layout>
<div>No apps.</div> {/if}
{/if} {#if !$apps.length && !creatingApp && loaded}
</Layout> <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>