Fix stale data in group details page, fix role colour in group app access
This commit is contained in:
Andrew Kingston
parent
08849395f1
commit
9ae11bcb49
|
|
@ -18,9 +18,10 @@
|
||||||
import { users, apps, groups } from "stores/portal"
|
import { users, apps, groups } from "stores/portal"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import { RoleUtils } from "@budibase/frontend-core"
|
import { RoleUtils } from "@budibase/frontend-core"
|
||||||
import { roles } from "../../../../../stores/backend"
|
import { roles } from "stores/backend"
|
||||||
|
|
||||||
export let groupId
|
export let groupId
|
||||||
|
|
||||||
let popoverAnchor
|
let popoverAnchor
|
||||||
let popover
|
let popover
|
||||||
let searchTerm = ""
|
let searchTerm = ""
|
||||||
|
|
@ -28,6 +29,7 @@
|
||||||
let prevSearch = undefined,
|
let prevSearch = undefined,
|
||||||
search = undefined
|
search = undefined
|
||||||
let pageInfo = createPaginationStore()
|
let pageInfo = createPaginationStore()
|
||||||
|
let loaded = false
|
||||||
|
|
||||||
$: page = $pageInfo.page
|
$: page = $pageInfo.page
|
||||||
$: fetchUsers(page, search)
|
$: fetchUsers(page, search)
|
||||||
|
|
@ -113,98 +115,104 @@
|
||||||
|
|
||||||
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
|
||||||
await roles.fetch()
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
notifications.error("Error fetching User Group data")
|
notifications.error("Error fetching user group data")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout noPadding>
|
{#if loaded}
|
||||||
<div>
|
<Layout noPadding>
|
||||||
<ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
|
<div>
|
||||||
Back
|
<ActionButton
|
||||||
</ActionButton>
|
on:click={() => $goto("../groups")}
|
||||||
</div>
|
size="S"
|
||||||
<div class="header">
|
icon="ArrowLeft"
|
||||||
<div class="title">
|
>
|
||||||
<div style="background: {group?.color};" class="circle">
|
Back
|
||||||
<div>
|
</ActionButton>
|
||||||
<Icon size="M" name={group?.icon} />
|
</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>
|
</div>
|
||||||
<div class="text-padding">
|
<div bind:this={popoverAnchor}>
|
||||||
<Heading>{group?.name}</Heading>
|
<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>
|
</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>
|
<List>
|
||||||
{#if group?.users.length}
|
{#if groupApps.length}
|
||||||
{#each group.users as user}
|
{#each groupApps as app}
|
||||||
<ListItem title={user?.email} avatar
|
<ListItem
|
||||||
><Icon
|
title={app.name}
|
||||||
on:click={() => removeUser(user?._id)}
|
icon={app?.icon?.name || "Apps"}
|
||||||
hoverable
|
iconBackground={app?.icon?.color || ""}
|
||||||
size="L"
|
>
|
||||||
name="Close"
|
<div class="title ">
|
||||||
/></ListItem
|
<StatusLight
|
||||||
>
|
square
|
||||||
{/each}
|
color={RoleUtils.getRoleColour(group.roles[`app_${app.appId}`])}
|
||||||
{:else}
|
>
|
||||||
<ListItem icon="UserGroup" title="You have no users in this team" />
|
{getRoleLabel(app.appId)}
|
||||||
{/if}
|
</StatusLight>
|
||||||
</List>
|
</div>
|
||||||
<div
|
</ListItem>
|
||||||
style="flex-direction: column; margin-top: var(--spacing-m)"
|
{/each}
|
||||||
class="title"
|
{:else}
|
||||||
>
|
<ListItem icon="UserGroup" title="No apps" />
|
||||||
<Heading weight="light" size="XS">Apps</Heading>
|
{/if}
|
||||||
<div style="margin-top: var(--spacing-xs)">
|
</List>
|
||||||
<Body size="S">Manage apps that this User group has been assigned to</Body
|
</Layout>
|
||||||
>
|
{/if}
|
||||||
</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
|
|
||||||
square
|
|
||||||
color={RoleUtils.getRoleColour(group.roles[app.appId])}
|
|
||||||
>
|
|
||||||
{getRoleLabel(app.appId)}
|
|
||||||
</StatusLight>
|
|
||||||
</div>
|
|
||||||
</ListItem>
|
|
||||||
{/each}
|
|
||||||
{:else}
|
|
||||||
<ListItem icon="UserGroup" title="No apps" />
|
|
||||||
{/if}
|
|
||||||
</List>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.text-padding {
|
.text-padding {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue