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

lock concept in UI, make dev links go to builder and prod links go to real apps

This commit is contained in:
Martin McKeaveney 2021-05-13 12:39:35 +01:00
parent 799b3fc138
commit c3e1b1d302
4 changed files with 62 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/builder/src/components/start/AppCard.svelte
View File

@ -9,20 +9,26 @@
Link, Link,
} from "@budibase/bbui" } from "@budibase/bbui"
import { gradient } from "actions" import { gradient } from "actions"
import { AppStatus } from "constants"
import { url } from "@roxi/routify" import { url } from "@roxi/routify"
export let app export let app
export let exportApp export let exportApp
export let deleteApp export let deleteApp
export let appStatus
let href =
appStatus === AppStatus.DEV ? $url(`../../app/${app._id}`) : `/${app._id}`
let target = appStatus === AppStatus.DEV ? "_self" : "_target"
</script> </script>
<div class="wrapper"> <div class="wrapper">
<Layout noPadding gap="XS" alignContent="start"> <Layout noPadding gap="XS" alignContent="start">
<div class="preview" use:gradient={{ seed: app.name }} /> <div class="preview" use:gradient={{ seed: app.name }} />
<div class="title"> <div class="title">
<Link href={$url(`../../app/${app._id}`)}> <Link {href} {target}>
<Heading size="XS"> <Heading size="XS">
{app._id} {app.name} {app.name}
</Heading> </Heading>
</Link> </Link>
<ActionMenu align="right"> <ActionMenu align="right">
@ -33,13 +39,14 @@
<MenuItem on:click={() => deleteApp(app)} icon="Delete"> <MenuItem on:click={() => deleteApp(app)} icon="Delete">
Delete Delete
</MenuItem> </MenuItem>
<MenuItem on:click={() => deleteApp(app)} icon="Code">Develop</MenuItem>
</ActionMenu> </ActionMenu>
</div> </div>
<div class="status"> <div class="status">
<Body noPadding size="S"> <Body noPadding size="S">
Edited {Math.floor(1 + Math.random() * 10)} months ago Edited {Math.floor(1 + Math.random() * 10)} months ago
</Body> </Body>
{#if Math.random() > 0.5} {#if appStatus === AppStatus.DEV && app.lockedBy}
<Icon name="LockClosed" /> <Icon name="LockClosed" />
{/if} {/if}
</div> </div>

19
packages/builder/src/components/start/AppRow.svelte
View File

@ -8,6 +8,7 @@
MenuItem, MenuItem,
Link, Link,
} from "@budibase/bbui" } from "@budibase/bbui"
import { AppStatus } from "constants"
import { url } from "@roxi/routify" import { url } from "@roxi/routify"
export let app export let app
@ -15,11 +16,16 @@
export let exportApp export let exportApp
export let deleteApp export let deleteApp
export let last export let last
export let appStatus
let href =
appStatus === AppStatus.DEV ? $url(`../../app/${app._id}`) : `/${app._id}`
let target = appStatus === AppStatus.DEV ? "_self" : "_target"
</script> </script>
<div class="title" class:last> <div class="title" class:last>
<div class="preview" use:gradient={{ seed: app.name }} /> <div class="preview" use:gradient={{ seed: app.name }} />
<Link href={$url(`../../app/${app._id}`)}> <Link {href} {target}>
<Heading size="XS"> <Heading size="XS">
{app.name} {app.name}
</Heading> </Heading>
@ -29,15 +35,12 @@
Edited {Math.round(Math.random() * 10 + 1)} months ago Edited {Math.round(Math.random() * 10 + 1)} months ago
</div> </div>
<div class:last> <div class:last>
{#if Math.random() < 0.33} {#if app.lockedBy}
<div class="status status--locked-you" />
Locked by {app.lockedBy.email}
{:else}
<div class="status status--open" /> <div class="status status--open" />
Open Open
{:else if Math.random() < 0.33}
<div class="status status--locked-other" />
Locked by Will Wheaton
{:else}
<div class="status status--locked-you" />
Locked by you
{/if} {/if}
</div> </div>
<div class:last> <div class:last>

4
packages/builder/src/constants/index.js
View File

@ -9,6 +9,10 @@ export const FrontendTypes = {
NONE: "none", NONE: "none",
} }
export const AppStatus = {
DEV: "dev",
}
// fields on the user table that cannot be edited // fields on the user table that cannot be edited
export const UNEDITABLE_USER_FIELDS = ["email", "password", "roleId", "status"] export const UNEDITABLE_USER_FIELDS = ["email", "password", "roleId", "status"]

73
packages/builder/src/pages/builder/portal/apps/index.svelte
View File

@ -93,46 +93,46 @@
onMount(async () => { onMount(async () => {
checkKeys() checkKeys()
await apps.load() await apps.load(appStatus)
loaded = true 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={initiateAppCreation}>Create new app</Button>
<Button cta on:click={initiateAppCreation}>Create new app</Button> </ButtonGroup>
</ButtonGroup> </div>
</div> <div class="filter">
<div class="filter"> <div class="select">
<div class="select"> <Select
<Select bind:value={appStatus}
bind:value={appStatus} options={[
options={[ { label: "Deployed", value: "deployed" },
{ label: "Deployed", value: "deployed" }, { label: "In Development", value: "dev" },
{ label: "In Development", value: "dev" }, ]}
]} />
/>
</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"}
@ -140,6 +140,7 @@
{#each $apps as app, idx (app._id)} {#each $apps as app, idx (app._id)}
<svelte:component <svelte:component
this={layout === "grid" ? AppCard : AppRow} this={layout === "grid" ? AppCard : AppRow}
{appStatus}
{app} {app}
{openApp} {openApp}
{exportApp} {exportApp}
@ -148,8 +149,8 @@
/> />
{/each} {/each}
</div> </div>
</Layout> {/if}
{/if} </Layout>
{#if !$apps.length && !creatingApp && loaded} {#if !$apps.length && !creatingApp && loaded}
<div class="empty-wrapper"> <div class="empty-wrapper">
<Modal inline> <Modal inline>