ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

users table renderer

master
Peter Clement 4 years ago
parent
389558fd95
commit
271b274b27
7 changed files with 121 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/bbui/src/Table/Table.svelte
  2. 5
      packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
  3. 15
      packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte
  4. 29
      packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
  5. 29
      packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
  6. 29
      packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte
  7. 44
      packages/builder/src/pages/builder/portal/manage/users/index.svelte

2
packages/bbui/src/Table/Table.svelte
View File

@ -285,6 +285,7 @@
<div class="spectrum-Table-head"> <div class="spectrum-Table-head">
{#if showEditColumn} {#if showEditColumn}
<div <div
class:noBorder={!showHeaderBorder}
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit" class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
> >
{#if allowSelectRows} {#if allowSelectRows}
@ -352,6 +353,7 @@
> >
{#if showEditColumn} {#if showEditColumn}
<div <div
class:noBorder={!showHeaderBorder}
class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit" class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
on:click={e => { on:click={e => {
toggleSelectRow(row) toggleSelectRow(row)

5
packages/builder/src/pages/builder/portal/manage/groups/_components/UserGroupsRow.svelte
View File

@ -14,7 +14,6 @@
export let deleteGroup export let deleteGroup
export let saveGroup export let saveGroup
let modal let modal
function editGroup() { function editGroup() {
modal.show() modal.show()
} }
@ -35,7 +34,9 @@
<div class="desktop tableElement"> <div class="desktop tableElement">
<Icon name="User" /> <Icon name="User" />
<div style="margin-left: var(--spacing-l"> <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"} : "s"}
</div> </div>

15
packages/builder/src/pages/builder/portal/manage/groups/_components/UserRow.svelte
View File

@ -3,7 +3,6 @@
export let user export let user
export let removeUser export let removeUser
$: console.log(user)
</script> </script>
<div class="title"> <div class="title">
@ -14,9 +13,9 @@
</div> </div>
</div> </div>
<div class="desktop"> <div class="desktop">
<div style="display: flex; align-items: center;"> <div class="align-email">
<Body size="M">{user.email}</Body> <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> <Body size="XS">{user.access}</Body>
</div> </div>
</div> </div>
@ -33,6 +32,16 @@
align-items: center; align-items: center;
} }
.text {
opacity: 0.5;
margin: var(--spacing-xs) 0 0 var(--spacing-m);
}
.align-email {
display: flex;
align-items: center;
}
.name { .name {
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;

29
packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
View File

@ -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>

29
packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
View File

@ -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>

29
packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte
View File

@ -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>

44
packages/builder/src/pages/builder/portal/manage/users/index.svelte
View File

@ -1,12 +1,9 @@
<script> <script>
import { goto } from "@roxi/routify"
import { import {
Heading, Heading,
Body, Body,
Divider,
Button, Button,
ButtonGroup, ButtonGroup,
Search,
Table, Table,
Label, Label,
Layout, Layout,
@ -14,18 +11,21 @@
Icon, Icon,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import TagsRenderer from "./_components/TagsTableRenderer.svelte"
import AddUserModal from "./_components/AddUserModal.svelte" import AddUserModal from "./_components/AddUserModal.svelte"
import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte" import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
import { users } from "stores/portal" import { users, groups } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
import AppsTableRenderer from "./_components/AppsTableRenderer.svelte"
import NameTableRenderer from "./_components/NameTableRenderer.svelte"
const schema = { const schema = {
name: {},
email: {}, email: {},
developmentAccess: { displayName: "Development Access", type: "boolean" }, role: {},
adminAccess: { displayName: "Admin Access", type: "boolean" }, userGroup: { displayName: "User group" },
// role: { type: "options" }, apps: {},
group: {}, settings: { displayName: "" },
// access: {}, // access: {},
// group: {} // group: {}
} }
@ -47,6 +47,7 @@
let search let search
let email let email
$: filteredUsers = $users $: filteredUsers = $users
.filter(user => user.email.includes(search || "")) .filter(user => user.email.includes(search || ""))
.map(user => ({ .map(user => ({
@ -67,6 +68,7 @@
onMount(async () => { onMount(async () => {
try { try {
await users.init() await users.init()
await groups.actions.init()
} catch (error) { } catch (error) {
notifications.error("Error getting user list") notifications.error("Error getting user list")
} }
@ -99,18 +101,18 @@
> >
<Button icon="Import" primary>Import Users</Button> <Button icon="Import" primary>Import Users</Button>
</ButtonGroup> </ButtonGroup>
<div class="field">
<Label size="L">Search / filter</Label>
</div>
<Table <Table
on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema} {schema}
data={filteredUsers || $users} data={filteredUsers || $users}
allowEditColumns={false} allowEditColumns={false}
allowEditRows={false} allowEditRows={false}
allowSelectRows={false} allowSelectRows={true}
showHeaderBorder={false} showHeaderBorder={false}
customRenderers={[{ column: "group", component: TagsRenderer }]} customRenderers={[
{ column: "userGroup", component: GroupsTableRenderer },
{ column: "apps", component: AppsTableRenderer },
{ column: "name", component: NameTableRenderer },
]}
/> />
</Layout> </Layout>
</Layout> </Layout>
@ -131,19 +133,7 @@
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
} }
.field {
display: flex;
align-items: center;
flex-direction: row;
grid-gap: var(--spacing-m);
}
.field > :global(*) + :global(*) { .field > :global(*) + :global(*) {
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
} }
.users-heading {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style> </style>

Write Preview
Loading…
Cancel
Save