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 5df453d2a3
commit c2c74678e4
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"]

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

@ -93,13 +93,12 @@
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>
@ -133,6 +132,7 @@
/> />
</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"}
@ -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>