|
|
@ -40,6 +40,7 @@ |
|
|
return y.appId === app.appId |
|
|
return y.appId === app.appId |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
function extractAppId(id) { |
|
|
function extractAppId(id) { |
|
|
const split = id?.split("_") || [] |
|
|
const split = id?.split("_") || [] |
|
|
return split.length ? split[split.length - 1] : null |
|
|
return split.length ? split[split.length - 1] : null |
|
|
@ -71,7 +72,11 @@ |
|
|
}) |
|
|
}) |
|
|
await pageInfo.reset() |
|
|
await pageInfo.reset() |
|
|
} |
|
|
} |
|
|
|
|
|
/* |
|
|
|
|
|
async function updateRole(user) { |
|
|
|
|
|
console.log(user) |
|
|
|
|
|
} |
|
|
|
|
|
*/ |
|
|
async function fetchUsers(page, search) { |
|
|
async function fetchUsers(page, search) { |
|
|
if ($pageInfo.loading) { |
|
|
if ($pageInfo.loading) { |
|
|
return |
|
|
return |
|
|
@ -103,43 +108,61 @@ |
|
|
|
|
|
|
|
|
<div class="access-tab"> |
|
|
<div class="access-tab"> |
|
|
<Layout> |
|
|
<Layout> |
|
|
<div> |
|
|
{#if appGroups.length || appUsers.length} |
|
|
<Heading>Access</Heading> |
|
|
<div> |
|
|
<div class="subtitle"> |
|
|
<Heading>Access</Heading> |
|
|
<Body size="S"> |
|
|
<div class="subtitle"> |
|
|
Assign users to your app and define their access here</Body |
|
|
<Body size="S"> |
|
|
> |
|
|
Assign users to your app and define their access here</Body |
|
|
<Button on:click={assignmentModal.show} icon="User" cta |
|
|
> |
|
|
>Assign users</Button |
|
|
<Button on:click={assignmentModal.show} icon="User" cta |
|
|
> |
|
|
>Assign users</Button |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<List title="User Groups"> |
|
|
<List title="User Groups"> |
|
|
{#each appGroups as group} |
|
|
{#each appGroups as group} |
|
|
<ListItem |
|
|
<ListItem |
|
|
title={group.name} |
|
|
title={group.name} |
|
|
icon={group.icon} |
|
|
icon={group.icon} |
|
|
iconBackground={group.color} |
|
|
iconBackground={group.color} |
|
|
> |
|
|
> |
|
|
<RoleSelect autoWidth quiet value={group.role} /> |
|
|
<RoleSelect autoWidth quiet value={group.role} /> |
|
|
</ListItem> |
|
|
</ListItem> |
|
|
{/each} |
|
|
{/each} |
|
|
</List> |
|
|
</List> |
|
|
<List title="Users"> |
|
|
<List title="Users"> |
|
|
{#each appUsers as user} |
|
|
{#each appUsers as user} |
|
|
<ListItem title={user.email} avatar> |
|
|
<ListItem title={user.email} avatar> |
|
|
<RoleSelect |
|
|
<RoleSelect |
|
|
autoWidth |
|
|
autoWidth |
|
|
quiet |
|
|
quiet |
|
|
value={user.roles[ |
|
|
value={user.roles[ |
|
|
Object.keys(user.roles).find( |
|
|
Object.keys(user.roles).find( |
|
|
x => extractAppId(x) === extractAppId(app.appId) |
|
|
x => extractAppId(x) === extractAppId(app.appId) |
|
|
) |
|
|
) |
|
|
]} |
|
|
]} |
|
|
/> |
|
|
/> |
|
|
</ListItem> |
|
|
</ListItem> |
|
|
{/each} |
|
|
{/each} |
|
|
</List> |
|
|
</List> |
|
|
{:else} |
|
|
|
|
|
<div class="align"> |
|
|
|
|
|
<Layout gap="S"> |
|
|
|
|
|
<Heading>No users assigned</Heading> |
|
|
|
|
|
<div class="opacity"> |
|
|
|
|
|
<Body size="S" |
|
|
|
|
|
>Assign users to your app and set their access here</Body |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="padding"> |
|
|
|
|
|
<Button on:click={() => assignmentModal.show()} cta icon="UserArrow" |
|
|
|
|
|
>Assign Users</Button |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
</Layout> |
|
|
|
|
|
</div> |
|
|
|
|
|
{/if} |
|
|
</Layout> |
|
|
</Layout> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
@ -153,6 +176,17 @@ |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
padding: 40px; |
|
|
padding: 40px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.padding { |
|
|
|
|
|
margin-top: var(--spacing-m); |
|
|
|
|
|
} |
|
|
|
|
|
.opacity { |
|
|
|
|
|
opacity: 0.8; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.align { |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
.subtitle { |
|
|
.subtitle { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
|
Peter Clement
4 years ago