Fix stale data in group details page, fix role colour in group app access
This commit is contained in:
Andrew Kingston
parent
59e08c5346
commit
451c55ae67
1 changed files with 91 additions and 83 deletions
|
|
@ -18,9 +18,10 @@
|
|||
import { users, apps, groups } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
import { roles } from "../../../../../stores/backend"
|
||||
import { roles } from "stores/backend"
|
||||
|
||||
export let groupId
|
||||
|
||||
let popoverAnchor
|
||||
let popover
|
||||
let searchTerm = ""
|
||||
|
|
@ -28,6 +29,7 @@
|
|||
let prevSearch = undefined,
|
||||
search = undefined
|
||||
let pageInfo = createPaginationStore()
|
||||
let loaded = false
|
||||
|
||||
$: page = $pageInfo.page
|
||||
$: fetchUsers(page, search)
|
||||
|
|
@ -113,98 +115,104 @@
|
|||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await groups.actions.init()
|
||||
await apps.load()
|
||||
await roles.fetch()
|
||||
await Promise.all([groups.actions.init(), apps.load(), roles.fetch()])
|
||||
loaded = true
|
||||
} catch (error) {
|
||||
notifications.error("Error fetching User Group data")
|
||||
notifications.error("Error fetching user group data")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<Layout noPadding>
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("../groups")} size="S" icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div style="background: {group?.color};" class="circle">
|
||||
<div>
|
||||
<Icon size="M" name={group?.icon} />
|
||||
{#if loaded}
|
||||
<Layout noPadding>
|
||||
<div>
|
||||
<ActionButton
|
||||
on:click={() => $goto("../groups")}
|
||||
size="S"
|
||||
icon="ArrowLeft"
|
||||
>
|
||||
Back
|
||||
</ActionButton>
|
||||
</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 class="text-padding">
|
||||
<Heading>{group?.name}</Heading>
|
||||
<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>
|
||||
{#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 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>
|
||||
{#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>
|
||||
|
||||
<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>
|
||||
<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_${app.appId}`])}
|
||||
>
|
||||
{getRoleLabel(app.appId)}
|
||||
</StatusLight>
|
||||
</div>
|
||||
</ListItem>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="UserGroup" title="No apps" />
|
||||
{/if}
|
||||
</List>
|
||||
</Layout>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.text-padding {
|
||||
|
|
|
|||
Loading…
Reference in a new issue