users table renderer
This commit is contained in:
parent
389558fd95
commit
271b274b27
|
@ -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)
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue