Andrew Kingston
GitHub
commit
88444df24b
|
|
@ -233,7 +233,10 @@
|
|||
</div>
|
||||
{:else if getPrimaryOptionColour(option, idx)}
|
||||
<span class="option-left">
|
||||
<StatusLight color={getPrimaryOptionColour(option, idx)} />
|
||||
<StatusLight
|
||||
square
|
||||
color={getPrimaryOptionColour(option, idx)}
|
||||
/>
|
||||
</span>
|
||||
{/if}
|
||||
<span class="spectrum-Menu-itemLabel">
|
||||
|
|
@ -253,6 +256,7 @@
|
|||
{#if getPrimaryOptionIcon(option, idx) && getPrimaryOptionColour(option, idx)}
|
||||
<span class="option-right">
|
||||
<StatusLight
|
||||
square
|
||||
color={getPrimaryOptionColour(option, idx)}
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -281,7 +285,7 @@
|
|||
</span>
|
||||
{:else if secondaryFieldColour}
|
||||
<span class="option-left">
|
||||
<StatusLight color={secondaryFieldColour} />
|
||||
<StatusLight square color={secondaryFieldColour} />
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
|
|
@ -319,6 +323,7 @@
|
|||
{#if getSecondaryOptionColour(option, idx)}
|
||||
<span class="option-left">
|
||||
<StatusLight
|
||||
square
|
||||
color={getSecondaryOptionColour(option, idx)}
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -351,6 +356,13 @@
|
|||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.spectrum-InputGroup :global(.spectrum-Search-input) {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.override-borders {
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
href: "/builder/portal/manage/groups",
|
||||
}
|
||||
|
||||
menu.splice(1, 0, item)
|
||||
menu.splice(2, 0, item)
|
||||
}
|
||||
|
||||
if (!$adminStore.cloud) {
|
||||
|
|
|
|||
|
|
@ -18,23 +18,44 @@
|
|||
import { users, apps, groups } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
import { roles } from "stores/backend"
|
||||
|
||||
export let groupId
|
||||
|
||||
let popoverAnchor
|
||||
let popover
|
||||
let searchTerm = ""
|
||||
let selectedUsers = []
|
||||
let prevSearch = undefined,
|
||||
search = undefined
|
||||
let prevSearch = undefined
|
||||
let pageInfo = createPaginationStore()
|
||||
let loaded = false
|
||||
|
||||
$: page = $pageInfo.page
|
||||
$: fetchUsers(page, search)
|
||||
$: fetchUsers(page, searchTerm)
|
||||
$: group = $groups.find(x => x._id === groupId)
|
||||
|
||||
async function addAll() {
|
||||
group.users = selectedUsers
|
||||
selectedUsers = [...selectedUsers, ...filtered.map(u => u._id)]
|
||||
|
||||
let reducedUserObjects = filtered.map(u => {
|
||||
return {
|
||||
_id: u._id,
|
||||
email: u.email,
|
||||
}
|
||||
})
|
||||
group.users = [...reducedUserObjects, ...group.users]
|
||||
|
||||
await groups.actions.save(group)
|
||||
|
||||
$users.data.forEach(async user => {
|
||||
let userToEdit = await users.get(user._id)
|
||||
let userGroups = userToEdit.userGroups || []
|
||||
userGroups.push(groupId)
|
||||
await users.save({
|
||||
...userToEdit,
|
||||
userGroups,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
async function selectUser(id) {
|
||||
|
|
@ -97,106 +118,119 @@
|
|||
prevSearch = search
|
||||
try {
|
||||
pageInfo.loading()
|
||||
await users.search({ page, search })
|
||||
await users.search({ page, email: search })
|
||||
pageInfo.fetched($users.hasNextPage, $users.nextPage)
|
||||
} catch (error) {
|
||||
notifications.error("Error getting user list")
|
||||
}
|
||||
}
|
||||
|
||||
const getRoleLabel = appId => {
|
||||
const roleId = group?.roles?.[`app_${appId}`]
|
||||
const role = $roles.find(x => x._id === roleId)
|
||||
return role?.name || "Custom role"
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await groups.actions.init()
|
||||
await apps.load()
|
||||
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
|
||||
loaded = true
|
||||
} catch (error) {
|
||||
notifications.error("Error fetching User Group data")
|
||||
notifications.error("Error fetching user group data")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div style="background: {group?.color};" class="circle">
|
||||
<div>
|
||||
<Icon size="M" name={group?.icon} />
|
||||
{#if loaded}
|
||||
<Layout noPadding>
|
||||
<div>
|
||||
<ActionButton
|
||||
on:click={() => $goto("../groups")}
|
||||
size="S"
|
||||
icon="ArrowLeft"
|
||||
>
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div style="background: {group?.color};" class="circle">
|
||||
<div>
|
||||
<Icon size="M" name={group?.icon} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-padding">
|
||||
<Heading>{group?.name}</Heading>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-padding">
|
||||
<Heading>{group?.name}</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
|
||||
key={"email"}
|
||||
title={"User"}
|
||||
bind:searchTerm
|
||||
bind:selected={selectedUsers}
|
||||
bind:filtered
|
||||
{addAll}
|
||||
select={selectUser}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<List>
|
||||
{#if group?.users.length}
|
||||
{#each group.users as user}
|
||||
<ListItem title={user?.email} avatar
|
||||
><Icon
|
||||
on:click={() => removeUser(user?._id)}
|
||||
hoverable
|
||||
size="L"
|
||||
name="Close"
|
||||
/></ListItem
|
||||
>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="You have no users in this team" />
|
||||
{/if}
|
||||
</List>
|
||||
<div
|
||||
style="flex-direction: column; margin-top: var(--spacing-m)"
|
||||
class="title"
|
||||
>
|
||||
<Heading weight="light" size="XS">Apps</Heading>
|
||||
<div style="margin-top: var(--spacing-xs)">
|
||||
<Body size="S"
|
||||
>Manage apps that this User group has been assigned to</Body
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
key={"email"}
|
||||
title={"User"}
|
||||
bind:searchTerm
|
||||
bind:selected={selectedUsers}
|
||||
bind:filtered
|
||||
{addAll}
|
||||
select={selectUser}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<List>
|
||||
{#if group?.users.length}
|
||||
{#each group.users as user}
|
||||
<ListItem title={user?.email} avatar
|
||||
><Icon
|
||||
on:click={() => removeUser(user?._id)}
|
||||
hoverable
|
||||
size="L"
|
||||
name="Close"
|
||||
/></ListItem
|
||||
>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="You have no users in this team" />
|
||||
{/if}
|
||||
</List>
|
||||
<div
|
||||
style="flex-direction: column; margin-top: var(--spacing-m)"
|
||||
class="title"
|
||||
>
|
||||
<Heading weight="light" size="XS">Apps</Heading>
|
||||
<div style="margin-top: var(--spacing-xs)">
|
||||
<Body size="S">Manage apps that this User group has been assigned to</Body
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<List>
|
||||
{#if groupApps.length}
|
||||
{#each groupApps as app}
|
||||
<ListItem
|
||||
title={app.name}
|
||||
icon={app?.icon?.name || "Apps"}
|
||||
iconBackground={app?.icon?.color || ""}
|
||||
>
|
||||
<div class="title ">
|
||||
<StatusLight
|
||||
color={RoleUtils.getRoleColour(group.roles[app.appId])}
|
||||
/>
|
||||
<div style="margin-left: var(--spacing-s);">
|
||||
<Body size="XS">{group.roles[app.appId]}</Body>
|
||||
<List>
|
||||
{#if groupApps.length}
|
||||
{#each groupApps as app}
|
||||
<ListItem
|
||||
title={app.name}
|
||||
icon={app?.icon?.name || "Apps"}
|
||||
iconBackground={app?.icon?.color || ""}
|
||||
>
|
||||
<div class="title ">
|
||||
<StatusLight
|
||||
square
|
||||
color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])}
|
||||
>
|
||||
{getRoleLabel(app.appId)}
|
||||
</StatusLight>
|
||||
</div>
|
||||
</div>
|
||||
</ListItem>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="No apps" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
</ListItem>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="No apps" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.text-padding {
|
||||
|
|
|
|||
|
|
@ -14,13 +14,9 @@
|
|||
import { Constants } from "@budibase/frontend-core"
|
||||
import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
|
||||
import UserGroupsRow from "./_components/UserGroupsRow.svelte"
|
||||
import { cloneDeep } from "lodash/fp"
|
||||
|
||||
$: hasGroupsLicense = $auth.user?.license.features.includes(
|
||||
Constants.Features.USER_GROUPS
|
||||
)
|
||||
|
||||
let modal
|
||||
let group = {
|
||||
const DefaultGroup = {
|
||||
name: "",
|
||||
icon: "UserGroup",
|
||||
color: "var(--spectrum-global-color-blue-600)",
|
||||
|
|
@ -28,6 +24,12 @@
|
|||
apps: [],
|
||||
roles: {},
|
||||
}
|
||||
let modal
|
||||
let group = cloneDeep(DefaultGroup)
|
||||
|
||||
$: hasGroupsLicense = $auth.user?.license.features.includes(
|
||||
Constants.Features.USER_GROUPS
|
||||
)
|
||||
|
||||
async function deleteGroup(group) {
|
||||
try {
|
||||
|
|
@ -45,6 +47,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
const showCreateGroupModal = () => {
|
||||
group = cloneDeep(DefaultGroup)
|
||||
modal?.show()
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
if (hasGroupsLicense) {
|
||||
|
|
@ -78,10 +85,11 @@
|
|||
icon={hasGroupsLicense ? "UserGroup" : ""}
|
||||
cta={hasGroupsLicense}
|
||||
on:click={hasGroupsLicense
|
||||
? () => modal.show()
|
||||
? showCreateGroupModal
|
||||
: window.open("https://budibase.com/pricing/", "_blank")}
|
||||
>{hasGroupsLicense ? "Create user group" : "Upgrade Account"}</Button
|
||||
>
|
||||
{hasGroupsLicense ? "Create user group" : "Upgrade Account"}
|
||||
</Button>
|
||||
{#if !hasGroupsLicense}
|
||||
<Button
|
||||
newStyles
|
||||
|
|
@ -130,7 +138,7 @@
|
|||
.groupTable :global(> div) {
|
||||
background: var(--bg-color);
|
||||
|
||||
height: 70px;
|
||||
height: 55px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-gap: var(--spacing-xl);
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@
|
|||
StatusLight,
|
||||
} from "@budibase/bbui"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import { fetchData } from "helpers"
|
||||
import { users, auth, groups, apps } from "stores/portal"
|
||||
import { roles } from "stores/backend"
|
||||
import { Constants } from "@budibase/frontend-core"
|
||||
import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
let selectedGroups = []
|
||||
let allAppList = []
|
||||
let user
|
||||
let loaded = false
|
||||
$: fetchUser(userId)
|
||||
|
||||
$: fullName = $userFetch?.data?.firstName
|
||||
|
|
@ -49,6 +50,8 @@
|
|||
$: hasGroupsLicense = $auth.user?.license.features.includes(
|
||||
Constants.Features.USER_GROUPS
|
||||
)
|
||||
$: nameLabel = getNameLabel($userFetch)
|
||||
$: initials = getInitials(nameLabel)
|
||||
|
||||
$: allAppList = $apps
|
||||
.filter(x => {
|
||||
|
|
@ -91,6 +94,39 @@
|
|||
|
||||
const userFetch = fetchData(`/api/global/users/${userId}`)
|
||||
|
||||
const getNameLabel = userFetch => {
|
||||
const { firstName, lastName, email } = userFetch?.data || {}
|
||||
if (!firstName && !lastName) {
|
||||
return email || ""
|
||||
}
|
||||
let label
|
||||
if (firstName) {
|
||||
label = firstName
|
||||
if (lastName) {
|
||||
label += ` ${lastName}`
|
||||
}
|
||||
} else {
|
||||
label = lastName
|
||||
}
|
||||
return label
|
||||
}
|
||||
|
||||
const getInitials = nameLabel => {
|
||||
if (!nameLabel) {
|
||||
return "?"
|
||||
}
|
||||
return nameLabel
|
||||
.split(" ")
|
||||
.slice(0, 2)
|
||||
.map(x => x[0])
|
||||
.join("")
|
||||
}
|
||||
|
||||
const getRoleLabel = roleId => {
|
||||
const role = $roles.find(x => x._id === roleId)
|
||||
return role?.name || "Custom role"
|
||||
}
|
||||
|
||||
function getHighestRole(roles) {
|
||||
let highestRole
|
||||
let highestRoleNumber = 0
|
||||
|
|
@ -171,176 +207,168 @@
|
|||
function addAll() {}
|
||||
onMount(async () => {
|
||||
try {
|
||||
await groups.actions.init()
|
||||
await apps.load()
|
||||
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
|
||||
loaded = true
|
||||
} catch (error) {
|
||||
notifications.error("Error getting User groups")
|
||||
notifications.error("Error getting user groups")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout gap="L" noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
</Layout>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="title">
|
||||
<div>
|
||||
<div style="display: flex;">
|
||||
<Avatar
|
||||
size="XXL"
|
||||
initials={user?.email
|
||||
.split(" ")
|
||||
.map(x => x[0])
|
||||
.join("")}
|
||||
/>
|
||||
|
||||
{#if fullName}
|
||||
<div class="subtitle">
|
||||
<Heading size="S">{fullName}</Heading>
|
||||
|
||||
<Body size="XS">{$userFetch?.data?.email}</Body>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="alignEmail">
|
||||
<Heading size="S">{$userFetch?.data?.email}</Heading>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</Layout>
|
||||
<Layout gap="S" noPadding>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<Label size="L">First name</Label>
|
||||
<Input
|
||||
thin
|
||||
value={$userFetch?.data?.firstName}
|
||||
on:blur={updateUserFirstName}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<Label size="L">Last name</Label>
|
||||
<Input
|
||||
thin
|
||||
value={$userFetch?.data?.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.BbRoles}
|
||||
on:change={updateUserRole}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
{#if hasGroupsLicense}
|
||||
<!-- User groups -->
|
||||
{#if loaded}
|
||||
<Layout gap="L" noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="tableTitle">
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
</Layout>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="title">
|
||||
<div>
|
||||
<Heading size="XS">User groups</Heading>
|
||||
<Body size="S">Add or remove this user from user groups</Body>
|
||||
<div style="display: flex;">
|
||||
<Avatar size="XXL" {initials} />
|
||||
<div class="subtitle">
|
||||
<Heading size="S">{nameLabel}</Heading>
|
||||
{#if nameLabel !== $userFetch?.data?.email}
|
||||
<Body size="XS">{$userFetch?.data?.email}</Body>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div bind:this={popoverAnchor}>
|
||||
<Button on:click={popover.show()} icon="UserGroup" cta
|
||||
>Add User Group</Button
|
||||
>
|
||||
<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>
|
||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||
<UserGroupPicker
|
||||
key={"name"}
|
||||
title={"Group"}
|
||||
bind:searchTerm
|
||||
bind:selected={selectedGroups}
|
||||
bind:filtered={filteredGroups}
|
||||
{addAll}
|
||||
select={addGroup}
|
||||
</div>
|
||||
</Layout>
|
||||
<Layout gap="S" noPadding>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<Label size="L">First name</Label>
|
||||
<Input
|
||||
thin
|
||||
value={$userFetch?.data?.firstName}
|
||||
on:blur={updateUserFirstName}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="field">
|
||||
<Label size="L">Last name</Label>
|
||||
<Input
|
||||
thin
|
||||
value={$userFetch?.data?.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.BbRoles}
|
||||
on:change={updateUserRole}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
{#if hasGroupsLicense}
|
||||
<!-- User groups -->
|
||||
<Layout gap="XS" noPadding>
|
||||
<div class="tableTitle">
|
||||
<div>
|
||||
<Heading size="XS">User groups</Heading>
|
||||
<Body size="S">Add or remove this user from user groups</Body>
|
||||
</div>
|
||||
<div bind:this={popoverAnchor}>
|
||||
<Button on:click={popover.show()} icon="UserGroup" cta>
|
||||
Add user group
|
||||
</Button>
|
||||
</div>
|
||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||
<UserGroupPicker
|
||||
key={"name"}
|
||||
title={"Group"}
|
||||
bind:searchTerm
|
||||
bind:selected={selectedGroups}
|
||||
bind:filtered={filteredGroups}
|
||||
{addAll}
|
||||
select={addGroup}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<List>
|
||||
{#if userGroups.length}
|
||||
{#each userGroups as group}
|
||||
<ListItem
|
||||
title={group.name}
|
||||
icon={group.icon}
|
||||
iconBackground={group.color}
|
||||
><Icon
|
||||
on:click={removeGroup(group._id)}
|
||||
hoverable
|
||||
size="L"
|
||||
name="Close"
|
||||
/></ListItem
|
||||
>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="No groups" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
{/if}
|
||||
<!-- User Apps -->
|
||||
<Layout gap="S" noPadding>
|
||||
<div class="appsTitle">
|
||||
<Heading weight="light" size="XS">Apps</Heading>
|
||||
<div style="margin-top: var(--spacing-xs)">
|
||||
<Body size="S">Manage apps that this user has been assigned to</Body>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<List>
|
||||
{#if userGroups.length}
|
||||
{#each userGroups as group}
|
||||
<ListItem
|
||||
title={group.name}
|
||||
icon={group.icon}
|
||||
iconBackground={group.color}
|
||||
><Icon
|
||||
on:click={removeGroup(group._id)}
|
||||
hoverable
|
||||
size="L"
|
||||
name="Close"
|
||||
/></ListItem
|
||||
{#if allAppList.length}
|
||||
{#each allAppList as app}
|
||||
<div
|
||||
class="pointer"
|
||||
on:click={$goto(`../../overview/${app.devId}`)}
|
||||
>
|
||||
<ListItem
|
||||
title={app.name}
|
||||
iconBackground={app?.icon?.color || ""}
|
||||
icon={app?.icon?.name || "Apps"}
|
||||
>
|
||||
<div class="title ">
|
||||
<StatusLight
|
||||
square
|
||||
color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
|
||||
>
|
||||
{getRoleLabel(getHighestRole(app.roles))}
|
||||
</StatusLight>
|
||||
</div>
|
||||
</ListItem>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="No groups" />
|
||||
<ListItem icon="Apps" title="No apps" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
{/if}
|
||||
<!-- User Apps -->
|
||||
<Layout gap="S" noPadding>
|
||||
<div class="appsTitle">
|
||||
<Heading weight="light" size="XS">Apps</Heading>
|
||||
<div style="margin-top: var(--spacing-xs)">
|
||||
<Body size="S">Manage apps that this user has been assigned to</Body>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<List>
|
||||
{#if allAppList.length}
|
||||
{#each allAppList as app}
|
||||
<div class="pointer" on:click={$goto(`../../overview/${app.devId}`)}>
|
||||
<ListItem
|
||||
title={app.name}
|
||||
iconBackground={app?.icon?.color || ""}
|
||||
icon={app?.icon?.name || "Apps"}
|
||||
>
|
||||
<div class="title ">
|
||||
<StatusLight
|
||||
color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
|
||||
/>
|
||||
<div style="margin-left: var(--spacing-s);">
|
||||
<Body size="XS"
|
||||
>{Constants.Roles[getHighestRole(app.roles)]}</Body
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</ListItem>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="Apps" title="No apps" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
</Layout>
|
||||
{/if}
|
||||
|
||||
<Modal bind:this={deleteModal}>
|
||||
<DeleteUserModal user={$userFetch.data} />
|
||||
|
|
@ -380,17 +408,14 @@
|
|||
|
||||
.subtitle {
|
||||
padding: 0 0 0 var(--spacing-m);
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.appsTitle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.alignEmail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -123,12 +123,7 @@
|
|||
.fix-height {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.normal-height {
|
||||
margin-bottom: 0%;
|
||||
}
|
||||
|
||||
:global(.spectrum-Picker) {
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -108,10 +108,6 @@
|
|||
</ModalContent>
|
||||
|
||||
<style>
|
||||
:global(.spectrum-Picker) {
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -79,10 +79,6 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
:global(.spectrum-Picker) {
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: var(--spectrum-alias-item-height-l);
|
||||
|
|
|
|||
|
|
@ -249,10 +249,10 @@
|
|||
dataCy="add-user"
|
||||
on:click={createUserModal.show}
|
||||
icon="UserAdd"
|
||||
cta>Add Users</Button
|
||||
cta>Add users</Button
|
||||
>
|
||||
<Button on:click={importUsersModal.show} icon="Import" primary
|
||||
>Import Users</Button
|
||||
>Import users</Button
|
||||
>
|
||||
|
||||
<div class="field">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
ModalContent,
|
||||
PickerDropdown,
|
||||
ActionButton,
|
||||
Layout,
|
||||
notifications,
|
||||
} from "@budibase/bbui"
|
||||
import { roles } from "stores/backend"
|
||||
|
|
@ -38,9 +39,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
$: filteredGroups = $groups.filter(element => {
|
||||
return !element.apps.find(y => {
|
||||
return y.appId === app.appId
|
||||
$: filteredGroups = $groups.filter(group => {
|
||||
return !group.apps.find(appId => {
|
||||
return appId === app.appId
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -78,24 +79,26 @@
|
|||
onConfirm={() => addData(appData)}
|
||||
showCloseIcon={false}
|
||||
>
|
||||
{#each appData as input, index}
|
||||
<PickerDropdown
|
||||
autocomplete
|
||||
primaryOptions={optionSections}
|
||||
secondaryOptions={$roles}
|
||||
bind:primaryValue={input.id}
|
||||
bind:secondaryValue={input.role}
|
||||
bind:searchTerm={search}
|
||||
getPrimaryOptionLabel={group => group.name}
|
||||
getPrimaryOptionValue={group => group.name}
|
||||
getPrimaryOptionIcon={group => group.icon}
|
||||
getPrimaryOptionColour={group => group.colour}
|
||||
getSecondaryOptionLabel={role => role.name}
|
||||
getSecondaryOptionValue={role => role._id}
|
||||
getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
|
||||
/>
|
||||
{/each}
|
||||
|
||||
<Layout noPadding gap="XS">
|
||||
{#each appData as input, index}
|
||||
<PickerDropdown
|
||||
autocomplete
|
||||
primaryOptions={optionSections}
|
||||
secondaryOptions={$roles}
|
||||
secondaryPlaceholder="Access"
|
||||
bind:primaryValue={input.id}
|
||||
bind:secondaryValue={input.role}
|
||||
bind:searchTerm={search}
|
||||
getPrimaryOptionLabel={group => group.name}
|
||||
getPrimaryOptionValue={group => group.name}
|
||||
getPrimaryOptionIcon={group => group.icon}
|
||||
getPrimaryOptionColour={group => group.colour}
|
||||
getSecondaryOptionLabel={role => role.name}
|
||||
getSecondaryOptionValue={role => role._id}
|
||||
getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
|
||||
/>
|
||||
{/each}
|
||||
</Layout>
|
||||
<div>
|
||||
<ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import { store } from "builderStore"
|
||||
import clientPackage from "@budibase/client/package.json"
|
||||
import { processStringSync } from "@budibase/string-templates"
|
||||
import { users, auth } from "stores/portal"
|
||||
import { users, auth, apps } from "stores/portal"
|
||||
import { createEventDispatcher, onMount } from "svelte"
|
||||
|
||||
export let app
|
||||
|
|
@ -40,9 +40,11 @@
|
|||
}
|
||||
|
||||
onMount(async () => {
|
||||
let resp = await users.getUserCountByApp({ appId: "app_" + app.appId })
|
||||
let resp = await users.getUserCountByApp({
|
||||
appId: apps.getProdAppID(app.devId),
|
||||
})
|
||||
userCount = resp.userCount
|
||||
await users.search({ appId: "app_" + app.appId, limit: 4 })
|
||||
await users.search({ appId: apps.getProdAppID(app.devId), limit: 4 })
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue