Fix stale UI in user details section due to not waiting for data
This commit is contained in:
Andrew Kingston
parent
0278efbb6d
commit
f13f8eec3b
|
|
@ -21,9 +21,9 @@
|
||||||
StatusLight,
|
StatusLight,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
|
|
||||||
import { fetchData } from "helpers"
|
import { fetchData } from "helpers"
|
||||||
import { users, auth, groups, apps } from "stores/portal"
|
import { users, auth, groups, apps } from "stores/portal"
|
||||||
|
import { roles } from "stores/backend"
|
||||||
import { Constants } from "@budibase/frontend-core"
|
import { Constants } from "@budibase/frontend-core"
|
||||||
import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
|
import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
|
||||||
import { RoleUtils } from "@budibase/frontend-core"
|
import { RoleUtils } from "@budibase/frontend-core"
|
||||||
|
|
@ -40,6 +40,7 @@
|
||||||
let selectedGroups = []
|
let selectedGroups = []
|
||||||
let allAppList = []
|
let allAppList = []
|
||||||
let user
|
let user
|
||||||
|
let loaded = false
|
||||||
$: fetchUser(userId)
|
$: fetchUser(userId)
|
||||||
|
|
||||||
$: fullName = $userFetch?.data?.firstName
|
$: fullName = $userFetch?.data?.firstName
|
||||||
|
|
@ -125,6 +126,11 @@
|
||||||
return email.substring(0, 2)
|
return email.substring(0, 2)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getRoleLabel = roleId => {
|
||||||
|
const role = $roles.find(x => x._id === roleId)
|
||||||
|
return role?.name || "Custom role"
|
||||||
|
}
|
||||||
|
|
||||||
function getHighestRole(roles) {
|
function getHighestRole(roles) {
|
||||||
let highestRole
|
let highestRole
|
||||||
let highestRoleNumber = 0
|
let highestRoleNumber = 0
|
||||||
|
|
@ -205,162 +211,166 @@
|
||||||
function addAll() {}
|
function addAll() {}
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
try {
|
try {
|
||||||
await groups.actions.init()
|
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
|
||||||
await apps.load()
|
loaded = true
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
notifications.error("Error getting User groups")
|
notifications.error("Error getting user groups")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout gap="L" noPadding>
|
{#if loaded}
|
||||||
<Layout gap="XS" noPadding>
|
<Layout gap="L" noPadding>
|
||||||
<div>
|
<Layout gap="XS" noPadding>
|
||||||
<ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
|
|
||||||
Back
|
|
||||||
</ActionButton>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
<Layout gap="XS" noPadding>
|
|
||||||
<div class="title">
|
|
||||||
<div>
|
<div>
|
||||||
<div style="display: flex;">
|
<ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
|
||||||
<Avatar size="XXL" {initials} />
|
Back
|
||||||
<div class="subtitle">
|
</ActionButton>
|
||||||
<Heading size="S">{nameLabel}</Heading>
|
</div>
|
||||||
<Body size="XS">{$userFetch?.data?.email}</Body>
|
</Layout>
|
||||||
|
<Layout gap="XS" noPadding>
|
||||||
|
<div class="title">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex;">
|
||||||
|
<Avatar size="XXL" {initials} />
|
||||||
|
<div class="subtitle">
|
||||||
|
<Heading size="S">{nameLabel}</Heading>
|
||||||
|
<Body size="XS">{$userFetch?.data?.email}</Body>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 -->
|
|
||||||
<Layout gap="XS" noPadding>
|
|
||||||
<div class="tableTitle">
|
|
||||||
<div>
|
<div>
|
||||||
<Heading size="XS">User groups</Heading>
|
<ActionMenu align="right">
|
||||||
<Body size="S">Add or remove this user from user groups</Body>
|
<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>
|
||||||
<div bind:this={popoverAnchor}>
|
</div>
|
||||||
<Button on:click={popover.show()} icon="UserGroup" cta
|
</Layout>
|
||||||
>Add User Group</Button
|
<Layout gap="S" noPadding>
|
||||||
>
|
<div class="fields">
|
||||||
</div>
|
<div class="field">
|
||||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
<Label size="L">First name</Label>
|
||||||
<UserGroupPicker
|
<Input
|
||||||
key={"name"}
|
thin
|
||||||
title={"Group"}
|
value={$userFetch?.data?.firstName}
|
||||||
bind:searchTerm
|
on:blur={updateUserFirstName}
|
||||||
bind:selected={selectedGroups}
|
|
||||||
bind:filtered={filteredGroups}
|
|
||||||
{addAll}
|
|
||||||
select={addGroup}
|
|
||||||
/>
|
/>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<List>
|
<List>
|
||||||
{#if userGroups.length}
|
{#if allAppList.length}
|
||||||
{#each userGroups as group}
|
{#each allAppList as app}
|
||||||
<ListItem
|
<div
|
||||||
title={group.name}
|
class="pointer"
|
||||||
icon={group.icon}
|
on:click={$goto(`../../overview/${app.devId}`)}
|
||||||
iconBackground={group.color}
|
|
||||||
><Icon
|
|
||||||
on:click={removeGroup(group._id)}
|
|
||||||
hoverable
|
|
||||||
size="L"
|
|
||||||
name="Close"
|
|
||||||
/></ListItem
|
|
||||||
>
|
>
|
||||||
|
<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}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
<ListItem icon="UserGroup" title="No groups" />
|
<ListItem icon="Apps" title="No apps" />
|
||||||
{/if}
|
{/if}
|
||||||
</List>
|
</List>
|
||||||
</Layout>
|
</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>
|
||||||
</Layout>
|
{/if}
|
||||||
|
|
||||||
<Modal bind:this={deleteModal}>
|
<Modal bind:this={deleteModal}>
|
||||||
<DeleteUserModal user={$userFetch.data} />
|
<DeleteUserModal user={$userFetch.data} />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue