user table updates

4 years ago · 6b3832b841
10 changed files with 96 additions and 33 deletions
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -285,7 +285,7 @@
        <div class="spectrum-Table-head">
          {#if showEditColumn}
            <div
-              class:noBorder={!showHeaderBorder}
+              class:noBorderHeader={!showHeaderBorder}
              class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
            >
              {#if allowSelectRows}
@ -301,7 +301,7 @@
          {#each fields as field}
            <div
              class="spectrum-Table-headCell"
-              class:noBorder={!showHeaderBorder}
+              class:noBorderHeader={!showHeaderBorder}
              class:spectrum-Table-headCell--alignCenter={schema[field]
                .align === "Center"}
              class:spectrum-Table-headCell--alignRight={schema[field].align ===
@ -353,7 +353,7 @@
          >
            {#if showEditColumn}
              <div
-                class:noBorder={!showHeaderBorder}
+                class:noBorderCheckbox={!showHeaderBorder}
                class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
                on:click={e => {
                  toggleSelectRow(row)
@ -482,12 +482,17 @@
    border-right: var(--table-border);
  }

-  .noBorder {
+  .noBorderHeader {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
  }

+  .noBorderCheckbox {
+    border-top: none !important;
+    border-right: none !important;
+  }
+
  .spectrum-Table-headCell--alignCenter {
    justify-content: center;
  }
--- 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/manage/groups/_components/UserGroupsRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
@ -57,7 +57,7 @@
        >Manage</Button
      >
    </div>
-    <div class="">
+    <div>
      <ActionMenu align="right">
        <span slot="control">
          <Icon hoverable name="More" />
--- a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
@ -16,7 +16,12 @@
  import UserGroupsRow from "./_components/UserGroupsRow.svelte"

  let modal
-  let group = {}
+  let group = {
+    name: "",
+    icon: "",
+    color: "",
+    users: [],
+  }
  let proPlan = true

  async function deleteGroup(group) {
@ -38,6 +43,7 @@
  onMount(async () => {
    try {
      await groups.actions.init()
+      console.log($groups)
    } catch (error) {
      notifications.error("Error getting User groups")
    }
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
@ -5,7 +5,7 @@

 <div class="align">
  <div class="spacing">
-    <Icon name="User" />
+    <Icon name="Apps" />
  </div>
  {#if value?.apps?.length === 0}
    <div>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
@ -1,20 +1,21 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Body } from "@budibase/bbui"
  export let value
+  $: console.log(value)
 </script>

 <div class="align">
  <div class="spacing">
    <Icon name="User" />
  </div>
-  {#if value?.groups?.length === 0}
-    <div>
-      <div>No groups</div>
+  {#if value.length === 0}
+    <div>0</div>
+  {:else if value.length === 1}
+    <div class="opacity">
+      <Body size="S">{value[0].name}</Body>
    </div>
-  {:else if value?.groups?.length === 1}
-    {value.groups[0]?.name}
  {:else}
-    {parseInt(value?.groups?.length) || 0}
+    {parseInt(value.length) || 0} groups
  {/if}
 </div>

@ -23,6 +24,10 @@
    display: flex;
  }

+  .opacity {
+    opacity: 0.7;
+  }
+
  .spacing {
    margin-right: var(--spacing-m);
  }
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
@ -0,0 +1,19 @@
+<script>
+  import { Select } from "@budibase/bbui"
+
+  const options = [
+    { label: "App User", value: true },
+    { label: "Developer", value: false },
+    { label: "Admin", value: false },
+  ]
+</script>
+
+<div class="align">
+  <Select {options} />
+</div>
+
+<style>
+  .align {
+    display: flex;
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/SettingsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/SettingsTableRenderer.svelte
@ -0,0 +1,13 @@
+<script>
+  import { Icon, ActionMenu, MenuItem } from "@budibase/bbui"
+</script>
+
+<div>
+  <ActionMenu align="right">
+    <span slot="control">
+      <Icon hoverable name="More" />
+    </span>
+    <MenuItem icon="Delete">Delete</MenuItem>
+    <MenuItem icon="Delete">Edit</MenuItem>
+  </ActionMenu>
+</div>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -5,27 +5,26 @@
    Button,
    ButtonGroup,
    Table,
-    Label,
    Layout,
    Modal,
    Icon,
    notifications,
  } from "@budibase/bbui"
-  import AddUserModal from "./_components/AddUserModal.svelte"
  import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
  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"
+  import SettingsTableRenderer from "./_components/SettingsTableRenderer.svelte"

  const schema = {
    name: {},
    email: {},
    role: {},
-    userGroup: { displayName: "User group" },
+    userGroups: { displayName: "User groups" },
    apps: {},
-    settings: { displayName: "" },
+    settings: { width: "50px", displayName: "", align: "Right" },
    // access: {},
    // group: {}
  }
@ -57,10 +56,25 @@
      adminAccess: !!user.admin?.global,
    }))

-  let createUserModal
-  let basicOnboardingModal
+  $: enrichedUsers = $users.map(user => {
+    let userGroups = []
+    $groups.forEach(group => {
+      if (group.users) {
+        group.users?.forEach(y => {
+          if (y._id === user._id) {
+            userGroups.push(group)
+          }
+        })
+      }
+    })
+    return {
+      ...user,
+      userGroups,
+    }
+  })

-  function openBasicOnboardingModal() {
+  let createUserModal
+  let basicOnboardingModal = function openBasicOnboardingModal() {
    createUserModal.hide()
    basicOnboardingModal.show()
  }
@ -103,23 +117,21 @@
    </ButtonGroup>
    <Table
      {schema}
-      data={filteredUsers || $users}
+      data={enrichedUsers}
      allowEditColumns={false}
      allowEditRows={false}
-      allowSelectRows={true}
+      allowSelectRows={false}
      showHeaderBorder={false}
      customRenderers={[
-        { column: "userGroup", component: GroupsTableRenderer },
+        { column: "userGroups", component: GroupsTableRenderer },
        { column: "apps", component: AppsTableRenderer },
        { column: "name", component: NameTableRenderer },
+        { column: "settings", component: SettingsTableRenderer },
      ]}
    />
  </Layout>
 </Layout>

-<Modal bind:this={createUserModal}>
-  <AddUserModal on:change={openBasicOnboardingModal} />
-</Modal>
 <Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>

 <style>
@ -132,8 +144,4 @@
  .access-text {
    margin-left: var(--spacing-m);
  }
-
-  .field > :global(*) + :global(*) {
-    margin-left: var(--spacing-m);
-  }
 </style>
--- a/packages/builder/src/stores/portal/groups.js
+++ b/packages/builder/src/stores/portal/groups.js
@ -2,7 +2,14 @@ import { writable } from "svelte/store"
 import { API } from "api"

 export function createGroupsStore() {
-  const store = writable([])
+  const DEFAULT_CONFIG = {
+    name: "",
+    icon: "",
+    color: "",
+    users: [],
+  }
+
+  const store = writable([DEFAULT_CONFIG])

  const actions = {
    init: async () => {