Update user and groups pages
This commit is contained in:
Andrew Kingston
parent
0cdc814bcc
commit
16bfe97015
32 changed files with 170 additions and 185 deletions
|
|
@ -1,10 +1,10 @@
|
|||
<script>
|
||||
export let wide = false
|
||||
export let maxWidth = "1080px"
|
||||
export let narrow = false
|
||||
export let noPadding = false
|
||||
</script>
|
||||
|
||||
<div style="--max-width: {maxWidth}" class:wide class:noPadding>
|
||||
<div class:wide class:noPadding class:narrow>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
max-width: var(--max-width);
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
flex: 1 1 auto;
|
||||
padding-bottom: 50px;
|
||||
|
|
@ -22,11 +22,10 @@
|
|||
|
||||
.wide {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.noPadding {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
.narrow {
|
||||
max-width: 800px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
export let active = false
|
||||
</script>
|
||||
|
||||
<a on:click {url} class:active>
|
||||
<a on:click href={url} class:active>
|
||||
{text}
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,16 +40,8 @@
|
|||
menu = menu.concat([
|
||||
{
|
||||
title: "Users",
|
||||
href: "/builder/portal/manage/users",
|
||||
heading: "Manage",
|
||||
href: "/builder/portal/users/users",
|
||||
},
|
||||
isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)
|
||||
? {
|
||||
title: "User Groups",
|
||||
href: "/builder/portal/manage/groups",
|
||||
badge: "New",
|
||||
}
|
||||
: undefined,
|
||||
{ title: "Auth", href: "/builder/portal/manage/auth" },
|
||||
{ title: "Email", href: "/builder/portal/manage/email" },
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<div style="float: right;">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
import { createEventDispatcher } from "svelte"
|
||||
import { fetchData } from "@budibase/frontend-core"
|
||||
import { API } from "api"
|
||||
import GroupIcon from "../../manage/groups/_components/GroupIcon.svelte"
|
||||
import GroupIcon from "../../users/groups/_components/GroupIcon.svelte"
|
||||
|
||||
export let app
|
||||
export let deployments
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<script>
|
||||
import { Page } from "@budibase/bbui"
|
||||
import { SideNav, SideNavItem, Content } from "components/portal/page"
|
||||
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||
import { isActive, url } from "@roxi/routify"
|
||||
|
||||
$: narrow = !$isActive("./users/index") && !$isActive("./groups/index")
|
||||
</script>
|
||||
|
||||
<Page {narrow}>
|
||||
<Content>
|
||||
<div slot="side-nav">
|
||||
<SideNav title="Users">
|
||||
<SideNavItem
|
||||
text="Users"
|
||||
url={$url("./users")}
|
||||
active={$isActive("./users")}
|
||||
/>
|
||||
<!--{#if isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)}-->
|
||||
<SideNavItem
|
||||
text="Groups"
|
||||
url={$url("./groups")}
|
||||
active={$isActive("./groups")}
|
||||
/>
|
||||
<!--{/if}-->
|
||||
</SideNav>
|
||||
</div>
|
||||
<slot />
|
||||
</Content>
|
||||
</Page>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { goto } from "@roxi/routify"
|
||||
import { url, goto } from "@roxi/routify"
|
||||
import {
|
||||
ActionButton,
|
||||
Button,
|
||||
Layout,
|
||||
Heading,
|
||||
|
|
@ -26,6 +25,7 @@
|
|||
import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
|
||||
import GroupIcon from "./_components/GroupIcon.svelte"
|
||||
import AppAddModal from "./_components/AppAddModal.svelte"
|
||||
import { Breadcrumbs, Breadcrumb } from "components/portal/page"
|
||||
|
||||
export let groupId
|
||||
|
||||
|
|
@ -105,87 +105,80 @@
|
|||
|
||||
{#if loaded}
|
||||
<Layout noPadding gap="XL">
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("../groups")} icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
<Breadcrumbs>
|
||||
<Breadcrumb url={$url("./")} text="Groups" />
|
||||
<Breadcrumb text={group?.name} />
|
||||
</Breadcrumbs>
|
||||
|
||||
<Layout noPadding gap="M">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<GroupIcon {group} size="L" />
|
||||
<div class="text-padding">
|
||||
<Heading>{group?.name}</Heading>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ActionMenu align="right">
|
||||
<span slot="control">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem icon="Refresh" on:click={() => editModal.show()}>
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={() => deleteModal.show()}>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<GroupIcon {group} size="L" />
|
||||
<div class="text-padding">
|
||||
<Heading>{group?.name}</Heading>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ActionMenu align="right">
|
||||
<span slot="control">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem icon="Refresh" on:click={() => editModal.show()}>
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={() => deleteModal.show()}>
|
||||
Delete
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Layout noPadding gap="S">
|
||||
<div class="header">
|
||||
<Heading size="S">Users</Heading>
|
||||
<div bind:this={popoverAnchor}>
|
||||
<Button on:click={popover.show()} icon="UserAdd" cta>
|
||||
Add user
|
||||
</Button>
|
||||
</div>
|
||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||
<UserGroupPicker
|
||||
bind:searchTerm
|
||||
labelKey="email"
|
||||
selected={group.users?.map(user => user._id)}
|
||||
list={$users.data}
|
||||
on:select={e => groups.actions.addUser(groupId, e.detail)}
|
||||
on:deselect={e => groups.actions.removeUser(groupId, e.detail)}
|
||||
/>
|
||||
</Popover>
|
||||
<Layout noPadding gap="S">
|
||||
<div class="header">
|
||||
<Heading size="S">Users</Heading>
|
||||
<div bind:this={popoverAnchor}>
|
||||
<Button on:click={popover.show()} cta>Add user</Button>
|
||||
</div>
|
||||
<List>
|
||||
{#if group?.users.length}
|
||||
{#each group.users as user}
|
||||
<ListItem
|
||||
title={user.email}
|
||||
on:click={() => $goto(`../users/${user._id}`)}
|
||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||
<UserGroupPicker
|
||||
bind:searchTerm
|
||||
labelKey="email"
|
||||
selected={group.users?.map(user => user._id)}
|
||||
list={$users.data}
|
||||
on:select={e => groups.actions.addUser(groupId, e.detail)}
|
||||
on:deselect={e => groups.actions.removeUser(groupId, e.detail)}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
<List>
|
||||
{#if group?.users.length}
|
||||
{#each group.users as user}
|
||||
<ListItem
|
||||
title={user.email}
|
||||
on:click={() => $goto(`../users/${user._id}`)}
|
||||
hoverable
|
||||
>
|
||||
<Icon
|
||||
on:click={e => {
|
||||
groups.actions.removeUser(groupId, user._id)
|
||||
e.stopPropagation()
|
||||
}}
|
||||
hoverable
|
||||
>
|
||||
<Icon
|
||||
on:click={e => {
|
||||
groups.actions.removeUser(groupId, user._id)
|
||||
e.stopPropagation()
|
||||
}}
|
||||
hoverable
|
||||
size="S"
|
||||
name="Close"
|
||||
/>
|
||||
</ListItem>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="This user group has no users" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
size="S"
|
||||
name="Close"
|
||||
/>
|
||||
</ListItem>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="This user group has no users" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
|
||||
<Layout noPadding gap="S">
|
||||
<div class="header">
|
||||
<Heading size="S">Apps</Heading>
|
||||
<div>
|
||||
<Button on:click={appAddModal.show()} icon="ExperienceAdd" cta>
|
||||
<Button on:click={appAddModal.show()} newStyles secondary>
|
||||
Add app
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
]
|
||||
|
||||
$: schema = {
|
||||
name: {},
|
||||
name: { displayName: "Group" },
|
||||
users: { sortable: false },
|
||||
roles: { sortable: false, displayName: "Apps" },
|
||||
}
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<Layout noPadding gap="M">
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="title">
|
||||
<Heading size="M">User groups</Heading>
|
||||
<Heading size="M">Groups</Heading>
|
||||
{#if !$licensing.groupsEnabled}
|
||||
<Tags>
|
||||
<Tag icon="LockClosed">Pro plan</Tag>
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
<Body>
|
||||
Easily assign and manage your users' access with user groups.
|
||||
Easily assign and manage your users' access with groups.
|
||||
{#if !$auth.accountPortalAccess && !$licensing.groupsEnabled && $admin.cloud}
|
||||
Contact your account holder to upgrade your plan.
|
||||
{/if}
|
||||
|
|
@ -110,14 +110,7 @@
|
|||
<ButtonGroup>
|
||||
{#if $licensing.groupsEnabled}
|
||||
<!--Show the group create button-->
|
||||
<Button
|
||||
newStyles
|
||||
icon={"UserGroup"}
|
||||
cta
|
||||
on:click={showCreateGroupModal}
|
||||
>
|
||||
Create user group
|
||||
</Button>
|
||||
<Button newStyles cta on:click={showCreateGroupModal}>Add group</Button>
|
||||
{:else}
|
||||
<Button
|
||||
newStyles
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { goto } from "@roxi/routify"
|
||||
import { goto, url } from "@roxi/routify"
|
||||
import {
|
||||
ActionButton,
|
||||
ActionMenu,
|
||||
Avatar,
|
||||
Button,
|
||||
|
|
@ -18,7 +17,6 @@
|
|||
Select,
|
||||
Modal,
|
||||
notifications,
|
||||
Divider,
|
||||
Banner,
|
||||
StatusLight,
|
||||
} from "@budibase/bbui"
|
||||
|
|
@ -30,6 +28,7 @@
|
|||
import DeleteUserModal from "./_components/DeleteUserModal.svelte"
|
||||
import GroupIcon from "../groups/_components/GroupIcon.svelte"
|
||||
import { Constants, RoleUtils } from "@budibase/frontend-core"
|
||||
import { Breadcrumbs, Breadcrumb } from "components/portal/page"
|
||||
|
||||
export let userId
|
||||
|
||||
|
|
@ -191,85 +190,76 @@
|
|||
|
||||
{#if loaded}
|
||||
<Layout gap="XL" noPadding>
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
<Breadcrumbs>
|
||||
<Breadcrumb url={$url("./")} text="Users" />
|
||||
<Breadcrumb text={user?.email} />
|
||||
</Breadcrumbs>
|
||||
|
||||
<Layout noPadding gap="M">
|
||||
<div class="title">
|
||||
<div>
|
||||
<div style="display: flex;">
|
||||
<Avatar size="XXL" {initials} />
|
||||
<div class="subtitle">
|
||||
<Heading size="S">{nameLabel}</Heading>
|
||||
{#if nameLabel !== user?.email}
|
||||
<Body size="S">{user?.email}</Body>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="title">
|
||||
<div>
|
||||
<div style="display: flex;">
|
||||
<Avatar size="XXL" {initials} />
|
||||
<div class="subtitle">
|
||||
<Heading size="M">{nameLabel}</Heading>
|
||||
{#if nameLabel !== user?.email}
|
||||
<Body size="S">{user?.email}</Body>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if userId !== $auth.user?._id}
|
||||
<div>
|
||||
<ActionMenu align="right">
|
||||
<span slot="control">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem on:click={resetPasswordModal.show} icon="Refresh">
|
||||
Force password reset
|
||||
</MenuItem>
|
||||
<MenuItem on:click={deleteModal.show} icon="Delete">
|
||||
Delete
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
{#if userId !== $auth.user?._id}
|
||||
<div>
|
||||
<ActionMenu align="right">
|
||||
<span slot="control">
|
||||
<Icon hoverable name="More" />
|
||||
</span>
|
||||
<MenuItem on:click={resetPasswordModal.show} icon="Refresh">
|
||||
Force password reset
|
||||
</MenuItem>
|
||||
<MenuItem on:click={deleteModal.show} icon="Delete">
|
||||
Delete
|
||||
</MenuItem>
|
||||
</ActionMenu>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<Layout noPadding gap="S">
|
||||
<Heading size="S">Details</Heading>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<Label size="L">Email</Label>
|
||||
<Input disabled value={user?.email} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<Label size="L">First name</Label>
|
||||
<Input value={user?.firstName} on:blur={updateUserFirstName} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<Label size="L">Last name</Label>
|
||||
<Input value={user?.lastName} on:blur={updateUserLastName} />
|
||||
</div>
|
||||
<!-- don't let a user remove the privileges that let them be here -->
|
||||
{#if userId !== $auth.user._id}
|
||||
<div class="field">
|
||||
<Label size="L">Role</Label>
|
||||
<Select
|
||||
value={globalRole}
|
||||
options={Constants.BudibaseRoleOptions}
|
||||
on:change={updateUserRole}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<Divider />
|
||||
<Layout noPadding gap="S">
|
||||
<Heading size="S">Details</Heading>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<Label size="L">Email</Label>
|
||||
<Input disabled value={user?.email} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<Label size="L">First name</Label>
|
||||
<Input value={user?.firstName} on:blur={updateUserFirstName} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<Label size="L">Last name</Label>
|
||||
<Input value={user?.lastName} on:blur={updateUserLastName} />
|
||||
</div>
|
||||
<!-- don't let a user remove the privileges that let them be here -->
|
||||
{#if userId !== $auth.user._id}
|
||||
<div class="field">
|
||||
<Label size="L">Role</Label>
|
||||
<Select
|
||||
value={globalRole}
|
||||
options={Constants.BudibaseRoleOptions}
|
||||
on:change={updateUserRole}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
{#if $licensing.groupsEnabled}
|
||||
<!-- User groups -->
|
||||
<Layout gap="S" noPadding>
|
||||
<div class="tableTitle">
|
||||
<Heading size="S">User groups</Heading>
|
||||
<Heading size="S">Groups</Heading>
|
||||
<div bind:this={popoverAnchor}>
|
||||
<Button
|
||||
on:click={popover.show()}
|
||||
icon="UserGroup"
|
||||
secondary
|
||||
newStyles
|
||||
>
|
||||
Add to user group
|
||||
<Button on:click={popover.show()} secondary newStyles>
|
||||
Add to group
|
||||
</Button>
|
||||
</div>
|
||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||
|
|
@ -218,20 +218,11 @@
|
|||
<Divider />
|
||||
<div class="controls">
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
dataCy="add-user"
|
||||
on:click={createUserModal.show}
|
||||
icon="UserAdd"
|
||||
cta
|
||||
>Add users
|
||||
<Button dataCy="add-user" on:click={createUserModal.show} cta>
|
||||
Add users
|
||||
</Button>
|
||||
<Button
|
||||
on:click={importUsersModal.show}
|
||||
icon="Import"
|
||||
secondary
|
||||
newStyles
|
||||
>
|
||||
Import users
|
||||
<Button on:click={importUsersModal.show} secondary newStyles>
|
||||
Import
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<div class="controls-right">
|
||||
Loading…
Reference in a new issue