From 6b3832b841d867fedba142625e4542f52f18b8b9 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Jun 2022 14:41:52 +0100
Subject: [PATCH] user table updates

---
 packages/bbui/src/Table/Table.svelte          | 13 ++++--
 .../portal/manage/groups/[groupId].svelte     |  2 +-
 .../groups/_components/UserGroupsRow.svelte   |  2 +-
 .../builder/portal/manage/groups/index.svelte |  8 +++-
 .../_components/AppsTableRenderer.svelte      |  2 +-
 .../_components/GroupsTableRenderer.svelte    | 19 +++++----
 .../_components/RoleTableRenderer.svelte      | 19 +++++++++
 .../_components/SettingsTableRenderer.svelte  | 13 ++++++
 .../builder/portal/manage/users/index.svelte  | 42 +++++++++++--------
 packages/builder/src/stores/portal/groups.js  |  9 +++-
 10 files changed, 96 insertions(+), 33 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
 create mode 100644 packages/builder/src/pages/builder/portal/manage/users/_components/SettingsTableRenderer.svelte

diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index fbfcb8a020..3b77e2a43f 100644
--- 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;
   }
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
index 21169c6513..833d89e9b5 100644
--- 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} />
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte b/packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
index a720750d46..5988601a2a 100644
--- 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" />
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
index 4bb0df7a2e..43680d0c2a 100644
--- 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")
     }
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
index b007972a39..5611b20e99 100644
--- 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>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
index 57bd834803..885277a6eb 100644
--- 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);
   }
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
new file mode 100644
index 0000000000..571a5d1a34
--- /dev/null
+++ 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>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/SettingsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/SettingsTableRenderer.svelte
new file mode 100644
index 0000000000..0ead895893
--- /dev/null
+++ 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>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
index 669b82e48d..c16a9a897f 100644
--- 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>
diff --git a/packages/builder/src/stores/portal/groups.js b/packages/builder/src/stores/portal/groups.js
index 26e0f87041..3380fa9ca2 100644
--- 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 () => {