Update styles in user details page and user list page
This commit is contained in:
parent
074f0b4a51
commit
b838a66954
3 changed files with 62 additions and 95 deletions
|
@ -216,15 +216,13 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loaded}
|
{#if loaded}
|
||||||
<Layout gap="L" noPadding>
|
<Layout gap="XL" noPadding>
|
||||||
<Layout gap="XS" noPadding>
|
<div>
|
||||||
<div>
|
<ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
|
||||||
<ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
|
Back
|
||||||
Back
|
</ActionButton>
|
||||||
</ActionButton>
|
</div>
|
||||||
</div>
|
<Layout noPadding gap="S">
|
||||||
</Layout>
|
|
||||||
<Layout gap="XS" noPadding>
|
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div>
|
<div>
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
|
@ -253,8 +251,6 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
|
||||||
<Layout gap="S" noPadding>
|
|
||||||
<div class="fields">
|
<div class="fields">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<Label size="L">First name</Label>
|
<Label size="L">First name</Label>
|
||||||
|
@ -291,7 +287,7 @@
|
||||||
<Layout gap="S" noPadding>
|
<Layout gap="S" noPadding>
|
||||||
<div class="tableTitle">
|
<div class="tableTitle">
|
||||||
<div>
|
<div>
|
||||||
<Heading size="XS">User groups</Heading>
|
<Heading size="S">User groups</Heading>
|
||||||
<Body size="S">Add or remove this user from user groups</Body>
|
<Body size="S">Add or remove this user from user groups</Body>
|
||||||
</div>
|
</div>
|
||||||
<div bind:this={popoverAnchor}>
|
<div bind:this={popoverAnchor}>
|
||||||
|
@ -337,7 +333,7 @@
|
||||||
<!-- User Apps -->
|
<!-- User Apps -->
|
||||||
<Layout gap="S" noPadding>
|
<Layout gap="S" noPadding>
|
||||||
<div>
|
<div>
|
||||||
<Heading size="XS">Apps</Heading>
|
<Heading size="S">Apps</Heading>
|
||||||
<Body size="S">Manage apps that this user has been assigned to</Body>
|
<Body size="S">Manage apps that this user has been assigned to</Body>
|
||||||
</div>
|
</div>
|
||||||
<List>
|
<List>
|
||||||
|
|
|
@ -3,14 +3,18 @@
|
||||||
import { Constants } from "@budibase/frontend-core"
|
import { Constants } from "@budibase/frontend-core"
|
||||||
|
|
||||||
export let row
|
export let row
|
||||||
$: value =
|
|
||||||
Constants.BbRoles.find(x => x.value === users.getUserRole(row))?.label ||
|
const TooltipMap = {
|
||||||
"Not Available"
|
appUser: "Only has access to published apps",
|
||||||
|
developer: "Access to the app builder",
|
||||||
|
admin: "Full access",
|
||||||
|
}
|
||||||
|
|
||||||
|
$: role = Constants.BbRoles.find(x => x.value === users.getUserRole(row))
|
||||||
|
$: value = role?.label || "Not available"
|
||||||
|
$: tooltip = TooltipMap[role?.value] || ""
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div on:click|stopPropagation>
|
<div on:click|stopPropagation title={tooltip}>
|
||||||
{value}
|
{value}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -8,11 +8,9 @@
|
||||||
Layout,
|
Layout,
|
||||||
Modal,
|
Modal,
|
||||||
ModalContent,
|
ModalContent,
|
||||||
Icon,
|
Search,
|
||||||
notifications,
|
notifications,
|
||||||
Pagination,
|
Pagination,
|
||||||
Search,
|
|
||||||
Label,
|
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import AddUserModal from "./_components/AddUserModal.svelte"
|
import AddUserModal from "./_components/AddUserModal.svelte"
|
||||||
import { users, groups, auth } from "stores/portal"
|
import { users, groups, auth } from "stores/portal"
|
||||||
|
@ -30,21 +28,6 @@
|
||||||
import { Constants } from "@budibase/frontend-core"
|
import { Constants } from "@budibase/frontend-core"
|
||||||
import { get } from "svelte/store"
|
import { get } from "svelte/store"
|
||||||
|
|
||||||
const accessTypes = [
|
|
||||||
{
|
|
||||||
icon: "User",
|
|
||||||
description: "App user - Only has access to published apps",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: "Hammer",
|
|
||||||
description: "Developer - Access to the app builder",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: "Draw",
|
|
||||||
description: "Admin - Full access",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
//let email
|
//let email
|
||||||
let enrichedUsers = []
|
let enrichedUsers = []
|
||||||
let createUserModal,
|
let createUserModal,
|
||||||
|
@ -236,19 +219,8 @@
|
||||||
<Layout gap="XS" noPadding>
|
<Layout gap="XS" noPadding>
|
||||||
<Heading>Users</Heading>
|
<Heading>Users</Heading>
|
||||||
<Body>Add users and control who gets access to your published apps</Body>
|
<Body>Add users and control who gets access to your published apps</Body>
|
||||||
|
|
||||||
<div>
|
|
||||||
{#each accessTypes as type}
|
|
||||||
<div class="access-description">
|
|
||||||
<Icon name={type.icon} />
|
|
||||||
<div class="access-text">
|
|
||||||
<Body size="S">{type.description}</Body>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
<Layout gap="S" noPadding>
|
<div class="controls">
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
<Button
|
<Button
|
||||||
dataCy="add-user"
|
dataCy="add-user"
|
||||||
|
@ -256,39 +228,43 @@
|
||||||
icon="UserAdd"
|
icon="UserAdd"
|
||||||
cta>Add users</Button
|
cta>Add users</Button
|
||||||
>
|
>
|
||||||
<Button on:click={importUsersModal.show} icon="Import" primary
|
<Button
|
||||||
>Import users</Button
|
on:click={importUsersModal.show}
|
||||||
|
icon="Import"
|
||||||
|
secondary
|
||||||
|
newStyles
|
||||||
>
|
>
|
||||||
|
Import users
|
||||||
<div class="field">
|
</Button>
|
||||||
<Label size="L">Search email</Label>
|
</ButtonGroup>
|
||||||
<Search bind:value={searchEmail} placeholder="" />
|
<div class="controls-right">
|
||||||
</div>
|
<Search bind:value={searchEmail} placeholder="Search email" />
|
||||||
{#if selectedRows.length > 0}
|
{#if selectedRows.length > 0}
|
||||||
<DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
|
<DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
|
||||||
{/if}
|
{/if}
|
||||||
</ButtonGroup>
|
|
||||||
<Table
|
|
||||||
on:click={({ detail }) => $goto(`./${detail._id}`)}
|
|
||||||
{schema}
|
|
||||||
bind:selectedRows
|
|
||||||
data={enrichedUsers}
|
|
||||||
allowEditColumns={false}
|
|
||||||
allowEditRows={false}
|
|
||||||
allowSelectRows={true}
|
|
||||||
showHeaderBorder={false}
|
|
||||||
{customRenderers}
|
|
||||||
/>
|
|
||||||
<div class="pagination">
|
|
||||||
<Pagination
|
|
||||||
page={$pageInfo.pageNumber}
|
|
||||||
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
|
|
||||||
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
|
|
||||||
goToPrevPage={pageInfo.prevPage}
|
|
||||||
goToNextPage={pageInfo.nextPage}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</div>
|
||||||
|
|
||||||
|
<Table
|
||||||
|
on:click={({ detail }) => $goto(`./${detail._id}`)}
|
||||||
|
{schema}
|
||||||
|
bind:selectedRows
|
||||||
|
data={enrichedUsers}
|
||||||
|
allowEditColumns={false}
|
||||||
|
allowEditRows={false}
|
||||||
|
allowSelectRows={true}
|
||||||
|
showHeaderBorder={false}
|
||||||
|
{customRenderers}
|
||||||
|
/>
|
||||||
|
<div class="pagination">
|
||||||
|
<Pagination
|
||||||
|
page={$pageInfo.pageNumber}
|
||||||
|
hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
|
||||||
|
hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
|
||||||
|
goToPrevPage={pageInfo.prevPage}
|
||||||
|
goToNextPage={pageInfo.nextPage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<Modal bind:this={createUserModal}>
|
<Modal bind:this={createUserModal}>
|
||||||
|
@ -325,28 +301,19 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-top: var(--spacing-xl);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.field {
|
.controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
grid-gap: var(--spacing-m);
|
justify-content: space-between;
|
||||||
margin-left: auto;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.controls-right {
|
||||||
.field > :global(*) + :global(*) {
|
|
||||||
margin-left: var(--spacing-m);
|
|
||||||
}
|
|
||||||
|
|
||||||
.access-description {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: var(--spacing-xl);
|
flex-direction: row;
|
||||||
opacity: 0.8;
|
justify-content: flex-end;
|
||||||
}
|
align-items: center;
|
||||||
|
gap: var(--spacing-xl);
|
||||||
.access-text {
|
|
||||||
margin-left: var(--spacing-m);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue