Update styles in user details page and user list page
This commit is contained in:
Andrew Kingston
parent
bb5c95b86a
commit
e8fa134c7c
|
|
@ -216,15 +216,13 @@
|
|||
</script>
|
||||
|
||||
{#if loaded}
|
||||
<Layout gap="L" noPadding>
|
||||
<Layout gap="XS" noPadding>
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
</Layout>
|
||||
<Layout gap="XS" noPadding>
|
||||
<Layout gap="XL" noPadding>
|
||||
<div>
|
||||
<ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
<Layout noPadding gap="S">
|
||||
<div class="title">
|
||||
<div>
|
||||
<div style="display: flex;">
|
||||
|
|
@ -253,8 +251,6 @@
|
|||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
<Layout gap="S" noPadding>
|
||||
<div class="fields">
|
||||
<div class="field">
|
||||
<Label size="L">First name</Label>
|
||||
|
|
@ -291,7 +287,7 @@
|
|||
<Layout gap="S" noPadding>
|
||||
<div class="tableTitle">
|
||||
<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>
|
||||
</div>
|
||||
<div bind:this={popoverAnchor}>
|
||||
|
|
@ -337,7 +333,7 @@
|
|||
<!-- User Apps -->
|
||||
<Layout gap="S" noPadding>
|
||||
<div>
|
||||
<Heading size="XS">Apps</Heading>
|
||||
<Heading size="S">Apps</Heading>
|
||||
<Body size="S">Manage apps that this user has been assigned to</Body>
|
||||
</div>
|
||||
<List>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,18 @@
|
|||
import { Constants } from "@budibase/frontend-core"
|
||||
|
||||
export let row
|
||||
$: value =
|
||||
Constants.BbRoles.find(x => x.value === users.getUserRole(row))?.label ||
|
||||
"Not Available"
|
||||
|
||||
const TooltipMap = {
|
||||
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>
|
||||
|
||||
<div on:click|stopPropagation>
|
||||
<div on:click|stopPropagation title={tooltip}>
|
||||
{value}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,9 @@
|
|||
Layout,
|
||||
Modal,
|
||||
ModalContent,
|
||||
Icon,
|
||||
Search,
|
||||
notifications,
|
||||
Pagination,
|
||||
Search,
|
||||
Label,
|
||||
} from "@budibase/bbui"
|
||||
import AddUserModal from "./_components/AddUserModal.svelte"
|
||||
import { users, groups, auth } from "stores/portal"
|
||||
|
|
@ -30,21 +28,6 @@
|
|||
import { Constants } from "@budibase/frontend-core"
|
||||
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 enrichedUsers = []
|
||||
let createUserModal,
|
||||
|
|
@ -236,19 +219,8 @@
|
|||
<Layout gap="XS" noPadding>
|
||||
<Heading>Users</Heading>
|
||||
<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 gap="S" noPadding>
|
||||
<div class="controls">
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
dataCy="add-user"
|
||||
|
|
@ -256,39 +228,43 @@
|
|||
icon="UserAdd"
|
||||
cta>Add users</Button
|
||||
>
|
||||
<Button on:click={importUsersModal.show} icon="Import" primary
|
||||
>Import users</Button
|
||||
<Button
|
||||
on:click={importUsersModal.show}
|
||||
icon="Import"
|
||||
secondary
|
||||
newStyles
|
||||
>
|
||||
|
||||
<div class="field">
|
||||
<Label size="L">Search email</Label>
|
||||
<Search bind:value={searchEmail} placeholder="" />
|
||||
</div>
|
||||
Import users
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<div class="controls-right">
|
||||
<Search bind:value={searchEmail} placeholder="Search email" />
|
||||
{#if selectedRows.length > 0}
|
||||
<DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
|
||||
{/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>
|
||||
</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>
|
||||
|
||||
<Modal bind:this={createUserModal}>
|
||||
|
|
@ -325,28 +301,19 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.field {
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
grid-gap: var(--spacing-m);
|
||||
margin-left: auto;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.field > :global(*) + :global(*) {
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
.access-description {
|
||||
.controls-right {
|
||||
display: flex;
|
||||
margin-top: var(--spacing-xl);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.access-text {
|
||||
margin-left: var(--spacing-m);
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue