Fix stale UI in user details section due to not waiting for data

This commit is contained in:
Andrew Kingston 2022-08-01 11:48:34 +01:00
parent 0278efbb6d
commit f13f8eec3b
1 changed files with 146 additions and 136 deletions

View File

@ -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
@ -125,6 +126,11 @@
return email.substring(0, 2)
}
const getRoleLabel = roleId => {
const role = $roles.find(x => x._id === roleId)
return role?.name || "Custom role"
}
function getHighestRole(roles) {
let highestRole
let highestRoleNumber = 0
@ -205,15 +211,16 @@
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>
{#if loaded}
<Layout gap="L" noPadding>
<Layout gap="XS" noPadding>
<div>
<ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
@ -240,7 +247,8 @@
<MenuItem on:click={resetPasswordModal.show} icon="Refresh"
>Force Password Reset</MenuItem
>
<MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem>
<MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem
>
</ActionMenu>
</div>
</div>
@ -336,7 +344,10 @@
<List>
{#if allAppList.length}
{#each allAppList as app}
<div class="pointer" on:click={$goto(`../../overview/${app.devId}`)}>
<div
class="pointer"
on:click={$goto(`../../overview/${app.devId}`)}
>
<ListItem
title={app.name}
iconBackground={app?.icon?.color || ""}
@ -344,13 +355,11 @@
>
<div class="title ">
<StatusLight
square
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>
</ListItem>
</div>
@ -360,7 +369,8 @@
{/if}
</List>
</Layout>
</Layout>
</Layout>
{/if}
<Modal bind:this={deleteModal}>
<DeleteUserModal user={$userFetch.data} />