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, 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,15 +211,16 @@
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="L" noPadding>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<div> <div>
<ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft"> <ActionButton on:click={() => $goto("./")} size="S" icon="ArrowLeft">
@ -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>
@ -360,7 +369,8 @@
{/if} {/if}
</List> </List>
</Layout> </Layout>
</Layout> </Layout>
{/if}
<Modal bind:this={deleteModal}> <Modal bind:this={deleteModal}>
<DeleteUserModal user={$userFetch.data} /> <DeleteUserModal user={$userFetch.data} />