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

5 years ago · c2c74678e4
4 changed files with 62 additions and 47 deletions
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -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>
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@ -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>
--- a/packages/builder/src/constants/index.js
+++ b/packages/builder/src/constants/index.js
@ -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"]

--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -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>