Fix stale UI in user details section due to not waiting for data
This commit is contained in:
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,14 +211,15 @@
|
||||||
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>
|
||||||
|
|
||||||
|
{#if loaded}
|
||||||
<Layout gap="L" noPadding>
|
<Layout gap="L" noPadding>
|
||||||
<Layout gap="XS" noPadding>
|
<Layout gap="XS" noPadding>
|
||||||
<div>
|
<div>
|
||||||
|
@ -240,7 +247,8 @@
|
||||||
<MenuItem on:click={resetPasswordModal.show} icon="Refresh"
|
<MenuItem on:click={resetPasswordModal.show} icon="Refresh"
|
||||||
>Force Password Reset</MenuItem
|
>Force Password Reset</MenuItem
|
||||||
>
|
>
|
||||||
<MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem>
|
<MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem
|
||||||
|
>
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -336,7 +344,10 @@
|
||||||
<List>
|
<List>
|
||||||
{#if allAppList.length}
|
{#if allAppList.length}
|
||||||
{#each allAppList as app}
|
{#each allAppList as app}
|
||||||
<div class="pointer" on:click={$goto(`../../overview/${app.devId}`)}>
|
<div
|
||||||
|
class="pointer"
|
||||||
|
on:click={$goto(`../../overview/${app.devId}`)}
|
||||||
|
>
|
||||||
<ListItem
|
<ListItem
|
||||||
title={app.name}
|
title={app.name}
|
||||||
iconBackground={app?.icon?.color || ""}
|
iconBackground={app?.icon?.color || ""}
|
||||||
|
@ -344,13 +355,11 @@
|
||||||
>
|
>
|
||||||
<div class="title ">
|
<div class="title ">
|
||||||
<StatusLight
|
<StatusLight
|
||||||
|
square
|
||||||
color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
|
color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
|
||||||
/>
|
|
||||||
<div style="margin-left: var(--spacing-s);">
|
|
||||||
<Body size="XS"
|
|
||||||
>{Constants.Roles[getHighestRole(app.roles)]}</Body
|
|
||||||
>
|
>
|
||||||
</div>
|
{getRoleLabel(getHighestRole(app.roles))}
|
||||||
|
</StatusLight>
|
||||||
</div>
|
</div>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</div>
|
</div>
|
||||||
|
@ -361,6 +370,7 @@
|
||||||
</List>
|
</List>
|
||||||
</Layout>
|
</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