Add access tab to app overview

4 years ago · 527962b301
4 changed files with 58 additions and 1 deletions
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -14,6 +14,7 @@
  } from "@budibase/bbui"
  import ConfigChecklist from "components/common/ConfigChecklist.svelte"
  import { organisation, auth } from "stores/portal"
+  import { roles } from "stores/backend"
  import { admin as adminStore } from "stores/portal"
  import { onMount } from "svelte"
  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
@ -126,6 +127,7 @@
      } else {
        try {
          await organisation.init()
+          await roles.fetch()
        } catch (error) {
          notifications.error("Error getting org config")
        }
--- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
@ -139,7 +139,7 @@
  </div>

  <div class="usersTable">
-    {#if group?.users.length}
+    {#if group?.users?.length}
      {#each group.users as user}
        <div>
          <UserRow {removeUser} {user} />
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@ -19,6 +19,7 @@
  } from "@budibase/bbui"
  import OverviewTab from "../_components/OverviewTab.svelte"
  import SettingsTab from "../_components/SettingsTab.svelte"
+  import AccessTab from "../_components/AccessTab.svelte"
  import { API } from "api"
  import { store } from "builderStore"
  import { apps, auth } from "stores/portal"
@ -302,6 +303,9 @@
              on:unpublish={e => unpublishApp(e.detail)}
            />
          </Tab>
+          <Tab title="Access">
+            <AccessTab app={selectedApp} />
+          </Tab>
          {#if false}
            <Tab title="Automation History">
              <div class="container">Automation History contents</div>
--- a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
@ -0,0 +1,51 @@
+<script>
+  import { Layout, Heading, Body, Button, List, ListItem } from "@budibase/bbui"
+  import RoleSelect from "components/common/RoleSelect.svelte"
+</script>
+
+<div class="access-tab">
+  <Layout>
+    <div>
+      <Heading>Access</Heading>
+      <div class="subtitle">
+        <Body size="S">
+          Assign users to your app and define their access here</Body
+        >
+        <Button icon="User" cta>Assign users</Button>
+      </div>
+    </div>
+    <List title="User Groups">
+      <ListItem title="Design Team" icon="Brush" iconBackground="#348c6f">
+        <RoleSelect autoWidth quiet value="POWER" />
+      </ListItem>
+      <ListItem title="Admin Team" icon="UserAdmin" iconBackground="#843c6f">
+        <RoleSelect autoWidth quiet value="ADMIN" />
+      </ListItem>
+    </List>
+    <List title="Users">
+      <ListItem title="andy@gmail.com" avatar>
+        <RoleSelect autoWidth quiet value="BASIC" />
+      </ListItem>
+      <ListItem title="jeff@gmail.com" avatar>
+        <RoleSelect autoWidth quiet value="BASIC" />
+      </ListItem>
+      <ListItem title="tom@gmail.com" avatar>
+        <RoleSelect autoWidth quiet value="BASIC" />
+      </ListItem>
+    </List>
+  </Layout>
+</div>
+
+<style>
+  .access-tab {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 40px;
+  }
+  .subtitle {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>