lock concept in UI, make dev links go to builder and prod links go to real apps
This commit is contained in:
Martin McKeaveney
parent
5df453d2a3
commit
c2c74678e4
|
|
@ -9,20 +9,26 @@
|
|||
Link,
|
||||
} from "@budibase/bbui"
|
||||
import { gradient } from "actions"
|
||||
import { AppStatus } from "constants"
|
||||
import { url } from "@roxi/routify"
|
||||
|
||||
export let app
|
||||
export let exportApp
|
||||
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>
|
||||
|
||||
<div class="wrapper">
|
||||
<Layout noPadding gap="XS" alignContent="start">
|
||||
<div class="preview" use:gradient={{ seed: app.name }} />
|
||||
<div class="title">
|
||||
<Link href={$url(`../../app/${app._id}`)}>
|
||||
<Link {href} {target}>
|
||||
<Heading size="XS">
|
||||
{app._id} {app.name}
|
||||
{app.name}
|
||||
</Heading>
|
||||
</Link>
|
||||
<ActionMenu align="right">
|
||||
|
|
@ -33,13 +39,14 @@
|
|||
<MenuItem on:click={() => deleteApp(app)} icon="Delete">
|
||||
Delete
|
||||
</MenuItem>
|
||||
<MenuItem on:click={() => deleteApp(app)} icon="Code">Develop</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
<div class="status">
|
||||
<Body noPadding size="S">
|
||||
Edited {Math.floor(1 + Math.random() * 10)} months ago
|
||||
</Body>
|
||||
{#if Math.random() > 0.5}
|
||||
{#if appStatus === AppStatus.DEV && app.lockedBy}
|
||||
<Icon name="LockClosed" />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
MenuItem,
|
||||
Link,
|
||||
} from "@budibase/bbui"
|
||||
import { AppStatus } from "constants"
|
||||
import { url } from "@roxi/routify"
|
||||
|
||||
export let app
|
||||
|
|
@ -15,11 +16,16 @@
|
|||
export let exportApp
|
||||
export let deleteApp
|
||||
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>
|
||||
|
||||
<div class="title" class:last>
|
||||
<div class="preview" use:gradient={{ seed: app.name }} />
|
||||
<Link href={$url(`../../app/${app._id}`)}>
|
||||
<Link {href} {target}>
|
||||
<Heading size="XS">
|
||||
{app.name}
|
||||
</Heading>
|
||||
|
|
@ -29,15 +35,12 @@
|
|||
Edited {Math.round(Math.random() * 10 + 1)} months ago
|
||||
</div>
|
||||
<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" />
|
||||
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}
|
||||
</div>
|
||||
<div class:last>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ export const FrontendTypes = {
|
|||
NONE: "none",
|
||||
}
|
||||
|
||||
export const AppStatus = {
|
||||
DEV: "dev",
|
||||
}
|
||||
|
||||
// fields on the user table that cannot be edited
|
||||
export const UNEDITABLE_USER_FIELDS = ["email", "password", "roleId", "status"]
|
||||
|
||||
|
|
|
|||
|
|
@ -93,46 +93,46 @@
|
|||
|
||||
onMount(async () => {
|
||||
checkKeys()
|
||||
await apps.load()
|
||||
await apps.load(appStatus)
|
||||
loaded = true
|
||||
})
|
||||
</script>
|
||||
|
||||
<Page wide>
|
||||
{#if $apps.length}
|
||||
<Layout noPadding>
|
||||
<div class="title">
|
||||
<Heading>Apps</Heading>
|
||||
<ButtonGroup>
|
||||
<Button secondary on:click={initiateAppImport}>Import app</Button>
|
||||
<Button cta on:click={initiateAppCreation}>Create new app</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<div class="select">
|
||||
<Select
|
||||
bind:value={appStatus}
|
||||
options={[
|
||||
{ label: "Deployed", value: "deployed" },
|
||||
{ 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>
|
||||
<Layout noPadding>
|
||||
<div class="title">
|
||||
<Heading>Apps</Heading>
|
||||
<ButtonGroup>
|
||||
<Button secondary on:click={initiateAppImport}>Import app</Button>
|
||||
<Button cta on:click={initiateAppCreation}>Create new app</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<div class="select">
|
||||
<Select
|
||||
bind:value={appStatus}
|
||||
options={[
|
||||
{ label: "Deployed", value: "deployed" },
|
||||
{ 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>
|
||||
{#if $apps.length}
|
||||
<div
|
||||
class:appGrid={layout === "grid"}
|
||||
class:appTable={layout === "table"}
|
||||
|
|
@ -140,6 +140,7 @@
|
|||
{#each $apps as app, idx (app._id)}
|
||||
<svelte:component
|
||||
this={layout === "grid" ? AppCard : AppRow}
|
||||
{appStatus}
|
||||
{app}
|
||||
{openApp}
|
||||
{exportApp}
|
||||
|
|
@ -148,8 +149,8 @@
|
|||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</Layout>
|
||||
{/if}
|
||||
{/if}
|
||||
</Layout>
|
||||
{#if !$apps.length && !creatingApp && loaded}
|
||||
<div class="empty-wrapper">
|
||||
<Modal inline>
|
||||
|
|
|
|||
Loading…
Reference in New Issue