From 07dfc43d115ed5d9cbc89c2a10fae2710fd7b803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 18 May 2021 12:17:57 +0200
Subject: [PATCH] adds a custom renderer to the users page

---
 .../portal/manage/users/[userId].svelte       |  6 ++++--
 .../_components/TagsTableRenderer.svelte      | 20 +++++++++++++++++++
 .../builder/portal/manage/users/index.svelte  | 10 ++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/portal/manage/users/_components/TagsTableRenderer.svelte

diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
index 9729082afa..b8c55d6aca 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@@ -17,6 +17,7 @@
   import { fetchData } from "helpers"
   import { users } from "stores/portal"
 
+  import TagsRenderer from "./_components/TagsTableRenderer.svelte"
   import UpdateRolesModal from "./_components/UpdateRolesModal.svelte"
 
   export let userId
@@ -25,14 +26,14 @@
 
   const roleSchema = {
     name: { displayName: "App" },
-    role: { type: "options" },
+    role: {},
   }
 
   // Merge the Apps list and the roles response to get something that makes sense for the table
   $: appList = Object.keys($apps?.data).map(id => ({
     ...$apps?.data?.[id],
     _id: id,
-    role: $roleFetch?.data?.roles?.[id],
+    role: [$roleFetch?.data?.roles?.[id]],
   }))
   let selectedApp
 
@@ -97,6 +98,7 @@
       allowEditColumns={false}
       allowEditRows={false}
       allowSelectRows={false}
+      customRenderers={[{ column: "role", component: TagsRenderer }]}
     />
   </div>
   <Divider size="S" />
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/TagsTableRenderer.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/TagsTableRenderer.svelte
new file mode 100644
index 0000000000..f21a6b1da8
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/TagsTableRenderer.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { Tag, Tags } from "@budibase/bbui"
+  export let value
+
+  const displayLimit = 5
+
+  $: tags = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - tags.length
+</script>
+
+<Tags>
+  {#each tags as tag}
+    <Tag>
+      {tag}
+    </Tag>
+  {/each}
+  {#if leftover}
+    <Tag>+{leftover} more</Tag>
+  {/if}
+</Tags>
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 bed43d5278..38f1c3c3e9 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@@ -12,6 +12,7 @@
     Layout,
     Modal,
   } 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"
@@ -20,14 +21,18 @@
 
   const schema = {
     email: {},
-    status: {},
+    status: { displayName: "Development Access", type: "boolean" },
+    // role: { type: "options" },
+    group: {},
     // access: {},
     // group: {}
   }
 
   let search
   let email
-  $: filteredUsers = $users.filter(user => user.email.includes(search || ""))
+  $: filteredUsers = $users
+    .filter(user => user.email.includes(search || ""))
+    .map(user => ({ ...user, group: ["All"] }))
 
   let createUserModal
   let basicOnboardingModal
@@ -68,6 +73,7 @@
       allowEditColumns={false}
       allowEditRows={false}
       allowSelectRows={false}
+      customRenderers={[{ column: "group", component: TagsRenderer }]}
     />
   </div>
 </Layout>