users table renderer
This commit is contained in:
Peter Clement
parent
389558fd95
commit
271b274b27
|
|
@ -285,6 +285,7 @@
|
|||
<div class="spectrum-Table-head">
|
||||
{#if showEditColumn}
|
||||
<div
|
||||
class:noBorder={!showHeaderBorder}
|
||||
class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
|
||||
>
|
||||
{#if allowSelectRows}
|
||||
|
|
@ -352,6 +353,7 @@
|
|||
>
|
||||
{#if showEditColumn}
|
||||
<div
|
||||
class:noBorder={!showHeaderBorder}
|
||||
class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
|
||||
on:click={e => {
|
||||
toggleSelectRow(row)
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
export let deleteGroup
|
||||
export let saveGroup
|
||||
let modal
|
||||
|
||||
function editGroup() {
|
||||
modal.show()
|
||||
}
|
||||
|
|
@ -35,7 +34,9 @@
|
|||
<div class="desktop tableElement">
|
||||
<Icon name="User" />
|
||||
<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"}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
export let user
|
||||
export let removeUser
|
||||
$: console.log(user)
|
||||
</script>
|
||||
|
||||
<div class="title">
|
||||
|
|
@ -14,9 +13,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div class="align-email">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,6 +32,16 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
opacity: 0.5;
|
||||
margin: var(--spacing-xs) 0 0 var(--spacing-m);
|
||||
}
|
||||
|
||||
.align-email {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-decoration: none;
|
||||
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>
|
||||
import { goto } from "@roxi/routify"
|
||||
import {
|
||||
Heading,
|
||||
Body,
|
||||
Divider,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Search,
|
||||
Table,
|
||||
Label,
|
||||
Layout,
|
||||
|
|
@ -14,18 +11,21 @@
|
|||
Icon,
|
||||
notifications,
|
||||
} 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"
|
||||
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"
|
||||
|
||||
const schema = {
|
||||
name: {},
|
||||
email: {},
|
||||
developmentAccess: { displayName: "Development Access", type: "boolean" },
|
||||
adminAccess: { displayName: "Admin Access", type: "boolean" },
|
||||
// role: { type: "options" },
|
||||
group: {},
|
||||
role: {},
|
||||
userGroup: { displayName: "User group" },
|
||||
apps: {},
|
||||
settings: { displayName: "" },
|
||||
// access: {},
|
||||
// group: {}
|
||||
}
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
|
||||
let search
|
||||
let email
|
||||
|
||||
$: filteredUsers = $users
|
||||
.filter(user => user.email.includes(search || ""))
|
||||
.map(user => ({
|
||||
|
|
@ -67,6 +68,7 @@
|
|||
onMount(async () => {
|
||||
try {
|
||||
await users.init()
|
||||
await groups.actions.init()
|
||||
} catch (error) {
|
||||
notifications.error("Error getting user list")
|
||||
}
|
||||
|
|
@ -99,18 +101,18 @@
|
|||
>
|
||||
<Button icon="Import" primary>Import Users</Button>
|
||||
</ButtonGroup>
|
||||
<div class="field">
|
||||
<Label size="L">Search / filter</Label>
|
||||
</div>
|
||||
<Table
|
||||
on:click={({ detail }) => $goto(`./${detail._id}`)}
|
||||
{schema}
|
||||
data={filteredUsers || $users}
|
||||
allowEditColumns={false}
|
||||
allowEditRows={false}
|
||||
allowSelectRows={false}
|
||||
allowSelectRows={true}
|
||||
showHeaderBorder={false}
|
||||
customRenderers={[{ column: "group", component: TagsRenderer }]}
|
||||
customRenderers={[
|
||||
{ column: "userGroup", component: GroupsTableRenderer },
|
||||
{ column: "apps", component: AppsTableRenderer },
|
||||
{ column: "name", component: NameTableRenderer },
|
||||
]}
|
||||
/>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
|
@ -131,19 +133,7 @@
|
|||
margin-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
grid-gap: var(--spacing-m);
|
||||
}
|
||||
.field > :global(*) + :global(*) {
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
.users-heading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue