forked from tsai/budibase
Peter Clement
4 years ago
8 changed files with 530 additions and 4 deletions
@ -0,0 +1,211 @@ |
|||||
|
<script> |
||||
|
import { goto } from "@roxi/routify" |
||||
|
import { |
||||
|
ActionButton, |
||||
|
Button, |
||||
|
Layout, |
||||
|
Heading, |
||||
|
Body, |
||||
|
Icon, |
||||
|
Popover, |
||||
|
Search, |
||||
|
Divider, |
||||
|
Detail, |
||||
|
} from "@budibase/bbui" |
||||
|
import UserRow from "./_components/UserRow.svelte" |
||||
|
import { users } from "stores/portal" |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
let popoverAnchor |
||||
|
let popover |
||||
|
let searchTerm = "" |
||||
|
let selectedUsers = [] |
||||
|
$: filteredUsers = $users.filter(user => |
||||
|
user?.email?.toLowerCase().includes(searchTerm.toLowerCase()) |
||||
|
) |
||||
|
|
||||
|
let group = { |
||||
|
_id: "gr_123456", |
||||
|
color: "green", |
||||
|
icon: "Anchor", |
||||
|
name: "Core Team", |
||||
|
userCount: 5, |
||||
|
appCount: 2, |
||||
|
} |
||||
|
|
||||
|
let groupUsers = [ |
||||
|
{ |
||||
|
email: "peter@budibase.com", |
||||
|
access: "Developer", |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
/* |
||||
|
function getGroup() { |
||||
|
return |
||||
|
} |
||||
|
*/ |
||||
|
function selectUser(id) { |
||||
|
let user = selectedUsers.find(user_id => user_id === id) |
||||
|
if (user) { |
||||
|
selectedUsers = selectedUsers.filter(id => id !== user) |
||||
|
} else { |
||||
|
selectedUsers = [...selectedUsers, id] |
||||
|
} |
||||
|
} |
||||
|
onMount(() => { |
||||
|
console.log($users) |
||||
|
}) |
||||
|
</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} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="text-padding"> |
||||
|
<Heading>{group.name}</Heading> |
||||
|
</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}> |
||||
|
<div style="padding: var(--spacing-m)"> |
||||
|
<Search placeholder="Search" bind:value={searchTerm} /> |
||||
|
<div class="users-header header"> |
||||
|
<div> |
||||
|
<Detail |
||||
|
>{filteredUsers.length} User{filteredUsers.length === 1 |
||||
|
? "" |
||||
|
: "s"}</Detail |
||||
|
> |
||||
|
</div> |
||||
|
<div> |
||||
|
<ActionButton emphasized size="S">Add all</ActionButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<Divider noMargin /> |
||||
|
<div> |
||||
|
{#each filteredUsers as user} |
||||
|
<div |
||||
|
on:click={selectUser(user._id)} |
||||
|
style="padding-bottom: var(--spacing-m)" |
||||
|
class="user-selection" |
||||
|
> |
||||
|
<div> |
||||
|
{user.email} |
||||
|
</div> |
||||
|
|
||||
|
{#if selectedUsers.includes(user._id)} |
||||
|
<div> |
||||
|
<Icon |
||||
|
color="var(--spectrum-global-color-blue-600);" |
||||
|
name="Checkmark" |
||||
|
/> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
{/each} |
||||
|
</div> |
||||
|
</div> |
||||
|
</Popover> |
||||
|
</div> |
||||
|
|
||||
|
<div class="usersTable"> |
||||
|
{#if groupUsers.length} |
||||
|
{#each groupUsers as user} |
||||
|
<div> |
||||
|
<UserRow {user} /> |
||||
|
</div> |
||||
|
{/each} |
||||
|
{:else} |
||||
|
<div> |
||||
|
<div class="title header text-padding"> |
||||
|
<Icon name="UserGroup" /> |
||||
|
<div class="text-padding"> |
||||
|
<Body size="S">You have no users in this team</Body> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
</Layout> |
||||
|
|
||||
|
<style> |
||||
|
.text-padding { |
||||
|
margin-left: var(--spacing-l); |
||||
|
} |
||||
|
|
||||
|
.users-header { |
||||
|
align-items: center; |
||||
|
padding: var(--spacing-m) 0 var(--spacing-m) 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.user-selection { |
||||
|
align-items: end; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.user-selection > :first-child { |
||||
|
padding-top: var(--spacing-m); |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.title { |
||||
|
display: flex; |
||||
|
} |
||||
|
.circle { |
||||
|
border-radius: 50%; |
||||
|
height: 30px; |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
display: inline-block; |
||||
|
font-size: 1.2em; |
||||
|
width: 30px; |
||||
|
} |
||||
|
|
||||
|
.circle > div { |
||||
|
padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs); |
||||
|
} |
||||
|
|
||||
|
.usersTable { |
||||
|
display: grid; |
||||
|
grid-template-rows: auto; |
||||
|
align-items: center; |
||||
|
border-bottom: 1px solid var(--spectrum-alias-border-color-mid); |
||||
|
border-left: 1px solid var(--spectrum-alias-border-color-mid); |
||||
|
background: var(--spectrum-global-color-gray-50); |
||||
|
} |
||||
|
|
||||
|
.usersTable :global(> div) { |
||||
|
background: var(--bg-color); |
||||
|
|
||||
|
height: 70px; |
||||
|
display: grid; |
||||
|
align-items: center; |
||||
|
grid-gap: var(--spacing-xl); |
||||
|
grid-template-columns: 0.1fr 0.6fr 2fr 0.4fr; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
padding: 0 var(--spacing-s); |
||||
|
border-top: 1px solid var(--spectrum-alias-border-color-mid); |
||||
|
border-right: 1px solid var(--spectrum-alias-border-color-mid); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,92 @@ |
|||||
|
<script> |
||||
|
import { Button, Icon, Body } from "@budibase/bbui" |
||||
|
import { goto } from "@roxi/routify" |
||||
|
|
||||
|
export let group |
||||
|
|
||||
|
let { icon, color, name, userCount, appCount } = group |
||||
|
</script> |
||||
|
|
||||
|
<div class="title"> |
||||
|
<div class="name" style="display: flex; margin-left: var(--spacing-xl)"> |
||||
|
<div style="background: {color};" class="circle"> |
||||
|
<div> |
||||
|
<Icon size="M" name={icon} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="name" data-cy="app-name-link"><Body size="S">{name}</Body></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="desktop tableElement"> |
||||
|
<Icon name="User" /> |
||||
|
<div style="margin-left: var(--spacing-l"> |
||||
|
{parseInt(userCount)} app{parseInt(userCount) === 1 ? "" : "s"} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="desktop tableElement"> |
||||
|
<Icon name="WebPage" /> |
||||
|
|
||||
|
<div style="margin-left: var(--spacing-l"> |
||||
|
{parseInt(appCount)} app{parseInt(appCount) === 1 ? "" : "s"} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="app-row-actions"> |
||||
|
<div> |
||||
|
<Button on:click={() => $goto(`./${group._id}`)} size="S" cta |
||||
|
>Manage</Button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.app-row-actions { |
||||
|
display: flex; |
||||
|
float: right; |
||||
|
margin-right: var(--spacing-xl); |
||||
|
} |
||||
|
.name { |
||||
|
grid-gap: var(--spacing-xl); |
||||
|
grid-template-columns: 75px 75px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.circle { |
||||
|
border-radius: 50%; |
||||
|
height: 30px; |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
display: inline-block; |
||||
|
font-size: 1.2em; |
||||
|
width: 30px; |
||||
|
} |
||||
|
|
||||
|
.tableElement { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.circle > div { |
||||
|
padding: calc(1.5 * var(--spacing-xs)) var(--spacing-xs); |
||||
|
} |
||||
|
.name { |
||||
|
text-decoration: none; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.name :global(.spectrum-Heading) { |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
margin-left: calc(1.5 * var(--spacing-xl)); |
||||
|
} |
||||
|
.title :global(h1:hover) { |
||||
|
color: var(--spectrum-global-color-blue-600); |
||||
|
cursor: pointer; |
||||
|
transition: color 130ms ease; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 640px) { |
||||
|
.desktop { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,55 @@ |
|||||
|
<script> |
||||
|
import { Icon, Body, Avatar } from "@budibase/bbui" |
||||
|
|
||||
|
export let user |
||||
|
|
||||
|
function removeFromGroup() {} |
||||
|
</script> |
||||
|
|
||||
|
<div class="title"> |
||||
|
<div class="name" style="display: flex; margin-left: var(--spacing-xl)"> |
||||
|
<div> |
||||
|
<Avatar size="L" initials="PC" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="desktop"> |
||||
|
<div style="display: flex; align-items: center;"> |
||||
|
<Body size="M">{user.email}</Body> |
||||
|
<div style="opacity: 0.5; margin: var(--spacing-xs) 0 0 var(--spacing-m)"> |
||||
|
<Body size="XS">{user.access}</Body> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="desktop" /> |
||||
|
<div><Icon on:click={removeFromGroup} hoverable size="L" name="Close" /></div> |
||||
|
|
||||
|
<style> |
||||
|
.name { |
||||
|
grid-gap: var(--spacing-xl); |
||||
|
grid-template-columns: 75px 75px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
text-decoration: none; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.name :global(.spectrum-Heading) { |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
margin-left: calc(1.5 * var(--spacing-xl)); |
||||
|
} |
||||
|
.title :global(h1:hover) { |
||||
|
color: var(--spectrum-global-color-blue-600); |
||||
|
cursor: pointer; |
||||
|
transition: color 130ms ease; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 640px) { |
||||
|
.desktop { |
||||
|
display: none !important; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,3 @@ |
|||||
|
<div style="float: right;"> |
||||
|
<slot /> |
||||
|
</div> |
||||
@ -0,0 +1,155 @@ |
|||||
|
<script> |
||||
|
import { |
||||
|
Layout, |
||||
|
Heading, |
||||
|
ColorPicker, |
||||
|
Body, |
||||
|
Button, |
||||
|
Modal, |
||||
|
ModalContent, |
||||
|
Input, |
||||
|
Tag, |
||||
|
Tags, |
||||
|
IconPicker, |
||||
|
} from "@budibase/bbui" |
||||
|
import UserGroupsRow from "./_components/UserGroupsRow.svelte" |
||||
|
let modal |
||||
|
let selectedColor |
||||
|
let selectedIcon |
||||
|
let proPlan = true |
||||
|
|
||||
|
let userGroupData = [ |
||||
|
{ |
||||
|
_id: "gr_123456", |
||||
|
color: "green", |
||||
|
icon: "Anchor", |
||||
|
name: "Core Team", |
||||
|
userCount: 5, |
||||
|
appCount: 2, |
||||
|
}, |
||||
|
{ |
||||
|
_id: "gr_45678", |
||||
|
color: "red", |
||||
|
icon: "Beaker", |
||||
|
name: "QA Team", |
||||
|
userCount: 3, |
||||
|
appCount: 7, |
||||
|
}, |
||||
|
] |
||||
|
</script> |
||||
|
|
||||
|
<Layout noPadding> |
||||
|
<Layout gap="XS" noPadding> |
||||
|
<div style="display: flex;"> |
||||
|
<Heading size="M">User groups</Heading> |
||||
|
{#if !proPlan} |
||||
|
<Tags> |
||||
|
<div class="tags"> |
||||
|
<div class="tag"> |
||||
|
<Tag icon="LockClosed">Pro plan</Tag> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Tags> |
||||
|
{/if} |
||||
|
</div> |
||||
|
<Body>Easily assign and manage your users access with User Groups</Body> |
||||
|
</Layout> |
||||
|
<div class="align-buttons"> |
||||
|
<Button |
||||
|
icon={proPlan ? "UserGroup" : ""} |
||||
|
cta={proPlan} |
||||
|
on:click={() => modal.show()} |
||||
|
>{proPlan ? "Create user group" : "Upgrade Account"}</Button |
||||
|
> |
||||
|
{#if !proPlan} |
||||
|
<Button |
||||
|
secondary |
||||
|
on:click={() => { |
||||
|
window.open("https://budibase.com/pricing/", "_blank") |
||||
|
}}>View Plans</Button |
||||
|
> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<div class="groupTable"> |
||||
|
{#each userGroupData as group} |
||||
|
<div> |
||||
|
<UserGroupsRow {group} /> |
||||
|
</div> |
||||
|
{/each} |
||||
|
</div> |
||||
|
</Layout> |
||||
|
|
||||
|
<Modal bind:this={modal}> |
||||
|
<ModalContent size="M" title="Create User Group" confirmText="Save"> |
||||
|
<Input label="Team name" /> |
||||
|
<div class="modal-format"> |
||||
|
<div class="modal-inner"> |
||||
|
<Body size="XS">Icon</Body> |
||||
|
<div class="modal-spacing"> |
||||
|
<IconPicker bind:value={selectedIcon} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="modal-inner"> |
||||
|
<Body size="XS">Color</Body> |
||||
|
<div class="modal-spacing"> |
||||
|
<ColorPicker |
||||
|
bind:value={selectedColor} |
||||
|
on:change={e => (selectedColor = e.detail)} |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ModalContent> |
||||
|
</Modal> |
||||
|
|
||||
|
<style> |
||||
|
.modal-format { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
width: 40%; |
||||
|
} |
||||
|
|
||||
|
.modal-inner { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.modal-spacing { |
||||
|
margin-left: var(--spacing-l); |
||||
|
} |
||||
|
|
||||
|
.align-buttons { |
||||
|
display: flex; |
||||
|
column-gap: var(--spacing-xl); |
||||
|
} |
||||
|
.tag { |
||||
|
margin-top: var(--spacing-xs); |
||||
|
margin-left: var(--spacing-m); |
||||
|
} |
||||
|
|
||||
|
.groupTable { |
||||
|
display: grid; |
||||
|
grid-template-rows: auto; |
||||
|
align-items: center; |
||||
|
border-bottom: 1px solid var(--spectrum-alias-border-color-mid); |
||||
|
border-left: 1px solid var(--spectrum-alias-border-color-mid); |
||||
|
background: var(--spectrum-global-color-gray-50); |
||||
|
} |
||||
|
|
||||
|
.groupTable :global(> div) { |
||||
|
background: var(--bg-color); |
||||
|
|
||||
|
height: 70px; |
||||
|
display: grid; |
||||
|
align-items: center; |
||||
|
grid-gap: var(--spacing-xl); |
||||
|
grid-template-columns: 2fr 2fr 2fr auto; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
padding: 0 var(--spacing-s); |
||||
|
border-top: 1px solid var(--spectrum-alias-border-color-mid); |
||||
|
border-right: 1px solid var(--spectrum-alias-border-color-mid); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue