users table renderer

4 years ago · 271b274b27
7 changed files with 121 additions and 32 deletions
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -285,6 +285,7 @@
        <div class="spectrum-Table-head">
          {#if showEditColumn}
            <div
+              class:noBorder={!showHeaderBorder}
              class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
            >
              {#if allowSelectRows}
@ -352,6 +353,7 @@
          >
            {#if showEditColumn}
              <div
+                class:noBorder={!showHeaderBorder}
                class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
                on:click={e => {
                  toggleSelectRow(row)
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
@ -14,7 +14,6 @@
  export let deleteGroup
  export let saveGroup
  let modal
-
  function editGroup() {
    modal.show()
  }
@ -35,7 +34,9 @@
 <div class="desktop tableElement">
  <Icon name="User" />
  <div style="margin-left: var(--spacing-l">
-    {parseInt(group.userCount) || 0} user{parseInt(group.userCount) === 1
+    {parseInt(group?.users?.length) || 0} user{parseInt(
+      group?.users?.length
+    ) === 1
      ? ""
      : "s"}
  </div>
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte
@ -3,7 +3,6 @@

  export let user
  export let removeUser
-  $: console.log(user)
 </script>

 <div class="title">
@ -14,9 +13,9 @@
  </div>
 </div>
 <div class="desktop">
-  <div style="display: flex; align-items: center;">
+  <div class="align-email">
    <Body size="M">{user.email}</Body>
-    <div style="opacity: 0.5; margin: var(--spacing-xs) 0 0 var(--spacing-m)">
+    <div class="text">
      <Body size="XS">{user.access}</Body>
    </div>
  </div>
@ -33,6 +32,16 @@
    align-items: center;
  }

+  .text {
+    opacity: 0.5;
+    margin: var(--spacing-xs) 0 0 var(--spacing-m);
+  }
+
+  .align-email {
+    display: flex;
+    align-items: center;
+  }
+
  .name {
    text-decoration: none;
    overflow: hidden;
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
@ -0,0 +1,29 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  export let value
+</script>
+
+<div class="align">
+  <div class="spacing">
+    <Icon name="User" />
+  </div>
+  {#if value?.apps?.length === 0}
+    <div>
+      <div>No groups</div>
+    </div>
+  {:else if value?.apps?.length === 1}
+    {value?.groups[0]?.name}
+  {:else}
+    {parseInt(value?.apps?.length) || 0}
+  {/if}
+</div>
+
+<style>
+  .align {
+    display: flex;
+  }
+
+  .spacing {
+    margin-right: var(--spacing-m);
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
@ -0,0 +1,29 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  export let value
+</script>
+
+<div class="align">
+  <div class="spacing">
+    <Icon name="User" />
+  </div>
+  {#if value?.groups?.length === 0}
+    <div>
+      <div>No groups</div>
+    </div>
+  {:else if value?.groups?.length === 1}
+    {value.groups[0]?.name}
+  {:else}
+    {parseInt(value?.groups?.length) || 0}
+  {/if}
+</div>
+
+<style>
+  .align {
+    display: flex;
+  }
+
+  .spacing {
+    margin-right: var(--spacing-m);
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte
@ -0,0 +1,29 @@
+<script>
+  import { Avatar } from "@budibase/bbui"
+  export let value
+</script>
+
+<div class="align">
+  {#if value?.name}
+    <div class="spacing">
+      <Avatar size="L" initials="PC" />
+    </div>
+    {value.name}
+  {:else}
+    <div class="text">Invite pending...</div>
+  {/if}
+</div>
+
+<style>
+  .align {
+    display: flex;
+  }
+
+  .spacing {
+    margin-right: var(--spacing-m);
+  }
+
+  .text {
+    opacity: 0.8;
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -1,12 +1,9 @@
 <script>
-  import { goto } from "@roxi/routify"
  import {
    Heading,
    Body,
-    Divider,
    Button,
    ButtonGroup,
-    Search,
    Table,
    Label,
    Layout,
@ -14,18 +11,21 @@
    Icon,
    notifications,
  } from "@budibase/bbui"
-  import TagsRenderer from "./_components/TagsTableRenderer.svelte"
  import AddUserModal from "./_components/AddUserModal.svelte"
  import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
-  import { users } from "stores/portal"
+  import { users, groups } from "stores/portal"
  import { onMount } from "svelte"
+  import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
+  import AppsTableRenderer from "./_components/AppsTableRenderer.svelte"
+  import NameTableRenderer from "./_components/NameTableRenderer.svelte"

  const schema = {
+    name: {},
    email: {},
-    developmentAccess: { displayName: "Development Access", type: "boolean" },
-    adminAccess: { displayName: "Admin Access", type: "boolean" },
-    // role: { type: "options" },
-    group: {},
+    role: {},
+    userGroup: { displayName: "User group" },
+    apps: {},
+    settings: { displayName: "" },
    // access: {},
    // group: {}
  }
@ -47,6 +47,7 @@

  let search
  let email
+
  $: filteredUsers = $users
    .filter(user => user.email.includes(search || ""))
    .map(user => ({
@ -67,6 +68,7 @@
  onMount(async () => {
    try {
      await users.init()
+      await groups.actions.init()
    } catch (error) {
      notifications.error("Error getting user list")
    }
@ -99,18 +101,18 @@
      >
      <Button icon="Import" primary>Import Users</Button>
    </ButtonGroup>
-    <div class="field">
-      <Label size="L">Search / filter</Label>
-    </div>
    <Table
-      on:click={({ detail }) => $goto(`./${detail._id}`)}
      {schema}
      data={filteredUsers || $users}
      allowEditColumns={false}
      allowEditRows={false}
-      allowSelectRows={false}
+      allowSelectRows={true}
      showHeaderBorder={false}
-      customRenderers={[{ column: "group", component: TagsRenderer }]}
+      customRenderers={[
+        { column: "userGroup", component: GroupsTableRenderer },
+        { column: "apps", component: AppsTableRenderer },
+        { column: "name", component: NameTableRenderer },
+      ]}
    />
  </Layout>
 </Layout>
@ -131,19 +133,7 @@
    margin-left: var(--spacing-m);
  }

-  .field {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    grid-gap: var(--spacing-m);
-  }
  .field > :global(*) + :global(*) {
    margin-left: var(--spacing-m);
  }
-  .users-heading {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
 </style>